diff --git a/.eslintrc.js b/.eslintrc.js
index b24c3129f1134..2563edaafd004 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -49,7 +49,7 @@ module.exports = {
 		jsdoc: {
 			mode: 'typescript',
 		},
-		'import/resolver': require.resolve( './test/lint/import-resolver' ),
+		'import/resolver': require.resolve( './tools/eslint/import-resolver' ),
 	},
 	rules: {
 		'jest/expect-expect': 'off',
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index b88059c56e44c..df11d86f673f8 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -21,6 +21,7 @@ jobs:
     compute-stable-branches:
         name: Compute current and next stable release branches
         runs-on: ubuntu-latest
+        if: ${{ github.event_name == 'workflow_dispatch' }}
         outputs:
             current_stable_branch: ${{ steps.get_branches.outputs.current_stable_branch }}
             next_stable_branch: ${{ steps.get_branches.outputs.next_stable_branch }}
@@ -47,7 +48,6 @@ jobs:
         runs-on: ubuntu-latest
         needs: compute-stable-branches
         if: |
-            github.repository == 'WordPress/gutenberg' &&
             github.event_name == 'workflow_dispatch' && (
               (
                 github.ref == 'refs/heads/trunk' ||
@@ -148,7 +148,12 @@ jobs:
         name: Build Release Artifact
         runs-on: ubuntu-latest
         needs: bump-version
-        if: ${{ ( github.repository == 'WordPress/gutenberg' && always() ) || ( github.event_name == 'pull_request' && always() ) }}
+        if: |
+            always() && (
+              github.event_name == 'pull_request' ||
+              github.event_name == 'workflow_dispatch' ||
+              github.repository == 'WordPress/gutenberg'
+            )
 
         steps:
             - name: Checkout code
@@ -200,7 +205,6 @@ jobs:
         name: Create Release Draft and Attach Asset
         needs: [bump-version, build]
         runs-on: ubuntu-latest
-        if: ${{ github.repository == 'WordPress/gutenberg' }}
 
         steps:
             - name: Set Release Version
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
new file mode 100644
index 0000000000000..ca2720e08aad5
--- /dev/null
+++ b/.husky/_/husky.sh
@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi
diff --git a/bin/plugin/commands/changelog.js b/bin/plugin/commands/changelog.js
index 11d962def0649..9384bc6540f43 100644
--- a/bin/plugin/commands/changelog.js
+++ b/bin/plugin/commands/changelog.js
@@ -61,18 +61,13 @@ const manifest = require( '../../../package.json' );
  */
 const LABEL_TYPE_MAPPING = {
 	'[Block] Navigation': 'Experiments',
-	'[Block] Query': 'Experiments',
 	'[Block] Post Comments Count': 'Experiments',
 	'[Block] Post Comments Form': 'Experiments',
 	'[Block] Post Comments': 'Experiments',
-	'[Block] Post Featured Image': 'Experiments',
 	'[Block] Post Hierarchical Terms': 'Experiments',
-	'[Block] Post Title': 'Experiments',
-	'[Block] Site Logo': 'Experiments',
 	'[Feature] Full Site Editing': 'Experiments',
 	'Global Styles': 'Experiments',
 	'[Feature] Navigation Screen': 'Experiments',
-	'[Feature] Widgets Screen': 'Experiments',
 	'[Package] Dependency Extraction Webpack Plugin': 'Tools',
 	'[Package] Jest Puppeteer aXe': 'Tools',
 	'[Package] E2E Tests': 'Tools',
diff --git a/changelog.txt b/changelog.txt
index a8e1c97339697..e4751d16264da 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,175 +1,220 @@
 == Changelog ==
 
-= 11.0.0-rc.1 =
-
-
+= 11.0.0 =
 
 ### Enhancements
 
-- Polish block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922))
-- Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810))
-- [Block Library - Query Loop]: Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737))
-- Remove the widget switcher block toolbar button. ([32733](https://github.com/WordPress/gutenberg/pull/32733))
-- Block categories: Clean these up by moving several blocks from Design to Theme. ([32568](https://github.com/WordPress/gutenberg/pull/32568))
-- Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641))
-- Media & Text: Allow drag n drop media replacement. ([29710](https://github.com/WordPress/gutenberg/pull/29710))
+- Template Parts & Reusable Blocks: Add editing overlay. ([31109](https://github.com/WordPress/gutenberg/pull/31109))
+- General UI: Improve UI/UX for block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922))
+- Widgets editor:
+  - Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757))
+  - Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953))
+  - Set Legacy Widget form to display only when not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015))
+  - Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905))
+  - Add ability for Legacy custom HTML widget to transform into custom HTML block. ([32862](https://github.com/WordPress/gutenberg/pull/32862))
+  - Remove the widget switcher block toolbar button for the Legacy Widget. ([32733](https://github.com/WordPress/gutenberg/pull/32733))
+  - Wire `handle_legacy_widget_preview_iframe` to `admin_init_hook`. ([32854](https://github.com/WordPress/gutenberg/pull/32854))
+  - Add <CopyHandler> to WidgetAreasBlockEditorProvider. ([33166](https://github.com/WordPress/gutenberg/pull/33166))
+  - Replace "technical" error notice with a user-friendly version. ([33165](https://github.com/WordPress/gutenberg/pull/33165))
+  - Replace legacy widget icon with its new version. ([33041](https://github.com/WordPress/gutenberg/pull/33041))
+- Block Library:
+  - Media Text block: allow drag and drop media replacement for Media & Text. ([29710](https://github.com/WordPress/gutenberg/pull/29710))
+  - Categories block: Add a label for screen readers. ([33060](https://github.com/WordPress/gutenberg/pull/33060))
+  - Post Template Block: Add post-classes in the loop for Post Template block. ([30497](https://github.com/WordPress/gutenberg/pull/30497))
+- Global Styles and Templates:
+  - Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810))
+  - Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641))
+  - Add filters to `get_block_templates` functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806))
+- Core Data:
+  - Allow making context-specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961))
+  - Make `apiFetch` requests abortable via `AbortController` in `@wordpress/api-fetch`. ([32530](https://github.com/WordPress/gutenberg/pull/32530))
 
 ### New APIs
 
-- Allow making context specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961))
 - Add an API to define the default template used for the template mode. ([32771](https://github.com/WordPress/gutenberg/pull/32771))
 
 ### Bug Fixes
 
-- Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066))
-- Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058))
-- Group Block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045))
-- [Block Library - Query Loop] Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037))
-- Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031))
-- Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024))
-- Button: Update to use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017))
-- [Block Library - Categories]: Fix handling for low privileged users. ([32994](https://github.com/WordPress/gutenberg/pull/32994))
-- [Block Library - Categories]: Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989))
-- Fix to remove default indent from Latest Posts and Latest Comments block in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983))
-- Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979))
-- Add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971))
-- [Block Library - Post Terms]: Fix handling for low privileged users. ([32947](https://github.com/WordPress/gutenberg/pull/32947))
-- Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938))
-- Fix glitchy block focus style when multiselecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927))
-- Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898))
-- Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894))
-- Fix unintended search http request in <LinkControl>. ([32857](https://github.com/WordPress/gutenberg/pull/32857))
-- CI: Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856))
-- Fixed a problem with double encoding of URLs. ([32840](https://github.com/WordPress/gutenberg/pull/32840))
-- Fix incorrect block insertion point after blurring post title. ([32831](https://github.com/WordPress/gutenberg/pull/32831))
-- RNMobile: Fix column wrapping. ([32830](https://github.com/WordPress/gutenberg/pull/32830))
-- [Block Library - Site Title, Site Tagline] - Readonly view when user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817))
-- useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816))
-- Block Library: Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814))
-- Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809))
-- Remove @wordpress/editor as a dependency from @wordpress/block-library. ([32801](https://github.com/WordPress/gutenberg/pull/32801))
-- Fix drag and drop indices when block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776))
-- Customize Widgets: Fix block toolbar deselection when clicking scrollbar. ([32762](https://github.com/WordPress/gutenberg/pull/32762))
-- Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749))
-- components: Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745))
-- TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744))
-- Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729))
-- Fix: Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692))
-- Ensure only valid URLs or anchors within text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663))
-- [Image Block]: Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524))
-- Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479))
-- Image Block: Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364))
-- Fix: Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089))
+- Widgets Editor:
+
+  - Adjust widget form margins in the new Widgets Editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040))
+  - Adjust Legacy Widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974))
+  - Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978))
+  - Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976))
+  - Fix to allow adding the same image twice in Widgets Editor. ([32951](https://github.com/WordPress/gutenberg/pull/32951))
+  - Fix Legacy Widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871))
+  - Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066))
+  - Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683))
+  - Fix widget preview not working if widget registered via an instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781))
+  - Don't display admin notices on the Widgets Editor. ([32877](https://github.com/WordPress/gutenberg/pull/32877))
+  - Remove classic block in Widgets Editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800))
+  - Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761))
+  - Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738))
+  - Fix move to widget area checkmark. ([33213](https://github.com/WordPress/gutenberg/pull/33213))
+  - Fix Widget Block: `widget_id` is undefined when a widget is placed. ([33152](https://github.com/WordPress/gutenberg/pull/33152))
+  - Reset z-index on focused widget form. ([33122](https://github.com/WordPress/gutenberg/pull/33122))
+  - Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. ([33200](https://github.com/WordPress/gutenberg/pull/33200))
+  - Fix legacy widget height overflow. ([33191](https://github.com/WordPress/gutenberg/pull/33191))
+  - Fix pasting blocks by setting html block as freeform content handler. ([33164](https://github.com/WordPress/gutenberg/pull/33164))
+  - Fix slash inserter for widgets screen. ([33161](https://github.com/WordPress/gutenberg/pull/33161))
+  - Add `width: 100%` to `components-base-control` inside `wp-block-legacy-widget`. ([33141](https://github.com/WordPress/gutenberg/pull/33141))
+  - Fix error message - bail out if `get_current_screen()` returns null. ([33261](https://github.com/WordPress/gutenberg/pull/33261))
+  - Customizer:
+    - Fix block toolbar deselection when clicking scrollbar. ([32762]
+    - Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979))
+      (https://github.com/WordPress/gutenberg/pull/32762))
+    - Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749))
+    - Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479))
+
+- Block Library
+  - [Regression] Button block: Add deprecation for `style.border.radius` `number`. ([33117](https://github.com/WordPress/gutenberg/pull/33117))
+  - Query loop:
+    - Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737))
+    - Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037))
+    - Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892))
+    - Set default block variations not to inherit from global query. ([33163](https://github.com/WordPress/gutenberg/pull/33163))
+  - Group block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045))
+  - Button block:
+    - Use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017))
+    - Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089))
+  - Categories block:
+    - Fix broken experience for lower privileged users when fetching Categories . ([32994](https://github.com/WordPress/gutenberg/pull/32994))
+    - Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989))
+  - Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983))
+  - Archives block: add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971))
+  - Post terms block: Fix broken experience for lower privileged users when fetching Terms. ([32947](https://github.com/WordPress/gutenberg/pull/32947))
+  - Site Title and Site Tagline blocks: `readonly` view when the user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817))
+  - Image block:
+    - Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524))
+    - Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364))
+  - Site Logo block: fix broken experience for lower privileged users via permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919))
+  - Site Logo block: Update Site Logo block UI and option syncing. ([33179](https://github.com/WordPress/gutenberg/pull/33179))
+  - Show fewer warnings when blocks try to render themselves. ([33032](https://github.com/WordPress/gutenberg/pull/33032))
+- Block editor:
+  - Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031))
+  - Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024))
+  - Fix glitchy block focus style when multi selecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927))
+  - Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894))
+  - Fix unintended HTTP search request in `<LinkControl>` when `showSuggestions` is `false`. ([32857](https://github.com/WordPress/gutenberg/pull/32857))
+  - Ensure only valid URLs or anchors within the text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663))
+  - Fix drag and drop indices when a block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776))
+  - Consistent border with focus styles for block appender. ([33022](https://github.com/WordPress/gutenberg/pull/33022))
+  - Improve scrolling experience in Safari ([32824](https://github.com/WordPress/gutenberg/pull/32824))
+  - Avoid flash of background color when scrolling in Safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747))
+  - Refactor appender margin. ([33088](https://github.com/WordPress/gutenberg/pull/33088))
+  - Block Inserter: Prevent page scroll when searching a block. ([33012](https://github.com/WordPress/gutenberg/pull/33012))
+- Components:
+  - useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816))
+  - Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745))
+  - Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729))
+  - Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692))
+- CSS and styling:
+  - Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058))
+  - Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732))
+  - Rename `.interface-interface-skeleton__body` `z-index` to `.interface-interface-skeleton__content`. ([32869](https://github.com/WordPress/gutenberg/pull/32869))
+- Template editor:
+  - Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938))
+  - Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809))
+  - TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744))
+- Global styles:
+  - Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898))
+  - Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840))
+- Editor
+  - Fix "Select all" behavior in the editor. ([33167](https://github.com/WordPress/gutenberg/pull/33167))
+  - Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889))
+  - Revert "Prepublish Panel: Disable the Publish and Cancel buttons while saving". ([33113](https://github.com/WordPress/gutenberg/pull/33113))
 
-### Experiments
+### WordPress Core compatibility
 
-- Navigation: Skip flakey tests. ([33074](https://github.com/WordPress/gutenberg/pull/33074))
-- Adjust widget form margins in the new widget editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040))
-- Set display only when form not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015))
-- Widgets: Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978))
-- Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976))
-- Adjust legacy widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974))
-- Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953))
-- Widget Editor: Fix allow adding same image twice. ([32951](https://github.com/WordPress/gutenberg/pull/32951))
-- [Block Library - Site Logo]: Add permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919))
-- Navigation: Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918))
-- Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905))
-- Don't display admin notices on widgets screen. ([32877](https://github.com/WordPress/gutenberg/pull/32877))
-- Fix legacy widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871))
-- Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. ([32869](https://github.com/WordPress/gutenberg/pull/32869))
-- Legacy custom html widget should have option to transform to custom html block. ([32862](https://github.com/WordPress/gutenberg/pull/32862))
-- Wire handle_legacy_widget_preview_iframe to admin_init_hook. ([32854](https://github.com/WordPress/gutenberg/pull/32854))
-- Remove classic block in widgets editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800))
-- Fix: Logic error on site editor useSetting. ([32793](https://github.com/WordPress/gutenberg/pull/32793))
-- Widget preivew not working if widget registered via a instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781))
-- Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761))
-- Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759))
-- Widgets editor: Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757))
-- Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732))
-- Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683))
-- Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491))
-- Fix oembeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331))
-- Global Styles: Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840))
-- Add post-classes in the loop. ([30497](https://github.com/WordPress/gutenberg/pull/30497))
+- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977))
+- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858))
+- Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814))
 
 ### Documentation
 
-- ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030))
-- Add some technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026))
-- Docs: Add link color suppots to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936))
-- Add a schema explaining the relationship between the packages that make the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921))
-- Handbook: Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770))
-- Fix abort error thrown by `api-fetch` and add documentation. ([32530](https://github.com/WordPress/gutenberg/pull/32530))
-- Update the block toolbar ESnext code. ([32422](https://github.com/WordPress/gutenberg/pull/32422))
-- Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850))
+- Handbook:
+  - Update ESnext code in the block toolbar documentation. ([32422](https://github.com/WordPress/gutenberg/pull/32422))
+  - Fix "Gutenberg" typo in dynamic blocks tutorial. ([33013](https://github.com/WordPress/gutenberg/pull/33013))
+  - Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770))
+  - Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759))
+  - Block Editor and Block API:
+    - Add link color supports to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936))
+    - Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850))
+  - Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921))
+  - Testing: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829))
+- Components:
+  - ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030))
+  - Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746))
+- Widgets: Add technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026))
 
 ### Code Quality
 
-- data: Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967))
-- data: Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965))
-- data: Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942))
-- Block Library: Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866))
-- data: Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855))
-- components: Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852))
-- Correct the case of navigation __unstableLocation. ([32783](https://github.com/WordPress/gutenberg/pull/32783))
-- Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774))
-- Quality: Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537))
-- Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516))
-- Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313))
+- Block Library:
+  - Query Loop: use plain `div` for wrapper element in patterns. ([32867](https://github.com/WordPress/gutenberg/pull/32867))
+  - Post Template block: remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804))
+  - Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866))
+  - Improve block categories by moving several blocks from `Design` to `Theme`. ([32568](https://github.com/WordPress/gutenberg/pull/32568))
+- Typings:
+  - Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855))
+  - Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967))
+  - Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965))
+  - Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942))
+  - Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313))
+- Card component refactor:
+  - Remove the g2 implementation of `Card`. ([32764](https://github.com/WordPress/gutenberg/pull/32764))
+  - Update `Card` component Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763))
+  - Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743))
+  - Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566))
+- Components:
+  - Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852))
+  - Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774))
+  - Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796))
+- Editors & Interface:
+  - Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874))
+  - Update `FullscreenMode` from class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925))
+  - Remove `@wordpress/editor` as a dependency from `@wordpress/block-library`. ([32801](https://github.com/WordPress/gutenberg/pull/32801))
+- Testing:
+  - Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008))
+  - Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797))
+  - Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904))
+- Linting:
+  - Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537))
+  - Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516))
+- Data: Handle `context` state updates in `core-data` reducer on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991))
+- APIs: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258))
 
 ### Tools
 
-- components: Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051))
-- end-to-end Test Utils: Add getCurrentUser(), and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050))
-- Disable Android end-to-end tests while we investigate foundational breakage. ([32934](https://github.com/WordPress/gutenberg/pull/32934))
-- [E2E Tests]: Fix WP editor metabox test. ([32915](https://github.com/WordPress/gutenberg/pull/32915))
-- Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906))
-- Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904))
-- Testing: Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888))
-- Skip failing image caption caret test. ([32847](https://github.com/WordPress/gutenberg/pull/32847))
-- @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834))
-- Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832))
-- Docs: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829))
-- Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633))
-- Workflows: Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560))
+- Testing:
+  - Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832))
+  - Add `getCurrentUser()` to e2e test utils: , and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050))
+  - Fix WP editor metabox e2e test. ([32915](https://github.com/WordPress/gutenberg/pull/32915))
+  - Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888))
+- CSS & Styling:
+  - Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051))
+  - `@wordpress/scripts`: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834))
+  - Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930))
+- Linting:
+  - Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906))
+  - Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633))
+- Workflows:
+  - Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856))
+  - Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560))
 
-### Various
+### Performance
 
-- Add a label for screen reader in categories block. ([33060](https://github.com/WordPress/gutenberg/pull/33060))
-- Focus style followup. ([33022](https://github.com/WordPress/gutenberg/pull/33022))
-- Typo correction. ([33013](https://github.com/WordPress/gutenberg/pull/33013))
-- Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008))
-- Handle context on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991))
-- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977))
-- Revert mistaken push to trunk. ([32948](https://github.com/WordPress/gutenberg/pull/32948))
-- Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930))
-- Replace FullscreenMode from Class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925))
-- Query block: Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892))
-- Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889))
-- Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874))
-- Query Loop Patterns: Use plain `div` for wrapper element. ([32867](https://github.com/WordPress/gutenberg/pull/32867))
-- Properly handle 404 errors while publishing Android artifacts. ([32860](https://github.com/WordPress/gutenberg/pull/32860))
-- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858))
-- Safari: See if compositing layer size is more reasonable when position fixed divs are not inserted into content. ([32824](https://github.com/WordPress/gutenberg/pull/32824))
-- Remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804))
-- Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797))
-- components: Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796))
-- Revert accidental commit. ([32777](https://github.com/WordPress/gutenberg/pull/32777))
-- Card: Delete old version of the g2 implementation. ([32764](https://github.com/WordPress/gutenberg/pull/32764))
-- Card: Update Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763))
-- Avoid flash of background color when scrolling in safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747))
-- Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746))
-- Components: Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743))
-- Implement basic in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741))
-- Rename native editor onboarding properties for clarity. ([32739](https://github.com/WordPress/gutenberg/pull/32739))
-- Try: Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738))
-- Card: Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566))
-- Rnmobile/fix/disable controls when template lock is set. ([32495](https://github.com/WordPress/gutenberg/pull/32495))
-- Added filters to get block templates functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806))
-- Template Parts & Reusable Blocks - try overlay element for clickthrough to edit pattern. ([31109](https://github.com/WordPress/gutenberg/pull/31109))
-- [RN Mobile][Global Styles] Adds new Prop for Global Styles Settings. ([30544](https://github.com/WordPress/gutenberg/pull/30544))
+- Add in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741))
 
+### Experiments
 
+- Navigation Block and Editor:
+  - Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918))
+  - Correct the case of navigation `__unstableLocation`. ([32783](https://github.com/WordPress/gutenberg/pull/32783)
+  - Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491))
+  - Avoid double encoding of URLs in Navigation Link block. ([32840](https://github.com/WordPress/gutenberg/pull/32840))
+- Site Editor:
+  - Fix logic error on site editor `useSetting`. ([32793](https://github.com/WordPress/gutenberg/pull/32793))
+  - Fix oEmbeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331))
 
 
 = 10.9.1 =
diff --git a/docs/contributors/folder-structure.md b/docs/contributors/folder-structure.md
index af136e4a6be5f..d954bdb2f7dc7 100644
--- a/docs/contributors/folder-structure.md
+++ b/docs/contributors/folder-structure.md
@@ -124,4 +124,10 @@ The following snippet explains how the Gutenberg repository is structured omitti
     │   Configuration for the Gutenberg Mobile unit tests.
     │
     └── test/unit
-        Configuration for the Packages unit tests.
+    │   Configuration for the Packages unit tests.
+    │
+    └── tools/eslint
+    │   Configuration files for the ESLint linter.
+    │
+    └── tools/webpack
+    │   Configuration files for the webpack build.
diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md
index 87ac239e03190..4273c0cd775b7 100644
--- a/docs/getting-started/faq.md
+++ b/docs/getting-started/faq.md
@@ -95,7 +95,7 @@ This is the canonical list of keyboard shortcuts:
 			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
 		</tr>
 		<tr>
-			<td>Open the block navigation menu.</td>
+			<td>Open the list view menu.</td>
 			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>O</kbd></td>
 			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>O</kbd></td>
 		</tr>
diff --git a/docs/getting-started/tutorials/create-block/block-code.md b/docs/getting-started/tutorials/create-block/block-code.md
index 441d847e58251..8a82d6c975dfd 100644
--- a/docs/getting-started/tutorials/create-block/block-code.md
+++ b/docs/getting-started/tutorials/create-block/block-code.md
@@ -12,7 +12,7 @@ In the `gutenpride.php` file, the enqueue process is already setup from the gene
 
 ```php
 function create_block_gutenpride_block_init() {
-	register_block_type_from_metadata( __DIR__ );
+	register_block_type( __DIR__ );
 }
 add_action( 'init', 'create_block_gutenpride_block_init' );
 ```
diff --git a/docs/getting-started/tutorials/create-block/wp-plugin.md b/docs/getting-started/tutorials/create-block/wp-plugin.md
index d2993aa7c65f8..b3d4a4a636e8c 100644
--- a/docs/getting-started/tutorials/create-block/wp-plugin.md
+++ b/docs/getting-started/tutorials/create-block/wp-plugin.md
@@ -92,12 +92,12 @@ To load the built script, so it is run within the editor, you need to tell WordP
 
 ```php
 function create_block_gutenpride_block_init() {
-	register_block_type_from_metadata( __DIR__ );
+	register_block_type( __DIR__ );
 }
 add_action( 'init', 'create_block_gutenpride_block_init' );
 ```
 
-The `register_block_type_from_metadata` function registers the block we are going to create and specifies the `editor_script` file handle registered from the metadata provided in `block.json` file. So now when the editor loads it will load this script.
+The `register_block_type` function registers the block we are going to create and specifies the editor script handle registered from the metadata provided in `block.json` file with the `editorScript` field. So now when the editor loads it will load this script.
 
 ```json
 {
@@ -137,6 +137,6 @@ For more info, see the build section of the [Getting Started with JavaScript tut
 
 ## Summary
 
-Hopefully, at this point, you have your plugin created and activated. We have the package.json with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
+Hopefully, at this point, you have your plugin created and activated. We have the `package.json` with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
 
 Next Section: [Anatomy of a Block](/docs/getting-started/tutorials/create-block/block-anatomy.md)
diff --git a/docs/manifest.json b/docs/manifest.json
index 5d71772ac69dd..42f2c0ae80a8e 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1145,6 +1145,12 @@
 		"markdown_source": "../packages/components/src/scrollable/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "SearchControl",
+		"slug": "search-control",
+		"markdown_source": "../packages/components/src/search-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "SelectControl",
 		"slug": "select-control",
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index d2ae2cf090b3f..aef09b567a1d4 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -1,11 +1,6 @@
 # Metadata
 
-To register a new block type using metadata that can be shared between codebase that uses JavaScript and PHP, start by creating a `block.json` file. This file:
-
--   Gives a name to the block type.
--   Defines some important metadata about the registered block type (title, category, icon, description, keywords).
--   Defines the attributes of the block type.
--   Registers all the scripts and styles for your block type.
+Starting in WordPress 5.8 release, we encourage using the `block.json` metadata file as the canonical way to register block types. Here is an example `block.json` file that would define the metadata for a plugin create a notice block.
 
 **Example:**
 
@@ -50,9 +45,19 @@ To register a new block type using metadata that can be shared between codebase
 }
 ```
 
-The same file is also used when [submitting block to Block Directory](/docs/getting-started/tutorials/create-block/submitting-to-block-directory.md).
+## Benefits using the metadata file
+
+The block definition allows code sharing between JavaScript, PHP, and other languages when processing block types stored as JSON, and registering blocks with the `block.json` metadata file provides multiple benefits on top of it.
+
+From a performance perspective, when themes support lazy loading assets, blocks registered with `block.json` will have their asset enqueuing optimized out of the box. The frontend CSS and JavaScript assets listed in the `style` or `script` properties will only be enqueued when the block is present on the page, resulting in reduced page sizes.
+
+Furthermore, because the [Block Type REST API Endpoint](https://developer.wordpress.org/rest-api/reference/block-types/) can only list blocks registered on the server, registering blocks server-side is recommended; using the `block.json` file simplifies this registration.
+
+Last, but not least, the [WordPress Plugins Directory](https://wordpress.org/plugins/) can detect `block.json` files, highlight blocks included in plugins, and extract their metadata. If you wish to [submit your block(s) to the Block Directory](/docs/getting-started/tutorials/create-block/submitting-to-block-directory.md), all blocks contained in your plugin must have a `block.json` file for the Block Directory to recognize them.
+
+## Block registration
 
-## Server-side registration
+### PHP (server-side)
 
 The [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) function that aims to simplify the block type registration on the server, can read metadata stored in the `block.json` file.
 
@@ -75,10 +80,61 @@ register_block_type(
 );
 ```
 
+### JavaScript (client-side)
+
+When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name.
+
+**Example:**
+
+```js
+registerBlockType( 'my-plugin/notice', {
+	edit: Edit,
+	// ...other client-side settings
+} );
+```
+
+Although registering the block also on the server with PHP is still recommended for the reasons above, if you want to register it only client-side you can now use `registerBlockType` method from `@wordpress/blocks` package to register a block type using the metadata loaded from `block.json` file.
+
+The function takes two params:
+
+-   `$blockNameOrMetadata` (`string`|`Object`) – block type name (supported previously) or the metadata object loaded from the `block.json` file with a bundler (e.g., webpack) or a custom Babel plugin.
+-   `$settings` (`Object`) – client-side block settings.
+
+It returns the registered block type (`WPBlock`) on success or `undefined` on failure.
+
+**Example:**
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import metadata from './block.json';
+
+registerBlockType( metadata, {
+	edit: Edit,
+	// ...other client-side settings
+} );
+```
+
 ## Block API
 
 This section describes all the properties that can be added to the `block.json` file to define the behavior and metadata of block types.
 
+### API Version
+
+-   Type: `number`
+-   Optional
+-   Localized: No
+-   Property: `apiVersion`
+-   Default: `1`
+
+```json
+{ "apiVersion": 2 }
+```
+
+The version of the Block API used by the block. The most recent version is `2` and it was introduced in WordPress 5.6.
+
+See the [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details.
+
 ### Name
 
 -   Type: `string`
diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 23723ffe2f1ef..a290d4b7d4873 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -2,7 +2,7 @@
 
 Block registration API reference.
 
-**Note:** You can use the functions documented on this page, but a flexible method to register new block types is to use the block.json metadata file. See [metadata documentation for complete information](/docs/reference-guides/block-api/block-metadata.md).
+**Note:** You can use the functions documented on this page to register a block on the client-side only, but a flexible method to register new block types is to use the `block.json` metadata file. See [metadata documentation for complete information](/docs/reference-guides/block-api/block-metadata.md).
 
 ## `registerBlockType`
 
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
index 6750e3681d42d..7eb3c756655c0 100644
--- a/docs/reference-guides/block-api/block-supports.md
+++ b/docs/reference-guides/block-api/block-supports.md
@@ -267,7 +267,7 @@ When the block declares support for `color.gradient`, the attributes definition
           type: 'object',
           default: {
               color: {
-                  background: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
+                  gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
               }
           }
       }
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index e44016ed3bbd2..02a28e8f43383 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -2,13 +2,56 @@
 
 To modify the behavior of existing blocks, WordPress exposes several APIs:
 
-## Filters
+## Registration
 
-The following filters are available to extend the settings for existing blocks.
+The following filters are available to extend the settings for blocks during their registration.
+
+### `block_type_metadata`
+
+Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows applying modifications before the metadata gets processed.
+
+The filter takes one param:
+
+-   `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
+
+_Example_:
+
+```php
+<?php
+
+function filter_metadata_registration( $metadata ) {
+	$metadata['apiVersion'] = 1;
+	return $metadata;
+};
+add_filter( 'block_type_metadata', 'filter_metadata_registration', 10, 2 );
+
+register_block_type( __DIR__ );
+```
+
+### `block_type_metadata_settings`
+
+Filters the settings determined from the processed block type metadata. It makes it possible to apply custom modifications using the block metadata that isn’t handled by default.
+
+The filter takes two params:
+
+-   `$settings` (`array`) – Array of determined settings for registering a block type.
+-   `$metadata` (`array`) – Metadata loaded from the `block.json` file.
+
+_Example:_
+
+```php
+function filter_metadata_registration( $settings, $metadata ) {
+	$settings['api_version'] = $metadata['apiVersion'] + 1;
+	return $settings;
+};
+add_filter( 'block_type_metadata_settings', 'filter_metadata_registration', 10, 2 );
+
+register_block_type( __DIR__ );
+```
 
 ### `blocks.registerBlockType`
 
-Used to filter the block settings. It receives the block settings and the name of the registered block as arguments. Since v6.1.0 this filter is also applied to each of a block's deprecated settings.
+Used to filter the block settings when registering the block on the client with JavaScript. It receives the block settings and the name of the registered block as arguments. This filter is also applied to each of a block's deprecated settings.
 
 _Example:_
 
@@ -34,6 +77,10 @@ wp.hooks.addFilter(
 );
 ```
 
+## Block Editor
+
+The following filters are available to change the behavior of blocks while editing in the block editor.
+
 ### `blocks.getSaveElement`
 
 A filter that applies to the result of a block's `save` function. This filter is used to replace or extend the element, for example using `wp.element.cloneElement` to modify the element's props or replace its children, or returning an entirely new element.
@@ -221,30 +268,6 @@ wp.hooks.addFilter(
 
 {% end %}
 
-#### `media.crossOrigin`
-
-Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e `<img>`, `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
-
-One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
-
-_Example:_
-
-```js
-addFilter(
-	'media.crossOrigin',
-	'my-plugin/with-cors-media',
-	// The callback accepts a second `mediaSrc` argument which references
-	// the url to actual foreign media, useful if you want to decide
-	// the value of crossOrigin based upon it.
-	( crossOrigin, mediaSrc ) => {
-		if ( mediaSrc.startsWith( 'https://example.com' ) ) {
-			return 'use-credentials';
-		}
-		return crossOrigin;
-	}
-);
-```
-
 ## Removing Blocks
 
 ### Using a deny list
diff --git a/docs/reference-guides/filters/editor-filters.md b/docs/reference-guides/filters/editor-filters.md
index 8a97569da6148..94d27c9fd994d 100644
--- a/docs/reference-guides/filters/editor-filters.md
+++ b/docs/reference-guides/filters/editor-filters.md
@@ -38,6 +38,30 @@ wp.hooks.addFilter(
 );
 ```
 
+### `media.crossOrigin`
+
+Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e `<img>`, `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
+
+One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
+
+_Example:_
+
+```js
+addFilter(
+	'media.crossOrigin',
+	'my-plugin/with-cors-media',
+	// The callback accepts a second `mediaSrc` argument which references
+	// the url to actual foreign media, useful if you want to decide
+	// the value of crossOrigin based upon it.
+	( crossOrigin, mediaSrc ) => {
+		if ( mediaSrc.startsWith( 'https://example.com' ) ) {
+			return 'use-credentials';
+		}
+		return crossOrigin;
+	}
+);
+```
+
 ## Editor settings
 
 ### `block_editor_settings`
diff --git a/gutenberg.php b/gutenberg.php
index ab7049ffb7bf9..231314448aa1b 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 5.6
  * Requires PHP: 5.6
- * Version: 11.0.0-rc.1
+ * Version: 11.0.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
index f3b4743832f0a..fcf9191dc3277 100644
--- a/lib/block-supports/duotone.php
+++ b/lib/block-supports/duotone.php
@@ -361,4 +361,7 @@ function ( $selector ) use ( $duotone_id ) {
 		'register_attribute' => 'gutenberg_register_duotone_support',
 	)
 );
+
+// Remove WordPress core filter to avoid rendering duplicate support elements.
+remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
 add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 6681e93bd184d..92bd630ad2fff 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1086,8 +1086,8 @@ public function merge( $incoming ) {
 		foreach ( $nodes as $metadata ) {
 			foreach ( $to_replace as $property_path ) {
 				$path = array_merge( $metadata['path'], $property_path );
-				$node = _wp_array_get( $incoming_data, $path, array() );
-				if ( ! empty( $node ) ) {
+				$node = _wp_array_get( $incoming_data, $path, null );
+				if ( isset( $node ) ) {
 					gutenberg_experimental_set( $this->theme_json, $path, $node );
 				}
 			}
diff --git a/lib/compat/wordpress-5.8/index.php b/lib/compat/wordpress-5.8/index.php
index 6aeac5d21b827..9427ce463500a 100644
--- a/lib/compat/wordpress-5.8/index.php
+++ b/lib/compat/wordpress-5.8/index.php
@@ -35,8 +35,11 @@ function build_query_vars_from_query_block( $block, $page ) {
 		);
 
 		if ( isset( $block->context['query'] ) ) {
-			if ( isset( $block->context['query']['postType'] ) ) {
-				$query['post_type'] = $block->context['query']['postType'];
+			if ( ! empty( $block->context['query']['postType'] ) ) {
+				$post_type_param = $block->context['query']['postType'];
+				if ( is_post_type_viewable( $post_type_param ) ) {
+					$query['post_type'] = $post_type_param;
+				}
 			}
 			if ( isset( $block->context['query']['sticky'] ) && ! empty( $block->context['query']['sticky'] ) ) {
 				$sticky = get_option( 'sticky_posts' );
@@ -46,29 +49,54 @@ function build_query_vars_from_query_block( $block, $page ) {
 					$query['post__not_in'] = array_merge( $query['post__not_in'], $sticky );
 				}
 			}
-			if ( isset( $block->context['query']['exclude'] ) ) {
-				$query['post__not_in'] = array_merge( $query['post__not_in'], $block->context['query']['exclude'] );
+			if ( ! empty( $block->context['query']['exclude'] ) ) {
+				$excluded_post_ids     = array_map( 'intval', $block->context['query']['exclude'] );
+				$excluded_post_ids     = array_filter( $excluded_post_ids );
+				$query['post__not_in'] = array_merge( $query['post__not_in'], $excluded_post_ids );
 			}
-			if ( isset( $block->context['query']['perPage'] ) ) {
-				$query['offset']         = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset'];
-				$query['posts_per_page'] = $block->context['query']['perPage'];
+			if (
+				isset( $block->context['query']['perPage'] ) &&
+				is_numeric( $block->context['query']['perPage'] )
+			) {
+				$per_page = absint( $block->context['query']['perPage'] );
+				$offset   = 0;
+
+				if (
+					isset( $block->context['query']['offset'] ) &&
+					is_numeric( $block->context['query']['offset'] )
+				) {
+					$offset = absint( $block->context['query']['offset'] );
+				}
+
+				$query['offset']         = ( $per_page * ( $page - 1 ) ) + $offset;
+				$query['posts_per_page'] = $per_page;
 			}
-			if ( isset( $block->context['query']['categoryIds'] ) ) {
-				$query['category__in'] = $block->context['query']['categoryIds'];
+			if ( ! empty( $block->context['query']['categoryIds'] ) ) {
+				$term_ids              = array_map( 'intval', $block->context['query']['categoryIds'] );
+				$term_ids              = array_filter( $term_ids );
+				$query['category__in'] = $term_ids;
 			}
-			if ( isset( $block->context['query']['tagIds'] ) ) {
-				$query['tag__in'] = $block->context['query']['tagIds'];
+			if ( ! empty( $block->context['query']['tagIds'] ) ) {
+				$term_ids         = array_map( 'intval', $block->context['query']['tagIds'] );
+				$term_ids         = array_filter( $term_ids );
+				$query['tag__in'] = $term_ids;
 			}
-			if ( isset( $block->context['query']['order'] ) ) {
+			if (
+				isset( $block->context['query']['order'] ) &&
+					in_array( strtoupper( $block->context['query']['order'] ), array( 'ASC', 'DESC' ), true )
+			) {
 				$query['order'] = strtoupper( $block->context['query']['order'] );
 			}
 			if ( isset( $block->context['query']['orderBy'] ) ) {
 				$query['orderby'] = $block->context['query']['orderBy'];
 			}
-			if ( isset( $block->context['query']['author'] ) ) {
-				$query['author'] = $block->context['query']['author'];
+			if (
+				isset( $block->context['query']['author'] ) &&
+				(int) $block->context['query']['author'] > 0
+			) {
+				$query['author'] = (int) $block->context['query']['author'];
 			}
-			if ( isset( $block->context['query']['search'] ) ) {
+			if ( ! empty( $block->context['query']['search'] ) ) {
 				$query['s'] = $block->context['query']['search'];
 			}
 		}
diff --git a/lib/widgets-customize.php b/lib/widgets-customize.php
index 24b546d594875..fce4d6dc57680 100644
--- a/lib/widgets-customize.php
+++ b/lib/widgets-customize.php
@@ -156,15 +156,20 @@ function gutenberg_customize_widgets_init() {
  * @return bool Filtered decision about loading block assets.
  */
 function gutenberg_widgets_customize_load_block_editor_scripts_and_styles( $is_block_editor_screen ) {
-	if (
-		gutenberg_use_widgets_block_editor() &&
-		is_callable( 'get_current_screen' ) &&
-		'customize' === get_current_screen()->base
-	) {
-		return true;
+	if ( ! gutenberg_use_widgets_block_editor() ) {
+		return $is_block_editor_screen;
+	}
+
+	if ( ! is_callable( 'get_current_screen' ) ) {
+		return $is_block_editor_screen;
+	}
+
+	$current_screen = get_current_screen();
+	if ( is_null( $current_screen ) ) {
+		return $is_block_editor_screen;
 	}
 
-	return $is_block_editor_screen;
+	return 'customize' === $current_screen->base ? true : $is_block_editor_screen;
 }
 
 // Test for wp_use_widgets_block_editor(), as the existence of this in core
diff --git a/package-lock.json b/package-lock.json
index 6a229adef6427..b8102539013a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "11.0.0-rc.1",
+	"version": "11.0.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -14615,6 +14615,7 @@
 				"@emotion/css": "^11.1.3",
 				"@emotion/react": "^11.1.5",
 				"@emotion/styled": "^11.3.0",
+				"@emotion/utils": "1.0.0",
 				"@wordpress/a11y": "file:packages/a11y",
 				"@wordpress/compose": "file:packages/compose",
 				"@wordpress/date": "file:packages/date",
@@ -26291,38 +26292,49 @@
 			}
 		},
 		"cacache": {
-			"version": "12.0.4",
-			"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-			"integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+			"version": "15.2.0",
+			"resolved": "https://registry.npmjs.org/cacache/-/cacache-15.2.0.tgz",
+			"integrity": "sha512-uKoJSHmnrqXgthDFx/IU6ED/5xd+NNGe+Bb+kLZy7Ku4P+BaiWEUflAKPZ7eAzsYGcsAGASJZsybXp+quEcHTw==",
 			"dev": true,
 			"requires": {
-				"bluebird": "^3.5.5",
-				"chownr": "^1.1.1",
-				"figgy-pudding": "^3.5.1",
+				"@npmcli/move-file": "^1.0.1",
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
 				"glob": "^7.1.4",
-				"graceful-fs": "^4.1.15",
-				"infer-owner": "^1.0.3",
-				"lru-cache": "^5.1.1",
-				"mississippi": "^3.0.0",
-				"mkdirp": "^0.5.1",
-				"move-concurrently": "^1.0.1",
+				"infer-owner": "^1.0.4",
+				"lru-cache": "^6.0.0",
+				"minipass": "^3.1.1",
+				"minipass-collect": "^1.0.2",
+				"minipass-flush": "^1.0.5",
+				"minipass-pipeline": "^1.2.2",
+				"mkdirp": "^1.0.3",
+				"p-map": "^4.0.0",
 				"promise-inflight": "^1.0.1",
-				"rimraf": "^2.6.3",
-				"ssri": "^6.0.1",
-				"unique-filename": "^1.1.1",
-				"y18n": "^4.0.0"
+				"rimraf": "^3.0.2",
+				"ssri": "^8.0.1",
+				"tar": "^6.0.2",
+				"unique-filename": "^1.1.1"
 			},
 			"dependencies": {
-				"bluebird": {
-					"version": "3.7.2",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-					"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+				"chownr": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
 					"dev": true
 				},
+				"fs-minipass": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+					"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+					"dev": true,
+					"requires": {
+						"minipass": "^3.0.0"
+					}
+				},
 				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+					"version": "7.1.7",
+					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+					"integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
 					"dev": true,
 					"requires": {
 						"fs.realpath": "^1.0.0",
@@ -26333,40 +26345,67 @@
 						"path-is-absolute": "^1.0.0"
 					}
 				},
-				"graceful-fs": {
-					"version": "4.2.6",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-					"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-					"dev": true
-				},
 				"lru-cache": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-					"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+					"version": "6.0.0",
+					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 					"dev": true,
 					"requires": {
-						"yallist": "^3.0.2"
+						"yallist": "^4.0.0"
 					}
 				},
-				"rimraf": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-					"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+				"minipass": {
+					"version": "3.1.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+					"integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
 					"dev": true,
 					"requires": {
-						"glob": "^7.1.3"
+						"yallist": "^4.0.0"
 					}
 				},
-				"y18n": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
-					"integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+				"minizlib": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+					"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+					"dev": true,
+					"requires": {
+						"minipass": "^3.0.0",
+						"yallist": "^4.0.0"
+					}
+				},
+				"mkdirp": {
+					"version": "1.0.4",
+					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
 					"dev": true
 				},
+				"p-map": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+					"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+					"dev": true,
+					"requires": {
+						"aggregate-error": "^3.0.0"
+					}
+				},
+				"tar": {
+					"version": "6.1.0",
+					"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz",
+					"integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==",
+					"dev": true,
+					"requires": {
+						"chownr": "^2.0.0",
+						"fs-minipass": "^2.0.0",
+						"minipass": "^3.0.0",
+						"minizlib": "^2.1.1",
+						"mkdirp": "^1.0.3",
+						"yallist": "^4.0.0"
+					}
+				},
 				"yallist": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-					"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 					"dev": true
 				}
 			}
@@ -28100,38 +28139,73 @@
 			}
 		},
 		"copy-webpack-plugin": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
-			"integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==",
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.0.tgz",
+			"integrity": "sha512-p4eIA0ZWk4UI+xewyxOBTDCSDfjK6nCkr3zhDenoi7SFd+NgDNH/D14IZeFaCEFcK/psNDcAUMOB+sAxZ3SsAA==",
 			"dev": true,
 			"requires": {
-				"cacache": "^12.0.3",
-				"find-cache-dir": "^2.1.0",
-				"glob-parent": "^3.1.0",
-				"globby": "^7.1.1",
-				"is-glob": "^4.0.1",
-				"loader-utils": "^1.2.3",
-				"minimatch": "^3.0.4",
+				"cacache": "^15.0.5",
+				"fast-glob": "^3.2.4",
+				"find-cache-dir": "^3.3.1",
+				"glob-parent": "^5.1.1",
+				"globby": "^11.0.1",
+				"loader-utils": "^2.0.0",
 				"normalize-path": "^3.0.0",
-				"p-limit": "^2.2.1",
-				"schema-utils": "^1.0.0",
-				"serialize-javascript": "^4.0.0",
-				"webpack-log": "^2.0.0"
+				"p-limit": "^3.0.2",
+				"schema-utils": "^3.0.0",
+				"serialize-javascript": "^5.0.1",
+				"webpack-sources": "^1.4.3"
 			},
 			"dependencies": {
+				"@nodelib/fs.stat": {
+					"version": "2.0.5",
+					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+					"dev": true
+				},
+				"@types/json-schema": {
+					"version": "7.0.7",
+					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+					"integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+					"dev": true
+				},
+				"ajv": {
+					"version": "6.12.6",
+					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+					"dev": true,
+					"requires": {
+						"fast-deep-equal": "^3.1.1",
+						"fast-json-stable-stringify": "^2.0.0",
+						"json-schema-traverse": "^0.4.1",
+						"uri-js": "^4.2.2"
+					}
+				},
+				"ajv-keywords": {
+					"version": "3.5.2",
+					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+					"dev": true
+				},
+				"array-union": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+					"dev": true
+				},
 				"big.js": {
 					"version": "5.2.2",
 					"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
 					"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
 					"dev": true
 				},
-				"dir-glob": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
-					"integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
+				"braces": {
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 					"dev": true,
 					"requires": {
-						"path-type": "^3.0.0"
+						"fill-range": "^7.0.1"
 					}
 				},
 				"emojis-list": {
@@ -28140,18 +28214,55 @@
 					"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
 					"dev": true
 				},
+				"fast-deep-equal": {
+					"version": "3.1.3",
+					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+					"dev": true
+				},
+				"fast-glob": {
+					"version": "3.2.6",
+					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
+					"integrity": "sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==",
+					"dev": true,
+					"requires": {
+						"@nodelib/fs.stat": "^2.0.2",
+						"@nodelib/fs.walk": "^1.2.3",
+						"glob-parent": "^5.1.2",
+						"merge2": "^1.3.0",
+						"micromatch": "^4.0.4"
+					}
+				},
+				"fill-range": {
+					"version": "7.0.1",
+					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+					"dev": true,
+					"requires": {
+						"to-regex-range": "^5.0.1"
+					}
+				},
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				},
 				"globby": {
-					"version": "7.1.1",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz",
-					"integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
+					"version": "11.0.4",
+					"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+					"integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
 					"dev": true,
 					"requires": {
-						"array-union": "^1.0.1",
-						"dir-glob": "^2.0.0",
-						"glob": "^7.1.2",
-						"ignore": "^3.3.5",
-						"pify": "^3.0.0",
-						"slash": "^1.0.0"
+						"array-union": "^2.1.0",
+						"dir-glob": "^3.0.1",
+						"fast-glob": "^3.1.1",
+						"ignore": "^5.1.4",
+						"merge2": "^1.3.0",
+						"slash": "^3.0.0"
 					}
 				},
 				"is-glob": {
@@ -28163,24 +28274,46 @@
 						"is-extglob": "^2.1.1"
 					}
 				},
+				"is-number": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+					"dev": true
+				},
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+					"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
 					"dev": true,
 					"requires": {
-						"minimist": "^1.2.0"
+						"minimist": "^1.2.5"
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-					"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+					"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
 						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
+						"json5": "^2.1.2"
+					}
+				},
+				"merge2": {
+					"version": "1.4.1",
+					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+					"dev": true
+				},
+				"micromatch": {
+					"version": "4.0.4",
+					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+					"dev": true,
+					"requires": {
+						"braces": "^3.0.1",
+						"picomatch": "^2.2.3"
 					}
 				},
 				"normalize-path": {
@@ -28190,25 +28323,64 @@
 					"dev": true
 				},
 				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+					"version": "3.1.0",
+					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
 					"dev": true,
 					"requires": {
-						"p-try": "^2.0.0"
+						"yocto-queue": "^0.1.0"
 					}
 				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+				"picomatch": {
+					"version": "2.3.0",
+					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
 					"dev": true
 				},
-				"pify": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-					"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+				"schema-utils": {
+					"version": "3.1.0",
+					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
+					"integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
+					"dev": true,
+					"requires": {
+						"@types/json-schema": "^7.0.7",
+						"ajv": "^6.12.5",
+						"ajv-keywords": "^3.5.2"
+					}
+				},
+				"serialize-javascript": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
+					"integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+					"dev": true,
+					"requires": {
+						"randombytes": "^2.1.0"
+					}
+				},
+				"source-map": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 					"dev": true
+				},
+				"to-regex-range": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+					"dev": true,
+					"requires": {
+						"is-number": "^7.0.0"
+					}
+				},
+				"webpack-sources": {
+					"version": "1.4.3",
+					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+					"dev": true,
+					"requires": {
+						"source-list-map": "^2.0.0",
+						"source-map": "~0.6.1"
+					}
 				}
 			}
 		},
@@ -33199,43 +33371,42 @@
 			}
 		},
 		"find-cache-dir": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-			"integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+			"integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
 			"dev": true,
 			"requires": {
 				"commondir": "^1.0.1",
-				"make-dir": "^2.0.0",
-				"pkg-dir": "^3.0.0"
+				"make-dir": "^3.0.2",
+				"pkg-dir": "^4.1.0"
 			},
 			"dependencies": {
 				"find-up": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-					"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+					"version": "4.1.0",
+					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
 					"dev": true,
 					"requires": {
-						"locate-path": "^3.0.0"
+						"locate-path": "^5.0.0",
+						"path-exists": "^4.0.0"
 					}
 				},
 				"locate-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-					"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+					"version": "5.0.0",
+					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
 					"dev": true,
 					"requires": {
-						"p-locate": "^3.0.0",
-						"path-exists": "^3.0.0"
+						"p-locate": "^4.1.0"
 					}
 				},
 				"make-dir": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-					"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+					"version": "3.1.0",
+					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+					"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 					"dev": true,
 					"requires": {
-						"pify": "^4.0.1",
-						"semver": "^5.6.0"
+						"semver": "^6.0.0"
 					}
 				},
 				"p-limit": {
@@ -33248,12 +33419,12 @@
 					}
 				},
 				"p-locate": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-					"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+					"version": "4.1.0",
+					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
 					"dev": true,
 					"requires": {
-						"p-limit": "^2.0.0"
+						"p-limit": "^2.2.0"
 					}
 				},
 				"p-try": {
@@ -33262,25 +33433,25 @@
 					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
 					"dev": true
 				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+				"path-exists": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
 					"dev": true
 				},
 				"pkg-dir": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-					"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+					"version": "4.2.0",
+					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
 					"dev": true,
 					"requires": {
-						"find-up": "^3.0.0"
+						"find-up": "^4.0.0"
 					}
 				},
 				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+					"version": "6.3.0",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 					"dev": true
 				}
 			}
@@ -35494,9 +35665,9 @@
 			"dev": true
 		},
 		"ignore": {
-			"version": "3.3.10",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
-			"integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
+			"version": "5.1.8",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+			"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
 			"dev": true
 		},
 		"ignore-emit-webpack-plugin": {
@@ -44527,36 +44698,6 @@
 				"minipass": "^2.2.1"
 			}
 		},
-		"mississippi": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-			"integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-			"dev": true,
-			"requires": {
-				"concat-stream": "^1.5.0",
-				"duplexify": "^3.4.2",
-				"end-of-stream": "^1.1.0",
-				"flush-write-stream": "^1.0.0",
-				"from2": "^2.1.0",
-				"parallel-transform": "^1.1.0",
-				"pump": "^3.0.0",
-				"pumpify": "^1.3.3",
-				"stream-each": "^1.1.0",
-				"through2": "^2.0.0"
-			},
-			"dependencies": {
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				}
-			}
-		},
 		"mixin-deep": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -53657,15 +53798,6 @@
 			"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
 			"integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go="
 		},
-		"serialize-javascript": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-			"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-			"dev": true,
-			"requires": {
-				"randombytes": "^2.1.0"
-			}
-		},
 		"serve-favicon": {
 			"version": "2.5.0",
 			"resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
@@ -54155,9 +54287,9 @@
 			"dev": true
 		},
 		"slash": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-			"integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
 			"dev": true
 		},
 		"slice-ansi": {
@@ -54584,12 +54716,29 @@
 			}
 		},
 		"ssri": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-			"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+			"integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
 			"dev": true,
 			"requires": {
-				"figgy-pudding": "^3.5.1"
+				"minipass": "^3.1.1"
+			},
+			"dependencies": {
+				"minipass": {
+					"version": "3.1.3",
+					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+					"integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
+					"dev": true,
+					"requires": {
+						"yallist": "^4.0.0"
+					}
+				},
+				"yallist": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+					"dev": true
+				}
 			}
 		},
 		"stable": {
diff --git a/package.json b/package.json
index 8a97fc28d8e97..8b5e3209e39c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "11.0.0-rc.1",
+	"version": "11.0.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -159,7 +159,7 @@
 		"chalk": "4.1.1",
 		"commander": "4.1.0",
 		"concurrently": "3.5.0",
-		"copy-webpack-plugin": "5.1.2",
+		"copy-webpack-plugin": "6.4.0",
 		"core-js-builder": "3.11.0",
 		"cross-env": "3.2.4",
 		"css-loader": "5.1.3",
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index c7bc54004e1d4..de9ec9d6917e5 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -141,7 +141,6 @@ $z-layers: (
 	// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,
-	".components-popover.block-editor-block-navigation__popover": 99998,
 	".components-popover.customize-widgets-more-menu__content": 99998,
 	".components-popover.edit-post-more-menu__content": 99998,
 	".components-popover.edit-site-more-menu__content": 99998,
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index c81a2d5469ecc..3f700ec22a292 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -58,7 +58,8 @@ function BlockForType( {
 			globalStyle,
 			wrapperProps.style,
 			attributes,
-			defaultColors
+			defaultColors,
+			name
 		);
 	}, [
 		defaultColors,
@@ -85,7 +86,7 @@ function BlockForType( {
 				// Block level styles
 				wrapperProps={ wrapperProps }
 				// inherited styles merged with block level styles
-				mergedStyle={ mergedStyle }
+				style={ mergedStyle }
 				clientId={ clientId }
 				parentWidth={ parentWidth }
 				contentStyle={ contentStyle }
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index de7345280387a..414706ddf7433 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -10,7 +10,7 @@ import { listView } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import BlockNavigationTree from './tree';
+import ListView from '../list-view';
 import { store as blockEditorStore } from '../../store';
 
 function BlockNavigationDropdownToggle( {
@@ -65,7 +65,7 @@ function BlockNavigationDropdown(
 						{ __( 'List view' ) }
 					</p>
 
-					<BlockNavigationTree
+					<ListView
 						showNestedBlocks
 						showOnlyCurrentHierarchy
 						__experimentalFeatures={ __experimentalFeatures }
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 37da180afafc0..c7866566e4e75 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -1,3 +1,7 @@
+.block-editor-block-navigation__container {
+	min-width: 280px;
+}
+
 .block-editor-block-navigation__label {
 	margin: 0 0 $grid-unit-15;
 	color: $gray-700;
@@ -5,328 +9,3 @@
 	font-size: 11px;
 	font-weight: 500;
 }
-
-.block-editor-block-navigation__container {
-	min-width: 280px;
-}
-
-.block-editor-block-navigation-tree {
-	width: 100%;
-	border-collapse: collapse;
-	padding: 0;
-	margin: 0;
-
-	// Move upwards when in modal.
-	.components-modal__content & {
-		margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
-		width: calc(100% + #{ $grid-unit-15 });
-	}
-}
-
-.block-editor-block-navigation-leaf {
-	// Use position relative for row animation.
-	position: relative;
-
-	&.is-selected .block-editor-block-navigation-block-contents {
-		background: var(--wp-admin-theme-color);
-		color: $white;
-	}
-	&.is-selected .block-editor-block-navigation-block-contents:focus {
-		box-shadow:
-			inset 0 0 0 1px $white,
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
-		border-radius: 2px 2px 0 0;
-	}
-
-	&[aria-expanded="false"] {
-		&.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
-			border-radius: 2px;
-		}
-	}
-	&.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
-		border-radius: 0;
-	}
-	&.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents {
-		border-radius: 0 0 2px 2px;
-	}
-
-	&.is-dragging {
-		display: none;
-	}
-
-	.block-editor-block-navigation-block-contents {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: auto;
-		padding: ($grid-unit-15 / 2) $grid-unit-15 ($grid-unit-15 / 2) 0;
-		text-align: left;
-		color: $gray-900;
-		border-radius: 2px;
-		position: relative;
-		white-space: nowrap;
-
-		&:hover,
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-		&:focus {
-			z-index: 1;
-		}
-
-		&.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);
-		}
-
-		&.is-dropping-after::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			bottom: -2px;
-			right: 0;
-			left: 0;
-			border-bottom: 4px solid var(--wp-admin-theme-color);
-		}
-
-		&.is-dropping-to-inner-blocks::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			bottom: -2px;
-			right: 0;
-			left: $icon-size;
-			border-bottom: 4px solid var(--wp-admin-theme-color);
-		}
-
-		.components-modal__content & {
-			padding-left: 0;
-			padding-right: 0;
-		}
-	}
-
-	&.is-visible .block-editor-block-navigation-block-contents {
-		opacity: 1;
-		@include edit-post__fade-in-animation;
-	}
-
-	.block-editor-block-icon {
-		align-self: flex-start;
-		margin-right: $grid-unit-10;
-		width: $icon-size;
-	}
-
-	.block-editor-block-navigation-block__menu-cell,
-	.block-editor-block-navigation-block__mover-cell,
-	.block-editor-block-navigation-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-
-	.block-editor-block-navigation-block__menu-cell,
-	.block-editor-block-navigation-block__mover-cell {
-		line-height: 0;
-		width: $button-size;
-		opacity: 0;
-		vertical-align: top;
-		@include reduce-motion("transition");
-
-		// Show on hover, visible, and show above to keep the hit area size.
-		&:hover,
-		&.is-visible {
-			position: relative;
-			z-index: 1;
-			opacity: 1;
-			@include edit-post__fade-in-animation;
-		}
-
-		&,
-		.components-button.has-icon {
-			width: 24px;
-			min-width: 24px;
-			padding: 0;
-		}
-	}
-
-	.block-editor-block-navigation-block__menu-cell {
-		padding-top: $grid-unit-10;
-	}
-
-	.block-editor-block-navigation-block__mover-cell-alignment-wrapper {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	// Keep the tap target large but the focus target small.
-	.block-editor-block-mover-button {
-		position: relative;
-		width: $button-size;
-		height: $button-size-small;
-
-		// Position the icon.
-		svg {
-			position: relative;
-			height: $button-size-small;
-		}
-
-		&.is-up-button {
-			margin-top: -$grid-unit-15 / 2;
-			align-items: flex-end;
-			svg {
-				bottom: -$grid-unit-05;
-			}
-		}
-
-		&.is-down-button {
-			margin-bottom: -$grid-unit-15 / 2;
-			align-items: flex-start;
-			svg {
-				top: -$grid-unit-05;
-			}
-		}
-
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus and toggle pseudo elements.
-		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
-			height: 16px;
-			min-width: 100%;
-
-			// Position the focus rectangle.
-			left: 0;
-			right: 0;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
-		}
-	}
-
-	.block-editor-inserter__toggle {
-		background: $gray-900;
-		color: $white;
-		height: $grid-unit-30;
-		margin: 6px 6px 6px 1px;
-		min-width: $grid-unit-30;
-
-		&:active {
-			color: $white;
-		}
-	}
-
-	.block-editor-block-navigation-block-select-button__anchor {
-		background: rgba($black, 0.1);
-		border-radius: $radius-block-ui;
-		display: inline-block;
-		padding: 2px 6px;
-		margin: 0 $grid-unit-10;
-		max-width: 120px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&.is-selected .block-editor-block-navigation-block-select-button__anchor {
-		background: rgba($black, 0.3);
-	}
-}
-
-.block-editor-block-navigation-block-slot__description,
-.block-editor-block-navigation-block-select-button__description,
-.block-editor-block-navigation-appender__description {
-	display: none;
-}
-
-.block-editor-block-navigation-block__contents-cell,
-.block-editor-block-navigation-appender__cell {
-	.block-editor-block-navigation-block__contents-container,
-	.block-editor-block-navigation-appender__container {
-		display: flex;
-	}
-}
-
-// Chevron container metrics.
-.block-editor-block-navigation__expander {
-	height: $icon-size;
-	margin-left: $grid-unit-05;
-	width: $icon-size;
-}
-
-// First level of indentation is aria-level 2, max indent is 8.
-// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
-$block-navigation-max-indent: 8;
-.block-editor-block-navigation-leaf[aria-level] .block-editor-block-navigation__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
-}
-
-.block-editor-block-navigation-leaf:not([aria-level="1"]) {
-	.block-editor-block-navigation__expander {
-		margin-right: 4px;
-	}
-}
-
-@for $i from 0 to $block-navigation-max-indent {
-	.block-editor-block-navigation-leaf[aria-level="#{ $i + 1 }"] .block-editor-block-navigation__expander {
-		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
-		}
-	}
-}
-
-.block-editor-block-navigation-leaf .block-editor-block-navigation__expander {
-	visibility: hidden;
-}
-
-// Point downwards when open.
-.block-editor-block-navigation-leaf[aria-expanded="true"] .block-editor-block-navigation__expander svg {
-	visibility: visible;
-	transition: transform 0.2s ease;
-	transform: rotate(90deg);
-	@include reduce-motion("transition");
-}
-
-// Point rightwards when closed
-.block-editor-block-navigation-leaf[aria-expanded="false"] .block-editor-block-navigation__expander svg {
-	visibility: visible;
-	transform: rotate(0deg);
-	transition: transform 0.2s ease;
-	@include reduce-motion("transition");
-}
diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
new file mode 100644
index 0000000000000..00073ba297c66
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getAllValue, hasMixedValues, hasDefinedValues } from './utils';
+
+export default function AllInputControl( { onChange, values, ...props } ) {
+	const allValue = getAllValue( values );
+	const hasValues = hasDefinedValues( values );
+	const isMixed = hasValues && hasMixedValues( values );
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+
+	return (
+		<UnitControl
+			{ ...props }
+			aria-label={ __( 'Border radius' ) }
+			disableUnits={ isMixed }
+			isOnly
+			value={ allValue }
+			onChange={ onChange }
+			placeholder={ allPlaceholder }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js
new file mode 100644
index 0000000000000..7d5233d5cabe6
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalParseUnit as parseUnit,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import LinkedButton from './linked-button';
+import {
+	getAllValue,
+	getAllUnit,
+	hasDefinedValues,
+	hasMixedValues,
+} from './utils';
+
+const DEFAULT_VALUES = {
+	topLeft: null,
+	topRight: null,
+	bottomLeft: null,
+	bottomRight: null,
+};
+const MIN_BORDER_RADIUS_VALUE = 0;
+const MAX_BORDER_RADIUS_VALUES = {
+	px: 100,
+	em: 20,
+	rem: 20,
+};
+
+/**
+ * Control to display border radius options.
+ *
+ * @param {Object}   props          Component props.
+ * @param {Function} props.onChange Callback to handle onChange.
+ * @param {Object}   props.values   Border radius values.
+ *
+ * @return {WPElement}              Custom border radius control.
+ */
+export default function BorderRadiusControl( { onChange, values } ) {
+	const [ isLinked, setIsLinked ] = useState(
+		! hasDefinedValues( values ) || ! hasMixedValues( values )
+	);
+
+	const units = useCustomUnits( { availableUnits: [ 'px', 'em', 'rem' ] } );
+	const unit = getAllUnit( values );
+	const unitConfig = units.find( ( item ) => item.value === unit );
+	const step = unitConfig?.step || 1;
+
+	const [ allValue ] = parseUnit( getAllValue( values ) );
+
+	const toggleLinked = () => setIsLinked( ! isLinked );
+
+	const handleSliderChange = ( next ) => {
+		onChange( next !== undefined ? `${ next }${ unit }` : undefined );
+	};
+
+	return (
+		<fieldset className="components-border-radius-control">
+			<legend>{ __( 'Radius' ) }</legend>
+			<div className="components-border-radius-control__wrapper">
+				{ isLinked ? (
+					<>
+						<AllInputControl
+							className="components-border-radius-control__unit-control"
+							values={ values }
+							min={ MIN_BORDER_RADIUS_VALUE }
+							onChange={ onChange }
+							unit={ unit }
+							units={ units }
+						/>
+						<RangeControl
+							className="components-border-radius-control__range-control"
+							value={ allValue }
+							min={ MIN_BORDER_RADIUS_VALUE }
+							max={ MAX_BORDER_RADIUS_VALUES[ unit ] }
+							initialPosition={ 0 }
+							withInputField={ false }
+							onChange={ handleSliderChange }
+							step={ step }
+						/>
+					</>
+				) : (
+					<InputControls
+						min={ MIN_BORDER_RADIUS_VALUE }
+						onChange={ onChange }
+						values={ values || DEFAULT_VALUES }
+						units={ units }
+					/>
+				) }
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			</div>
+		</fieldset>
+	);
+}
diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
new file mode 100644
index 0000000000000..db294c7f8bd1b
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const CORNERS = {
+	topLeft: __( 'Top left' ),
+	topRight: __( 'Top right' ),
+	bottomLeft: __( 'Bottom left' ),
+	bottomRight: __( 'Bottom right' ),
+};
+
+export default function BoxInputControls( {
+	onChange,
+	values: valuesProp,
+	...props
+} ) {
+	const createHandleOnChange = ( corner ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+
+		onChange( {
+			...values,
+			[ corner ]: next ? next : undefined,
+		} );
+	};
+
+	// For shorthand style & backwards compatibility, handle flat string value.
+	const values =
+		typeof valuesProp !== 'string'
+			? valuesProp
+			: {
+					topLeft: valuesProp,
+					topRight: valuesProp,
+					bottomLeft: valuesProp,
+					bottomRight: valuesProp,
+			  };
+
+	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	return (
+		<div className="components-border-radius-control__input-controls-wrapper">
+			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
+				<UnitControl
+					{ ...props }
+					key={ key }
+					aria-label={ label }
+					value={ values[ key ] }
+					onChange={ createHandleOnChange( key ) }
+				/>
+			) ) }
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/border-radius-control/linked-button.js b/packages/block-editor/src/components/border-radius-control/linked-button.js
new file mode 100644
index 0000000000000..58fec1012b065
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/linked-button.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip } from '@wordpress/components';
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const label = isLinked ? __( 'Unlink Radii' ) : __( 'Link Radii' );
+
+	return (
+		<Tooltip text={ label }>
+			<Button
+				{ ...props }
+				className="component-border-radius-control__linked-button"
+				isPrimary={ isLinked }
+				isSecondary={ ! isLinked }
+				isSmall
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 16 }
+				aria-label={ label }
+			/>
+		</Tooltip>
+	);
+}
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
new file mode 100644
index 0000000000000..4cfeaaeb6fc73
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -0,0 +1,57 @@
+.components-border-radius-control {
+	margin-bottom: $grid-unit-15;
+
+	legend {
+		padding-bottom: $grid-unit-05;
+	}
+
+	.components-border-radius-control__wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+
+		> .components-unit-control-wrapper {
+			width: calc(50% - 26px);
+			margin-bottom: 0;
+		}
+
+		.components-range-control {
+			width: calc(50% - 26px);
+			margin-bottom: 0;
+
+			.components-base-control__field {
+				margin-bottom: 0;
+				height: 30px;
+			}
+
+			.components-range-control__wrapper {
+				margin-right: 10px;
+			}
+		}
+
+		> span {
+			flex: 0 0 auto;
+		}
+	}
+
+	.components-border-radius-control__input-controls-wrapper {
+		display: flex;
+		width: 70%;
+		flex-wrap: wrap;
+
+		.components-unit-control-wrapper {
+			width: calc(50% - #{ $grid-unit-10 });
+			margin-bottom: $grid-unit-10;
+			margin-right: $grid-unit-10;
+		}
+	}
+
+	.component-border-radius-control__linked-button.has-icon {
+		display: flex;
+		justify-content: center;
+
+		svg {
+			margin-right: 0;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/border-radius-control/utils.js b/packages/block-editor/src/components/border-radius-control/utils.js
new file mode 100644
index 0000000000000..a5bf6e176c92d
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/utils.js
@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalParseUnit as parseUnit } from '@wordpress/components';
+
+/**
+ * Gets the item with the highest occurrence within an array
+ * https://stackoverflow.com/a/20762713
+ *
+ * @param {Array<any>} arr Array of items to check.
+ * @return {any}           The item with the most occurrences.
+ */
+function mode( arr ) {
+	return arr
+		.sort(
+			( a, b ) =>
+				arr.filter( ( v ) => v === a ).length -
+				arr.filter( ( v ) => v === b ).length
+		)
+		.pop();
+}
+
+/**
+ * Returns the most common CSS unit in the radius values.
+ *
+ * @param {Object|string} values Radius values.
+ * @return {string}              Most common CSS unit in values.
+ */
+export function getAllUnit( values = {} ) {
+	if ( typeof values === 'string' ) {
+		const [ , unit ] = parseUnit( values );
+		return unit || 'px';
+	}
+
+	const allUnits = Object.values( values ).map( ( value ) => {
+		const [ , unit ] = parseUnit( value );
+		return unit;
+	} );
+
+	return mode( allUnits );
+}
+
+/**
+ * Gets the 'all' input value and unit from values data.
+ *
+ * @param {Object|string} values Radius values.
+ * @return {string}              A value + unit for the 'all' input.
+ */
+export function getAllValue( values = {} ) {
+	/**
+	 * Border radius support was originally a single pixel value.
+	 *
+	 * To maintain backwards compatibility treat this case as the all value.
+	 */
+	if ( typeof values === 'string' ) {
+		return values;
+	}
+
+	const parsedValues = Object.values( values ).map( ( value ) =>
+		parseUnit( value )
+	);
+
+	const allValues = parsedValues.map( ( value ) => value[ 0 ] );
+	const allUnits = parsedValues.map( ( value ) => value[ 1 ] );
+
+	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
+		? allValues[ 0 ]
+		: '';
+	const unit = mode( allUnits );
+
+	const allValue = value === 0 || value ? `${ value }${ unit }` : null;
+
+	return allValue;
+}
+
+/**
+ * Checks to determine if values are mixed.
+ *
+ * @param {Object} values Radius values.
+ * @return {boolean}      Whether values are mixed.
+ */
+export function hasMixedValues( values = {} ) {
+	const allValue = getAllValue( values );
+	const isMixed = isNaN( parseFloat( allValue ) );
+
+	return isMixed;
+}
+
+/**
+ * Checks to determine if values are defined.
+ *
+ * @param {Object} values Radius values.
+ * @return {boolean}      Whether values are mixed.
+ */
+export function hasDefinedValues( values ) {
+	if ( ! values ) {
+		return false;
+	}
+
+	// A string value represents a shorthand value.
+	if ( typeof values === 'string' ) {
+		return true;
+	}
+
+	// An object represents longhand border radius values, if any are set
+	// flag values as being defined.
+	const filteredValues = Object.values( values ).filter( ( value ) => {
+		return !! value || value === 0;
+	} );
+
+	return !! filteredValues.length;
+}
diff --git a/packages/block-editor/src/components/border-style-control/index.js b/packages/block-editor/src/components/border-style-control/index.js
index c07e3962438e2..6c44b7bc2fe8f 100644
--- a/packages/block-editor/src/components/border-style-control/index.js
+++ b/packages/block-editor/src/components/border-style-control/index.js
@@ -1,64 +1,47 @@
 /**
  * WordPress dependencies
  */
-import { CustomSelectControl } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-const DEFAULT_STYLE = {
-	key: 'default',
-	name: __( 'Default' ),
-	style: { borderStyle: undefined },
-};
+import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';
 
 const BORDER_STYLES = [
-	DEFAULT_STYLE,
-	{
-		key: 'none',
-		name: __( 'None' ),
-		style: { borderStyle: 'none' },
-	},
-	{
-		key: 'solid',
-		name: __( 'Solid' ),
-		style: { borderStyle: 'solid' },
-	},
-	{
-		key: 'dashed',
-		name: __( 'Dashed' ),
-		style: { borderStyle: 'dashed' },
-	},
-	{
-		key: 'dotted',
-		name: __( 'Dotted' ),
-		style: { borderStyle: 'dotted' },
-	},
+	{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },
+	{ label: __( 'Dashed' ), icon: lineDashed, value: 'dashed' },
+	{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },
 ];
 
 /**
  * Control to display border style options.
  *
- * @param {Object} props          Component props.
- * @param {Object} props.onChange Handler for changing border style selection.
- * @param {Object} props.value    Currently selected border style value.
+ * @param {Object}   props          Component props.
+ * @param {Function} props.onChange Handler for changing border style selection.
+ * @param {string}   props.value    Currently selected border style value.
  *
- * @return {WPElement} Custom border style select control.
+ * @return {WPElement} Custom border style segmented control.
  */
 export default function BorderStyleControl( { onChange, value } ) {
-	const style = BORDER_STYLES.find( ( option ) => option.key === value );
-
 	return (
 		<fieldset className="components-border-style-control">
-			<CustomSelectControl
-				className="components-border-style-control__select"
-				label={ __( 'Border style' ) }
-				options={ BORDER_STYLES }
-				value={ style || DEFAULT_STYLE }
-				onChange={ ( { selectedItem } ) =>
-					selectedItem.key === 'default'
-						? onChange( undefined )
-						: onChange( selectedItem.key )
-				}
-			/>
+			<legend>{ __( 'Style' ) }</legend>
+			<div className="components-border-style-control__buttons">
+				{ BORDER_STYLES.map( ( borderStyle ) => (
+					<Button
+						key={ borderStyle.value }
+						icon={ borderStyle.icon }
+						isSmall
+						isPressed={ borderStyle.value === value }
+						onClick={ () =>
+							onChange(
+								borderStyle.value === value
+									? undefined
+									: borderStyle.value
+							)
+						}
+						aria-label={ borderStyle.label }
+					/>
+				) ) }
+			</div>
 		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/border-style-control/style.scss b/packages/block-editor/src/components/border-style-control/style.scss
index 827f31bca718c..737103be1cd24 100644
--- a/packages/block-editor/src/components/border-style-control/style.scss
+++ b/packages/block-editor/src/components/border-style-control/style.scss
@@ -1,14 +1,17 @@
-.components-border-style-control__select {
-	margin-bottom: 24px;
-
-	button {
-		width: 100%;
+.components-border-style-control {
+	legend {
+		padding-bottom: $grid-unit-05;
 	}
 
-	ul {
-		li,
-		li:last-child {
-			margin: 6px;
+	.components-border-style-control__buttons {
+		display: inline-flex;
+		margin-bottom: $grid-unit-30;
+
+		.components-button.has-icon {
+			min-width: 30px;
+			height: 30px;
+			padding: 3px;
+			margin-right: $grid-unit-05;
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 1fca410bc121f..b69ab19d1aedd 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -14,7 +14,7 @@ import {
 	ButtonGroup,
 	ColorIndicator,
 	ColorPalette,
-	__experimentalGradientPicker as GradientPicker,
+	GradientPicker,
 } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 
diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js
deleted file mode 100644
index dcbf3ec090a70..0000000000000
--- a/packages/block-editor/src/components/gradient-picker/control.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { BaseControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import GradientPicker from './';
-import useSetting from '../use-setting';
-
-export default function GradientPickerControl( {
-	className,
-	value,
-	onChange,
-	label = __( 'Gradient Presets' ),
-	...props
-} ) {
-	const gradients = useSetting( 'color.gradients' );
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
-	if ( isEmpty( gradients ) && disableCustomGradients ) {
-		return null;
-	}
-	return (
-		<BaseControl
-			className={ classnames(
-				'block-editor-gradient-picker-control',
-				className
-			) }
-		>
-			<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
-			<GradientPicker
-				value={ value }
-				onChange={ onChange }
-				className="block-editor-gradient-picker-control__gradient-picker-presets"
-				gradients={ gradients }
-				disableCustomGradients={ disableCustomGradients }
-				{ ...props }
-			/>
-		</BaseControl>
-	);
-}
diff --git a/packages/block-editor/src/components/gradient-picker/index.js b/packages/block-editor/src/components/gradient-picker/index.js
deleted file mode 100644
index 6a18fb516b9a1..0000000000000
--- a/packages/block-editor/src/components/gradient-picker/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalGradientPicker as GradientPicker } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useSetting from '../use-setting';
-
-const EMPTY_ARRAY = [];
-
-function GradientPickerWithGradients( props ) {
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
-
-	return (
-		<GradientPicker
-			gradients={
-				props.gradients !== undefined ? props.gradient : gradients
-			}
-			disableCustomGradients={
-				props.disableCustomGradients !== undefined
-					? props.disableCustomGradients
-					: disableCustomGradients
-			}
-			{ ...props }
-		/>
-	);
-}
-
-export default function ( props ) {
-	const ComponentToUse =
-		props.gradients !== undefined &&
-		props.disableCustomGradients !== undefined
-			? GradientPicker
-			: GradientPickerWithGradients;
-	return <ComponentToUse { ...props } />;
-}
diff --git a/packages/block-editor/src/components/gradient-picker/panel.js b/packages/block-editor/src/components/gradient-picker/panel.js
deleted file mode 100644
index 57e93273a5d2b..0000000000000
--- a/packages/block-editor/src/components/gradient-picker/panel.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import GradientPicker from './control';
-import useSetting from '../use-setting';
-
-export default function GradientPanel( props ) {
-	const gradients = useSetting( 'color.gradients' );
-	if ( isEmpty( gradients ) ) {
-		return null;
-	}
-	return (
-		<PanelBody title={ __( 'Gradient' ) }>
-			<GradientPicker { ...props } />
-		</PanelBody>
-	);
-}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index ef4095a17a1d3..3cfa70c4b9f40 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -24,9 +24,6 @@ export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
-export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
-export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
-export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -34,6 +31,7 @@ export {
 	BlockVerticalAlignmentToolbar,
 	BlockVerticalAlignmentControl,
 } from './block-vertical-alignment-control';
+export { default as __experimentalBorderRadiusControl } from './border-radius-control';
 export { default as __experimentalBorderStyleControl } from './border-style-control';
 export {
 	// This is a typo, but kept here for back-compat.
@@ -44,9 +42,6 @@ export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as __experimentalDuotoneControl } from './duotone-control';
-export { default as __experimentalGradientPicker } from './gradient-picker';
-export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
-export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
@@ -68,6 +63,9 @@ export { default as __experimentalLinkControlSearchInput } from './link-control/
 export { default as __experimentalLinkControlSearchResults } from './link-control/search-results';
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
+export { default as __experimentalListView } from './list-view';
+export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
+export { default as __experimentalListViewEditor } from './list-view/editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
@@ -120,7 +118,6 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
-export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 9db480c49d5b0..19b01b5a66b3e 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
@@ -10,7 +10,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import Tips from './tips';
-import InserterSearchForm from './search-form';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
 import BlockPatternsTabs from './block-patterns-tab';
@@ -171,7 +170,8 @@ function InserterMenu( {
 			<div className="block-editor-inserter__main-area">
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
-					<InserterSearchForm
+					<SearchControl
+						className="block-editor-inserter__search"
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
 							setFilterValue( value );
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index ffac41438fb03..afaffa950028f 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -14,13 +14,16 @@ import {
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	SearchControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import InserterSearchResults from './search-results';
-import InserterSearchForm from './search-form';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
@@ -192,7 +195,7 @@ function InserterMenu( {
 			header={
 				<>
 					{ showSearchForm && (
-						<InserterSearchForm
+						<SearchControl
 							onChange={ onChangeSearch }
 							value={ filterValue }
 						/>
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index ca4ff4c2fa274..e9060e827a938 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -8,13 +8,12 @@ import classnames from 'classnames';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, SearchControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import InserterSearchForm from './search-form';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import usePatternsState from './hooks/use-patterns-state';
@@ -87,7 +86,8 @@ export default function QuickInserter( {
 			} ) }
 		>
 			{ showSearch && (
-				<InserterSearchForm
+				<SearchControl
+					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {
 						setFilterValue( value );
diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js
deleted file mode 100644
index 7914e842fd3dc..0000000000000
--- a/packages/block-editor/src/components/inserter/search-form.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { VisuallyHidden, Button } from '@wordpress/components';
-import { Icon, search, closeSmall } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
-
-function InserterSearchForm( {
-	className,
-	onChange,
-	value,
-	label,
-	placeholder,
-} ) {
-	const instanceId = useInstanceId( InserterSearchForm );
-	const searchInput = useRef();
-
-	return (
-		<div
-			className={ classnames(
-				'block-editor-inserter__search',
-				className
-			) }
-		>
-			<VisuallyHidden
-				as="label"
-				htmlFor={ `block-editor-inserter__search-${ instanceId }` }
-			>
-				{ label || placeholder }
-			</VisuallyHidden>
-			<input
-				ref={ searchInput }
-				className="block-editor-inserter__search-input"
-				id={ `block-editor-inserter__search-${ instanceId }` }
-				type="search"
-				placeholder={ placeholder }
-				onChange={ ( event ) => onChange( event.target.value ) }
-				autoComplete="off"
-				value={ value || '' }
-			/>
-			<div className="block-editor-inserter__search-icon">
-				{ !! value && (
-					<Button
-						icon={ closeSmall }
-						label={ __( 'Reset search' ) }
-						onClick={ () => {
-							onChange( '' );
-							searchInput.current.focus();
-						} }
-					/>
-				) }
-				{ ! value && <Icon icon={ search } /> }
-			</div>
-		</div>
-	);
-}
-
-export default InserterSearchForm;
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index cb8f94f93eb6e..8792dfe969909 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -99,55 +99,14 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__search {
+	background: $white;
 	padding: $grid-unit-20;
 	position: sticky;
 	top: 0;
-	background: $white;
 	z-index: z-index(".block-editor-inserter__search");
 
-	input[type="search"].block-editor-inserter__search-input {
-		@include input-control;
-		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-60;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-}
-
-.block-editor-inserter__search-icon {
-	position: absolute;
-	top: 0;
-	right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-
-	> svg {
-		margin: $grid-unit-10;
+	.components-search-control__icon {
+		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
 	}
 }
 
diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
index 6cee4800a479f..a4365267853f6 100644
--- a/packages/block-editor/src/components/letter-spacing-control/index.js
+++ b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -22,7 +22,7 @@ import useSetting from '../../components/use-setting';
  */
 export default function LetterSpacingControl( { value, onChange } ) {
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: '2', em: '.2', rem: '.2' },
 	} );
 	return (
diff --git a/packages/block-editor/src/components/block-navigation/README.md b/packages/block-editor/src/components/list-view/README.md
similarity index 50%
rename from packages/block-editor/src/components/block-navigation/README.md
rename to packages/block-editor/src/components/list-view/README.md
index 9491b9ad7ef01..f702c28702f8e 100644
--- a/packages/block-editor/src/components/block-navigation/README.md
+++ b/packages/block-editor/src/components/list-view/README.md
@@ -1,13 +1,13 @@
-# Block navigation
+# List view
 
-The BlockNavigation component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
+The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
 
 Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below.
 
-In addition to presenting the structure of the blocks in the editor, the BlockNavigation component lets users navigate to each block by clicking on its line in the hierarchy tree.
+In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree.
 
-![Block navigation](https://make.wordpress.org/core/files/2020/08/block-navigation.png)
-![View of a group block navigation](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png)
+![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png)
+![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png)
 
 ## Table of contents
 
@@ -18,12 +18,12 @@ In addition to presenting the structure of the blocks in the editor, the BlockNa
 
 ### Usage
 
-Renders a block navigation with default syles.
+Renders a list view with default syles.
 
 ```jsx
-import { BlockNavigation } from '@wordpress/block-editor';
+import { ListView } from '@wordpress/block-editor';
 
-const MyNavigation = () => <BlockNavigation onSelect={ onClose } />;
+const MyNavigation = () => <ListView onSelect={ onClose } />;
 ```
 
 ## Related components
diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/list-view/appender.js
similarity index 77%
rename from packages/block-editor/src/components/block-navigation/appender.js
rename to packages/block-editor/src/components/list-view/appender.js
index 92d60146ca9ba..229a391856eec 100644
--- a/packages/block-editor/src/components/block-navigation/appender.js
+++ b/packages/block-editor/src/components/list-view/appender.js
@@ -14,11 +14,11 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import BlockNavigationLeaf from './leaf';
+import ListViewLeaf from './leaf';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockNavigationAppender( {
+export default function ListViewAppender( {
 	parentBlockClientId,
 	position,
 	level,
@@ -38,8 +38,8 @@ export default function BlockNavigationAppender( {
 		},
 		[ parentBlockClientId ]
 	);
-	const instanceId = useInstanceId( BlockNavigationAppender );
-	const descriptionId = `block-navigation-appender-row__description_${ instanceId }`;
+	const instanceId = useInstanceId( ListViewAppender );
+	const descriptionId = `list-view-appender-row__description_${ instanceId }`;
 
 	const appenderPositionDescription = sprintf(
 		/* translators: 1: The numerical position of the block that will be inserted. 2: The level of nesting for the block that will be inserted. */
@@ -49,7 +49,7 @@ export default function BlockNavigationAppender( {
 	);
 
 	return (
-		<BlockNavigationLeaf
+		<ListViewLeaf
 			className={ classnames( { 'is-dragging': isDragging } ) }
 			level={ level }
 			position={ position }
@@ -57,11 +57,11 @@ export default function BlockNavigationAppender( {
 			path={ path }
 		>
 			<TreeGridCell
-				className="block-editor-block-navigation-appender__cell"
+				className="block-editor-list-view-appender__cell"
 				colSpan="3"
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
-					<div className="block-editor-block-navigation-appender__container">
+					<div className="block-editor-list-view-appender__container">
 						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalIsQuick
@@ -69,7 +69,7 @@ export default function BlockNavigationAppender( {
 							toggleProps={ { ref, tabIndex, onFocus } }
 						/>
 						<div
-							className="block-editor-block-navigation-appender__description"
+							className="block-editor-list-view-appender__description"
 							id={ descriptionId }
 						>
 							{ appenderPositionDescription }
@@ -77,6 +77,6 @@ export default function BlockNavigationAppender( {
 					</div>
 				) }
 			</TreeGridCell>
-		</BlockNavigationLeaf>
+		</ListViewLeaf>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
similarity index 79%
rename from packages/block-editor/src/components/block-navigation/block-contents.js
rename to packages/block-editor/src/components/list-view/block-contents.js
index e941a5661b6b9..99ccc7907da44 100644
--- a/packages/block-editor/src/components/block-navigation/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -12,13 +12,13 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useBlockNavigationContext } from './context';
-import BlockNavigationBlockSlot from './block-slot';
-import BlockNavigationBlockSelectButton from './block-select-button';
+import { useListViewContext } from './context';
+import ListViewBlockSlot from './block-slot';
+import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
-const BlockNavigationBlockContents = forwardRef(
+const ListViewBlockContents = forwardRef(
 	(
 		{
 			onClick,
@@ -35,7 +35,7 @@ const BlockNavigationBlockContents = forwardRef(
 		const {
 			__experimentalFeatures,
 			blockDropTarget = {},
-		} = useBlockNavigationContext();
+		} = useListViewContext();
 
 		const { clientId } = block;
 
@@ -79,23 +79,20 @@ const BlockNavigationBlockContents = forwardRef(
 		const isDroppingToInnerBlocks =
 			dropTargetRootClientId === clientId && dropPosition === 'inside';
 
-		const className = classnames(
-			'block-editor-block-navigation-block-contents',
-			{
-				'is-dropping-before': isDroppingBefore || isBlockMoveTarget,
-				'is-dropping-after': isDroppingAfter,
-				'is-dropping-to-inner-blocks': isDroppingToInnerBlocks,
-			}
-		);
+		const className = classnames( 'block-editor-list-view-block-contents', {
+			'is-dropping-before': isDroppingBefore || isBlockMoveTarget,
+			'is-dropping-after': isDroppingAfter,
+			'is-dropping-to-inner-blocks': isDroppingToInnerBlocks,
+		} );
 
 		return (
 			<BlockDraggable
 				clientIds={ [ block.clientId ] }
-				elementId={ `block-navigation-block-${ block.clientId }` }
+				elementId={ `list-view-block-${ block.clientId }` }
 			>
 				{ ( { draggable, onDragStart, onDragEnd } ) =>
 					__experimentalFeatures ? (
-						<BlockNavigationBlockSlot
+						<ListViewBlockSlot
 							ref={ ref }
 							className={ className }
 							block={ block }
@@ -110,7 +107,7 @@ const BlockNavigationBlockContents = forwardRef(
 							{ ...props }
 						/>
 					) : (
-						<BlockNavigationBlockSelectButton
+						<ListViewBlockSelectButton
 							ref={ ref }
 							className={ className }
 							block={ block }
@@ -132,4 +129,4 @@ const BlockNavigationBlockContents = forwardRef(
 	}
 );
 
-export default BlockNavigationBlockContents;
+export default ListViewBlockContents;
diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
similarity index 73%
rename from packages/block-editor/src/components/block-navigation/block-select-button.js
rename to packages/block-editor/src/components/list-view/block-select-button.js
index 72a29d33cbe43..ce51d1f2a099f 100644
--- a/packages/block-editor/src/components/block-navigation/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -18,9 +18,9 @@ import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
-import BlockNavigationExpander from './expander';
+import ListViewExpander from './expander';
 
-function BlockNavigationBlockSelectButton(
+function ListViewBlockSelectButton(
 	{
 		className,
 		block: { clientId },
@@ -39,8 +39,8 @@ function BlockNavigationBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const instanceId = useInstanceId( BlockNavigationBlockSelectButton );
-	const descriptionId = `block-navigation-block-select-button__${ instanceId }`;
+	const instanceId = useInstanceId( ListViewBlockSelectButton );
+	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
 		siblingBlockCount,
@@ -51,7 +51,7 @@ function BlockNavigationBlockSelectButton(
 		<>
 			<Button
 				className={ classnames(
-					'block-editor-block-navigation-block-select-button',
+					'block-editor-list-view-block-select-button',
 					className
 				) }
 				onClick={ onClick }
@@ -63,11 +63,11 @@ function BlockNavigationBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 			>
-				<BlockNavigationExpander onClick={ onToggleExpanded } />
+				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<BlockTitle clientId={ clientId } />
 				{ blockInformation?.anchor && (
-					<span className="block-editor-block-navigation-block-select-button__anchor">
+					<span className="block-editor-list-view-block-select-button__anchor">
 						{ blockInformation.anchor }
 					</span>
 				) }
@@ -78,7 +78,7 @@ function BlockNavigationBlockSelectButton(
 				) }
 			</Button>
 			<div
-				className="block-editor-block-navigation-block-select-button__description"
+				className="block-editor-list-view-block-select-button__description"
 				id={ descriptionId }
 			>
 				{ blockPositionDescription }
@@ -87,4 +87,4 @@ function BlockNavigationBlockSelectButton(
 	);
 }
 
-export default forwardRef( BlockNavigationBlockSelectButton );
+export default forwardRef( ListViewBlockSelectButton );
diff --git a/packages/block-editor/src/components/block-navigation/block-slot.js b/packages/block-editor/src/components/list-view/block-slot.js
similarity index 74%
rename from packages/block-editor/src/components/block-navigation/block-slot.js
rename to packages/block-editor/src/components/list-view/block-slot.js
index 10e01be823033..396a4d3ae3a50 100644
--- a/packages/block-editor/src/components/block-navigation/block-slot.js
+++ b/packages/block-editor/src/components/list-view/block-slot.js
@@ -23,30 +23,27 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockIcon from '../block-icon';
 import { BlockListBlockContext } from '../block-list/block';
-import BlockNavigationBlockSelectButton from './block-select-button';
+import ListViewBlockSelectButton from './block-select-button';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
-import BlockNavigationExpander from './expander';
+import ListViewExpander from './expander';
 
-const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`;
+const getSlotName = ( clientId ) => `ListViewBlock-${ clientId }`;
 
-function BlockNavigationBlockSlot( props, ref ) {
+function ListViewBlockSlot( props, ref ) {
 	const { clientId } = props.block;
 	const { name } = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
 	);
-	const instanceId = useInstanceId( BlockNavigationBlockSlot );
+	const instanceId = useInstanceId( ListViewBlockSlot );
 
 	return (
 		<Slot name={ getSlotName( clientId ) }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
 					return (
-						<BlockNavigationBlockSelectButton
-							ref={ ref }
-							{ ...props }
-						/>
+						<ListViewBlockSelectButton ref={ ref } { ...props } />
 					);
 				}
 
@@ -62,7 +59,7 @@ function BlockNavigationBlockSlot( props, ref ) {
 				} = props;
 
 				const blockType = getBlockType( name );
-				const descriptionId = `block-navigation-block-slot__${ instanceId }`;
+				const descriptionId = `list-view-block-slot__${ instanceId }`;
 				const blockPositionDescription = getBlockPositionDescription(
 					position,
 					siblingBlockCount,
@@ -84,13 +81,11 @@ function BlockNavigationBlockSlot( props, ref ) {
 					<>
 						<div
 							className={ classnames(
-								'block-editor-block-navigation-block-slot',
+								'block-editor-list-view-block-slot',
 								className
 							) }
 						>
-							<BlockNavigationExpander
-								onClick={ onToggleExpanded }
-							/>
+							<ListViewExpander onClick={ onToggleExpanded } />
 							<BlockIcon icon={ blockType.icon } showColors />
 							{ Children.map( fills, ( fill ) =>
 								cloneElement( fill, {
@@ -104,7 +99,7 @@ function BlockNavigationBlockSlot( props, ref ) {
 								</VisuallyHidden>
 							) }
 							<div
-								className="block-editor-block-navigation-block-slot__description"
+								className="block-editor-list-view-block-slot__description"
 								id={ descriptionId }
 							>
 								{ blockPositionDescription }
@@ -117,9 +112,9 @@ function BlockNavigationBlockSlot( props, ref ) {
 	);
 }
 
-export default forwardRef( BlockNavigationBlockSlot );
+export default forwardRef( ListViewBlockSlot );
 
-export const BlockNavigationBlockFill = ( props ) => {
+export const ListViewBlockFill = ( props ) => {
 	const { clientId } = useContext( BlockListBlockContext );
 	return <Fill { ...props } name={ getSlotName( clientId ) } />;
 };
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/list-view/block.js
similarity index 86%
rename from packages/block-editor/src/components/block-navigation/block.js
rename to packages/block-editor/src/components/list-view/block.js
index d15480fede10b..43fec6cf549e7 100644
--- a/packages/block-editor/src/components/block-navigation/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -20,17 +20,17 @@ import { useDispatch, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import BlockNavigationLeaf from './leaf';
+import ListViewLeaf from './leaf';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
 } from '../block-mover/button';
-import BlockNavigationBlockContents from './block-contents';
+import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
-import { useBlockNavigationContext } from './context';
+import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockNavigationBlock( {
+export default function ListViewBlock( {
 	block,
 	isSelected,
 	isBranchSelected,
@@ -74,20 +74,20 @@ export default function BlockNavigationBlock( {
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
-		'block-editor-block-navigation-block__mover-cell',
+		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered }
 	);
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
 		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
 		isTreeGridMounted,
-	} = useBlockNavigationContext();
-	const blockNavigationBlockSettingsClassName = classnames(
-		'block-editor-block-navigation-block__menu-cell',
+	} = useListViewContext();
+	const listViewBlockSettingsClassName = classnames(
+		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered }
 	);
 
-	// If BlockNavigation has experimental features related to the Persistent List View,
+	// If ListView has experimental features related to the Persistent List View,
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
 	useEffect( () => {
@@ -100,7 +100,7 @@ export default function BlockNavigationBlock( {
 		}
 	}, [] );
 
-	// If BlockNavigation has experimental features (such as drag and drop) enabled,
+	// If ListView has experimental features (such as drag and drop) enabled,
 	// leave the focus handling as it was before, to avoid accidental regressions.
 	useEffect( () => {
 		if ( withExperimentalFeatures && isSelected ) {
@@ -132,7 +132,7 @@ export default function BlockNavigationBlock( {
 	} );
 
 	return (
-		<BlockNavigationLeaf
+		<ListViewLeaf
 			className={ classes }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
@@ -142,18 +142,18 @@ export default function BlockNavigationBlock( {
 			position={ position }
 			rowCount={ rowCount }
 			path={ path }
-			id={ `block-navigation-block-${ clientId }` }
+			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			isExpanded={ isExpanded }
 		>
 			<TreeGridCell
-				className="block-editor-block-navigation-block__contents-cell"
+				className="block-editor-list-view-block__contents-cell"
 				colSpan={ hasRenderedMovers ? undefined : 2 }
 				ref={ cellRef }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
-					<div className="block-editor-block-navigation-block__contents-container">
-						<BlockNavigationBlockContents
+					<div className="block-editor-list-view-block__contents-container">
+						<ListViewBlockContents
 							block={ block }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
@@ -201,9 +201,7 @@ export default function BlockNavigationBlock( {
 			) }
 
 			{ withExperimentalFeatures && (
-				<TreeGridCell
-					className={ blockNavigationBlockSettingsClassName }
-				>
+				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
@@ -245,6 +243,6 @@ export default function BlockNavigationBlock( {
 					) }
 				</TreeGridCell>
 			) }
-		</BlockNavigationLeaf>
+		</ListViewLeaf>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/list-view/branch.js
similarity index 90%
rename from packages/block-editor/src/components/block-navigation/branch.js
rename to packages/block-editor/src/components/list-view/branch.js
index 163eedbfb0a80..fd6361d85ac7c 100644
--- a/packages/block-editor/src/components/block-navigation/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -11,12 +11,12 @@ import { Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import BlockNavigationBlock from './block';
-import BlockNavigationAppender from './appender';
+import ListViewBlock from './block';
+import ListViewAppender from './appender';
 import { isClientIdSelected } from './utils';
-import { useBlockNavigationContext } from './context';
+import { useListViewContext } from './context';
 
-export default function BlockNavigationBranch( props ) {
+export default function ListViewBranch( props ) {
 	const {
 		blocks,
 		selectBlock,
@@ -44,7 +44,7 @@ export default function BlockNavigationBranch( props ) {
 	const rowCount = hasAppender ? blockCount + 1 : blockCount;
 	const appenderPosition = rowCount;
 
-	const { expandedState, expand, collapse } = useBlockNavigationContext();
+	const { expandedState, expand, collapse } = useListViewContext();
 
 	return (
 		<>
@@ -95,7 +95,7 @@ export default function BlockNavigationBranch( props ) {
 
 				return (
 					<Fragment key={ clientId }>
-						<BlockNavigationBlock
+						<ListViewBlock
 							block={ block }
 							onClick={ selectBlockWithClientId }
 							onToggleExpanded={ toggleExpanded }
@@ -112,7 +112,7 @@ export default function BlockNavigationBranch( props ) {
 							isExpanded={ isExpanded }
 						/>
 						{ hasNestedBranch && isExpanded && (
-							<BlockNavigationBranch
+							<ListViewBranch
 								blocks={ innerBlocks }
 								selectedBlockClientIds={
 									selectedBlockClientIds
@@ -133,7 +133,7 @@ export default function BlockNavigationBranch( props ) {
 				);
 			} ) }
 			{ hasAppender && (
-				<BlockNavigationAppender
+				<ListViewAppender
 					parentBlockClientId={ parentBlockClientId }
 					position={ rowCount }
 					rowCount={ appenderPosition }
@@ -146,6 +146,6 @@ export default function BlockNavigationBranch( props ) {
 	);
 }
 
-BlockNavigationBranch.defaultProps = {
+ListViewBranch.defaultProps = {
 	selectBlock: () => {},
 };
diff --git a/packages/block-editor/src/components/block-navigation/context.js b/packages/block-editor/src/components/list-view/context.js
similarity index 57%
rename from packages/block-editor/src/components/block-navigation/context.js
rename to packages/block-editor/src/components/list-view/context.js
index 85cde846a826a..404a1403b0947 100644
--- a/packages/block-editor/src/components/block-navigation/context.js
+++ b/packages/block-editor/src/components/list-view/context.js
@@ -3,10 +3,9 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
-export const BlockNavigationContext = createContext( {
+export const ListViewContext = createContext( {
 	__experimentalFeatures: false,
 	__experimentalPersistentListViewFeatures: false,
 } );
 
-export const useBlockNavigationContext = () =>
-	useContext( BlockNavigationContext );
+export const useListViewContext = () => useContext( ListViewContext );
diff --git a/packages/block-editor/src/components/block-navigation/editor.js b/packages/block-editor/src/components/list-view/editor.js
similarity index 68%
rename from packages/block-editor/src/components/block-navigation/editor.js
rename to packages/block-editor/src/components/list-view/editor.js
index 140758a4a797f..1d3df28a61083 100644
--- a/packages/block-editor/src/components/block-navigation/editor.js
+++ b/packages/block-editor/src/components/list-view/editor.js
@@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { RichText } from '../';
-import { BlockNavigationBlockFill } from './block-slot';
+import { ListViewBlockFill } from './block-slot';
 
-export default function BlockNavigationEditor( { value, onChange } ) {
+export default function ListViewEditor( { value, onChange } ) {
 	return (
-		<BlockNavigationBlockFill>
+		<ListViewBlockFill>
 			<RichText
 				value={ value }
 				onChange={ onChange }
@@ -24,6 +24,6 @@ export default function BlockNavigationEditor( { value, onChange } ) {
 					'core/strikethrough',
 				] }
 			/>
-		</BlockNavigationBlockFill>
+		</ListViewBlockFill>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/expander.js b/packages/block-editor/src/components/list-view/expander.js
similarity index 87%
rename from packages/block-editor/src/components/block-navigation/expander.js
rename to packages/block-editor/src/components/list-view/expander.js
index cb5ec6ab3f311..7512689b9cdb1 100644
--- a/packages/block-editor/src/components/block-navigation/expander.js
+++ b/packages/block-editor/src/components/list-view/expander.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { chevronRightSmall, Icon } from '@wordpress/icons';
-export default function BlockNavigationExpander( { onClick } ) {
+export default function ListViewExpander( { onClick } ) {
 	return (
 		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
 		//
@@ -14,7 +14,7 @@ export default function BlockNavigationExpander( { onClick } ) {
 		//
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
 		<span
-			className="block-editor-block-navigation__expander"
+			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
 		>
diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/list-view/index.js
similarity index 82%
rename from packages/block-editor/src/components/block-navigation/tree.js
rename to packages/block-editor/src/components/list-view/index.js
index ec0954d8dcbfc..c3a090c5c5209 100644
--- a/packages/block-editor/src/components/block-navigation/tree.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -16,10 +16,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BlockNavigationBranch from './branch';
-import { BlockNavigationContext } from './context';
-import useBlockNavigationClientIds from './use-block-navigation-client-ids';
-import useBlockNavigationDropZone from './use-block-navigation-drop-zone';
+import ListViewBranch from './branch';
+import { ListViewContext } from './context';
+import useListViewClientIds from './use-list-view-client-ids';
+import useListViewDropZone from './use-list-view-drop-zone';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -35,7 +35,7 @@ const expanded = ( state, action ) => {
 };
 
 /**
- * Wrap `BlockNavigationRows` with `TreeGrid`. BlockNavigationRows is a
+ * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
  * recursive component (it renders itself), so this ensures TreeGrid is only
  * present at the very top of the navigation grid.
  *
@@ -47,7 +47,7 @@ const expanded = ( state, action ) => {
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
  */
-export default function BlockNavigationTree( {
+export default function ListView( {
 	blocks,
 	showOnlyCurrentHierarchy,
 	onSelect = noop,
@@ -55,7 +55,7 @@ export default function BlockNavigationTree( {
 	__experimentalPersistentListViewFeatures,
 	...props
 } ) {
-	const { clientIdsTree, selectedClientIds } = useBlockNavigationClientIds(
+	const { clientIdsTree, selectedClientIds } = useListViewClientIds(
 		blocks,
 		showOnlyCurrentHierarchy,
 		__experimentalPersistentListViewFeatures
@@ -70,10 +70,7 @@ export default function BlockNavigationTree( {
 	);
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
-	let {
-		ref: treeGridRef,
-		target: blockDropTarget,
-	} = useBlockNavigationDropZone();
+	let { ref: treeGridRef, target: blockDropTarget } = useListViewDropZone();
 
 	const isMounted = useRef( false );
 	useEffect( () => {
@@ -126,20 +123,20 @@ export default function BlockNavigationTree( {
 
 	return (
 		<TreeGrid
-			className="block-editor-block-navigation-tree"
+			className="block-editor-list-view-tree"
 			aria-label={ __( 'Block navigation structure' ) }
 			ref={ treeGridRef }
 			onCollapseRow={ collapseRow }
 			onExpandRow={ expandRow }
 		>
-			<BlockNavigationContext.Provider value={ contextValue }>
-				<BlockNavigationBranch
+			<ListViewContext.Provider value={ contextValue }>
+				<ListViewBranch
 					blocks={ clientIdsTree }
 					selectBlock={ selectEditorBlock }
 					selectedBlockClientIds={ selectedClientIds }
 					{ ...props }
 				/>
-			</BlockNavigationContext.Provider>
+			</ListViewContext.Provider>
 		</TreeGrid>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/leaf.js b/packages/block-editor/src/components/list-view/leaf.js
similarity index 85%
rename from packages/block-editor/src/components/block-navigation/leaf.js
rename to packages/block-editor/src/components/list-view/leaf.js
index d7fa8d58feb9a..9a2409d141e19 100644
--- a/packages/block-editor/src/components/block-navigation/leaf.js
+++ b/packages/block-editor/src/components/list-view/leaf.js
@@ -16,7 +16,7 @@ import useMovingAnimation from '../use-moving-animation';
 
 const AnimatedTreeGridRow = animated( TreeGridRow );
 
-export default function BlockNavigationLeaf( {
+export default function ListViewLeaf( {
 	isSelected,
 	position,
 	level,
@@ -36,10 +36,7 @@ export default function BlockNavigationLeaf( {
 	return (
 		<AnimatedTreeGridRow
 			ref={ ref }
-			className={ classnames(
-				'block-editor-block-navigation-leaf',
-				className
-			) }
+			className={ classnames( 'block-editor-list-view-leaf', className ) }
 			level={ level }
 			positionInSet={ position }
 			setSize={ rowCount }
diff --git a/packages/block-editor/src/components/block-navigation/list-item.js b/packages/block-editor/src/components/list-view/list-item.js
similarity index 83%
rename from packages/block-editor/src/components/block-navigation/list-item.js
rename to packages/block-editor/src/components/list-view/list-item.js
index 965f2d648e8b0..f278cedeac391 100644
--- a/packages/block-editor/src/components/block-navigation/list-item.js
+++ b/packages/block-editor/src/components/list-view/list-item.js
@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockNavigationListItem( {
+export default function ListViewListItem( {
 	block,
 	onClick,
 	isSelected,
@@ -28,10 +28,10 @@ export default function BlockNavigationListItem( {
 	const blockType = getBlockType( block.name );
 
 	return (
-		<div className="block-editor-block-navigation__list-item">
+		<div className="block-editor-list-view__list-item">
 			<WrapperComponent
 				className={ classnames(
-					'block-editor-block-navigation__list-item-button',
+					'block-editor-list-view__list-item-button',
 					{
 						'is-selected': isSelected,
 					}
@@ -52,7 +52,7 @@ export default function BlockNavigationListItem( {
 	);
 }
 
-BlockNavigationListItem.defaultProps = {
+ListViewListItem.defaultProps = {
 	onClick: () => {},
 	wrapperComponent: ( props ) => <Button { ...props } />,
 };
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
new file mode 100644
index 0000000000000..2c747b5309aad
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -0,0 +1,320 @@
+.block-editor-list-view-tree {
+	width: 100%;
+	border-collapse: collapse;
+	padding: 0;
+	margin: 0;
+
+	// Move upwards when in modal.
+	.components-modal__content & {
+		margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
+		width: calc(100% + #{ $grid-unit-15 });
+	}
+}
+
+.block-editor-list-view-leaf {
+	// Use position relative for row animation.
+	position: relative;
+
+	&.is-selected .block-editor-list-view-block-contents {
+		background: var(--wp-admin-theme-color);
+		color: $white;
+	}
+	&.is-selected .block-editor-list-view-block-contents:focus {
+		box-shadow:
+			inset 0 0 0 1px $white,
+			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
+		border-radius: 2px 2px 0 0;
+	}
+
+	&[aria-expanded="false"] {
+		&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
+			border-radius: 2px;
+		}
+	}
+	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
+		// Lighten a CSS variable without introducing a new SASS variable
+		background:
+			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
+			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+		border-radius: 0;
+	}
+	&.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
+		border-radius: 0 0 2px 2px;
+	}
+
+	&.is-dragging {
+		display: none;
+	}
+
+	.block-editor-list-view-block-contents {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: auto;
+		padding: ($grid-unit-15 / 2) $grid-unit-15 ($grid-unit-15 / 2) 0;
+		text-align: left;
+		color: $gray-900;
+		border-radius: 2px;
+		position: relative;
+		white-space: nowrap;
+
+		&:hover,
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+		&:focus {
+			z-index: 1;
+		}
+
+		&.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);
+		}
+
+		&.is-dropping-after::before {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			bottom: -2px;
+			right: 0;
+			left: 0;
+			border-bottom: 4px solid var(--wp-admin-theme-color);
+		}
+
+		&.is-dropping-to-inner-blocks::before {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+			bottom: -2px;
+			right: 0;
+			left: $icon-size;
+			border-bottom: 4px solid var(--wp-admin-theme-color);
+		}
+
+		.components-modal__content & {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+	&.is-visible .block-editor-list-view-block-contents {
+		opacity: 1;
+		@include edit-post__fade-in-animation;
+	}
+
+	.block-editor-block-icon {
+		align-self: flex-start;
+		margin-right: $grid-unit-10;
+		width: $icon-size;
+	}
+
+	.block-editor-list-view-block__menu-cell,
+	.block-editor-list-view-block__mover-cell,
+	.block-editor-list-view-block__contents-cell {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	.block-editor-list-view-block__menu-cell,
+	.block-editor-list-view-block__mover-cell {
+		line-height: 0;
+		width: $button-size;
+		opacity: 0;
+		vertical-align: top;
+		@include reduce-motion("transition");
+
+		// Show on hover, visible, and show above to keep the hit area size.
+		&:hover,
+		&.is-visible {
+			position: relative;
+			z-index: 1;
+			opacity: 1;
+			@include edit-post__fade-in-animation;
+		}
+
+		&,
+		.components-button.has-icon {
+			width: 24px;
+			min-width: 24px;
+			padding: 0;
+		}
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-top: $grid-unit-10;
+	}
+
+	.block-editor-list-view-block__mover-cell-alignment-wrapper {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	// Keep the tap target large but the focus target small.
+	.block-editor-block-mover-button {
+		position: relative;
+		width: $button-size;
+		height: $button-size-small;
+
+		// Position the icon.
+		svg {
+			position: relative;
+			height: $button-size-small;
+		}
+
+		&.is-up-button {
+			margin-top: -$grid-unit-15 / 2;
+			align-items: flex-end;
+			svg {
+				bottom: -$grid-unit-05;
+			}
+		}
+
+		&.is-down-button {
+			margin-bottom: -$grid-unit-15 / 2;
+			align-items: flex-start;
+			svg {
+				top: -$grid-unit-05;
+			}
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus:enabled {
+			box-shadow: none;
+			outline: none;
+		}
+
+		// Focus style.
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus::before {
+			@include block-toolbar-button-style__focus();
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-block-ui;
+			height: 16px;
+			min-width: 100%;
+
+			// Position the focus rectangle.
+			left: 0;
+			right: 0;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+	}
+
+	.block-editor-inserter__toggle {
+		background: $gray-900;
+		color: $white;
+		height: $grid-unit-30;
+		margin: 6px 6px 6px 1px;
+		min-width: $grid-unit-30;
+
+		&:active {
+			color: $white;
+		}
+	}
+
+	.block-editor-list-view-block-select-button__anchor {
+		background: rgba($black, 0.1);
+		border-radius: $radius-block-ui;
+		display: inline-block;
+		padding: 2px 6px;
+		margin: 0 $grid-unit-10;
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&.is-selected .block-editor-list-view-block-select-button__anchor {
+		background: rgba($black, 0.3);
+	}
+}
+
+.block-editor-list-view-block-slot__description,
+.block-editor-list-view-block-select-button__description,
+.block-editor-list-view-appender__description {
+	display: none;
+}
+
+.block-editor-list-view-block__contents-cell,
+.block-editor-list-view-appender__cell {
+	.block-editor-list-view-block__contents-container,
+	.block-editor-list-view-appender__container {
+		display: flex;
+	}
+}
+
+// Chevron container metrics.
+.block-editor-list-view__expander {
+	height: $icon-size;
+	margin-left: $grid-unit-05;
+	width: $icon-size;
+}
+
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+.block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
+	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+}
+
+.block-editor-list-view-leaf:not([aria-level="1"]) {
+	.block-editor-list-view__expander {
+		margin-right: 4px;
+	}
+}
+
+@for $i from 0 to $block-navigation-max-indent {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+		@if $i - 1 >= 0 {
+			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
+		}
+		@else {
+			margin-left: ( $icon-size * $i );
+		}
+	}
+}
+
+.block-editor-list-view-leaf .block-editor-list-view__expander {
+	visibility: hidden;
+}
+
+// Point downwards when open.
+.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+	visibility: visible;
+	transition: transform 0.2s ease;
+	transform: rotate(90deg);
+	@include reduce-motion("transition");
+}
+
+// Point rightwards when closed
+.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+	visibility: visible;
+	transform: rotate(0deg);
+	transition: transform 0.2s ease;
+	@include reduce-motion("transition");
+}
diff --git a/packages/block-editor/src/components/block-navigation/use-block-navigation-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
similarity index 87%
rename from packages/block-editor/src/components/block-navigation/use-block-navigation-client-ids.js
rename to packages/block-editor/src/components/list-view/use-list-view-client-ids.js
index e68cadf582de8..4e71ffe323c90 100644
--- a/packages/block-editor/src/components/block-navigation/use-block-navigation-client-ids.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 
-const useBlockNavigationSelectedClientIds = (
+const useListViewSelectedClientIds = (
 	__experimentalPersistentListViewFeatures
 ) =>
 	useSelect(
@@ -29,7 +29,7 @@ const useBlockNavigationSelectedClientIds = (
 		[ __experimentalPersistentListViewFeatures ]
 	);
 
-const useBlockNavigationClientIdsTree = (
+const useListViewClientIdsTree = (
 	blocks,
 	selectedClientIds,
 	showOnlyCurrentHierarchy
@@ -71,15 +71,15 @@ const useBlockNavigationClientIdsTree = (
 		[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
 	);
 
-export default function useBlockNavigationClientIds(
+export default function useListViewClientIds(
 	blocks,
 	showOnlyCurrentHierarchy,
 	__experimentalPersistentListViewFeatures
 ) {
-	const selectedClientIds = useBlockNavigationSelectedClientIds(
+	const selectedClientIds = useListViewSelectedClientIds(
 		__experimentalPersistentListViewFeatures
 	);
-	const clientIdsTree = useBlockNavigationClientIdsTree(
+	const clientIdsTree = useListViewClientIdsTree(
 		blocks,
 		selectedClientIds,
 		showOnlyCurrentHierarchy
diff --git a/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
similarity index 90%
rename from packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js
rename to packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
index 94b1e938e9a37..b3e25752ab7df 100644
--- a/packages/block-editor/src/components/block-navigation/use-block-navigation-drop-zone.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
@@ -26,7 +26,7 @@ import { store as blockEditorStore } from '../../store';
 /**
  * An array representing data for blocks in the DOM used by drag and drop.
  *
- * @typedef {Object} WPBlockNavigationDropZoneBlocks
+ * @typedef {Object} WPListViewDropZoneBlocks
  * @property {string}  clientId                        The client id for the block.
  * @property {string}  rootClientId                    The root client id for the block.
  * @property {number}  blockIndex                      The block's index.
@@ -40,7 +40,7 @@ import { store as blockEditorStore } from '../../store';
 /**
  * An object containing details of a drop target.
  *
- * @typedef {Object} WPBlockNavigationDropZoneTarget
+ * @typedef {Object} WPListViewDropZoneTarget
  * @property {string}                  blockIndex   The insertion index.
  * @property {string}                  rootClientId The root client id for the block.
  * @property {string|undefined}        clientId     The client id for the block.
@@ -87,12 +87,12 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
 /**
  * Given blocks data and the cursor position, compute the drop target.
  *
- * @param {WPBlockNavigationDropZoneBlocks} blocksData Data about the blocks in block navigation.
- * @param {WPPoint}                         position   The point representing the cursor position when dragging.
+ * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
+ * @param {WPPoint}                  position   The point representing the cursor position when dragging.
  *
- * @return {WPBlockNavigationDropZoneTarget} An object containing data about the drop target.
+ * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
  */
-function getBlockNavigationDropTarget( blocksData, position ) {
+function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
@@ -143,7 +143,7 @@ function getBlockNavigationDropTarget( blocksData, position ) {
 			// as the user would intend to drop either before or after
 			// this block.
 			//
-			// This solves an issue where some rows in the block navigation
+			// This solves an issue where some rows in the list view
 			// tree overlap slightly due to sub-pixel rendering.
 			if ( isCursorWithinBlock ) {
 				break;
@@ -190,11 +190,11 @@ function getBlockNavigationDropTarget( blocksData, position ) {
 }
 
 /**
- * A react hook for implementing a drop zone in block navigation.
+ * A react hook for implementing a drop zone in list view.
  *
- * @return {WPBlockNavigationDropZoneTarget} The drop target.
+ * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useBlockNavigationDropZone() {
+export default function useListViewDropZone() {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -242,10 +242,7 @@ export default function useBlockNavigationDropZone() {
 				};
 			} );
 
-			const newTarget = getBlockNavigationDropTarget(
-				blocksData,
-				position
-			);
+			const newTarget = getListViewDropTarget( blocksData, position );
 
 			if ( newTarget ) {
 				setTarget( newTarget );
diff --git a/packages/block-editor/src/components/block-navigation/utils.js b/packages/block-editor/src/components/list-view/utils.js
similarity index 100%
rename from packages/block-editor/src/components/block-navigation/utils.js
rename to packages/block-editor/src/components/list-view/utils.js
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 63e1941e17a2d..036ff345a8ccd 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -70,7 +70,7 @@ export function BorderColorEdit( props ) {
 
 	return (
 		<ColorGradientControl
-			label={ __( 'Border color' ) }
+			label={ __( 'Color' ) }
 			value={ borderColor || style?.border?.color }
 			colors={ colors }
 			gradients={ undefined }
diff --git a/packages/block-editor/src/hooks/border-radius.js b/packages/block-editor/src/hooks/border-radius.js
index d8d614891de64..fe734f05144f8 100644
--- a/packages/block-editor/src/hooks/border-radius.js
+++ b/packages/block-editor/src/hooks/border-radius.js
@@ -1,21 +1,8 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalParseUnit as parseUnit,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
+import BorderRadiusControl from '../components/border-radius-control';
 import { cleanEmptyObject } from './utils';
-import useSetting from '../components/use-setting';
-
-const MIN_BORDER_RADIUS_VALUE = 0;
 
 /**
  * Inspector control panel containing the border radius related configuration.
@@ -30,16 +17,6 @@ export function BorderRadiusEdit( props ) {
 		setAttributes,
 	} = props;
 
-	// Step value is maintained in state so step is appropriate for current unit
-	// even when current radius value is undefined.
-	const initialStep =
-		parseUnit( style?.border?.radius )[ 1 ] === 'px' ? 1 : 0.25;
-	const [ step, setStep ] = useState( initialStep );
-
-	const onUnitChange = ( newUnit ) => {
-		setStep( newUnit === 'px' ? 1 : 0.25 );
-	};
-
 	const onChange = ( newRadius ) => {
 		let newStyle = {
 			...style,
@@ -56,19 +33,10 @@ export function BorderRadiusEdit( props ) {
 		setAttributes( { style: newStyle } );
 	};
 
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
-	} );
-
 	return (
-		<UnitControl
-			value={ style?.border?.radius }
-			label={ __( 'Border radius' ) }
-			min={ MIN_BORDER_RADIUS_VALUE }
+		<BorderRadiusControl
+			values={ style?.border?.radius }
 			onChange={ onChange }
-			onUnitChange={ onUnitChange }
-			step={ step }
-			units={ units }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js
index e5662f5746354..88c4976925980 100644
--- a/packages/block-editor/src/hooks/border-width.js
+++ b/packages/block-editor/src/hooks/border-width.js
@@ -4,9 +4,7 @@
 import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalParseUnit as parseUnit,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -30,16 +28,6 @@ export const BorderWidthEdit = ( props ) => {
 		setAttributes,
 	} = props;
 
-	// Step value is maintained in state so step is appropriate for current unit
-	// even when current radius value is undefined.
-	const initialStep =
-		parseUnit( style?.border?.width )[ 1 ] === 'px' ? 1 : 0.25;
-	const [ step, setStep ] = useState( initialStep );
-
-	const onUnitChange = ( newUnit ) => {
-		setStep( newUnit === 'px' ? 1 : 0.25 );
-	};
-
 	const onChange = ( newWidth ) => {
 		let newStyle = {
 			...style,
@@ -57,17 +45,15 @@ export const BorderWidthEdit = ( props ) => {
 	};
 
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
 
 	return (
 		<UnitControl
 			value={ style?.border?.width }
-			label={ __( 'Border width' ) }
+			label={ __( 'Width' ) }
 			min={ MIN_BORDER_WIDTH }
 			onChange={ onChange }
-			onUnitChange={ onUnitChange }
-			step={ step }
 			units={ units }
 		/>
 	);
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index d14633975a88a..64872c5c470f0 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -46,13 +46,17 @@ export function BorderPanel( props ) {
 		<InspectorControls>
 			<PanelBody
 				className="block-editor-hooks__border-controls"
-				title={ __( 'Border settings' ) }
+				title={ __( 'Border' ) }
 				initialOpen={ false }
 			>
-				{ isStyleSupported && <BorderStyleEdit { ...props } /> }
-				{ isWidthSupported && <BorderWidthEdit { ...props } /> }
-				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
+				{ ( isWidthSupported || isStyleSupported ) && (
+					<div className="block-editor-hooks__border-controls-row">
+						{ isWidthSupported && <BorderWidthEdit { ...props } /> }
+						{ isStyleSupported && <BorderStyleEdit { ...props } /> }
+					</div>
+				) }
 				{ isColorSupported && <BorderColorEdit { ...props } /> }
+				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-editor/src/hooks/border.scss b/packages/block-editor/src/hooks/border.scss
index 61d75c5945463..6c859252afc34 100644
--- a/packages/block-editor/src/hooks/border.scss
+++ b/packages/block-editor/src/hooks/border.scss
@@ -1,4 +1,13 @@
 .block-editor-hooks__border-controls {
+	.block-editor-hooks__border-controls-row {
+		display: flex;
+		justify-content: space-between;
+
+		> * {
+			width: calc(50% - #{ $grid-unit-10 });
+		}
+	}
+
 	.components-unit-control-wrapper {
 		margin-bottom: $grid-unit-30;
 
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 2ae0f9b319f79..2651521bd4574 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -39,7 +39,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
 	}, [] );
 
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [
+		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
 			'px',
 			'em',
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index a3c9a9f055b34..b1c9b25b8e5ae 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -30,6 +30,7 @@
 @import "./components/block-variation-picker/style.scss";
 @import "./components/block-pattern-setup/style.scss";
 @import "./components/block-variation-transforms/style.scss";
+@import "./components/border-radius-control/style.scss";
 @import "./components/border-style-control/style.scss";
 @import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
@@ -43,6 +44,7 @@
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 62ed002f5d028..21549ecbb8936 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -7,6 +7,10 @@
 -   Removes the `core/legacy-widget` block. This is now in `@wordpress/widgets`
 	via `registerLegacyWidgetBlock()`.
 
+## Bug Fixes
+
+-   Include missing attributes when upgrading embed block ([#33235](https://github.com/WordPress/gutenberg/pull/33235))
+
 ## 3.2.0 (2021-05-24)
 
 ### New Features
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index d4fb5862c80d4..923ed47282efb 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -184,7 +184,7 @@ class ButtonEdit extends Component {
 	}
 
 	getBackgroundColor() {
-		const { attributes, colors, gradients } = this.props;
+		const { attributes, colors, gradients, style } = this.props;
 		const { backgroundColor, gradient } = attributes;
 
 		// Return named gradient value if available.
@@ -207,12 +207,13 @@ class ButtonEdit extends Component {
 			colorObject?.color ||
 			colorProps.style?.backgroundColor ||
 			colorProps.style?.background ||
+			style?.backgroundColor ||
 			styles.defaultButton.backgroundColor
 		);
 	}
 
 	getTextColor() {
-		const { attributes, colors } = this.props;
+		const { attributes, colors, style } = this.props;
 		const colorProps = getColorClassesAndStyles( attributes );
 
 		// Retrieve named color object to force inline styles for themes that
@@ -225,6 +226,7 @@ class ButtonEdit extends Component {
 		return (
 			colorObject?.color ||
 			colorProps.style?.color ||
+			style?.color ||
 			styles.defaultButton.color
 		);
 	}
@@ -375,11 +377,12 @@ class ButtonEdit extends Component {
 			mergeBlocks,
 			parentWidth,
 			setAttributes,
+			style,
 		} = this.props;
 		const {
 			placeholder,
 			text,
-			style,
+			style: buttonStyle,
 			url,
 			align = 'center',
 			width,
@@ -391,7 +394,7 @@ class ButtonEdit extends Component {
 			return null;
 		}
 
-		const borderRadius = style?.border?.radius;
+		const borderRadius = buttonStyle?.border?.radius;
 
 		const borderRadiusValue = Number.isInteger( borderRadius )
 			? borderRadius
@@ -463,7 +466,7 @@ class ButtonEdit extends Component {
 						} }
 						textAlign={ align }
 						placeholderTextColor={
-							styles.placeholderTextColor.color
+							style?.color || styles.placeholderTextColor.color
 						}
 						identifier="text"
 						tagName="p"
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index ae8d3083e2f01..ebd91ee0b4925 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -34,7 +34,7 @@ function ColumnEdit( {
 	} );
 
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [
+		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
 			'px',
 			'em',
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
index b596bd50ac43a..56889f65496a6 100644
--- a/packages/block-library/src/column/edit.native.js
+++ b/packages/block-library/src/column/edit.native.js
@@ -62,7 +62,7 @@ function ColumnEdit( {
 	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
 
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [
+		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
 			'px',
 			'em',
diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
index 7beba9942dc70..ef937134a43c3 100644
--- a/packages/block-library/src/column/editor.native.scss
+++ b/packages/block-library/src/column/editor.native.scss
@@ -5,13 +5,11 @@
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;
-	background-color: $white;
 	border: $border-width dashed $gray;
 	border-radius: 4px;
 }
 
 .columnPlaceholderDark {
-	background-color: $black;
 	border: $border-width dashed $gray-70;
 }
 
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index f3bc49d3d2497..79b82f4b7a595 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -8,6 +8,10 @@
 	"attributes": {
 		"verticalAlignment": {
 			"type": "string"
+		},
+		"isStackedOnMobile": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index 34b3076904a63..8c3f7a27d2b6d 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -52,6 +52,7 @@ const migrateCustomColors = ( attributes ) => {
 	return {
 		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
+		isStackedOnMobile: true,
 	};
 };
 
@@ -166,7 +167,13 @@ export default [
 				createBlock( 'core/column', {}, columnBlocks )
 			);
 
-			return [ omit( attributes, [ 'columns' ] ), migratedInnerBlocks ];
+			return [
+				{
+					...omit( attributes, [ 'columns' ] ),
+					isStackedOnMobile: true,
+				},
+				migratedInnerBlocks,
+			];
 		},
 		save( { attributes } ) {
 			const { columns } = attributes;
@@ -186,7 +193,10 @@ export default [
 			},
 		},
 		migrate( attributes, innerBlocks ) {
-			attributes = omit( attributes, [ 'columns' ] );
+			attributes = {
+				...omit( attributes, [ 'columns' ] ),
+				isStackedOnMobile: true,
+			};
 
 			return [ attributes, innerBlocks ];
 		},
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 0f77c3f843dbe..35534d503bb72 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -8,7 +8,12 @@ import { dropRight, get, times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, RangeControl, Notice } from '@wordpress/components';
+import {
+	Notice,
+	PanelBody,
+	RangeControl,
+	ToggleControl,
+} from '@wordpress/components';
 
 import {
 	InspectorControls,
@@ -49,11 +54,12 @@ const ALLOWED_BLOCKS = [ 'core/column' ];
 
 function ColumnsEditContainer( {
 	attributes,
+	setAttributes,
 	updateAlignment,
 	updateColumns,
 	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -66,6 +72,7 @@ function ColumnsEditContainer( {
 
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
 	const blockProps = useBlockProps( {
@@ -101,6 +108,15 @@ function ColumnsEditContainer( {
 							) }
 						</Notice>
 					) }
+					<ToggleControl
+						label={ __( 'Stack on mobile' ) }
+						checked={ isStackedOnMobile }
+						onChange={ () =>
+							setAttributes( {
+								isStackedOnMobile: ! isStackedOnMobile,
+							} )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index b387febedf369..b087830dd9606 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -107,7 +107,7 @@ function ColumnsEditContainer( {
 	const { width } = sizes || {};
 
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'layout.units' ) || [
+		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
 			'px',
 			'em',
@@ -442,7 +442,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 )( memo( ColumnsEditContainer ) );
 
 const ColumnsEdit = ( props ) => {
-	const { clientId, isSelected } = props;
+	const { clientId, isSelected, style } = props;
 	const {
 		columnCount,
 		isDefaultColumns,
@@ -505,7 +505,7 @@ const ColumnsEdit = ( props ) => {
 	}, [] );
 
 	return (
-		<>
+		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
 				innerWidths={ memoizedInnerWidths }
@@ -520,7 +520,7 @@ const ColumnsEdit = ( props ) => {
 				clientId={ clientId }
 				isVisible={ isVisible }
 			/>
-		</>
+		</View>
 	);
 };
 
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index a9826c1008989..3c80d0edc21f5 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -9,10 +9,11 @@ import classnames from 'classnames';
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment } = attributes;
 
 	const className = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
 	return (
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index dc744f46eb2db..aba4c99297a19 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -28,17 +28,82 @@
 	&.are-vertically-aligned-bottom {
 		align-items: flex-end;
 	}
+
+	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
+		@media (max-width: #{ ($break-small - 1) }) {
+			// Responsiveness: Show at most one columns on mobile. This must be
+			// important since the Column assigns its own width as an inline style.
+			flex-basis: 100% !important;
+		}
+
+		// Between mobile and large viewports, allow 2 columns.
+		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
+			// Only add two column styling if there are two or more columns
+			&:not(:only-child) {
+				// As with mobile styles, this must be important since the Column
+				// assigns its own width as an inline style, which should take effect
+				// starting at `break-medium`.
+				flex-basis: calc(50% - 1em) !important;
+				flex-grow: 0;
+			}
+
+			// Add space between the multiple columns. Themes can customize this if they wish to work differently.
+			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
+			&:nth-child(even) {
+				margin-left: 2em;
+			}
+		}
+
+		// At large viewports, show all columns horizontally.
+		@include break-medium() {
+			// Available space should be divided equally amongst columns without an
+			// assigned width. This is achieved by assigning a flex basis that is
+			// consistent (equal), would not cause the sum total of column widths to
+			// exceed 100%, and which would cede to a column with an assigned width.
+			// The `flex-grow` allows columns to maximally and equally occupy space
+			// remaining after subtracting the space occupied by columns with
+			// explicit widths (if any exist).
+			flex-basis: 0;
+			flex-grow: 1;
+
+			// Columns with an explicitly-assigned width should maintain their
+			// `flex-basis` width and not grow.
+			&[style*="flex-basis"] {
+				flex-grow: 0;
+			}
+
+			// When columns are in a single row, add space before all except the first.
+			&:not(:first-child) {
+				margin-left: 2em;
+			}
+		}
+	}
+
+	&.is-not-stacked-on-mobile {
+		flex-wrap: nowrap;
+
+		> .wp-block-column {
+			// Available space should be divided equally amongst columns.
+			flex-basis: 0;
+			flex-grow: 1;
+
+			// Columns with an explicitly-assigned width should maintain their
+			// `flex-basis` width and not grow.
+			&[style*="flex-basis"] {
+				flex-grow: 0;
+			}
+
+			// When columns are in a single row, add space before all except the first.
+			&:not(:first-child) {
+				margin-left: 2em;
+			}
+		}
+	}
 }
 
 .wp-block-column {
 	flex-grow: 1;
 
-	@media (max-width: #{ ($break-small - 1) }) {
-		// Responsiveness: Show at most one columns on mobile. This must be
-		// important since the Column assigns its own width as an inline style.
-		flex-basis: 100% !important;
-	}
-
 	// Prevent the columns from growing wider than their distributed sizes.
 	min-width: 0;
 
@@ -46,48 +111,6 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
-	// Between mobile and large viewports, allow 2 columns.
-	@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-		// Only add two column styling if there are two or more columns
-		&:not(:only-child) {
-			// As with mobile styles, this must be important since the Column
-			// assigns its own width as an inline style, which should take effect
-			// starting at `break-medium`.
-			flex-basis: calc(50% - 1em) !important;
-			flex-grow: 0;
-		}
-
-		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
-		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
-		&:nth-child(even) {
-			margin-left: 2em;
-		}
-	}
-
-	// At large viewports, show all columns horizontally.
-	@include break-medium() {
-		// Available space should be divided equally amongst columns without an
-		// assigned width. This is achieved by assigning a flex basis that is
-		// consistent (equal), would not cause the sum total of column widths to
-		// exceed 100%, and which would cede to a column with an assigned width.
-		// The `flex-grow` allows columns to maximally and equally occupy space
-		// remaining after subtracting the space occupied by columns with
-		// explicit widths (if any exist).
-		flex-basis: 0;
-		flex-grow: 1;
-
-		// Columns with an explicitly-assigned width should maintain their
-		// `flex-basis` width and not grow.
-		&[style*="flex-basis"] {
-			flex-grow: 0;
-		}
-
-		// When columns are in a single row, add space before all except the first.
-		&:not(:first-child) {
-			margin-left: 2em;
-		}
-	}
-
 	/**
 	* Individual Column Alignment
 	*/
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 66b65a05fc3ee..73eb8a5308be4 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -84,10 +84,7 @@ const EmbedEdit = ( props ) => {
 				return { fetching: false, cannotEmbed: false };
 			}
 
-			const embedPreview = Platform.select( {
-				web: getEmbedPreview( attributesUrl ),
-				native: attributesUrl,
-			} );
+			const embedPreview = getEmbedPreview( attributesUrl );
 			const previewIsFallback = isPreviewEmbedFallback( attributesUrl );
 
 			// The external oEmbed provider does not exist. We got no type info and no html.
@@ -97,7 +94,10 @@ const EmbedEdit = ( props ) => {
 			// Some WordPress URLs that can't be embedded will cause the API to return
 			// a valid JSON response with no HTML and `data.status` set to 404, rather
 			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.data?.status === 404;
+			const wordpressCantEmbed = Platform.select( {
+				web: embedPreview?.data?.status === 404,
+				native: embedPreview?.code === '404',
+			} );
 			const validPreview =
 				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
 			return {
@@ -238,6 +238,7 @@ const EmbedEdit = ( props ) => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
 					} }
 					isSelected={ isSelected }
+					isEditingURL={ isEditingURL }
 				/>
 			</View>
 		);
diff --git a/packages/block-library/src/embed/embed-bottom-sheet.native.js b/packages/block-library/src/embed/embed-bottom-sheet.native.js
index 473961b5a9778..754cfc1816e93 100644
--- a/packages/block-library/src/embed/embed-bottom-sheet.native.js
+++ b/packages/block-library/src/embed/embed-bottom-sheet.native.js
@@ -41,9 +41,16 @@ const EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {
 				createErrorNotice(
 					__( 'Invalid URL. Please enter a valid URL.' )
 				);
+				// If the URL was already defined, we submit it to stop showing the embed placeholder.
+				if ( value !== '' ) {
+					onSubmit( value );
+				}
 			}
+		} else if ( value !== '' ) {
+			// Resets the URL when new value is empty and URL was already defined.
+			onSubmit( '' );
 		}
-	}, [ url, onSubmit ] );
+	}, [ url, onSubmit, value ] );
 
 	function setAttributes( attributes ) {
 		setURL( attributes.url );
diff --git a/packages/block-library/src/embed/embed-loading.native.js b/packages/block-library/src/embed/embed-loading.native.js
index 7d1ec0c029a5a..4591a4a499852 100644
--- a/packages/block-library/src/embed/embed-loading.native.js
+++ b/packages/block-library/src/embed/embed-loading.native.js
@@ -1,8 +1,36 @@
+/**
+ * External dependencies
+ */
+import { ActivityIndicator, View, Platform, PlatformColor } from 'react-native';
+
 /**
  * WordPress dependencies
  */
-import { Spinner } from '@wordpress/components';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const EmbedLoading = () => {
+	const style = usePreferredColorSchemeStyle(
+		styles[ 'embed-preview__loading' ],
+		styles[ 'embed-preview__loading--dark' ]
+	);
+
+	const activityIndicatorColor = Platform.select( {
+		ios: '#999999', // default color on iOS
+		// ActivityIndicator is blank and does not show up unless explicit color prop is provided.
+		// See https://github.com/facebook/react-native/pull/30057
+		android: PlatformColor( '?attr/colorControlActivated' ),
+	} );
 
-const EmbedLoading = () => <Spinner />;
+	return (
+		<View style={ style }>
+			<ActivityIndicator animating color={ activityIndicatorColor } />
+		</View>
+	);
+};
 
 export default EmbedLoading;
diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
index 043fd22c36862..186203f589683 100644
--- a/packages/block-library/src/embed/embed-placeholder.native.js
+++ b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -23,11 +23,13 @@ import styles from './styles.scss';
 
 const EmbedPlaceholder = ( {
 	icon,
+	isEditingURL,
 	isSelected,
 	label,
 	onFocus,
 	value,
 	onSubmit,
+	cannotEmbed,
 } ) => {
 	const { clientId } = useBlockEditContext();
 	const { wasBlockJustInserted } = useSelect(
@@ -39,7 +41,7 @@ const EmbedPlaceholder = ( {
 		[ clientId ]
 	);
 	const [ isEmbedSheetVisible, setIsEmbedSheetVisible ] = useState(
-		isSelected && wasBlockJustInserted && ! value
+		isSelected && ( ( wasBlockJustInserted && ! value ) || isEditingURL )
 	);
 
 	const containerStyle = usePreferredColorSchemeStyle(
@@ -64,9 +66,24 @@ const EmbedPlaceholder = ( {
 				<View style={ containerStyle }>
 					<View style={ styles.embed__icon }>{ icon }</View>
 					<Text style={ labelStyle }>{ label }</Text>
-					<Text style={ styles[ 'embed-empty__description' ] }>
-						{ __( 'ADD LINK' ) }
-					</Text>
+					{ cannotEmbed ? (
+						<>
+							<Text style={ labelStyle }>
+								{ __(
+									'Sorry, this content could not be embedded.'
+								) }
+							</Text>
+							<Text
+								style={ styles[ 'embed-empty__description' ] }
+							>
+								{ __( 'EDIT LINK' ) }
+							</Text>
+						</>
+					) : (
+						<Text style={ styles[ 'embed-empty__description' ] }>
+							{ __( 'ADD LINK' ) }
+						</Text>
+					) }
 				</View>
 			</TouchableWithoutFeedback>
 			<EmbedBottomSheet
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
index 99d752affd337..6ba4b79f8ed05 100644
--- a/packages/block-library/src/embed/embed-preview.native.js
+++ b/packages/block-library/src/embed/embed-preview.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableWithoutFeedback, Text } from 'react-native';
+import { TouchableWithoutFeedback, Image, Text } from 'react-native';
 import { isEmpty } from 'lodash';
 
 /**
@@ -28,6 +28,8 @@ const EmbedPreview = ( {
 	onBlur,
 	onFocus,
 	preview,
+	previewable,
+	url,
 } ) => {
 	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
 	const containerStyle = usePreferredColorSchemeStyle(
@@ -67,7 +69,18 @@ const EmbedPreview = ( {
 		}
 	}
 
-	// Currently returning a Text component that act's as the Embed Preview to simulate the caption's isSelected state.
+	const parsedHost = new URL( url ).host.split( '.' );
+	const parsedHostBaseUrl = parsedHost
+		.splice( parsedHost.length - 2, parsedHost.length - 1 )
+		.join( '.' );
+
+	const cannotShowThumbnail =
+		! previewable ||
+		! preview ||
+		! preview.thumbnail_url?.length ||
+		! preview.height ||
+		! preview.width;
+
 	return (
 		<TouchableWithoutFeedback
 			accessible={ ! isSelected }
@@ -75,11 +88,32 @@ const EmbedPreview = ( {
 			disabled={ ! isSelected }
 		>
 			<View>
-				<View style={ containerStyle }>
-					<View style={ styles.embed__icon }>{ icon }</View>
-					<Text style={ labelStyle }>{ label }</Text>
-					<Text style={ placeholderTextStyle }>{ preview }</Text>
-				</View>
+				{ cannotShowThumbnail ? (
+					<View style={ containerStyle }>
+						<View style={ styles.embed__icon }>{ icon }</View>
+						<Text style={ labelStyle }>{ label }</Text>
+						<Text style={ placeholderTextStyle }>
+							{ sprintf(
+								/* translators: %s: host providing embed content e.g: www.youtube.com */
+								__(
+									"Embedded content from %s can't be viewed in the mobile editor at the moment. Please preview the page to see the embedded content."
+								),
+								parsedHostBaseUrl
+							) }
+						</Text>
+					</View>
+				) : (
+					<Image
+						style={ {
+							flex: 1,
+							aspectRatio: preview.width / preview.height,
+						} }
+						source={ {
+							uri: preview.thumbnail_url,
+						} }
+						resizeMode="cover"
+					/>
+				) }
 				<BlockCaption
 					accessibilityLabelCreator={ accessibilityLabelCreator }
 					accessible
diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
index 69e8a39434252..cae4899e75461 100644
--- a/packages/block-library/src/embed/styles.native.scss
+++ b/packages/block-library/src/embed/styles.native.scss
@@ -47,6 +47,21 @@
 	font-weight: 500;
 }
 
+.embed-preview__loading {
+	flex: 1;
+	padding-left: 12px;
+	padding-right: 12px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: $gray-lighten-30;
+	justify-content: center;
+	align-items: center;
+}
+
+.embed-preview__loading--dark {
+	background-color: $background-dark-secondary;
+}
+
 .embed-preview__placeholder-text {
 	font-size: $default-font-size;
 	text-align: center;
diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js
index 49e98b015ba9e..960e294856f8b 100644
--- a/packages/block-library/src/embed/util.js
+++ b/packages/block-library/src/embed/util.js
@@ -95,7 +95,8 @@ export const createUpgradedEmbedBlock = (
 	props,
 	attributesFromPreview = {}
 ) => {
-	const { preview, attributes: { url, providerNameSlug, type } = {} } = props;
+	const { preview, attributes = {} } = props;
+	const { url, providerNameSlug, type, ...restAttributes } = attributes;
 
 	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return;
 
@@ -115,6 +116,7 @@ export const createUpgradedEmbedBlock = (
 	if ( shouldCreateNewBlock ) {
 		return createBlock( DEFAULT_EMBED_BLOCK, {
 			url,
+			...restAttributes,
 			...matchedBlock.attributes,
 		} );
 	}
diff --git a/packages/block-library/src/group/edit.native.js b/packages/block-library/src/group/edit.native.js
index 791c95ff07969..23b5628cb219d 100644
--- a/packages/block-library/src/group/edit.native.js
+++ b/packages/block-library/src/group/edit.native.js
@@ -32,7 +32,7 @@ function GroupEdit( {
 	isSelected,
 	isLastInnerBlockSelected,
 	getStylesFromColorScheme,
-	mergedStyle,
+	style,
 	blockWidth,
 } ) {
 	const { align } = attributes;
@@ -79,13 +79,13 @@ function GroupEdit( {
 		<View
 			style={ [
 				isSelected && hasInnerBlocks && styles.innerBlocks,
-				mergedStyle,
+				style,
 				isSelected &&
 					hasInnerBlocks &&
-					mergedStyle?.backgroundColor &&
+					style?.backgroundColor &&
 					styles.hasBackgroundAppender,
 				isLastInnerBlockSelected &&
-					mergedStyle?.backgroundColor &&
+					style?.backgroundColor &&
 					styles.isLastInnerBlockSelected,
 			] }
 		>
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 0f8d900b62c4c..023184969babd 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -25,7 +25,7 @@ function HeadingEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
-	mergedStyle,
+	style,
 	clientId,
 } ) {
 	const { textAlign, content, level, placeholder } = attributes;
@@ -34,7 +34,7 @@ function HeadingEdit( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
-		style: mergedStyle,
+		style,
 	} );
 
 	return (
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index 85571c518c862..464ccf18d144e 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -56,7 +56,7 @@ export default function HomeEdit( {
 
 	return (
 		<>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				<a
 					className="wp-block-home-link__content"
 					href={ homeUrl }
@@ -80,7 +80,7 @@ export default function HomeEdit( {
 						] }
 					/>
 				</a>
-			</li>
+			</div>
 		</>
 	);
 }
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index da026f9542276..5ea885333ad69 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, TouchableWithoutFeedback, Platform } from 'react-native';
-import { isEmpty, get, find, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +16,6 @@ import {
 	setFeaturedImage,
 } from '@wordpress/react-native-bridge';
 import {
-	CycleSelectControl,
 	Icon,
 	PanelBody,
 	ToolbarButton,
@@ -27,6 +25,7 @@ import {
 	LinkSettingsNavigation,
 	BottomSheet,
 	BottomSheetTextControl,
+	BottomSheetSelectControl,
 	FooterMessageLink,
 	Badge,
 } from '@wordpress/components';
@@ -67,8 +66,11 @@ import {
 	MEDIA_ID_NO_FEATURED_IMAGE_SET,
 } from './constants';
 
-const getUrlForSlug = ( image, { sizeSlug } ) => {
-	return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] );
+const getUrlForSlug = ( image, sizeSlug ) => {
+	if ( ! sizeSlug ) {
+		return undefined;
+	}
+	return image?.media_details?.sizes?.[ sizeSlug ]?.source_url;
 };
 
 export class ImageEdit extends Component {
@@ -119,11 +121,6 @@ export class ImageEdit extends Component {
 				placeholder: __( 'None' ),
 			},
 		};
-
-		this.sizeOptions = map( this.props.imageSizes, ( { name, slug } ) => ( {
-			value: slug,
-			name,
-		} ) );
 	}
 
 	componentDidMount() {
@@ -176,7 +173,9 @@ export class ImageEdit extends Component {
 	componentDidUpdate( previousProps ) {
 		if ( ! previousProps.image && this.props.image ) {
 			const { image, attributes } = this.props;
-			const url = getUrlForSlug( image, attributes ) || image.source_url;
+			const url =
+				getUrlForSlug( image, attributes?.sizeSlug ) ||
+				image.source_url;
 			this.props.setAttributes( { url } );
 		}
 	}
@@ -190,7 +189,10 @@ export class ImageEdit extends Component {
 	}
 
 	accessibilityLabelCreator( caption ) {
-		return isEmpty( caption )
+		// Checks if caption is empty.
+		return ( typeof caption === 'string' && caption.trim().length === 0 ) ||
+			caption === undefined ||
+			caption === null
 			? /* translators: accessibility text. Empty image caption. */
 			  'Image caption. Empty'
 			: sprintf(
@@ -292,7 +294,7 @@ export class ImageEdit extends Component {
 	onSetSizeSlug( sizeSlug ) {
 		const { image } = this.props;
 
-		const url = getUrlForSlug( image, { sizeSlug } );
+		const url = getUrlForSlug( image, sizeSlug );
 		if ( ! url ) {
 			return null;
 		}
@@ -494,10 +496,26 @@ export class ImageEdit extends Component {
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
 
-		const sizeOptionsValid = find( this.sizeOptions, [
-			'value',
-			imageDefaultSize,
-		] );
+		const imageSizes = Array.isArray( this.props.imageSizes )
+			? this.props.imageSizes
+			: [];
+		// Only map available image sizes for the user to choose.
+		const sizeOptions = imageSizes
+			.filter( ( { slug } ) => getUrlForSlug( image, slug ) )
+			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
+
+		let selectedSizeOption = sizeSlug || imageDefaultSize;
+		let sizeOptionsValid = sizeOptions.find(
+			( option ) => option.value === selectedSizeOption
+		);
+
+		if ( ! sizeOptionsValid ) {
+			// Default to 'full' size if the default large size is not available.
+			sizeOptionsValid = sizeOptions.find(
+				( option ) => option.value === 'full'
+			);
+			selectedSizeOption = 'full';
+		}
 
 		// By default, it's only possible to set images that have been uploaded to a site's library as featured.
 		// Images that haven't been uploaded to a site's library have an id of 'undefined', which the 'canImageBeFeatured' check filters out.
@@ -533,12 +551,12 @@ export class ImageEdit extends Component {
 				</PanelBody>
 				<PanelBody>
 					{ image && sizeOptionsValid && (
-						<CycleSelectControl
+						<BottomSheetSelectControl
 							icon={ fullscreen }
 							label={ __( 'Size' ) }
-							value={ sizeSlug || imageDefaultSize }
-							onChangeValue={ this.onSizeChangeValue }
-							options={ this.sizeOptions }
+							options={ sizeOptions }
+							onChange={ this.onSizeChangeValue }
+							value={ selectedSizeOption }
 						/>
 					) }
 					{ this.getAltTextSettings() }
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 4ac570c83c268..0f8d41b758957 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useEffect, useRef } from '@wordpress/element';
+import { RawHTML } from '@wordpress/element';
 import {
 	BaseControl,
 	PanelBody,
@@ -19,8 +19,6 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 } from '@wordpress/components';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 import { __, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';
 import {
@@ -49,10 +47,12 @@ import {
  */
 const CATEGORIES_LIST_QUERY = {
 	per_page: -1,
+	context: 'view',
 };
 const USERS_LIST_QUERY = {
 	per_page: -1,
 	has_published_posts: [ 'post' ],
+	context: 'view',
 };
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
@@ -81,9 +81,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		latestPosts,
 		defaultImageWidth,
 		defaultImageHeight,
+		categoriesList,
+		authorList,
 	} = useSelect(
 		( select ) => {
-			const { getEntityRecords, getMedia } = select( coreStore );
+			const { getEntityRecords, getMedia, getUsers } = select(
+				coreStore
+			);
 			const { getSettings } = select( blockEditorStore );
 			const { imageSizes, imageDimensions } = getSettings();
 			const catIds =
@@ -150,6 +154,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							};
 							return { ...post, featuredImageInfo };
 					  } ),
+				categoriesList: getEntityRecords(
+					'taxonomy',
+					'category',
+					CATEGORIES_LIST_QUERY
+				),
+				authorList: getUsers( USERS_LIST_QUERY ),
 			};
 		},
 		[
@@ -161,15 +171,14 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			selectedAuthor,
 		]
 	);
-	const [ categoriesList, setCategoriesList ] = useState( [] );
-	const [ authorList, setAuthorList ] = useState( [] );
-	const categorySuggestions = categoriesList.reduce(
-		( accumulator, category ) => ( {
-			...accumulator,
-			[ category.name ]: category,
-		} ),
-		{}
-	);
+	const categorySuggestions =
+		categoriesList?.reduce(
+			( accumulator, category ) => ( {
+				...accumulator,
+				[ category.name ]: category,
+			} ),
+			{}
+		) ?? {};
 	const selectCategories = ( tokens ) => {
 		const hasNoSuggestion = tokens.some(
 			( token ) =>
@@ -193,43 +202,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		setAttributes( { categories: allCategories } );
 	};
 
-	const isStillMounted = useRef();
-
-	useEffect( () => {
-		isStillMounted.current = true;
-
-		apiFetch( {
-			path: addQueryArgs( `/wp/v2/categories`, CATEGORIES_LIST_QUERY ),
-		} )
-			.then( ( data ) => {
-				if ( isStillMounted.current ) {
-					setCategoriesList( data );
-				}
-			} )
-			.catch( () => {
-				if ( isStillMounted.current ) {
-					setCategoriesList( [] );
-				}
-			} );
-		apiFetch( {
-			path: addQueryArgs( `/wp/v2/users`, USERS_LIST_QUERY ),
-		} )
-			.then( ( data ) => {
-				if ( isStillMounted.current ) {
-					setAuthorList( data );
-				}
-			} )
-			.catch( () => {
-				if ( isStillMounted.current ) {
-					setAuthorList( [] );
-				}
-			} );
-
-		return () => {
-			isStillMounted.current = false;
-		};
-	}, [] );
-
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
@@ -377,7 +349,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								'' !== value ? Number( value ) : undefined,
 						} )
 					}
-					authorList={ authorList }
+					authorList={ authorList ?? [] }
 					selectedAuthorId={ selectedAuthor }
 				/>
 
@@ -466,7 +438,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						'trim',
 					] );
 					let excerpt = post.excerpt.rendered;
-					const currentAuthor = authorList.find(
+					const currentAuthor = authorList?.find(
 						( author ) => author.id === post.author
 					);
 
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index c64041fe8d9b9..8d39252aee128 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -41,6 +41,7 @@ export default function ListEdit( {
 	setAttributes,
 	mergeBlocks,
 	onReplace,
+	style,
 } ) {
 	const { ordered, values, type, reversed, start, placeholder } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
@@ -132,7 +133,9 @@ export default function ListEdit( {
 		</>
 	);
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		style,
+	} );
 
 	return (
 		<>
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index 49239ae4d0c30..895dc40e7d7be 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -254,7 +254,7 @@ class MediaTextEdit extends Component {
 			setAttributes,
 			isSelected,
 			isRTL,
-			wrapperProps,
+			style,
 			blockWidth,
 		} = this.props;
 		const {
@@ -273,14 +273,21 @@ class MediaTextEdit extends Component {
 			? 100
 			: this.state.mediaWidth || mediaWidth;
 		const widthString = `${ temporaryMediaWidth }%`;
+		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
+		const innerBlockWidthString = `${ innerBlockWidth }%`;
 
-		const innerBlockContainerStyle = ! shouldStack
-			? styles.innerBlock
-			: {
-					...( mediaPosition === 'left'
-						? styles.innerBlockStackMediaLeft
-						: styles.innerBlockStackMediaRight ),
-			  };
+		const innerBlockContainerStyle = [
+			{ width: innerBlockWidthString },
+			! shouldStack
+				? styles.innerBlock
+				: {
+						...( mediaPosition === 'left'
+							? styles.innerBlockStackMediaLeft
+							: styles.innerBlockStackMediaRight ),
+				  },
+			( style?.backgroundColor || backgroundColor.color ) &&
+				styles.innerBlockPaddings,
+		];
 
 		const containerStyles = {
 			...styles[ 'wp-block-media-text' ],
@@ -295,14 +302,10 @@ class MediaTextEdit extends Component {
 				? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ]
 				: {} ),
 			...( isSelected && styles[ 'is-selected' ] ),
-			backgroundColor:
-				wrapperProps?.style?.backgroundColor || backgroundColor.color,
+			backgroundColor: style?.backgroundColor || backgroundColor.color,
 			paddingBottom: 0,
 		};
 
-		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
-		const innerBlockWidthString = `${ innerBlockWidth }%`;
-
 		const mediaContainerStyle = [
 			{ flex: 1 },
 			shouldStack
@@ -375,12 +378,7 @@ class MediaTextEdit extends Component {
 					>
 						{ this.renderMediaArea( shouldStack ) }
 					</View>
-					<View
-						style={ {
-							width: innerBlockWidthString,
-							...innerBlockContainerStyle,
-						} }
-					>
+					<View style={ innerBlockContainerStyle }>
 						<InnerBlocks
 							template={ TEMPLATE }
 							blockWidth={ blockWidth }
diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
index 71f54b903f88b..8d909243dcb74 100644
--- a/packages/block-library/src/media-text/style.native.scss
+++ b/packages/block-library/src/media-text/style.native.scss
@@ -141,6 +141,10 @@ $media-to-text: 12px;
 	padding-left: $media-to-text;
 }
 
+.innerBlockPaddings {
+	padding: 0 $media-to-text $media-to-text;
+}
+
 // Media STACK
 .mediaStackLeft {
 	margin-bottom: $media-to-text;
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index b4efe383aa00c..50ff5ed4ad236 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -48,7 +48,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 
-const ALLOWED_BLOCKS = [ 'core/navigation-link', 'core/spacer' ];
+const ALLOWED_BLOCKS = [ 'core/navigation-link' ];
 
 const MAX_NESTING = 5;
 
@@ -419,7 +419,6 @@ export default function NavigationLinkEdit( {
 				hasDescendants
 					? InnerBlocks.DefaultAppender
 					: false,
-			__experimentalAppenderTagName: 'li',
 		}
 	);
 
@@ -508,7 +507,7 @@ export default function NavigationLinkEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<li { ...blockProps }>
+			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
@@ -612,8 +611,8 @@ export default function NavigationLinkEdit( {
 						</span>
 					) }
 				</a>
-				<ul { ...innerBlocksProps } />
-			</li>
+				<div { ...innerBlocksProps } />
+			</div>
 		</Fragment>
 	);
 }
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index a770c48d185e5..a7e7c239b5edd 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -199,7 +199,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$html .= '</span>';
 
-	if ( $block->context['showSubmenuIcon'] && $has_submenu ) {
+	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
 		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js
index 4b3f68470ed1d..2aee258574605 100644
--- a/packages/block-library/src/navigation/block-navigation-list.js
+++ b/packages/block-library/src/navigation/block-navigation-list.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBlockNavigationTree,
+	__experimentalListView as ListView,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -18,7 +18,7 @@ export default function BlockNavigationList( {
 	);
 
 	return (
-		<__experimentalBlockNavigationTree
+		<ListView
 			blocks={ blocks }
 			showAppender
 			showBlockMovers
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index d4b6cd57b497b..0e0e0ab021ce5 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -174,7 +174,7 @@ function Navigation( {
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ attributes.isResponsive }
 				>
-					<ul { ...innerBlocksProps }></ul>
+					<div { ...innerBlocksProps }></div>
 				</ResponsiveWrapper>
 			</nav>
 		</>
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index d4bf579a5b004..efc18558ca3f7 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -86,30 +86,100 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 }
 
 /**
- * Renders a Navigation Block derived from data from the theme_location assigned
- * via the block attribute 'location'.
+ * Returns the menu items for a WordPress menu location.
  *
- * If no location was provided as a block attribute then false is returned.
- *
- * @param  string $location The location of the classic menu to display.
- * @param  object $attributes The block attributes.
- * @return string|false HTML markup of a generated Navigation Block or false if no location is specified.
+ * @param string $location The menu location.
+ * @return array Menu items for the location.
  */
-function gutenberg_render_menu_from_location( $location, $attributes ) {
+function gutenberg_get_menu_items_at_location( $location ) {
 	if ( empty( $location ) ) {
-		return false;
+		return;
 	}
 
-	return wp_nav_menu(
-		array(
-			'theme_location'   => $location,
-			'container'        => '',
-			'items_wrap'       => '%3$s',
-			'block_attributes' => $attributes,
-			'fallback_cb'      => false,
-			'echo'             => false,
-		)
-	);
+	// Build menu data. The following approximates the code in
+	// `wp_nav_menu()` and `gutenberg_output_block_nav_menu`.
+
+	// Find the location in the list of locations, returning early if the
+	// location can't be found.
+	$locations = get_nav_menu_locations();
+	if ( ! isset( $locations[ $location ] ) ) {
+		return;
+	}
+
+	// Get the menu from the location, returning early if there is no
+	// menu or there was an error.
+	$menu = wp_get_nav_menu_object( $locations[ $location ] );
+	if ( ! $menu || is_wp_error( $menu ) ) {
+		return;
+	}
+
+	$menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );
+	_wp_menu_item_classes_by_context( $menu_items );
+
+	return $menu_items;
+}
+
+/**
+ * Sorts a standard array of menu items into a nested structure keyed by the
+ * id of the parent menu.
+ *
+ * @param array $menu_items Menu items to sort.
+ * @return array An array keyed by the id of the parent menu where each element
+ *               is an array of menu items that belong to that parent.
+ */
+function gutenberg_sort_menu_items_by_parent_id( $menu_items ) {
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
+	}
+	unset( $menu_items, $menu_item );
+
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
+	}
+
+	return $menu_items_by_parent_id;
+}
+
+/**
+ * Turns menu item data into a nested array of parsed blocks
+ *
+ * @param array $menu_items               An array of menu items that represent
+ *                                        an individual level of a menu.
+ * @param array $menu_items_by_parent_id  An array keyed by the id of the
+ *                                        parent menu where each element is an
+ *                                        array of menu items that belong to
+ *                                        that parent.
+ * @return array An array of parsed block data.
+ */
+function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
+	if ( empty( $menu_items ) ) {
+		return array();
+	}
+
+	$blocks = array();
+
+	foreach ( $menu_items as $menu_item ) {
+		$block = array(
+			'blockName' => 'core/navigation-link',
+			'attrs'     => array(
+				'label' => $menu_item->title,
+				'url'   => $menu_item->url,
+			),
+		);
+
+		$block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items(
+			isset( $menu_items_by_parent_id[ $menu_item->ID ] )
+					? $menu_items_by_parent_id[ $menu_item->ID ]
+					: array(),
+			$menu_items_by_parent_id
+		);
+
+		$blocks[] = $block;
+	}
+
+	return $blocks;
 }
 
 /**
@@ -153,15 +223,23 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
-	if ( empty( $block->inner_blocks ) ) {
-		if ( array_key_exists( '__unstableLocation', $attributes ) ) {
-			$location                 = $attributes['__unstableLocation'];
-			$maybe_classic_navigation = gutenberg_render_menu_from_location( $location, $attributes );
-			if ( $maybe_classic_navigation ) {
-				return $maybe_classic_navigation;
-			}
+	$inner_blocks = $block->inner_blocks;
+
+	if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) {
+		$menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] );
+		if ( empty( $menu_items ) ) {
+			return '';
 		}
 
+		$menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items );
+		$parsed_blocks           = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
+
+		// TODO - this uses the full navigation block attributes for the
+		// context which could be refined.
+		$inner_blocks = new WP_Block_List( $parsed_blocks, $attributes );
+	}
+
+	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
 
@@ -176,7 +254,16 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	);
 
 	$inner_blocks_html = '';
-	foreach ( $block->inner_blocks as $inner_block ) {
+	$is_list_open      = false;
+	foreach ( $inner_blocks as $inner_block ) {
+		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name ) && false === $is_list_open ) {
+			$is_list_open       = true;
+			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
+		}
+		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && true === $is_list_open ) {
+			$is_list_open       = false;
+			$inner_blocks_html .= '</ul>';
+		}
 		$inner_blocks_html .= $inner_block->render();
 	}
 
@@ -195,7 +282,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	// return early if they don't.
 	if ( ! isset( $attributes['isResponsive'] ) || false === $attributes['isResponsive'] ) {
 		return sprintf(
-			'<nav %1$s><ul class="wp-block-navigation__container">%2$s</ul></nav>',
+			'<nav %1$s>%2$s</nav>',
 			$wrapper_attributes,
 			$inner_blocks_html
 		);
@@ -208,7 +295,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
 						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
-							<ul class="wp-block-navigation__container">%2$s</ul>
+							%2$s
 						</div>
 					</div>
 				</div>
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 4a5ae3b06c55c..60b939799bb82 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -6,6 +6,17 @@
 .wp-block-navigation {
 	position: relative;
 
+	// Horizontal layout
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	// Vertical layout
+	&.is-vertical {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
 	// Normalize list styles.
 	ul,
 	ul li {
diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index 1cd7575854300..5bb6c32f8fea9 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -19,7 +19,6 @@ function ParagraphBlock( {
 	mergeBlocks,
 	onReplace,
 	setAttributes,
-	mergedStyle,
 	style,
 	clientId,
 } ) {
@@ -30,12 +29,11 @@ function ParagraphBlock( {
 	const { align, content, placeholder } = attributes;
 
 	const styles = {
-		...( mergedStyle?.baseColors && {
-			color: mergedStyle.baseColors?.color?.text,
-			placeholderColor: mergedStyle.baseColors?.color?.text,
-			linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
+		...( style?.baseColors && {
+			color: style.baseColors?.color?.text,
+			placeholderColor: style.color || style.baseColors?.color?.text,
+			linkColor: style.baseColors?.elements?.link?.color?.text,
 		} ),
-		...mergedStyle,
 		...style,
 	};
 
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index da8b2004aa23e..15b981bf69af6 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -35,7 +35,7 @@ export default function PostTermsEdit( {
 			if ( ! term ) return {};
 			const { getTaxonomy } = select( coreStore );
 			const taxonomy = getTaxonomy( term );
-			return taxonomy?.visibility?.show_ui ? taxonomy : {};
+			return taxonomy?.visibility?.publicly_queryable ? taxonomy : {};
 		},
 		[ term ]
 	);
diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
index 0af8742f869b9..436611d756704 100644
--- a/packages/block-library/src/post-terms/index.php
+++ b/packages/block-library/src/post-terms/index.php
@@ -18,6 +18,10 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( ! is_taxonomy_viewable( $attributes['term'] ) ) {
+		return '';
+	}
+
 	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
 	if ( is_wp_error( $post_terms ) ) {
 		return '';
diff --git a/packages/block-library/src/post-terms/use-post-terms.js b/packages/block-library/src/post-terms/use-post-terms.js
index facfffa21117f..4539ea1c8df22 100644
--- a/packages/block-library/src/post-terms/use-post-terms.js
+++ b/packages/block-library/src/post-terms/use-post-terms.js
@@ -9,6 +9,14 @@ export default function usePostTerms( { postId, postType, term } ) {
 	const [ termIds ] = useEntityProp( 'postType', postType, restBase, postId );
 	return useSelect(
 		( select ) => {
+			const visible = term?.visibility?.publicly_queryable;
+			if ( ! visible ) {
+				return {
+					postTerms: [],
+					_isLoading: false,
+					hasPostTerms: false,
+				};
+			}
 			if ( ! termIds ) {
 				// Waiting for post terms to be fetched.
 				return { isLoading: true };
@@ -33,6 +41,6 @@ export default function usePostTerms( { postId, postType, term } ) {
 				hasPostTerms: !! terms?.length,
 			};
 		},
-		[ termIds ]
+		[ termIds, term?.visibility?.publicly_queryable ]
 	);
 }
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index ff0a8ac76d1a9..1852f92e7e13f 100644
--- a/packages/block-library/src/quote/edit.js
+++ b/packages/block-library/src/quote/edit.js
@@ -27,14 +27,14 @@ export default function QuoteEdit( {
 	onReplace,
 	className,
 	insertBlocksAfter,
-	mergedStyle,
+	style,
 } ) {
 	const { align, value, citation } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
-		style: mergedStyle,
+		style,
 	} );
 
 	return (
diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
index 2ed5ac835f81f..4bdef9130e33d 100644
--- a/packages/block-library/src/template-part/edit/selection/index.js
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
+import { SearchControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 /**
@@ -34,7 +34,7 @@ export default function TemplatePartSelection( {
 			onKeyPress={ stopKeyPropagation }
 			onKeyDown={ preventArrowKeysPropagation }
 		>
-			<SearchForm
+			<SearchControl
 				value={ filterValue }
 				onChange={ setFilterValue }
 				className="wp-block-template-part__selection-preview-search-form"
diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
index f6fac870d8911..1ca846fb848b5 100644
--- a/packages/block-library/src/verse/edit.js
+++ b/packages/block-library/src/verse/edit.js
@@ -19,12 +19,14 @@ export default function VerseEdit( {
 	setAttributes,
 	mergeBlocks,
 	onRemove,
+	style,
 } ) {
 	const { textAlign, content } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
+		style,
 	} );
 
 	return (
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index d0f78b62e5e5c..83a96ddaddc5e 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The deprecated `registerBlockTypeFromMetadata` function was removed. Please use `registerBlockType` that covers the same functionality ([#32030](https://github.com/WordPress/gutenberg/pull/32030)).
+
 ## 9.1.0 (2021-05-20)
 
 ### New API
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 4b7109bd1fe31..22c6a6db40cb9 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -713,21 +713,6 @@ _Returns_
 
 -   `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`.
 
-<a name="registerBlockTypeFromMetadata" href="#registerBlockTypeFromMetadata">#</a> **registerBlockTypeFromMetadata**
-
-> **Deprecated** Use `registerBlockType` instead.
-
-Registers a new block provided from metadata stored in `block.json` file.
-
-_Parameters_
-
--   _metadata_ `Object`: Block metadata loaded from `block.json`.
--   _additionalSettings_ `Object`: Additional block settings.
-
-_Returns_
-
--   `?WPBlock`: The block, if it has been successfully registered; otherwise `undefined`.
-
 <a name="registerBlockVariation" href="#registerBlockVariation">#</a> **registerBlockVariation**
 
 Registers a new block variation for the given block type.
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 073fee3396cc9..0cba447e71736 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -108,7 +108,6 @@ export { getCategories, setCategories, updateCategory } from './categories';
 // children of another block.
 export {
 	registerBlockType,
-	registerBlockTypeFromMetadata,
 	registerBlockCollection,
 	unregisterBlockType,
 	setFreeformContentHandlerName,
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 924267b9ad07c..c253f34f04d1a 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -22,7 +22,6 @@ import {
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { applyFilters } from '@wordpress/hooks';
 import { select, dispatch } from '@wordpress/data';
 import { _x } from '@wordpress/i18n';
@@ -424,27 +423,6 @@ function translateBlockSettingUsingI18nSchema(
 	return settingValue;
 }
 
-/**
- * Registers a new block provided from metadata stored in `block.json` file.
- *
- * @deprecated Use `registerBlockType` instead.
- *
- * @param {Object} metadata           Block metadata loaded from `block.json`.
- * @param {Object} additionalSettings Additional block settings.
- *
- * @return {?WPBlock} The block, if it has been successfully registered;
- *                    otherwise `undefined`.
- */
-export function registerBlockTypeFromMetadata( metadata, additionalSettings ) {
-	deprecated( 'wp.blocks.registerBlockTypeFromMetadata', {
-		since: '10.7',
-		plugin: 'Gutenberg',
-		alternative: 'wp.blocks.registerBlockType',
-		version: '11.0',
-	} );
-	return registerBlockType( metadata, additionalSettings );
-}
-
 /**
  * Registers a new block collection to group blocks in the same namespace in the inserter.
  *
diff --git a/packages/components/package.json b/packages/components/package.json
index d96ff912be264..603a19b922bfb 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -34,6 +34,7 @@
 		"@emotion/css": "^11.1.3",
 		"@emotion/react": "^11.1.5",
 		"@emotion/styled": "^11.3.0",
+		"@emotion/utils": "1.0.0",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/date": "file:../date",
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index 0ae41ca2227b7..decfddf44b0ad 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -12,12 +12,14 @@ import {
 	Text,
 } from 'react-native';
 import { map, uniq } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
index af434c04175f8..b596830691672 100644
--- a/packages/components/src/color-picker/README.md
+++ b/packages/components/src/color-picker/README.md
@@ -8,17 +8,17 @@ _Parts of the source code were derived and modified from [react-color](https://g
 
 ```jsx
 import { ColorPicker } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyColorPicker = () => {
+	const [ color, setColor ] = useState( '#f00' );
 
-const MyColorPicker = withState( {
-	color: '#f00',
-} )( ( { color, setState } ) => {
 	return (
 		<ColorPicker
 			color={ color }
-			onChangeComplete={ ( value ) => setState( { color: value.hex } ) }
+			onChangeComplete={ ( value ) => setColor( value.hex ) }
 			disableAlpha
 		/>
 	);
-} );
+};
 ```
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
index e5bb9a96f2e87..1598fee6ad48c 100644
--- a/packages/components/src/disabled/README.md
+++ b/packages/components/src/disabled/README.md
@@ -8,18 +8,18 @@ Assuming you have a form component, you can disable all form inputs by wrapping
 
 ```jsx
 import { Button, Disabled, TextControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyDisabled = () => {
+	const [ isDisabled, setIsDisabled ] = useState( true );
 
-const MyDisabled = withState( {
-	isDisabled: true,
-} )( ( { isDisabled, setState } ) => {
 	let input = <TextControl label="Input" onChange={ () => {} } />;
 	if ( isDisabled ) {
 		input = <Disabled>{ input }</Disabled>;
 	}
 
 	const toggleDisabled = () => {
-		setState( ( state ) => ( { isDisabled: ! state.isDisabled } ) );
+		setIsDisabled( ( state ) => ! state );
 	};
 
 	return (
@@ -30,7 +30,7 @@ const MyDisabled = withState( {
 			</Button>
 		</div>
 	);
-} );
+};
 ```
 
 A component can detect if it has been wrapped in a `<Disabled>` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Consumer`.
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 7287e202ad4bf..0b9f050394cf8 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -7,26 +7,25 @@ The component renders a user interface that allows the user to select predefined
 
 ```jsx
 import { FontSizePicker } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-...
-const MyFontSizePicker = withState( {
-	fontSize: 16,
-} )( ( { fontSize, setState } ) => {
-	const fontSizes = [
-		{
-			name: __( 'Small' ),
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: __( 'Big' ),
-			slug: 'big',
-			size: 26,
-		},
-	];
-	const fallbackFontSize = 16;
+const fontSizes = [
+	{
+		name: __( 'Small' ),
+		slug: 'small',
+		size: 12,
+	},
+	{
+		name: __( 'Big' ),
+		slug: 'big',
+		size: 26,
+	},
+];
+const fallbackFontSize = 16;
+
+const MyFontSizePicker = () => {
+	const [ fontSize, setFontSize ] = useState( 12 );
 
 	return (
 		<FontSizePicker
@@ -34,11 +33,11 @@ const MyFontSizePicker = withState( {
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
-				setState( { fontSize: newFontSize } );
+				setFontSize( newFontSize );
 			} }
 		/>
 	);
-} );
+};
 
 ...
 
diff --git a/packages/components/src/form-toggle/README.md b/packages/components/src/form-toggle/README.md
index bf646cdb14bd4..60a8a62477389 100644
--- a/packages/components/src/form-toggle/README.md
+++ b/packages/components/src/form-toggle/README.md
@@ -55,18 +55,16 @@ When a user switches a toggle, its corresponding action takes effect immediately
 
 ```jsx
 import { FormToggle } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyFormToggle = () => {
+	const [ isChecked, setChecked ] = useState( true );
 
-const MyFormToggle = withState( {
-	checked: true,
-} )( ( { checked, setState } ) => (
 	<FormToggle
 		checked={ checked }
-		onChange={ () =>
-			setState( ( state ) => ( { checked: ! state.checked } ) )
-		}
+		onChange={ () => setChecked( ( state ) => ! state ) }
 	/>
-) );
+};
 ```
 
 ### Props
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3ec38f7831416..e24f2f2ed7d8c 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -64,23 +64,26 @@ The `value` property is handled in a manner similar to controlled form component
 
 ```jsx
 import { FormTokenField } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyFormTokenField = withState( {
-	tokens: [],
-	suggestions: [
-		'Africa',
-		'America',
-		'Antarctica',
-		'Asia',
-		'Europe',
-		'Oceania',
-	],
-} )( ( { tokens, suggestions, setState } ) => (
-	<FormTokenField
-		value={ tokens }
-		suggestions={ suggestions }
-		onChange={ ( tokens ) => setState( { tokens } ) }
-	/>
-) );
+const continents = [
+	'Africa',
+	'America',
+	'Antarctica',
+	'Asia',
+	'Europe',
+	'Oceania',
+];
+
+const MyFormTokenField = () => {
+	const [ selectedContinents, setSelectedContinents ] = useState( [] );
+
+	return(
+		<FormTokenField
+			value={ selectedContinents }
+			suggestions={ continents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+		/>
+	);
+};
 ```
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 18cca75a71cb2..a97f0743c58d2 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -69,8 +69,8 @@ export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
-export { default as __experimentalGradientPicker } from './gradient-picker';
-export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker';
+export { default as GradientPicker } from './gradient-picker';
+export { default as CustomGradientPicker } from './custom-gradient-picker';
 export { Grid as __experimentalGrid } from './grid';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
@@ -108,6 +108,7 @@ export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
+export { default as SearchControl } from './search-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 96c4105ecbe9e..434d1e5560039 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -40,6 +40,7 @@ export { default as __experimentalText } from './text';
 export { default as ExternalLink } from './external-link';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
+export { default as SearchControl } from './search-control';
 export { default as SelectControl } from './select-control';
 export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';
diff --git a/packages/components/src/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md
index a90fbe3aa323e..f78abbbd03260 100644
--- a/packages/components/src/keyboard-shortcuts/README.md
+++ b/packages/components/src/keyboard-shortcuts/README.md
@@ -12,13 +12,12 @@ Render `<KeyboardShortcuts />` with a `shortcuts` prop object:
 
 ```jsx
 import { KeyboardShortcuts } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyKeyboardShortcuts = withState( {
-	isAllSelected: false,
-} )( ( { isAllSelected, setState } ) => {
+const MyKeyboardShortcuts = () => {
+	const [ isAllSelected, setIsAllSelected ] = useState( false );
 	const selectAll = () => {
-		setState( { isAllSelected: true } );
+		setIsAllSelected( true );
 	};
 
 	return (
@@ -31,7 +30,7 @@ const MyKeyboardShortcuts = withState( {
 			[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
 		</div>
 	);
-} );
+};
 ```
 
 ## Props
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
index 259a929ee66fb..9408754861961 100644
--- a/packages/components/src/menu-item/README.md
+++ b/packages/components/src/menu-item/README.md
@@ -6,21 +6,21 @@ MenuItem is a component which renders a button intended to be used in combinatio
 
 ```jsx
 import { MenuItem } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyMenuItem = withState( {
-	isActive: true,
-} )( ( { isActive, setState } ) => (
-	<MenuItem
-		icon={ isActive ? 'yes' : 'no' }
-		isSelected={ isActive }
-		onClick={ () =>
-			setState( ( state ) => ( { isActive: ! state.isActive } ) )
-		}
-	>
-		Toggle
-	</MenuItem>
-) );
+import { useState } from '@wordpress/element';
+
+const MyMenuItem = () => {
+	const [ isActive, setIsActive ] = useState( true );
+
+	return (
+		<MenuItem
+			icon={ isActive ? 'yes' : 'no' }
+			isSelected={ isActive }
+			onClick={ () => setIsActive( ( state ) => ! state ) }
+		>
+			Toggle
+		</MenuItem>
+	);
+};
 ```
 
 ## Props
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md
index 1eeb6b99bfcaa..ed940baa53409 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md
@@ -88,3 +88,10 @@ Can be used to externally control the value of the control, like in the `MyContr
 
 -   Type: `Object`
 -   Required: No
+
+#### icon
+
+The icon for the control.
+
+-   Type: `Icon component`
+-   Required: No
\ No newline at end of file
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
index 3df7f185c7710..5f2ec0aee7997 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
@@ -18,6 +18,7 @@ import styles from './style.scss';
 
 const BottomSheetSelectControl = ( {
 	label,
+	icon,
 	options: items,
 	onChange,
 	value: selectedValue,
@@ -52,6 +53,7 @@ const BottomSheetSelectControl = ( {
 				<BottomSheet.Cell
 					label={ label }
 					separatorType="none"
+					icon={ icon }
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
 					accessibilityRole={ 'button' }
diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js
index 91cd1cc8e7195..19e7c5847f954 100644
--- a/packages/components/src/mobile/color-settings/palette.screen.native.js
+++ b/packages/components/src/mobile/color-settings/palette.screen.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -26,6 +26,8 @@ import { colorsUtils } from './utils';
 
 import styles from './style.scss';
 
+const HIT_SLOP = { top: 22, bottom: 22, left: 22, right: 22 };
+
 const PaletteScreen = () => {
 	const route = useRoute();
 	const navigation = useNavigation();
@@ -50,6 +52,10 @@ const PaletteScreen = () => {
 		styles.horizontalSeparator,
 		styles.horizontalSeparatorDark
 	);
+	const clearButtonStyle = usePreferredColorSchemeStyle(
+		styles.clearButton,
+		styles.clearButtonDark
+	);
 
 	const isSolidSegment = currentSegment === segments[ 0 ];
 	const isCustomGadientShown = ! isSolidSegment && isGradientColor;
@@ -67,6 +73,15 @@ const PaletteScreen = () => {
 		}
 	};
 
+	function onClear() {
+		setCurrentValue( undefined );
+		if ( isSolidSegment ) {
+			onColorChange( '' );
+		} else {
+			onGradientChange( '' );
+		}
+	}
+
 	function onCustomPress() {
 		if ( isSolidSegment ) {
 			navigation.navigate( colorsUtils.screens.picker, {
@@ -82,6 +97,16 @@ const PaletteScreen = () => {
 		}
 	}
 
+	function getClearButton() {
+		return (
+			<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>
+				<View style={ styles.clearButtonContainer }>
+					<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>
+				</View>
+			</TouchableWithoutFeedback>
+		);
+	}
+
 	function getFooter() {
 		if ( onGradientChange ) {
 			return (
@@ -97,6 +122,7 @@ const PaletteScreen = () => {
 							/>
 						)
 					}
+					addonRight={ currentValue && getClearButton() }
 				/>
 			);
 		}
@@ -116,7 +142,9 @@ const PaletteScreen = () => {
 				>
 					{ __( 'Select a color' ) }
 				</Text>
-				<View style={ styles.flex } />
+				<View style={ styles.flex }>
+					{ currentValue && getClearButton() }
+				</View>
 			</View>
 		);
 	}
diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss
index 5ea2417761c2d..a86ebe02388d7 100644
--- a/packages/components/src/mobile/color-settings/style.native.scss
+++ b/packages/components/src/mobile/color-settings/style.native.scss
@@ -33,3 +33,15 @@
 	flex: 1;
 }
 
+.clearButtonContainer {
+	align-items: flex-end;
+}
+
+.clearButton {
+	color: $blue-50;
+	font-size: 17px;
+}
+
+.clearButtonDark {
+	color: $blue-30;
+}
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
index 1d4d0d45be676..2626e0cec5ba6 100644
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -26,7 +26,8 @@ export const getMergedGlobalStyles = (
 	globalStyle,
 	wrapperPropsStyle,
 	blockAttributes,
-	defaultColors
+	defaultColors,
+	blockName
 ) => {
 	const baseGlobalColors = {
 		baseColors: baseGlobalStyles || {},
@@ -40,12 +41,18 @@ export const getMergedGlobalStyles = (
 		...globalStyle,
 		...wrapperPropsStyle,
 	};
+	const blockColors = getBlockColors(
+		blockStyleAttributes,
+		defaultColors,
+		blockName,
+		baseGlobalStyles
+	);
 	const blockPaddings = getBlockPaddings(
 		mergedStyle,
 		wrapperPropsStyle,
-		blockStyleAttributes
+		blockStyleAttributes,
+		blockColors
 	);
-	const blockColors = getBlockColors( blockStyleAttributes, defaultColors );
 
 	return { ...mergedStyle, ...blockPaddings, ...blockColors };
 };
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
index 0cf5bee75c4c7..bdf4064f00146 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -3,26 +3,37 @@
  */
 import { find, startsWith } from 'lodash';
 
-export const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', 'backgroundColor' ];
+export const BLOCK_STYLE_ATTRIBUTES = [
+	'textColor',
+	'backgroundColor',
+	'style',
+];
 
 // Mapping style properties name to native
 const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 	textColor: 'color',
+	text: 'color',
+	background: 'backgroundColor',
+	link: 'linkColor',
+	placeholder: 'placeholderColor',
 };
 
-const PADDING = 12; // solid-border-space
+const PADDING = 12; // $solid-border-space
+const UNKNOWN_VALUE = 'undefined';
 
 export function getBlockPaddings(
 	mergedStyle,
 	wrapperPropsStyle,
-	blockStyleAttributes
+	blockStyleAttributes,
+	blockColors
 ) {
 	const blockPaddings = {};
 
 	if (
 		! mergedStyle.padding &&
 		( wrapperPropsStyle?.backgroundColor ||
-			blockStyleAttributes?.backgroundColor )
+			blockStyleAttributes?.backgroundColor ||
+			blockColors?.backgroundColor )
 	) {
 		blockPaddings.padding = PADDING;
 		return blockPaddings;
@@ -32,7 +43,8 @@ export function getBlockPaddings(
 	if (
 		mergedStyle?.padding &&
 		! wrapperPropsStyle?.backgroundColor &&
-		! blockStyleAttributes?.backgroundColor
+		! blockStyleAttributes?.backgroundColor &&
+		! blockColors?.backgroundColor
 	) {
 		blockPaddings.padding = undefined;
 	}
@@ -40,9 +52,44 @@ export function getBlockPaddings(
 	return blockPaddings;
 }
 
-export function getBlockColors( blockStyleAttributes, defaultColors ) {
+export function getBlockColors(
+	blockStyleAttributes,
+	defaultColors,
+	blockName,
+	baseGlobalStyles
+) {
 	const blockStyles = {};
+	const customBlockStyles = blockStyleAttributes?.style?.color || {};
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+
+	// Global styles colors
+	if ( blockGlobalStyles?.color ) {
+		Object.entries( blockGlobalStyles.color ).forEach(
+			( [ key, value ] ) => {
+				const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ key ];
+
+				if ( styleKey && value !== UNKNOWN_VALUE ) {
+					const color = customBlockStyles[ key ] ?? value;
+					blockStyles[ styleKey ] = color;
+				}
+			}
+		);
+	} else if ( baseGlobalStyles?.styles?.color?.text ) {
+		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.text ] =
+			baseGlobalStyles?.styles?.color?.text;
+	}
 
+	// Global styles elements
+	if ( blockGlobalStyles?.elements ) {
+		const linkColor = blockGlobalStyles.elements?.link?.color?.text;
+		const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
+
+		if ( styleKey && linkColor && linkColor !== UNKNOWN_VALUE ) {
+			blockStyles[ styleKey ] = linkColor;
+		}
+	}
+
+	// Custom colors
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
 		const isCustomColor = startsWith( value, '#' );
 		let styleKey = key;
@@ -64,6 +111,12 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) {
 		}
 	} );
 
+	// Color placeholder
+	if ( blockStyles?.color ) {
+		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] =
+			blockStyles.color;
+	}
+
 	return blockStyles;
 }
 
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index 2518f35ea8bd3..f39e5f79e4e3b 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -8,21 +8,21 @@ Render a Popover within the parent to which it should anchor:
 
 ```jsx
 import { Button, Popover } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyPopover = withState( {
-	isVisible: false,
-} )( ( { isVisible, setState } ) => {
+const MyPopover = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
-		setState( ( state ) => ( { isVisible: ! state.isVisible } ) );
+		setIsVisible( ( state ) => ! state );
 	};
+
 	return (
 		<Button variant="secondary" onClick={ toggleVisible }>
 			Toggle Popover!
 			{ isVisible && <Popover>Popover is toggled!</Popover> }
 		</Button>
 	);
-} );
+};
 ```
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
index 7f0112692aff4..b7ac4b3a32638 100644
--- a/packages/components/src/query-controls/README.md
+++ b/packages/components/src/query-controls/README.md
@@ -4,9 +4,9 @@
 
 ```jsx
 import { QueryControls } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyQueryControls = withState( {
+const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
 	category: 1,
@@ -28,19 +28,30 @@ const MyQueryControls = withState( {
 		},
 	],
 	numberOfItems: 10,
-} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => (
-	<QueryControls
-		{ ...{ orderBy, order, numberOfItems } }
-		onOrderByChange={ ( orderBy ) => setState( { orderBy } ) }
-		onOrderChange={ ( order ) => setState( { order } ) }
-		categoriesList={ categories }
-		selectedCategoryId={ category }
-		onCategoryChange={ ( category ) => setState( { category } ) }
-		onNumberOfItemsChange={ ( numberOfItems ) =>
-			setState( { numberOfItems } )
-		}
-	/>
-) );
+};
+
+const MyQueryControls = () => {
+	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
+	const { orderBy, order, category, categories, numberOfItems } = query;
+
+	const updateQuery = ( newQuery ) => {
+		setQuery( { ...query, ...newQuery } );
+	};
+
+	return (
+		<QueryControls
+			{ ...{ orderBy, order, numberOfItems } }
+			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
+			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
+			categoriesList={ categories }
+			selectedCategoryId={ category }
+			onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
+			onNumberOfItemsChange={ ( newNumberOfItems ) =>
+				updateQuery( { numberOfItems: newCategory } )
+			}
+		/>
+	);
+};
 ```
 
 ## Multiple category selector
@@ -48,41 +59,52 @@ const MyQueryControls = withState( {
 The `QueryControls` component now supports multiple category selection, to replace the single category selection available so far. To enable it use the component with the new props instead: `categorySuggestions` in place of `categoriesList` and the `selectedCategories` array instead of `selectedCategoryId` like so:
 
 ```jsx
-const MyQueryControls = withState( {
+const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
 	selectedCategories: [ 1 ],
-	categories: {
-		'Category 1': {
+	categories: [
+		{
 			id: 1,
 			name: 'Category 1',
 			parent: 0,
 		},
-		'Category 1b': {
+		{
 			id: 2,
 			name: 'Category 1b',
 			parent: 1,
 		},
-		'Category 2': {
+		{
 			id: 3,
 			name: 'Category 2',
 			parent: 0,
 		},
-	},
+	],
 	numberOfItems: 10,
-} )( ( { orderBy, order, category, categories, numberOfItems, setState } ) => (
-	<QueryControls
-		{ ...{ orderBy, order, numberOfItems } }
-		onOrderByChange={ ( orderBy ) => setState( { orderBy } ) }
-		onOrderChange={ ( order ) => setState( { order } ) }
-		categorySuggestions={ categories }
-		selectedCategories={ selectedCategories }
-		onCategoryChange={ ( category ) => setState( { category } ) }
-		onNumberOfItemsChange={ ( numberOfItems ) =>
-			setState( { numberOfItems } )
-		}
-	/>
-) );
+};
+
+const MyQueryControls = () => {
+	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
+	const { orderBy, order, selectedCategories, categories, numberOfItems } = query;
+
+	const updateQuery = ( newQuery ) => {
+		setQuery( { ...query, ...newQuery } );
+	};
+
+	return (
+		<QueryControls
+			{ ...{ orderBy, order, numberOfItems } }
+			onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
+			onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
+			categorySuggestions={ categories }
+			selectedCategories={ selectedCategories }
+			onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
+			onNumberOfItemsChange={ ( newNumberOfItems ) =>
+				updateQuery( { numberOfItems: newCategory } )
+			}
+		/>
+	);
+};
 ```
 
 The format of the categories list also needs to be updated to match what `FormTokenField` expects for making suggestions.
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 0ebf28bb67a1e..203e6992f0dea 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -92,19 +92,21 @@ Render a RangeControl to make a selection from a range of incremental values.
 
 ```jsx
 import { RangeControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyRangeControl = withState( {
-	columns: 2,
-} )( ( { columns, setState } ) => (
-	<RangeControl
-		label="Columns"
-		value={ columns }
-		onChange={ ( columns ) => setState( { columns } ) }
-		min={ 2 }
-		max={ 10 }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyRangeControl = () => {
+	const [ columns, setColumns ] = useState( 2 );
+
+	return(
+		<RangeControl
+			label="Columns"
+			value={ columns }
+			onChange={ ( value ) => setColumns( value ) }
+			min={ 2 }
+			max={ 10 }
+		/>
+	);
+};
 ```
 
 ### Props
diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md
index f3912df94eb64..3bbb96c41f505 100644
--- a/packages/components/src/scroll-lock/README.md
+++ b/packages/components/src/scroll-lock/README.md
@@ -8,14 +8,15 @@ Declare scroll locking as part of modal UI.
 
 ```jsx
 import { ScrollLock } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyScrollLock = () => {
+	const [ isScrollLocked, setIsScrollLocked ] = useState( false );
 
-const MyScrollLock = withState( {
-	isScrollLocked: false,
-} )( ( { isScrollLocked, setState } ) => {
 	const toggleLock = () => {
-		setState( ( state ) => ( { isScrollLocked: ! state.isScrollLocked } ) );
+		setIsScrollLocked( ( locked ) => ! locked ) );
 	};
+
 	return (
 		<div>
 			<Button variant="secondary" onClick={ toggleLock }>
@@ -28,5 +29,5 @@ const MyScrollLock = withState( {
 			</p>
 		</div>
 	);
-} );
+};
 ```
diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md
new file mode 100644
index 0000000000000..da70164dfad85
--- /dev/null
+++ b/packages/components/src/search-control/README.md
@@ -0,0 +1,87 @@
+# SearchControl
+
+SearchControl components let users display a search control.
+
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Render a user interface to input the name of an additional css class.
+
+```js
+import { SearchControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+function MySearchControl( { className, setState } ) {
+    const [ searchInput, setSearchInput ] = useState( '' );
+
+    return (
+        <SearchControl
+            value={ searchInput }
+            onChange={ setSearchInput }
+        />
+    );
+}
+```
+
+### Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input element.
+
+#### label
+
+If this property is added, a label will be generated using label property as the content.
+
+-   Type: `String`
+-   Required: Yes
+
+#### placeholder
+
+If this property is added, a specific placeholder will be used for the input.
+
+-   Type: `String`
+-   Required: No
+#### value
+
+The current value of the input.
+
+-   Type: `String | Number`
+-   Required: Yes
+
+#### className
+
+The class that will be added to the classes of the wrapper div.
+
+-   Type: `String`
+-   Required: No
+
+#### onChange
+
+A function that receives the value of the input.
+
+-   Type: `function`
+-   Required: Yes
+
+#### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+-   Type: `String|WPElement`
+-   Required: No
+### hideLabelFromVision
+
+If true, the label will only be visible to screen readers.
+
+-   Type: `Boolean`
+-   Required: No
+
+## Related components
+
+-   To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.
diff --git a/packages/components/src/search-control/index.js b/packages/components/src/search-control/index.js
new file mode 100644
index 0000000000000..fc0bd900f3b15
--- /dev/null
+++ b/packages/components/src/search-control/index.js
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { Icon, search, closeSmall } from '@wordpress/icons';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../';
+import BaseControl from '../base-control';
+
+function SearchControl( {
+	className,
+	onChange,
+	value,
+	label,
+	placeholder = __( 'Search' ),
+	hideLabelFromVision = true,
+	help,
+} ) {
+	const instanceId = useInstanceId( SearchControl );
+	const searchInput = useRef();
+	const id = `components-search-control-${ instanceId }`;
+
+	return (
+		<BaseControl
+			label={ label }
+			id={ id }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			className={ classnames( className, 'components-search-control' ) }
+		>
+			<div className="components-search-control__input-wrapper">
+				<input
+					ref={ searchInput }
+					className="components-search-control__input"
+					id={ id }
+					type="search"
+					placeholder={ placeholder }
+					onChange={ ( event ) => onChange( event.target.value ) }
+					autoComplete="off"
+					value={ value || '' }
+				/>
+				<div className="components-search-control__icon">
+					{ !! value && (
+						<Button
+							icon={ closeSmall }
+							label={ __( 'Reset search' ) }
+							onClick={ () => {
+								onChange( '' );
+								searchInput.current.focus();
+							} }
+						/>
+					) }
+					{ ! value && <Icon icon={ search } /> }
+				</div>
+			</div>
+		</BaseControl>
+	);
+}
+
+export default SearchControl;
diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/components/src/search-control/index.native.js
similarity index 97%
rename from packages/block-editor/src/components/inserter/search-form.native.js
rename to packages/components/src/search-control/index.native.js
index 12eb6e9f6fe13..e78ccc3815194 100644
--- a/packages/block-editor/src/components/inserter/search-form.native.js
+++ b/packages/components/src/search-control/index.native.js
@@ -61,7 +61,11 @@ function mergeStyles( styles, updateStyles, selectors ) {
 	return styles;
 }
 
-function InserterSearchForm( { value, onChange } ) {
+function SearchControl( {
+	value,
+	onChange,
+	placeholder = __( 'Search Blocks' ),
+} ) {
 	const [ isActive, setIsActive ] = useState( false );
 	const [ currentStyles, setCurrentStyles ] = useState( baseStyles );
 
@@ -219,7 +223,7 @@ function InserterSearchForm( { value, onChange } ) {
 						onChangeText={ onChange }
 						onFocus={ () => setIsActive( true ) }
 						value={ value }
-						placeholder={ __( 'Search blocks' ) }
+						placeholder={ placeholder }
 					/>
 					{ renderRightButton() }
 				</View>
@@ -229,4 +233,4 @@ function InserterSearchForm( { value, onChange } ) {
 	);
 }
 
-export default InserterSearchForm;
+export default SearchControl;
diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js
new file mode 100644
index 0000000000000..2710542a5d6a2
--- /dev/null
+++ b/packages/components/src/search-control/stories/index.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SearchControl from '../';
+
+export default {
+	title: 'Components/SearchControl',
+	component: SearchControl,
+};
+
+export const _default = () => {
+	const [ value, setValue ] = useState();
+	const label = text( 'Label', 'Label Text' );
+	const hideLabelFromVision = boolean( 'Hide Label From Vision', true );
+	const help = text( 'Help Text', 'Help text to explain the input.' );
+
+	return (
+		<SearchControl
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			value={ value }
+			onChange={ setValue }
+		/>
+	);
+};
diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss
new file mode 100644
index 0000000000000..8617ad232552f
--- /dev/null
+++ b/packages/components/src/search-control/style.native.scss
@@ -0,0 +1,30 @@
+.searchForm {
+	height: 46px;
+	border-radius: 8px;
+	color: $gray-dark;
+	margin: $grid-unit-30;
+	background-color: $gray-light;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.searchFormDark {
+	background-color: rgba($white, 0.07);
+}
+
+.searchFormInput {
+	color: $gray-dark;
+	flex: 2;
+}
+
+.searchFormInputDark {
+	color: $white;
+}
+
+.searchFormPlaceholder {
+	color: $gray;
+}
+
+.searchFormPlaceholderDark {
+	color: rgba($white, 0.8);
+}
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
new file mode 100644
index 0000000000000..247b726fc9dd9
--- /dev/null
+++ b/packages/components/src/search-control/style.scss
@@ -0,0 +1,52 @@
+.components-search-control {
+	position: relative;
+
+	input[type="search"].components-search-control__input {
+		@include input-control;
+		display: block;
+		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
+		background: $gray-100;
+		border: none;
+		width: 100%;
+		height: $grid-unit-60;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+}
+
+.components-search-control__icon {
+	position: absolute;
+	top: 0;
+	right: ( $grid-unit-60 - $icon-size ) / 2;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+
+	> svg {
+		margin: $grid-unit-10 0;
+	}
+}
+
+.components-search-control__input-wrapper {
+	position: relative;
+}
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index f5b141eaafba8..1412f339538d3 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -83,24 +83,24 @@ Render a user interface to select the size of an image.
 
 ```jsx
 import { SelectControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MySelectControl = withState( {
-	size: '50%',
-} )( ( { size, setState } ) => (
-	<SelectControl
-		label="Size"
-		value={ size }
-		options={ [
-			{ label: 'Big', value: '100%' },
-			{ label: 'Medium', value: '50%' },
-			{ label: 'Small', value: '25%' },
-		] }
-		onChange={ ( size ) => {
-			setState( { size } );
-		} }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MySelectControl = () => {
+	const [ size, setSize ] = useState( '50%' );
+
+	return (
+		<SelectControl
+			label="Size"
+			value={ size }
+			options={ [
+				{ label: 'Big', value: '100%' },
+				{ label: 'Medium', value: '50%' },
+				{ label: 'Small', value: '25%' },
+			] }
+			onChange={ ( newSize ) => setSize( newSize ) }
+		/>
+	);
+};
 ```
 
 Render a user interface to select multiple users from a list.
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 13c2049b894bf..21f13e7d492f5 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -35,6 +35,7 @@
 @import "./responsive-wrapper/style.scss";
 @import "./sandbox/style.scss";
 @import "./scroll-lock/style.scss";
+@import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
 @import "./swatch/style.scss";
diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
index 562c6375e14a9..11834ddefbd21 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -61,17 +61,19 @@ Render a user interface to input the name of an additional css class.
 
 ```js
 import { TextControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyTextControl = withState( {
-	className: '',
-} )( ( { className, setState } ) => (
-	<TextControl
-		label="Additional CSS Class"
-		value={ className }
-		onChange={ ( className ) => setState( { className } ) }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyTextControl = () => {
+	const [ className, setClassName ] = useState( '' );
+
+	return (
+		<TextControl
+			label="Additional CSS Class"
+			value={ className }
+			onChange={ ( value ) => setClassName( value ) }
+		/>
+	);
+};
 ```
 
 ### Props
diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index 2e16a1e253167..e149dcd5f4d2c 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -8,26 +8,26 @@ Render a user interface to change fixed background setting.
 
 ```jsx
 import { ToggleControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyToggleControl = withState( {
-	hasFixedBackground: false,
-} )( ( { hasFixedBackground, setState } ) => (
-	<ToggleControl
-		label="Fixed Background"
-		help={
-			hasFixedBackground
-				? 'Has fixed background.'
-				: 'No fixed background.'
-		}
-		checked={ hasFixedBackground }
-		onChange={ () =>
-			setState( ( state ) => ( {
-				hasFixedBackground: ! state.hasFixedBackground,
-			} ) )
-		}
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyToggleControl = () => {
+	const [ hasFixedBackground, setHasFixedBackground ] = useState( false );
+
+	return (
+		<ToggleControl
+			label="Fixed Background"
+			help={
+				hasFixedBackground
+					? 'Has fixed background.'
+					: 'No fixed background.'
+			}
+			checked={ hasFixedBackground }
+			onChange={ () => {
+				setHasFixedBackground( ( state ) => ! state );
+			} }
+		/>
+	);
+};
 ```
 
 ## Props
diff --git a/packages/components/src/utils/events.ts b/packages/components/src/utils/events.ts
new file mode 100644
index 0000000000000..3ecc86eba7a02
--- /dev/null
+++ b/packages/components/src/utils/events.ts
@@ -0,0 +1,50 @@
+type EventHandler< T extends Event > = ( event: T ) => void;
+
+/**
+ * Merges event handlers together.
+ *
+ * @template TEvent
+ * @param  handler
+ * @param  otherHandler
+ */
+function mergeEvent< TEvent extends Event >(
+	handler: EventHandler< TEvent >,
+	otherHandler: EventHandler< TEvent >
+): EventHandler< TEvent > {
+	return ( event: TEvent ) => {
+		if ( typeof handler === 'function' ) {
+			handler( event );
+		}
+		if ( typeof otherHandler === 'function' ) {
+			otherHandler( event );
+		}
+	};
+}
+
+/**
+ * Merges two sets of event handlers together.
+ *
+ * @template TEvent
+ * @param  handlers
+ * @param  extraHandlers
+ */
+export function mergeEventHandlers<
+	TEvent extends Event,
+	TLeft extends Record< string, EventHandler< TEvent > >,
+	TRight extends Record< string, EventHandler< TEvent > >
+>( handlers: TLeft, extraHandlers: TRight ): TLeft & TRight {
+	// @ts-ignore We'll fill in all the properties below
+	const mergedHandlers: TLeft & TRight = {
+		...handlers,
+	};
+
+	for ( const [ key, handler ] of Object.entries( extraHandlers ) ) {
+		// @ts-ignore
+		mergedHandlers[ key as keyof typeof mergedHandlers ] =
+			key in mergedHandlers
+				? mergeEvent( mergedHandlers[ key ], handler )
+				: handler;
+	}
+
+	return mergedHandlers;
+}
diff --git a/packages/components/src/utils/hooks/index.js b/packages/components/src/utils/hooks/index.js
index 187718e5e70a9..bc7c1f9fb4b21 100644
--- a/packages/components/src/utils/hooks/index.js
+++ b/packages/components/src/utils/hooks/index.js
@@ -2,3 +2,4 @@ export { default as useControlledState } from './use-controlled-state';
 export { default as useJumpStep } from './use-jump-step';
 export { default as useUpdateEffect } from './use-update-effect';
 export { useControlledValue } from './use-controlled-value';
+export { useCx } from './use-cx';
diff --git a/packages/components/src/utils/hooks/stories/use-cx.js b/packages/components/src/utils/hooks/stories/use-cx.js
new file mode 100644
index 0000000000000..96532565b0389
--- /dev/null
+++ b/packages/components/src/utils/hooks/stories/use-cx.js
@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { useCx } from '..';
+import StyleProvider from '../../../style-provider';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, createPortal } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export default {
+	title: 'Components (Experimental)/useCx',
+};
+
+const IFrame = ( { children } ) => {
+	const [ iframeDocument, setIframeDocument ] = useState();
+
+	const handleRef = ( node ) => {
+		if ( ! node ) {
+			return null;
+		}
+
+		function setIfReady() {
+			const { contentDocument } = node;
+			const { readyState } = contentDocument;
+
+			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
+				return false;
+			}
+
+			setIframeDocument( contentDocument );
+		}
+
+		if ( setIfReady() ) {
+			return;
+		}
+
+		node.addEventListener( 'load', () => {
+			// iframe isn't immediately ready in Firefox
+			setIfReady();
+		} );
+	};
+
+	return (
+		<iframe ref={ handleRef } title="use-cx-test-frame">
+			{ iframeDocument &&
+				createPortal(
+					<StyleProvider document={ iframeDocument }>
+						{ children }
+					</StyleProvider>,
+					iframeDocument.body
+				) }
+		</iframe>
+	);
+};
+
+const Example = ( { args, children } ) => {
+	const cx = useCx();
+	const classes = cx( ...args );
+	return <span className={ classes }>{ children }</span>;
+};
+
+export const _default = () => {
+	const redText = css`
+		color: red;
+	`;
+	return (
+		<IFrame>
+			<Example args={ [ redText ] }>
+				This text is inside an iframe and is red!
+			</Example>
+		</IFrame>
+	);
+};
diff --git a/packages/components/src/utils/hooks/test/use-cx.js b/packages/components/src/utils/hooks/test/use-cx.js
new file mode 100644
index 0000000000000..181e0beeca2a4
--- /dev/null
+++ b/packages/components/src/utils/hooks/test/use-cx.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { cx as innerCx } from '@emotion/css';
+import { insertStyles } from '@emotion/utils';
+import { render } from '@testing-library/react';
+import { css, CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+/**
+ * Internal dependencies
+ */
+import { useCx } from '..';
+
+jest.mock( '@emotion/css', () => ( {
+	cx: jest.fn(),
+} ) );
+
+jest.mock( '@emotion/utils', () => ( {
+	insertStyles: jest.fn(),
+} ) );
+
+function Example( { args } ) {
+	const cx = useCx();
+
+	return <div className={ cx( ...args ) } />;
+}
+
+describe( 'useCx', () => {
+	it( 'should call cx with the built style name and pass serialized styles to insertStyles', () => {
+		const serializedStyle = css`
+			color: red;
+		`;
+		const className = 'component-example';
+		const object = {
+			'component-example-focused': true,
+		};
+
+		const key = 'test-cache-key';
+
+		const container = document.createElement( 'head' );
+
+		const cache = createCache( { container, key } );
+
+		render(
+			<CacheProvider value={ cache }>
+				<Example args={ [ className, serializedStyle, object ] } />
+			</CacheProvider>
+		);
+
+		expect( innerCx ).toHaveBeenCalledWith(
+			className,
+			`${ key }-${ serializedStyle.name }`,
+			object
+		);
+
+		expect( insertStyles ).toHaveBeenCalledWith(
+			cache,
+			serializedStyle,
+			false
+		);
+	} );
+} );
diff --git a/packages/components/src/utils/hooks/use-cx.ts b/packages/components/src/utils/hooks/use-cx.ts
new file mode 100644
index 0000000000000..0642745c743c6
--- /dev/null
+++ b/packages/components/src/utils/hooks/use-cx.ts
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Context } from 'react';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/serialize';
+import { insertStyles } from '@emotion/utils';
+// eslint-disable-next-line no-restricted-imports
+import { cx as innerCx, ClassNamesArg } from '@emotion/css';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback } from '@wordpress/element';
+
+// @ts-ignore Private property
+const EmotionCacheContext: Context< EmotionCache > = CacheProvider._context;
+
+const useEmotionCacheContext = () => useContext( EmotionCacheContext );
+
+const isSerializedStyles = ( o: any ): o is SerializedStyles =>
+	[ 'name', 'styles' ].every( ( p ) => typeof o[ p ] !== 'undefined' );
+
+/**
+ * Retrieve a `cx` function that knows how to handle `SerializedStyles`
+ * returned by the `@emotion/react` `css` function in addition to what
+ * `cx` normally knows how to handle. It also hooks into the Emotion
+ * Cache, allowing `css` calls to work inside iframes.
+ *
+ * @example
+ * import { css } from '@emotion/react';
+ *
+ * const styles = css`
+ * 	color: red
+ * `;
+ *
+ * function RedText( { className, ...props } ) {
+ * 	const cx = useCx();
+ *
+ * 	const classes = cx(styles, className);
+ *
+ * 	return <span className={classes} {...props} />;
+ * }
+ */
+export const useCx = () => {
+	const cache = useEmotionCacheContext();
+
+	const cx = useCallback(
+		( ...classNames: ( ClassNamesArg | SerializedStyles )[] ) => {
+			return innerCx(
+				...classNames.map( ( arg ) => {
+					if ( isSerializedStyles( arg ) ) {
+						insertStyles( cache, arg, false );
+						return `${ cache.key }-${ arg.name }`;
+					}
+					return arg;
+				} )
+			);
+		},
+		[ cache ]
+	);
+
+	return cx;
+};
diff --git a/packages/components/src/utils/keyboard.js b/packages/components/src/utils/keyboard.js
new file mode 100644
index 0000000000000..977b87ada2100
--- /dev/null
+++ b/packages/components/src/utils/keyboard.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { RIGHT, UP, DOWN, LEFT } from '@wordpress/keycodes';
+
+/**
+ * @type {number[]}
+ */
+const arrowKeys = [ RIGHT, UP, DOWN, LEFT ];
+
+/**
+ * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+ *
+ * Source:
+ * https://github.com/downshift-js/downshift/blob/a71005bd879d05d7dcb892d1e0dc5c6ca74e9d39/src/utils.js#L279
+ *
+ * @param {import('react').KeyboardEvent} event A keyboardEvent object
+ *
+ * @return {string} The keyboard key
+ */
+export function normalizeArrowKey( event ) {
+	const { key, keyCode } = event;
+
+	if ( arrowKeys.includes( keyCode ) && key.indexOf( 'Arrow' ) !== 0 ) {
+		return `Arrow${ key }`;
+	}
+	return key;
+}
diff --git a/packages/components/src/utils/test/events.js b/packages/components/src/utils/test/events.js
new file mode 100644
index 0000000000000..75709614b9d07
--- /dev/null
+++ b/packages/components/src/utils/test/events.js
@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies
+ */
+import { mergeEventHandlers } from '../events';
+
+describe( 'mergeEventHandlers', () => {
+	it( 'should merge the two event handler objects', () => {
+		const left = {
+			onclick: jest.fn(),
+		};
+
+		const right = {
+			onclick: jest.fn(),
+		};
+
+		const merged = mergeEventHandlers( left, right );
+
+		merged.onclick();
+
+		expect( left.onclick ).toHaveBeenCalled();
+		expect( right.onclick ).toHaveBeenCalled();
+	} );
+
+	it( 'should preserve all handlers from the left hand side that do not overlap with the right', () => {
+		const left = {
+			ArrowUp: jest.fn(),
+			ArrowDown: jest.fn(),
+		};
+
+		const right = {
+			ArrowUp: jest.fn(),
+		};
+
+		const merged = mergeEventHandlers( left, right );
+
+		merged.ArrowUp();
+
+		expect( left.ArrowUp ).toHaveBeenCalled();
+		expect( right.ArrowUp ).toHaveBeenCalled();
+
+		expect( merged.ArrowDown ).toBe( left.ArrowDown );
+	} );
+
+	it( 'should preserve all handlers form the right hand side that do not overlap with the left', () => {
+		const right = {
+			ArrowUp: jest.fn(),
+			ArrowDown: jest.fn(),
+		};
+
+		const left = {
+			ArrowUp: jest.fn(),
+		};
+
+		const merged = mergeEventHandlers( left, right );
+
+		merged.ArrowUp();
+
+		expect( left.ArrowUp ).toHaveBeenCalled();
+		expect( right.ArrowUp ).toHaveBeenCalled();
+
+		expect( merged.ArrowDown ).toBe( right.ArrowDown );
+	} );
+} );
diff --git a/packages/components/src/utils/test/keyboard.js b/packages/components/src/utils/test/keyboard.js
new file mode 100644
index 0000000000000..8ef46d8fec860
--- /dev/null
+++ b/packages/components/src/utils/test/keyboard.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { RIGHT, UP, DOWN, LEFT, SPACE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeArrowKey } from '../keyboard';
+
+describe( 'normalizeArrowKey', () => {
+	it.each`
+		keyCode    | key               | normalized
+		${ RIGHT } | ${ 'Right' }      | ${ 'ArrowRight' }
+		${ UP }    | ${ 'Up' }         | ${ 'ArrowUp' }
+		${ DOWN }  | ${ 'Down' }       | ${ 'ArrowDown' }
+		${ LEFT }  | ${ 'Left' }       | ${ 'ArrowLeft' }
+		${ RIGHT } | ${ 'ArrowRight' } | ${ 'ArrowRight' }
+		${ UP }    | ${ 'ArrowUp' }    | ${ 'ArrowUp' }
+		${ DOWN }  | ${ 'ArrowDown' }  | ${ 'ArrowDown' }
+		${ LEFT }  | ${ 'ArrowLeft' }  | ${ 'ArrowLeft' }
+		${ SPACE } | ${ 'Space' }      | ${ 'Space' }
+	`(
+		'should return $normalized for $key with keycode $keyCode',
+		( { keyCode, key, normalized } ) => {
+			const e = new window.KeyboardEvent( 'keydown', {
+				key,
+				keyCode,
+			} );
+
+			expect( normalizeArrowKey( e ) ).toEqual( normalized );
+		}
+	);
+} );
diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js
index e4397b2df277f..6c7fc62127140 100644
--- a/packages/core-data/src/selectors.js
+++ b/packages/core-data/src/selectors.js
@@ -316,6 +316,56 @@ export const __experimentalGetDirtyEntityRecords = createSelector(
 	( state ) => [ state.entities.data ]
 );
 
+/**
+ * Returns the list of entities currently being saved.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {[{ title: string, key: string, name: string, kind: string }]} The list of records being saved.
+ */
+export const __experimentalGetEntitiesBeingSaved = createSelector(
+	( state ) => {
+		const {
+			entities: { data },
+		} = state;
+		const recordsBeingSaved = [];
+		Object.keys( data ).forEach( ( kind ) => {
+			Object.keys( data[ kind ] ).forEach( ( name ) => {
+				const primaryKeys = Object.keys(
+					data[ kind ][ name ].saving
+				).filter( ( primaryKey ) =>
+					isSavingEntityRecord( state, kind, name, primaryKey )
+				);
+
+				if ( primaryKeys.length ) {
+					const entity = getEntity( state, kind, name );
+					primaryKeys.forEach( ( primaryKey ) => {
+						const entityRecord = getEditedEntityRecord(
+							state,
+							kind,
+							name,
+							primaryKey
+						);
+						recordsBeingSaved.push( {
+							// We avoid using primaryKey because it's transformed into a string
+							// when it's used as an object key.
+							key:
+								entityRecord[
+									entity.key || DEFAULT_ENTITY_KEY
+								],
+							title: entity?.getTitle?.( entityRecord ) || '',
+							name,
+							kind,
+						} );
+					} );
+				}
+			} );
+		} );
+		return recordsBeingSaved;
+	},
+	( state ) => [ state.entities.data ]
+);
+
 /**
  * Returns the specified entity record's edits.
  *
diff --git a/packages/core-data/src/test/selectors.js b/packages/core-data/src/test/selectors.js
index 68878692351a0..586d39985e0c5 100644
--- a/packages/core-data/src/test/selectors.js
+++ b/packages/core-data/src/test/selectors.js
@@ -12,6 +12,7 @@ import {
 	hasEntityRecords,
 	getEntityRecords,
 	__experimentalGetDirtyEntityRecords,
+	__experimentalGetEntitiesBeingSaved,
 	getEntityRecordNonTransientEdits,
 	getEmbedPreview,
 	isPreviewEmbedFallback,
@@ -396,6 +397,54 @@ describe( '__experimentalGetDirtyEntityRecords', () => {
 	} );
 } );
 
+describe( '__experimentalGetEntitiesBeingSaved', () => {
+	it( "should return a map of objects with each raw entity record that's being saved", () => {
+		const state = deepFreeze( {
+			entities: {
+				config: [
+					{
+						kind: 'someKind',
+						name: 'someName',
+						transientEdits: { someTransientEditProperty: true },
+					},
+				],
+				data: {
+					someKind: {
+						someName: {
+							queriedData: {
+								items: {
+									default: {
+										someKey: {
+											someProperty: 'somePersistedValue',
+											someRawProperty: {
+												raw: 'somePersistedRawValue',
+											},
+											id: 'someKey',
+										},
+									},
+								},
+								itemIsComplete: {
+									default: {
+										someKey: true,
+									},
+								},
+							},
+							saving: {
+								someKey: {
+									pending: true,
+								},
+							},
+						},
+					},
+				},
+			},
+		} );
+		expect( __experimentalGetEntitiesBeingSaved( state ) ).toEqual( [
+			{ kind: 'someKind', name: 'someName', key: 'someKey', title: '' },
+		] );
+	} );
+} );
+
 describe( 'getEntityRecordNonTransientEdits', () => {
 	it( 'should return an empty object when the entity does not have a loaded config.', () => {
 		const state = deepFreeze( {
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 1044355d6a91c..8eb36f058d77a 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Plugin scaffolded requires WordPress 5.8 now ([#33252](https://github.com/WordPress/gutenberg/pull/33252).
+-   Scaffolded block is now registered from `block.json` with the `register_block_type` helper ([#33252](https://github.com/WordPress/gutenberg/pull/33252)).
+
 ## 1.2.0 (2021-04-06)
 
 ### Enhancement
diff --git a/packages/create-block-tutorial-template/templates/$slug.php.mustache b/packages/create-block-tutorial-template/templates/$slug.php.mustache
index fc419db2d8518..4b83ae87d3a5b 100644
--- a/packages/create-block-tutorial-template/templates/$slug.php.mustache
+++ b/packages/create-block-tutorial-template/templates/$slug.php.mustache
@@ -4,7 +4,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.7
+ * Requires at least: 5.8
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -29,6 +29,6 @@
  * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	register_block_type_from_metadata( __DIR__ );
+	register_block_type( __DIR__ );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 809a4cc095d8e..241f5a829dee2 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Plugin scaffolded with the `esnext` template requires WordPress 5.8 now ([#33252](https://github.com/WordPress/gutenberg/pull/33252).
+-   Block scaffolded with the `esnext` template is now registered from `block.json` with the `register_block_type` helper ([#33252](https://github.com/WordPress/gutenberg/pull/33252)).
+
 ## 2.3.0 (2021-04-29)
 
 ### Enhancement
diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache
index fc419db2d8518..4b83ae87d3a5b 100644
--- a/packages/create-block/lib/templates/esnext/$slug.php.mustache
+++ b/packages/create-block/lib/templates/esnext/$slug.php.mustache
@@ -4,7 +4,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.7
+ * Requires at least: 5.8
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -29,6 +29,6 @@
  * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	register_block_type_from_metadata( __DIR__ );
+	register_block_type( __DIR__ );
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
index 340aca24cb61d..d91ec2ac092ca 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
@@ -1,100 +1,19 @@
 /**
  * External dependencies
  */
-import { omit, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { serialize, parse, createBlock } from '@wordpress/blocks';
 import { useState, useEffect, useCallback } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { getWidgetIdFromBlock, addWidgetIdToBlock } from '@wordpress/widgets';
 
-function blockToWidget( block, existingWidget = null ) {
-	let widget;
-
-	const isValidLegacyWidgetBlock =
-		block.name === 'core/legacy-widget' &&
-		( block.attributes.id || block.attributes.instance );
-
-	if ( isValidLegacyWidgetBlock ) {
-		if ( block.attributes.id ) {
-			// Widget that does not extend WP_Widget.
-			widget = {
-				id: block.attributes.id,
-			};
-		} else {
-			const { encoded, hash, raw, ...rest } = block.attributes.instance;
-
-			// Widget that extends WP_Widget.
-			widget = {
-				idBase: block.attributes.idBase,
-				instance: {
-					...existingWidget?.instance,
-					// Required only for the customizer.
-					is_widget_customizer_js_value: true,
-					encoded_serialized_instance: encoded,
-					instance_hash_key: hash,
-					raw_instance: raw,
-					...rest,
-				},
-			};
-		}
-	} else {
-		const instance = {
-			content: serialize( block ),
-		};
-		widget = {
-			idBase: 'block',
-			widgetClass: 'WP_Widget_Block',
-			instance: {
-				raw_instance: instance,
-			},
-		};
-	}
-
-	return {
-		...omit( existingWidget, [ 'form', 'rendered' ] ),
-		...widget,
-	};
-}
-
-function widgetToBlock( { id, idBase, number, instance } ) {
-	let block;
-
-	const {
-		encoded_serialized_instance: encoded,
-		instance_hash_key: hash,
-		raw_instance: raw,
-		...rest
-	} = instance;
-
-	if ( idBase === 'block' ) {
-		const parsedBlocks = parse( raw.content );
-		block = parsedBlocks.length
-			? parsedBlocks[ 0 ]
-			: createBlock( 'core/paragraph', {} );
-	} else if ( number ) {
-		// Widget that extends WP_Widget.
-		block = createBlock( 'core/legacy-widget', {
-			idBase,
-			instance: {
-				encoded,
-				hash,
-				raw,
-				...rest,
-			},
-		} );
-	} else {
-		// Widget that does not extend WP_Widget.
-		block = createBlock( 'core/legacy-widget', {
-			id,
-		} );
-	}
-
-	return addWidgetIdToBlock( block, id );
-}
+/**
+ * Internal dependencies
+ */
+import { blockToWidget, widgetToBlock } from '../../utils';
 
 function widgetsToBlocks( widgets ) {
 	return widgets.map( ( widget ) => widgetToBlock( widget ) );
diff --git a/packages/customize-widgets/src/filters/move-to-sidebar.js b/packages/customize-widgets/src/filters/move-to-sidebar.js
index e91dafe09aa0f..9e7910ce785a6 100644
--- a/packages/customize-widgets/src/filters/move-to-sidebar.js
+++ b/packages/customize-widgets/src/filters/move-to-sidebar.js
@@ -11,7 +11,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { MoveToWidgetArea, getWidgetIdFromBlock } from '@wordpress/widgets';
 
@@ -22,14 +22,17 @@ import {
 	useSidebarControls,
 	useActiveSidebarControl,
 } from '../components/sidebar-controls';
+import { useFocusControl } from '../components/focus-control';
+import { blockToWidget } from '../utils';
 
 const withMoveToSidebarToolbarItem = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const widgetId = getWidgetIdFromBlock( props );
+		let widgetId = getWidgetIdFromBlock( props );
 		const sidebarControls = useSidebarControls();
 		const activeSidebarControl = useActiveSidebarControl();
 		const hasMultipleSidebars = sidebarControls?.length > 1;
 		const blockName = props.name;
+		const clientId = props.clientId;
 		const canInsertBlockInSidebar = useSelect(
 			( select ) => {
 				// Use an empty string to represent the root block list, which
@@ -41,19 +44,46 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent(
 			},
 			[ blockName ]
 		);
+		const block = useSelect(
+			( select ) => select( blockEditorStore ).getBlock( clientId ),
+			[ clientId ]
+		);
+		const { removeBlock } = useDispatch( blockEditorStore );
+		const [ , focusWidget ] = useFocusControl();
 
 		function moveToSidebar( sidebarControlId ) {
 			const newSidebarControl = sidebarControls.find(
 				( sidebarControl ) => sidebarControl.id === sidebarControlId
 			);
 
-			const oldSetting = activeSidebarControl.setting;
-			const newSetting = newSidebarControl.setting;
+			if ( widgetId ) {
+				/**
+				 * If there's a widgetId, move it to the other sidebar.
+				 */
+				const oldSetting = activeSidebarControl.setting;
+				const newSetting = newSidebarControl.setting;
+
+				oldSetting( without( oldSetting(), widgetId ) );
+				newSetting( [ ...newSetting(), widgetId ] );
+			} else {
+				/**
+				 * If there isn't a widgetId, it's most likely a inner block.
+				 * First, remove the block in the original sidebar,
+				 * then, create a new widget in the new sidebar and get back its widgetId.
+				 */
+				const sidebarAdapter = newSidebarControl.sidebarAdapter;
 
-			oldSetting( without( oldSetting(), widgetId ) );
-			newSetting( [ ...newSetting(), widgetId ] );
+				removeBlock( clientId );
+				const addedWidgetIds = sidebarAdapter.setWidgets( [
+					...sidebarAdapter.getWidgets(),
+					blockToWidget( block ),
+				] );
+				// The last non-null id is the added widget's id.
+				widgetId = addedWidgetIds.reverse().find( ( id ) => !! id );
+			}
 
-			newSidebarControl.expand();
+			// Move focus to the moved widget and expand the sidebar.
+			focusWidget( widgetId );
 		}
 
 		return (
diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js
index baa8c70b01ac2..68fc6b2fe2d71 100644
--- a/packages/customize-widgets/src/utils.js
+++ b/packages/customize-widgets/src/utils.js
@@ -1,4 +1,14 @@
 // @ts-check
+/**
+ * WordPress dependencies
+ */
+import { serialize, parse, createBlock } from '@wordpress/blocks';
+import { addWidgetIdToBlock } from '@wordpress/widgets';
+
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
 
 /**
  * Convert settingId to widgetId.
@@ -18,3 +28,105 @@ export function settingIdToWidgetId( settingId ) {
 
 	return settingId;
 }
+
+/**
+ * Transform a block to a customizable widget.
+ *
+ * @param {WPBlock} block          The block to be transformed from.
+ * @param {Object}  existingWidget The widget to be extended from.
+ * @return {Object} The transformed widget.
+ */
+export function blockToWidget( block, existingWidget = null ) {
+	let widget;
+
+	const isValidLegacyWidgetBlock =
+		block.name === 'core/legacy-widget' &&
+		( block.attributes.id || block.attributes.instance );
+
+	if ( isValidLegacyWidgetBlock ) {
+		if ( block.attributes.id ) {
+			// Widget that does not extend WP_Widget.
+			widget = {
+				id: block.attributes.id,
+			};
+		} else {
+			const { encoded, hash, raw, ...rest } = block.attributes.instance;
+
+			// Widget that extends WP_Widget.
+			widget = {
+				idBase: block.attributes.idBase,
+				instance: {
+					...existingWidget?.instance,
+					// Required only for the customizer.
+					is_widget_customizer_js_value: true,
+					encoded_serialized_instance: encoded,
+					instance_hash_key: hash,
+					raw_instance: raw,
+					...rest,
+				},
+			};
+		}
+	} else {
+		const instance = {
+			content: serialize( block ),
+		};
+		widget = {
+			idBase: 'block',
+			widgetClass: 'WP_Widget_Block',
+			instance: {
+				raw_instance: instance,
+			},
+		};
+	}
+
+	return {
+		...omit( existingWidget, [ 'form', 'rendered' ] ),
+		...widget,
+	};
+}
+
+/**
+ * Transform a widget to a block.
+ *
+ * @param {Object} widget          The widget to be transformed from.
+ * @param {string} widget.id       The widget id.
+ * @param {string} widget.idBase   The id base of the widget.
+ * @param {number} widget.number   The number/index of the widget.
+ * @param {Object} widget.instance The instance of the widget.
+ * @return {WPBlock} The transformed block.
+ */
+export function widgetToBlock( { id, idBase, number, instance } ) {
+	let block;
+
+	const {
+		encoded_serialized_instance: encoded,
+		instance_hash_key: hash,
+		raw_instance: raw,
+		...rest
+	} = instance;
+
+	if ( idBase === 'block' ) {
+		const parsedBlocks = parse( raw.content );
+		block = parsedBlocks.length
+			? parsedBlocks[ 0 ]
+			: createBlock( 'core/paragraph', {} );
+	} else if ( number ) {
+		// Widget that extends WP_Widget.
+		block = createBlock( 'core/legacy-widget', {
+			idBase,
+			instance: {
+				encoded,
+				hash,
+				raw,
+				...rest,
+			},
+		} );
+	} else {
+		// Widget that does not extend WP_Widget.
+		block = createBlock( 'core/legacy-widget', {
+			id,
+		} );
+	}
+
+	return addWidgetIdToBlock( block, id );
+}
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index 48a4985bfe62f..1bcce329f07df 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -7,7 +7,7 @@ import { canvas } from './canvas';
 // This selector is written to support the current and old inserter markup
 // because the performance tests need to be able to run across versions.
 const INSERTER_SEARCH_SELECTOR =
-	'.block-editor-inserter__search-input,input.block-editor-inserter__search';
+	'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 
 /**
  * Opens the global block inserter.
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json
index b6e16b848abff..6413a0cea75d7 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.json
@@ -4,6 +4,7 @@
 		"name": "core/columns",
 		"isValid": true,
 		"attributes": {
+			"isStackedOnMobile": true,
 			"backgroundColor": "secondary"
 		},
 		"innerBlocks": [
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
index ab71d35d66177..d577a0fd6b96c 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
@@ -3,7 +3,9 @@
 		"clientId": "_clientId_0",
 		"name": "core/columns",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"isStackedOnMobile": true
+		},
 		"innerBlocks": [
 			{
 				"clientId": "_clientId_0",
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html
new file mode 100644
index 0000000000000..e28fd69aa1611
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html
@@ -0,0 +1,24 @@
+<!-- wp:columns {"isStackedOnMobile":false,"backgroundColor":"secondary"} -->
+<div class="wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background">
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:paragraph -->
+		<p>Column One, Paragraph One</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:paragraph -->
+		<p>Column One, Paragraph Two</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:paragraph -->
+		<p>Column Two, Paragraph One</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:paragraph -->
+		<p>Column Three, Paragraph One</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json
new file mode 100644
index 0000000000000..72f1585d5177e
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json
@@ -0,0 +1,76 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/columns",
+		"isValid": true,
+		"attributes": {
+			"isStackedOnMobile": false,
+			"backgroundColor": "secondary"
+		},
+		"innerBlocks": [
+			{
+				"clientId": "_clientId_0",
+				"name": "core/column",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"clientId": "_clientId_0",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column One, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column One, Paragraph One</p>"
+					},
+					{
+						"clientId": "_clientId_1",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column One, Paragraph Two",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column One, Paragraph Two</p>"
+					}
+				],
+				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+			},
+			{
+				"clientId": "_clientId_1",
+				"name": "core/column",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"clientId": "_clientId_0",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column Two, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column Two, Paragraph One</p>"
+					},
+					{
+						"clientId": "_clientId_1",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column Three, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column Three, Paragraph One</p>"
+					}
+				],
+				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+			}
+		],
+		"originalContent": "<div class=\"wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background\">\n\t\n\t\n</div>"
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json
new file mode 100644
index 0000000000000..6e12b92b39aa5
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.parsed.json
@@ -0,0 +1,83 @@
+[
+	{
+		"blockName": "core/columns",
+		"attrs": {
+			"isStackedOnMobile": false,
+			"backgroundColor": "secondary"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/column",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column One, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column One, Paragraph One</p>\n\t\t"
+						]
+					},
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column One, Paragraph Two</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column One, Paragraph Two</p>\n\t\t"
+						]
+					}
+				],
+				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-column\">\n\t\t",
+					null,
+					"\n\t\t",
+					null,
+					"\n\t</div>\n\t"
+				]
+			},
+			{
+				"blockName": "core/column",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column Two, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column Two, Paragraph One</p>\n\t\t"
+						]
+					},
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column Three, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column Three, Paragraph One</p>\n\t\t"
+						]
+					}
+				],
+				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-column\">\n\t\t",
+					null,
+					"\n\t\t",
+					null,
+					"\n\t</div>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background\">\n\t\n\t\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background\">\n\t",
+			null,
+			"\n\t",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html
new file mode 100644
index 0000000000000..ca77f7df2961f
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.serialized.html
@@ -0,0 +1,21 @@
+<!-- wp:columns {"isStackedOnMobile":false,"backgroundColor":"secondary"} -->
+<div class="wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column One, Paragraph One</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Column One, Paragraph Two</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column Two, Paragraph One</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Column Three, Paragraph One</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js
index 4ea20859f8b2a..da30710f5c43c 100644
--- a/packages/e2e-tests/specs/editor/blocks/columns.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/columns.test.js
@@ -21,7 +21,7 @@ describe( 'Columns', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnBlockMenuItem = (
 			await page.$x(
-				'//button[contains(concat(" ", @class, " "), " block-editor-block-navigation-block-select-button ")][text()="Column"]'
+				'//button[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
 			)
 		 )[ 0 ];
 		await columnBlockMenuItem.click();
diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
index fbec51cb698e0..cd737f77a3702 100644
--- a/packages/e2e-tests/specs/editor/blocks/cover.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/cover.test.js
@@ -26,7 +26,7 @@ describe( 'Cover', () => {
 		// Select the cover block.By default the child paragraph gets selected.
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		await page.click(
-			'.block-editor-block-navigation-block__contents-container button'
+			'.block-editor-list-view-block__contents-container button'
 		);
 
 		const heightInput = (
diff --git a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js
index d8fc23bf64e86..d70cf0e615753 100644
--- a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js
@@ -40,7 +40,7 @@ async function getFirstInserterIcon() {
 async function selectFirstBlock() {
 	await pressKeyWithModifier( 'access', 'o' );
 	const navButtons = await page.$$(
-		'.block-editor-block-navigation-block-select-button'
+		'.block-editor-list-view-block-select-button'
 	);
 	await navButtons[ 0 ].click();
 }
diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js
index 4a20bfad3048c..51431ef9a6a41 100644
--- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js
@@ -132,7 +132,7 @@ describe( 'Block variations', () => {
 			return page.evaluate(
 				() =>
 					document.querySelector(
-						'.block-editor-block-navigation-block-select-button'
+						'.block-editor-list-view-block-select-button'
 					).textContent
 			);
 		};
diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
index aee6398871a9b..03abfc56d189b 100644
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -123,12 +123,12 @@ describe( 'cpt locking', () => {
 			await page.click(
 				'.wp-block-column .block-editor-button-block-appender'
 			);
-			await page.type( '.block-editor-inserter__search-input', 'image' );
+			await page.type( '.block-editor-inserter__search input', 'image' );
 			await pressKeyTimes( 'Tab', 2 );
 			await page.keyboard.press( 'Enter' );
 			await page.click( '.edit-post-header-toolbar__inserter-toggle' );
 			await page.type(
-				'.block-editor-inserter__search-input',
+				'.block-editor-inserter__search input',
 				'gallery'
 			);
 			await pressKeyTimes( 'Tab', 2 );
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index ca9c2c792249f..fd057e8485338 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -12,9 +12,7 @@ import {
 
 async function openBlockNavigator() {
 	await pressKeyWithModifier( 'access', 'o' );
-	await page.waitForSelector(
-		'.block-editor-block-navigation-leaf.is-selected'
-	);
+	await page.waitForSelector( '.block-editor-list-view-leaf.is-selected' );
 }
 
 async function tabToColumnsControl() {
@@ -53,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Columns')]"
+				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
 			)
 		 )[ 0 ];
 		await columnsBlockMenuItem.click();
@@ -71,13 +69,13 @@ describe( 'Navigating the block hierarchy', () => {
 		// Wait for the new column block to appear in the list view
 		// 5 = Columns, Column, Paragraph, Column, *Column*
 		await page.waitForSelector(
-			'tr.block-editor-block-navigation-leaf:nth-of-type(5)'
+			'tr.block-editor-list-view-leaf:nth-of-type(5)'
 		);
 
 		// Navigate to the last column block.
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Column')]"
+				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
 			)
 		 )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
@@ -187,7 +185,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Group')]"
+				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
 			)
 		 )[ 0 ];
 		await groupMenuItem.click();
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index e4a0e07a13d81..acc7965c5621d 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -147,7 +147,7 @@ describe( 'Inserting blocks', () => {
 			() =>
 				document.activeElement &&
 				document.activeElement.classList.contains(
-					'block-editor-inserter__search-input'
+					'components-search-control__input'
 				)
 		);
 		await page.keyboard.type( 'para' );
@@ -185,7 +185,7 @@ describe( 'Inserting blocks', () => {
 			() => document.activeElement.classList
 		);
 		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-inserter__search-input'
+			'components-search-control__input'
 		);
 
 		// Try using the up arrow key (vertical navigation triggers the issue described in #9583).
@@ -196,7 +196,7 @@ describe( 'Inserting blocks', () => {
 			() => document.activeElement.classList
 		);
 		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-inserter__search-input'
+			'components-search-control__input'
 		);
 
 		// Tab to the block list
@@ -250,7 +250,7 @@ describe( 'Inserting blocks', () => {
 		);
 
 		// Insert a paragraph block.
-		await page.waitForSelector( '.block-editor-inserter__search-input' );
+		await page.waitForSelector( '.block-editor-inserter__search input' );
 
 		// Search for the paragraph block if it's not in the list of blocks shown.
 		if ( ! page.$( '.editor-block-list-item-paragraph' ) ) {
diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js
index 3b8e6746ac866..566303fabfeaf 100644
--- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js
+++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js
@@ -29,7 +29,7 @@ const addParagraphsAndColumnsDemo = async () => {
 	await page.keyboard.press( 'Enter' );
 	await page.click( ':focus [aria-label="Two columns; equal split"]' );
 	await page.click( ':focus .block-editor-button-block-appender' );
-	await page.waitForSelector( ':focus.block-editor-inserter__search-input' );
+	await page.waitForSelector( '.block-editor-inserter__search input:focus' );
 	await page.keyboard.type( 'Paragraph' );
 	await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
@@ -40,7 +40,7 @@ const addParagraphsAndColumnsDemo = async () => {
 	// is a temporary solution.
 	await page.focus( '.wp-block[data-type="core/column"]:nth-child(2)' );
 	await page.click( ':focus .block-editor-button-block-appender' );
-	await page.waitForSelector( ':focus.block-editor-inserter__search-input' );
+	await page.waitForSelector( '.block-editor-inserter__search input:focus' );
 	await page.keyboard.type( 'Paragraph' );
 	await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
index 4c389d1076970..d5290e710d3fb 100644
--- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -348,7 +348,7 @@ describe( 'Navigation', () => {
 			// Scope element selector to the Editor's "Content" region as otherwise it picks up on
 			// block previews.
 			const navBlockItemsLength = await page.$$eval(
-				'[aria-label="Editor content"][role="region"] li[aria-label="Block: Custom Link"]',
+				'[aria-label="Editor content"][role="region"] div[aria-label="Block: Custom Link"]',
 				( els ) => els.length
 			);
 
diff --git a/packages/e2e-tests/specs/experiments/document-settings.test.js b/packages/e2e-tests/specs/experiments/document-settings.test.js
index d15e6f63c68a8..659805a2f7765 100644
--- a/packages/e2e-tests/specs/experiments/document-settings.test.js
+++ b/packages/e2e-tests/specs/experiments/document-settings.test.js
@@ -59,7 +59,7 @@ describe( 'Document Settings', () => {
 					'.edit-post-header-toolbar__list-view-toggle'
 				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
+					'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 				);
 				headerTemplatePartListViewButton.click();
 				await page.click(
diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
index dc640faf32cf2..937ba8a090ecb 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -244,7 +244,7 @@ describe( 'Multi-entity save flow', () => {
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
+				'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 			);
 			headerTemplatePartListViewButton.click();
 			await page.click( 'button[aria-label="Close list view sidebar"]' );
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index 301bbae01c705..fa8bdf21d852a 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -313,7 +313,7 @@ describe( 'Navigation editor', () => {
 
 		// Select a link block with nested links in a submenu.
 		const parentLinkXPath =
-			'//li[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
+			'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
 		await linkBlock.click();
 
@@ -322,7 +322,7 @@ describe( 'Navigation editor', () => {
 		// Submenus are hidden using `visibility: hidden` and shown using
 		// `visibility: visible` so the visible/hidden options must be used
 		// when selecting the elements.
-		const submenuLinkXPath = `${ parentLinkXPath }//li[@aria-label="Block: Custom Link"]`;
+		const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`;
 		const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, {
 			visible: true,
 		} );
diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
index 701ece8f38220..960d93ce1b299 100644
--- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js
@@ -700,6 +700,69 @@ describe( 'Widgets Customizer', () => {
 			"The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored."
 		);
 	} );
+
+	it( 'should move (inner) blocks to another sidebar', async () => {
+		const widgetsPanel = await find( {
+			role: 'heading',
+			name: /Widgets/,
+			level: 3,
+		} );
+		await widgetsPanel.click();
+
+		const footer1Section = await find( {
+			role: 'heading',
+			name: /Footer #1/,
+			level: 3,
+		} );
+		await footer1Section.click();
+
+		await addBlock( 'Paragraph' );
+		await page.keyboard.type( 'First Paragraph' );
+
+		await showBlockToolbar();
+		await clickBlockToolbarButton( 'Options' );
+		const groupButton = await find( {
+			role: 'menuitem',
+			name: 'Group',
+		} );
+		await groupButton.click();
+
+		// Refocus the paragraph block.
+		const paragraphBlock = await find( {
+			role: 'group',
+			name: 'Paragraph block',
+			value: 'First Paragraph',
+		} );
+		await paragraphBlock.focus();
+		await showBlockToolbar();
+		await clickBlockToolbarButton( 'Move to widget area' );
+
+		const footer2Option = await find( {
+			role: 'menuitemradio',
+			name: 'Footer #2',
+		} );
+		await footer2Option.click();
+
+		// Should switch to and expand Footer #2.
+		await expect( {
+			role: 'heading',
+			name: 'Customizing ▸ Widgets Footer #2',
+		} ).toBeFound();
+
+		// The paragraph block should be moved to the new sidebar and have focus.
+		const movedParagraphBlockQuery = {
+			role: 'group',
+			name: 'Paragraph block',
+			value: 'First Paragraph',
+		};
+		await expect( movedParagraphBlockQuery ).toBeFound();
+		const movedParagraphBlock = await find( movedParagraphBlockQuery );
+		await expect( movedParagraphBlock ).toHaveFocus();
+
+		expect( console ).toHaveWarned(
+			"The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored."
+		);
+	} );
 } );
 
 /**
diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js
index 8dc3aea8ec91d..b183f8f7e1874 100644
--- a/packages/edit-post/src/components/block-manager/index.js
+++ b/packages/edit-post/src/components/block-manager/index.js
@@ -8,10 +8,9 @@ import { filter, includes, isArray } from 'lodash';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { withSelect } from '@wordpress/data';
-import { VisuallyHidden, TextControl } from '@wordpress/components';
+import { SearchControl } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,7 +26,6 @@ function BlockManager( {
 	numberOfHiddenBlocks,
 } ) {
 	const [ search, setSearch ] = useState( '' );
-	const instanceId = useInstanceId( BlockManager );
 
 	// Filtering occurs here (as opposed to `withSelect`) to avoid
 	// wasted renders by consequence of `Array#filter` producing
@@ -55,15 +53,8 @@ function BlockManager( {
 					) }
 				</div>
 			) }
-			<VisuallyHidden
-				as="label"
-				htmlFor={ `edit-post-block-manager__search-${ instanceId }` }
-			>
-				{ __( 'Search for a block' ) }
-			</VisuallyHidden>
-			<TextControl
-				type="search"
-				id={ `edit-post-block-manager__search-${ instanceId }` }
+			<SearchControl
+				label={ __( 'Search for a block' ) }
 				placeholder={ __( 'Search for a block' ) }
 				value={ search }
 				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
index e375b5091df2b..3905eeea059f7 100644
--- a/packages/edit-post/src/components/block-manager/style.scss
+++ b/packages/edit-post/src/components/block-manager/style.scss
@@ -6,19 +6,6 @@
 
 .edit-post-block-manager__search {
 	margin: $grid-unit-20 0;
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
-	.components-base-control__label {
-		margin-top: -0.25 * $grid-unit-20;
-	}
-
-	input[type="search"].components-text-control__input {
-		padding: $grid-unit-10;
-		border-radius: $radius-block-ui;
-	}
 }
 
 .edit-post-block-manager__disabled-blocks-count {
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 6334791036c25..2bbe75e85b3c8 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -66,7 +66,7 @@ function HeaderToolbar() {
 			showIconLabels: isFeatureActive( 'showIconLabels' ),
 			isListViewOpen: isListViewOpened(),
 			listViewShortcut: getShortcutRepresentation(
-				'core/edit-post/toggle-block-navigation'
+				'core/edit-post/toggle-list-view'
 			),
 		};
 	}, [] );
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
index 5ce5499012446..a3d801eb2133d 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -28,8 +28,8 @@
 		}
 	}
 
-	// Hide table of contents and block navigation on mobile.
-	.block-editor-block-navigation {
+	// Hide table of contents and list view on mobile.
+	.block-editor-list-view {
 		display: none;
 
 		@include break-small() {
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 3aa6a440ca784..ef53c3a4d39f9 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -192,7 +192,7 @@
 	.components-button.editor-history__undo,
 	.components-button.editor-history__redo,
 	.table-of-contents .components-button,
-	.components-button.block-editor-block-navigation {
+	.components-button.block-editor-list-view {
 		margin: 0;
 		padding: 6px 6px 6px $grid-unit-50;
 		width: 14.625rem;
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
index 428e5996f5ead..357a5607f6e3c 100644
--- a/packages/edit-post/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -61,7 +61,7 @@ function KeyboardShortcuts() {
 		} );
 
 		registerShortcut( {
-			name: 'core/edit-post/toggle-block-navigation',
+			name: 'core/edit-post/toggle-list-view',
 			category: 'global',
 			description: __( 'Open the block list view.' ),
 			keyCombination: {
@@ -166,7 +166,7 @@ function KeyboardShortcuts() {
 	);
 
 	useShortcut(
-		'core/edit-post/toggle-block-navigation',
+		'core/edit-post/toggle-list-view',
 		() => setIsListViewOpened( ! isListViewOpened() ),
 		{ bindGlobal: true }
 	);
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index eec907a073ed6..3a536a74140bd 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -81,7 +81,10 @@ export default function PreferencesModal() {
 					<>
 						{ isLargeViewport && (
 							<Section
-								title={ __( 'Choose your own experience' ) }
+								title={ __( 'Publishing' ) }
+								description={ __(
+									'Change options related to publishing.'
+								) }
 							>
 								<EnablePublishSidebarOption
 									help={ __(
@@ -94,7 +97,12 @@ export default function PreferencesModal() {
 							</Section>
 						) }
 
-						<Section title={ __( 'Decide what to focus on' ) }>
+						<Section
+							title={ __( 'Appearance' ) }
+							description={ __(
+								'Customize options related to the block editor interface and editing flow.'
+							) }
+						>
 							<EnableFeature
 								featureName="reducedUI"
 								help={ __(
@@ -109,6 +117,18 @@ export default function PreferencesModal() {
 								) }
 								label={ __( 'Spotlight mode' ) }
 							/>
+							<EnableFeature
+								featureName="showIconLabels"
+								help={ __( 'Shows text instead of icons.' ) }
+								label={ __( 'Display button labels' ) }
+							/>
+							<EnableFeature
+								featureName="themeStyles"
+								help={ __(
+									'Make the editor look like your theme.'
+								) }
+								label={ __( 'Use theme styles' ) }
+							/>
 							{ showBlockBreadcrumbsOption && (
 								<EnableFeature
 									featureName="showBlockBreadcrumbs"
@@ -122,36 +142,15 @@ export default function PreferencesModal() {
 					</>
 				),
 			},
-			{
-				name: 'appearance',
-				tabLabel: __( 'Appearance' ),
-				content: (
-					<Section title={ __( 'Choose the way it looks' ) }>
-						<EnableFeature
-							featureName="showIconLabels"
-							help={ __(
-								'Shows text instead of icons in toolbar.'
-							) }
-							label={ __( 'Display button labels' ) }
-						/>
-						<EnableFeature
-							featureName="themeStyles"
-							help={ __(
-								'Make the editor look like your theme.'
-							) }
-							label={ __( 'Use theme styles' ) }
-						/>
-					</Section>
-				),
-			},
 			{
 				name: 'blocks',
 				tabLabel: __( 'Blocks' ),
 				content: (
 					<>
 						<Section
-							title={ __(
-								'Choose how you interact with blocks'
+							title={ __( 'Block interactions' ) }
+							description={ __(
+								'Customize how you interact with blocks in the block library and editing canvas.'
 							) }
 						>
 							<EnableFeature
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 93b38fe63759a..5e96f24c36fef 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -17,10 +17,6 @@ exports[`PreferencesModal should match snapshot when the modal is active large v
           "name": "general",
           "title": "General",
         },
-        Object {
-          "name": "appearance",
-          "title": "Appearance",
-        },
         Object {
           "name": "blocks",
           "title": "Blocks",
@@ -56,11 +52,6 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
         navigateToMenu="general"
         title="General"
       />
-      <NavigationItem
-        key="appearance"
-        navigateToMenu="appearance"
-        title="Appearance"
-      />
       <NavigationItem
         key="blocks"
         navigateToMenu="blocks"
@@ -80,7 +71,8 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
     >
       <NavigationItem>
         <Section
-          title="Decide what to focus on"
+          description="Customize options related to the block editor interface and editing flow."
+          title="Appearance"
         >
           <WithSelect(WithDispatch(BaseOption))
             featureName="reducedUI"
@@ -92,27 +84,9 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             help="Highlights the current block and fades other content."
             label="Spotlight mode"
           />
-          <WithSelect(WithDispatch(BaseOption))
-            featureName="showBlockBreadcrumbs"
-            help="Shows block breadcrumbs at the bottom of the editor."
-            label="Display block breadcrumbs"
-          />
-        </Section>
-      </NavigationItem>
-    </NavigationMenu>
-    <NavigationMenu
-      key="appearance-menu"
-      menu="appearance"
-      parentMenu="preferences-menu"
-      title="Appearance"
-    >
-      <NavigationItem>
-        <Section
-          title="Choose the way it looks"
-        >
           <WithSelect(WithDispatch(BaseOption))
             featureName="showIconLabels"
-            help="Shows text instead of icons in toolbar."
+            help="Shows text instead of icons."
             label="Display button labels"
           />
           <WithSelect(WithDispatch(BaseOption))
@@ -120,6 +94,11 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             help="Make the editor look like your theme."
             label="Use theme styles"
           />
+          <WithSelect(WithDispatch(BaseOption))
+            featureName="showBlockBreadcrumbs"
+            help="Shows block breadcrumbs at the bottom of the editor."
+            label="Display block breadcrumbs"
+          />
         </Section>
       </NavigationItem>
     </NavigationMenu>
@@ -131,7 +110,8 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
     >
       <NavigationItem>
         <Section
-          title="Choose how you interact with blocks"
+          description="Customize how you interact with blocks in the block library and editing canvas."
+          title="Block interactions"
         >
           <WithSelect(WithDispatch(BaseOption))
             featureName="mostUsedBlocks"
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
index d7947e437c4c5..4c11546163de7 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBlockNavigationTree as BlockNavigationTree,
+	__experimentalListView as ListView,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
@@ -62,7 +62,7 @@ export default function ListViewSidebar() {
 				className="edit-post-editor__list-view-panel-content"
 				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
 			>
-				<BlockNavigationTree
+				<ListView
 					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalPersistentListViewFeatures
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
index 86bdf3bf05bb4..86991c74acf97 100644
--- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBlockNavigationTree as BlockNavigationTree,
+	__experimentalListView as ListView,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
@@ -62,7 +62,7 @@ export default function ListViewSidebar() {
 				className="edit-site-editor__list-view-panel-content"
 				ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
 			>
-				<BlockNavigationTree
+				<ListView
 					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalPersistentListViewFeatures
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
index 46e27d6150acc..85f36bc10253e 100644
--- a/packages/edit-site/src/components/sidebar/border-panel.js
+++ b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -2,10 +2,15 @@
  * WordPress dependencies
  */
 import {
+	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -13,10 +18,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { useSetting } from '../editor/utils';
 
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUE = 50;
 const MIN_BORDER_WIDTH = 0;
-const MAX_BORDER_WIDTH = 50;
 
 // Defining empty array here instead of inline avoids unnecessary re-renders of
 // color control.
@@ -66,23 +68,17 @@ export default function BorderPanel( {
 	getStyle,
 	setStyle,
 } ) {
-	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
-	const borderStyle = getStyle( name, 'borderStyle' );
+	const units = useCustomUnits( {
+		availableUnits: [ 'px', 'em', 'rem' ],
+	} );
 
 	// Border width.
 	const hasBorderWidth = useHasBorderWidthControl( { supports, name } );
-	const borderWidthValue = parseInt(
-		getStyle( name, 'borderWidth' ) || 0,
-		10
-	);
+	const borderWidthValue = getStyle( name, 'borderWidth' );
 
-	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
-	const borderRadiusValue = parseInt(
-		getStyle( name, 'borderRadius' ) || 0,
-		10
-	);
+	// Border style.
+	const hasBorderStyle = useHasBorderStyleControl( { supports, name } );
+	const borderStyle = getStyle( name, 'borderStyle' );
 
 	// Border color.
 	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
@@ -91,47 +87,42 @@ export default function BorderPanel( {
 	const hasBorderColor = useHasBorderColorControl( { supports, name } );
 	const borderColor = getStyle( name, 'borderColor' );
 
+	// Border radius.
+	const hasBorderRadius = useHasBorderRadiusControl( { supports, name } );
+	const borderRadiusValues = getStyle( name, 'borderRadius' );
+
 	return (
 		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ hasBorderStyle && (
-				<BorderStyleControl
-					value={ borderStyle }
-					onChange={ ( value ) =>
-						setStyle( name, 'borderStyle', value )
-					}
-				/>
-			) }
-			{ hasBorderWidth && (
-				<RangeControl
-					value={ borderWidthValue }
-					label={ __( 'Border width' ) }
-					min={ MIN_BORDER_WIDTH }
-					max={ MAX_BORDER_WIDTH }
-					initialPosition={ borderWidthValue }
-					allowReset
-					onChange={ ( value ) => {
-						const widthStyle = value ? `${ value }px` : undefined;
-						setStyle( name, 'borderWidth', widthStyle );
-					} }
-				/>
-			) }
-			{ hasBorderRadius && (
-				<RangeControl
-					value={ borderRadiusValue }
-					label={ __( 'Border radius' ) }
-					min={ MIN_BORDER_RADIUS_VALUE }
-					max={ MAX_BORDER_RADIUS_VALUE }
-					initialPosition={ borderRadiusValue }
-					allowReset
-					onChange={ ( value ) => {
-						const radiusStyle = value ? `${ value }px` : undefined;
-						setStyle( name, 'borderRadius', radiusStyle );
-					} }
-				/>
+			{ ( hasBorderWidth || hasBorderStyle ) && (
+				<div className="edit-site-global-styles-sidebar__border-controls-row">
+					{ hasBorderWidth && (
+						<UnitControl
+							value={ borderWidthValue }
+							label={ __( 'Width' ) }
+							min={ MIN_BORDER_WIDTH }
+							onChange={ ( value ) => {
+								setStyle(
+									name,
+									'borderWidth',
+									value || undefined
+								);
+							} }
+							units={ units }
+						/>
+					) }
+					{ hasBorderStyle && (
+						<BorderStyleControl
+							value={ borderStyle }
+							onChange={ ( value ) =>
+								setStyle( name, 'borderStyle', value )
+							}
+						/>
+					) }
+				</div>
 			) }
 			{ hasBorderColor && (
 				<ColorGradientControl
-					label={ __( 'Border color' ) }
+					label={ __( 'Color' ) }
 					value={ borderColor }
 					colors={ colors }
 					gradients={ undefined }
@@ -142,6 +133,14 @@ export default function BorderPanel( {
 					}
 				/>
 			) }
+			{ hasBorderRadius && (
+				<BorderRadiusControl
+					values={ borderRadiusValues }
+					onChange={ ( value ) =>
+						setStyle( name, 'borderRadius', value )
+					}
+				/>
+			) }
 		</PanelBody>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index bc75cfb88ec40..712db7bed14a0 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -24,3 +24,17 @@
 .edit-site-global-styles-sidebar__reset-button.components-button {
 	margin-left: auto;
 }
+
+.edit-site-global-styles-sidebar__border-controls-row {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: $grid-unit-15;
+
+	> * {
+		width: calc(50% - #{ $grid-unit-10 });
+	}
+
+	.components-border-style-control__buttons {
+		margin-bottom: 0;
+	}
+}
diff --git a/packages/editor/src/components/autocompleters/test/user.js b/packages/editor/src/components/autocompleters/test/user.js
index f699ebfbfd202..3ef0e41549c7e 100644
--- a/packages/editor/src/components/autocompleters/test/user.js
+++ b/packages/editor/src/components/autocompleters/test/user.js
@@ -1,34 +1,31 @@
 /**
  * Internal dependencies
  */
-import userCompleter from '../user';
+import { getUserLabel } from '../user';
 
 describe( 'user', () => {
-	describe( 'getOptionLabel', () => {
+	describe( 'getUserLabel', () => {
 		it( 'should return user details fragment', () => {
 			const user = {
 				name: 'Smithers Jones',
 				slug: 'userSlug',
 				avatar_urls: { 24: 'http://my.avatar' },
 			};
-			const userLabel = userCompleter.getOptionLabel( user );
-			expect( userLabel[ 0 ] ).toEqual(
-				<img
-					key="avatar"
-					className="editor-autocompleters__user-avatar"
-					alt=""
-					src="http://my.avatar"
-				/>
-			);
-			expect( userLabel[ 1 ] ).toEqual(
-				<span key="name" className="editor-autocompleters__user-name">
-					Smithers Jones
-				</span>
-			);
-			expect( userLabel[ 2 ] ).toEqual(
-				<span key="slug" className="editor-autocompleters__user-slug">
-					userSlug
-				</span>
+			const userLabel = getUserLabel( user );
+			expect( userLabel ).toEqual(
+				<>
+					<img
+						className="editor-autocompleters__user-avatar"
+						alt=""
+						src="http://my.avatar"
+					/>
+					<span className="editor-autocompleters__user-name">
+						Smithers Jones
+					</span>
+					<span className="editor-autocompleters__user-slug">
+						userSlug
+					</span>
+				</>
 			);
 		} );
 		it( 'should return user details fragment without default avatar dashicon if avatar_urls array not set', () => {
@@ -36,19 +33,17 @@ describe( 'user', () => {
 				name: 'Smithers Jones',
 				slug: 'userSlug',
 			};
-			const userLabel = userCompleter.getOptionLabel( user );
-			expect( userLabel[ 0 ] ).toEqual(
-				<span className="editor-autocompleters__no-avatar"></span>
-			);
-			expect( userLabel[ 1 ] ).toEqual(
-				<span key="name" className="editor-autocompleters__user-name">
-					Smithers Jones
-				</span>
-			);
-			expect( userLabel[ 2 ] ).toEqual(
-				<span key="slug" className="editor-autocompleters__user-slug">
-					userSlug
-				</span>
+			const userLabel = getUserLabel( user );
+			expect( userLabel ).toEqual(
+				<>
+					<span className="editor-autocompleters__no-avatar"></span>
+					<span className="editor-autocompleters__user-name">
+						Smithers Jones
+					</span>
+					<span className="editor-autocompleters__user-slug">
+						userSlug
+					</span>
+				</>
 			);
 		} );
 	} );
diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js
index 4b8c1f2dbcf37..e176d3fb6b05a 100644
--- a/packages/editor/src/components/autocompleters/user.js
+++ b/packages/editor/src/components/autocompleters/user.js
@@ -1,10 +1,37 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
 
+export function getUserLabel( user ) {
+	const avatar =
+		user.avatar_urls && user.avatar_urls[ 24 ] ? (
+			<img
+				className="editor-autocompleters__user-avatar"
+				alt=""
+				src={ user.avatar_urls[ 24 ] }
+			/>
+		) : (
+			<span className="editor-autocompleters__no-avatar"></span>
+		);
+
+	return (
+		<>
+			{ avatar }
+			<span className="editor-autocompleters__user-name">
+				{ user.name }
+			</span>
+			<span className="editor-autocompleters__user-slug">
+				{ user.slug }
+			</span>
+		</>
+	);
+}
+
 /**
  * A user mentions completer.
  *
@@ -14,40 +41,34 @@ export default {
 	name: 'users',
 	className: 'editor-autocompleters__user',
 	triggerPrefix: '@',
-	options( search ) {
-		let payload = '';
-		if ( search ) {
-			payload = '?search=' + encodeURIComponent( search );
-		}
-		return apiFetch( { path: '/wp/v2/users' + payload } );
-	},
-	isDebounced: true,
-	getOptionKeywords( user ) {
-		return [ user.slug, user.name ];
-	},
-	getOptionLabel( user ) {
-		const avatar =
-			user.avatar_urls && user.avatar_urls[ 24 ] ? (
-				<img
-					key="avatar"
-					className="editor-autocompleters__user-avatar"
-					alt=""
-					src={ user.avatar_urls[ 24 ] }
-				/>
-			) : (
-				<span className="editor-autocompleters__no-avatar"></span>
-			);
-
-		return [
-			avatar,
-			<span key="name" className="editor-autocompleters__user-name">
-				{ user.name }
-			</span>,
-			<span key="slug" className="editor-autocompleters__user-slug">
-				{ user.slug }
-			</span>,
-		];
+
+	useItems( filterValue ) {
+		const users = useSelect(
+			( select ) => {
+				const { getUsers } = select( coreStore );
+				return getUsers( {
+					context: 'view',
+					search: encodeURIComponent( filterValue ),
+				} );
+			},
+			[ filterValue ]
+		);
+
+		const options = useMemo(
+			() =>
+				users
+					? users.map( ( user ) => ( {
+							key: `user-${ user.slug }`,
+							value: user,
+							label: getUserLabel( user ),
+					  } ) )
+					: [],
+			[ users ]
+		);
+
+		return [ options ];
 	},
+
 	getOptionCompletion( user ) {
 		return `@${ user.slug }`;
 	},
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 36b67b9756d45..39e2030040350 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -103,21 +103,24 @@ export class PostPublishButton extends Component {
 			onToggle,
 			visibility,
 			hasNonPostEntityChanges,
+			isSavingNonPostEntityChanges,
 		} = this.props;
 
 		const isButtonDisabled =
-			isSaving ||
-			forceIsSaving ||
-			! isSaveable ||
-			isPostSavingLocked ||
-			( ! isPublishable && ! forceIsDirty );
+			( isSaving ||
+				forceIsSaving ||
+				! isSaveable ||
+				isPostSavingLocked ||
+				( ! isPublishable && ! forceIsDirty ) ) &&
+			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
 
 		const isToggleDisabled =
-			isPublished ||
-			isSaving ||
-			forceIsSaving ||
-			! isSaveable ||
-			( ! isPublishable && ! forceIsDirty );
+			( isPublished ||
+				isSaving ||
+				forceIsSaving ||
+				! isSaveable ||
+				( ! isPublishable && ! forceIsDirty ) ) &&
+			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
 
 		let publishStatus;
 		if ( ! hasPublishAction ) {
@@ -147,7 +150,7 @@ export class PostPublishButton extends Component {
 		};
 
 		const buttonProps = {
-			'aria-disabled': isButtonDisabled && ! hasNonPostEntityChanges,
+			'aria-disabled': isButtonDisabled,
 			className: 'editor-post-publish-button',
 			isBusy: ! isAutoSaving && isSaving && isPublished,
 			variant: 'primary',
@@ -155,7 +158,7 @@ export class PostPublishButton extends Component {
 		};
 
 		const toggleProps = {
-			'aria-disabled': isToggleDisabled && ! hasNonPostEntityChanges,
+			'aria-disabled': isToggleDisabled,
 			'aria-expanded': isOpen,
 			className: 'editor-post-publish-panel__toggle',
 			isBusy: isSaving && isPublished,
@@ -210,6 +213,7 @@ export default compose( [
 			getCurrentPostType,
 			getCurrentPostId,
 			hasNonPostEntityChanges,
+			isSavingNonPostEntityChanges,
 		} = select( editorStore );
 		const _isAutoSaving = isAutosavingPost();
 		return {
@@ -229,6 +233,7 @@ export default compose( [
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
+			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index c2092bd70e339..9cd93d1230415 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -62,6 +62,7 @@ export class PostPublishPanel extends Component {
 			isPublishSidebarEnabled,
 			isScheduled,
 			isSaving,
+			isSavingNonPostEntityChanges,
 			onClose,
 			onTogglePublishSidebar,
 			PostPublishExtension,
@@ -97,7 +98,11 @@ export class PostPublishPanel extends Component {
 								/>
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
-								<Button onClick={ onClose } variant="secondary">
+								<Button
+									disabled={ isSavingNonPostEntityChanges }
+									onClick={ onClose }
+									variant="secondary"
+								>
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
@@ -140,6 +145,7 @@ export default compose( [
 			isEditedPostBeingScheduled,
 			isEditedPostDirty,
 			isSavingPost,
+			isSavingNonPostEntityChanges,
 		} = select( editorStore );
 		const { isPublishSidebarEnabled } = select( editorStore );
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
@@ -156,6 +162,7 @@ export default compose( [
 			isPublished: isCurrentPostPublished(),
 			isPublishSidebarEnabled: isPublishSidebarEnabled(),
 			isSaving: isSavingPost(),
+			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 			isScheduled: isCurrentPostScheduled(),
 		};
 	} ),
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index 9b9b5c57b2fdb..e1ef7783cd6fb 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -802,6 +802,29 @@ export const isSavingPost = createRegistrySelector( ( select ) => ( state ) => {
 	);
 } );
 
+/**
+ * Returns true if non-post entities are currently being saved, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether non-post entities are being saved.
+ */
+export const isSavingNonPostEntityChanges = createRegistrySelector(
+	( select ) => ( state ) => {
+		const entitiesBeingSaved = select(
+			coreStore
+		).__experimentalGetEntitiesBeingSaved();
+		const { type, id } = getCurrentPost( state );
+		return some(
+			entitiesBeingSaved,
+			( entityRecord ) =>
+				entityRecord.kind !== 'postType' ||
+				entityRecord.name !== type ||
+				entityRecord.key !== id
+		);
+	}
+);
+
 /**
  * Returns true if a previous post save was attempted successfully, or false
  * otherwise.
diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js
index 650764f9dcb45..b59975fbc8436 100644
--- a/packages/editor/src/store/test/selectors.js
+++ b/packages/editor/src/store/test/selectors.js
@@ -40,6 +40,13 @@ selectorNames.forEach( ( name ) => {
 				);
 			},
 
+			__experimentalGetEntitiesBeingSaved() {
+				return (
+					state.__experimentalGetEntitiesBeingSaved &&
+					state.__experimentalGetEntitiesBeingSaved()
+				);
+			},
+
 			getEntityRecordEdits() {
 				const present = state.editor && state.editor.present;
 				let edits = present && present.edits;
@@ -170,6 +177,7 @@ const {
 	getCurrentPostAttribute,
 	getEditedPostAttribute,
 	isSavingPost,
+	isSavingNonPostEntityChanges,
 	didPostSaveRequestSucceed,
 	didPostSaveRequestFail,
 	getSuggestedPostFormat,
@@ -2085,6 +2093,53 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isSavingNonPostEntityChanges', () => {
+		it( 'should return true if changes to an arbitrary entity are being saved', () => {
+			const state = {
+				currentPost: { id: 1, type: 'post' },
+				__experimentalGetEntitiesBeingSaved() {
+					return [
+						{ kind: 'someKind', name: 'someName', key: 'someKey' },
+					];
+				},
+			};
+			expect( isSavingNonPostEntityChanges( state ) ).toBe( true );
+		} );
+		it( 'should return false if the only changes being saved are for the current post', () => {
+			const state = {
+				currentPost: { id: 1, type: 'post' },
+				__experimentalGetEntitiesBeingSaved() {
+					return [ { kind: 'postType', name: 'post', key: 1 } ];
+				},
+			};
+			expect( isSavingNonPostEntityChanges( state ) ).toBe( false );
+		} );
+		it( 'should return true if changes to multiple posts are being saved', () => {
+			const state = {
+				currentPost: { id: 1, type: 'post' },
+				__experimentalGetEntitiesBeingSaved() {
+					return [
+						{ kind: 'postType', name: 'post', key: 1 },
+						{ kind: 'postType', name: 'post', key: 2 },
+					];
+				},
+			};
+			expect( isSavingNonPostEntityChanges( state ) ).toBe( true );
+		} );
+		it( 'should return true if changes to multiple posts of different post types are being saved', () => {
+			const state = {
+				currentPost: { id: 1, type: 'post' },
+				__experimentalGetEntitiesBeingSaved() {
+					return [
+						{ kind: 'postType', name: 'post', key: 1 },
+						{ kind: 'postType', name: 'wp_template', key: 1 },
+					];
+				},
+			};
+			expect( isSavingNonPostEntityChanges( state ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'didPostSaveRequestSucceed', () => {
 		it( 'should return true if the post save request is successful', () => {
 			const state = {
diff --git a/packages/element/src/raw-html.js b/packages/element/src/raw-html.js
index 7fb7ceabf0cb5..e69de29bb2d1d 100644
--- a/packages/element/src/raw-html.js
+++ b/packages/element/src/raw-html.js
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createElement } from './react';
-
-// Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly.
-/** @typedef {{children: string} & import('react').ComponentPropsWithoutRef<'div'>} RawHTMLProps */
-
-/**
- * Component used as equivalent of Fragment with unescaped HTML, in cases where
- * it is desirable to render dangerous HTML without needing a wrapper element.
- * To preserve additional props, a `div` wrapper _will_ be created if any props
- * aside from `children` are passed.
- *
- * @param {RawHTMLProps} props Children should be a string of HTML. Other props
- *                             will be passed through to div wrapper.
- *
- * @return {JSX.Element} Dangerously-rendering component.
- */
-export default function RawHTML( { children, ...props } ) {
-	// The DIV wrapper will be stripped by serializer, unless there are
-	// non-children props present.
-	return createElement( 'div', {
-		dangerouslySetInnerHTML: { __html: children },
-		...props,
-	} );
-}
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index d98147331d084..e325bddc3fa0c 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -102,6 +102,9 @@ export { default as keyboardClose } from './library/keyboard-close';
 export { default as keyboardReturn } from './library/keyboard-return';
 export { default as layout } from './library/layout';
 export { default as lifesaver } from './library/lifesaver';
+export { default as lineDashed } from './library/line-dashed';
+export { default as lineDotted } from './library/line-dotted';
+export { default as lineSolid } from './library/line-solid';
 export { default as link } from './library/link';
 export { default as linkOff } from './library/link-off';
 export { default as list } from './library/list';
diff --git a/packages/icons/src/library/line-dashed.js b/packages/icons/src/library/line-dashed.js
new file mode 100644
index 0000000000000..2d8ca1f79aef2
--- /dev/null
+++ b/packages/icons/src/library/line-dashed.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const lineDashed = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path
+			fillRule="evenodd"
+			d="M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
+
+export default lineDashed;
diff --git a/packages/icons/src/library/line-dotted.js b/packages/icons/src/library/line-dotted.js
new file mode 100644
index 0000000000000..01d7e9ab671cc
--- /dev/null
+++ b/packages/icons/src/library/line-dotted.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const lineDotted = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path
+			fillRule="evenodd"
+			d="M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z"
+			clipRule="evenodd"
+		/>
+	</SVG>
+);
+
+export default lineDotted;
diff --git a/packages/icons/src/library/line-solid.js b/packages/icons/src/library/line-solid.js
new file mode 100644
index 0000000000000..c8dc39c453669
--- /dev/null
+++ b/packages/icons/src/library/line-solid.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const lineSolid = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path d="M5 11.25h14v1.5H5z" />
+	</SVG>
+);
+
+export default lineSolid;
diff --git a/packages/react-native-editor/.eslintrc.js b/packages/react-native-editor/.eslintrc.js
index 7a1dc623334c7..75121dae02b6e 100644
--- a/packages/react-native-editor/.eslintrc.js
+++ b/packages/react-native-editor/.eslintrc.js
@@ -15,7 +15,9 @@ module.exports = {
 			version: 'detect',
 			flowVersion: '0.92.0',
 		},
-		'import/resolver': require.resolve( '../../test/lint/import-resolver' ),
+		'import/resolver': require.resolve(
+			'../../tools/eslint/import-resolver'
+		),
 	},
 	rules: {
 		'no-restricted-syntax': [
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 2f4626499794b..d38318bc6303d 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [*] Update loading and failed screens for web version of the editor [#32395]
 -   [*] Handle floating keyboard case - Fix issue with the block selector on iPad. [#33089]
+-   [**] Added color/background customization for text blocks. [#33250]
 
 ## 1.56.0
 -   [*] Tweaks to the badge component's styling, including change of background color and reduced padding. [#32865]
diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js
index 8574492a581bf..ad04c96de11ed 100644
--- a/packages/react-native-editor/src/api-fetch-setup.js
+++ b/packages/react-native-editor/src/api-fetch-setup.js
@@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
 const SUPPORTED_ENDPOINTS = [
 	/wp\/v2\/(media|categories|blocks)\/?\d*?.*/i,
 	/wp\/v2\/search\?.*/i,
+	/oembed\/1\.0\/proxy\?.*/i,
 ];
 
 // [ONLY ON ANDROID] The requests made to these endpoints won't be cached.
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index 02c7dea4921e7..91974e8ef6b48 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -708,6 +708,203 @@ public function test_merge_incoming_data() {
 		$this->assertEqualSetsWithIndex( $expected, $actual );
 	}
 
+	public function test_merge_incoming_data_empty_presets() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'duotone'   => array(
+							array(
+								'slug'   => 'value',
+								'colors' => array( 'red', 'green' ),
+							),
+						),
+						'gradients' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+						'palette'   => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+					'spacing'    => array(
+						'units' => array( 'px', 'em' ),
+					),
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$theme_json->merge(
+			new WP_Theme_JSON_Gutenberg(
+				array(
+					'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'settings' => array(
+						'color'      => array(
+							'duotone'   => array(),
+							'gradients' => array(),
+							'palette'   => array(),
+						),
+						'spacing'    => array(
+							'units' => array(),
+						),
+						'typography' => array(
+							'fontSizes' => array(),
+						),
+					),
+				)
+			)
+		);
+
+		$actual   = $theme_json->get_raw_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'duotone'   => array(),
+					'gradients' => array(
+						'theme' => array(),
+					),
+					'palette'   => array(
+						'theme' => array(),
+					),
+				),
+				'spacing'    => array(
+					'units' => array(),
+				),
+				'typography' => array(
+					'fontSizes' => array(
+						'theme' => array(),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_null_presets() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'duotone'   => array(
+							array(
+								'slug'   => 'value',
+								'colors' => array( 'red', 'green' ),
+							),
+						),
+						'gradients' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+						'palette'   => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+					'spacing'    => array(
+						'units' => array( 'px', 'em' ),
+					),
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$theme_json->merge(
+			new WP_Theme_JSON_Gutenberg(
+				array(
+					'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'settings' => array(
+						'color'      => array(
+							'custom' => false,
+						),
+						'spacing'    => array(
+							'customMargin' => false,
+						),
+						'typography' => array(
+							'customLineHeight' => false,
+						),
+					),
+				)
+			)
+		);
+
+		$actual   = $theme_json->get_raw_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'custom'    => false,
+					'duotone'   => array(
+						array(
+							'slug'   => 'value',
+							'colors' => array( 'red', 'green' ),
+						),
+					),
+					'gradients' => array(
+						'theme' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+					),
+					'palette'   => array(
+						'theme' => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+				),
+				'spacing'    => array(
+					'customMargin' => false,
+					'units'        => array( 'px', 'em' ),
+				),
+				'typography' => array(
+					'customLineHeight' => false,
+					'fontSizes'        => array(
+						'theme' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
 	function test_remove_insecure_properties_removes_unsafe_styles() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
diff --git a/readme.txt b/readme.txt
index 94bfddb91a142..40b9644edb412 100644
--- a/readme.txt
+++ b/readme.txt
@@ -55,4 +55,4 @@ View <a href="https://developer.wordpress.org/block-editor/principles/versions-i
 
 == Changelog ==
 
-To read the changelog for Gutenberg 11.0.0-rc.1, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v11.0.0-rc.1">release page</a>.
+To read the changelog for Gutenberg 11.0.0, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v11.0.0">release page</a>.
diff --git a/test/lint/import-resolver.js b/tools/eslint/import-resolver.js
similarity index 100%
rename from test/lint/import-resolver.js
rename to tools/eslint/import-resolver.js
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
new file mode 100644
index 0000000000000..7cf0a8d8b0512
--- /dev/null
+++ b/tools/webpack/packages.js
@@ -0,0 +1,321 @@
+/**
+ * External dependencies
+ */
+const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
+const { DefinePlugin } = require( 'webpack' );
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const TerserPlugin = require( 'terser-webpack-plugin' );
+const postcss = require( 'postcss' );
+const { escapeRegExp, compact } = require( 'lodash' );
+const { join, sep } = require( 'path' );
+const fastGlob = require( 'fast-glob' );
+
+/**
+ * WordPress dependencies
+ */
+const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
+const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' );
+const {
+	camelCaseDash,
+} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
+
+/**
+ * Internal dependencies
+ */
+const { dependencies } = require( '../../package' );
+
+const {
+	NODE_ENV: mode = 'development',
+	WP_DEVTOOL: devtool = mode === 'production' ? false : 'source-map',
+} = process.env;
+
+const WORDPRESS_NAMESPACE = '@wordpress/';
+const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
+
+const gutenbergPackages = Object.keys( dependencies )
+	.filter(
+		( packageName ) =>
+			! BUNDLED_PACKAGES.includes( packageName ) &&
+			packageName.startsWith( WORDPRESS_NAMESPACE ) &&
+			! packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' )
+	)
+	.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
+
+const stylesTransform = ( content ) => {
+	if ( mode === 'production' ) {
+		return postcss( [
+			require( 'cssnano' )( {
+				preset: [
+					'default',
+					{
+						discardComments: {
+							removeAll: true,
+						},
+					},
+				],
+			} ),
+		] )
+			.process( content, {
+				from: 'src/app.css',
+				to: 'dest/app.css',
+			} )
+			.then( ( result ) => result.css );
+	}
+	return content;
+};
+
+/*
+ * Matches a block's name in paths in the form
+ * build-module/<blockName>/view.js
+ */
+const blockNameRegex = new RegExp( /(?<=build-module\/).*(?=(\/view))/g );
+
+const createEntrypoints = () => {
+	/*
+	 * Returns an array of paths to view.js files within the `@wordpress/block-library` package.
+	 * These paths can be matched by the regex `blockNameRegex` in order to extract
+	 * the block's name.
+	 *
+	 * Returns an empty array if no files were found.
+	 */
+	const blockViewScriptPaths = fastGlob.sync(
+		'./packages/block-library/build-module/**/view.js'
+	);
+
+	/*
+	 * Go through the paths found above, in order to define webpack entry points for
+	 * each block's view.js file.
+	 */
+	const blockViewScriptEntries = blockViewScriptPaths.reduce(
+		( entries, scriptPath ) => {
+			const [ blockName ] = scriptPath.match( blockNameRegex );
+
+			return {
+				...entries,
+				[ 'blocks/' + blockName ]: scriptPath,
+			};
+		},
+		{}
+	);
+
+	const packageEntries = gutenbergPackages.reduce( ( memo, packageName ) => {
+		return {
+			...memo,
+			[ packageName ]: `./packages/${ packageName }`,
+		};
+	}, {} );
+
+	return { ...packageEntries, ...blockViewScriptEntries };
+};
+
+module.exports = {
+	optimization: {
+		// Only concatenate modules in production, when not analyzing bundles.
+		concatenateModules:
+			mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
+		minimizer: [
+			new TerserPlugin( {
+				cache: true,
+				parallel: true,
+				sourceMap: mode !== 'production',
+				terserOptions: {
+					output: {
+						comments: /translators:/i,
+					},
+					compress: {
+						passes: 2,
+					},
+					mangle: {
+						reserved: [ '__', '_n', '_nx', '_x' ],
+					},
+				},
+				extractComments: false,
+			} ),
+		],
+	},
+	mode,
+	entry: createEntrypoints(),
+	output: {
+		devtoolNamespace: 'wp',
+		filename: ( pathData ) => {
+			const { chunk } = pathData;
+			const { entryModule } = chunk;
+			const { rawRequest, rootModule } = entryModule;
+
+			// When processing ESM files, the requested path
+			// is defined in `entryModule.rootModule.rawRequest`, instead of
+			// being present in `entryModule.rawRequest`.
+			// In the context of frontend view files, they would be processed
+			// as ESM if they use `import` or `export` within it.
+			const request = rootModule?.rawRequest || rawRequest;
+
+			if ( request.includes( '/view.js' ) ) {
+				return `./build/block-library/[name]/view.min.js`;
+			}
+
+			return `./build/[name]/index.min.js`;
+		},
+		path: join( __dirname, '..', '..' ),
+		library: [ 'wp', '[camelName]' ],
+		libraryTarget: 'window',
+	},
+	module: {
+		rules: compact( [
+			mode !== 'production' && {
+				test: /\.js$/,
+				use: require.resolve( 'source-map-loader' ),
+				enforce: 'pre',
+			},
+		] ),
+	},
+	plugins: [
+		// The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle
+		// content as a convenient interactive zoomable treemap.
+		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
+		new DefinePlugin( {
+			// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
+			'process.env.GUTENBERG_PHASE': JSON.stringify(
+				parseInt(
+					process.env.npm_package_config_GUTENBERG_PHASE,
+					10
+				) || 1
+			),
+			'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
+				process.env.FORCE_REDUCED_MOTION
+			),
+		} ),
+		new CustomTemplatedPathPlugin( {
+			camelName( path, data ) {
+				return camelCaseDash( data.chunk.name );
+			},
+		} ),
+		new LibraryExportDefaultPlugin( [
+			'api-fetch',
+			'deprecated',
+			'dom-ready',
+			'redux-routine',
+			'token-list',
+			'server-side-render',
+			'shortcode',
+			'warning',
+		] ),
+		new CopyWebpackPlugin( {
+			patterns: [].concat(
+				gutenbergPackages.map( ( packageName ) => ( {
+					from: `./packages/${ packageName }/build-style/*.css`,
+					to: `./build/${ packageName }/`,
+					flatten: true,
+					transform: stylesTransform,
+					noErrorOnMissing: true,
+				} ) ),
+				[
+					'style',
+					'style-rtl',
+					'editor',
+					'editor-rtl',
+					'theme',
+					'theme-rtl',
+				].map( ( filename ) => ( {
+					from: `./packages/block-library/build-style/*/${ filename }.css`,
+					to( { absoluteFilename } ) {
+						const [ , dirname ] = absoluteFilename.match(
+							new RegExp(
+								`([\\w-]+)${ escapeRegExp(
+									sep
+								) }${ filename }\\.css$`
+							)
+						);
+
+						return join(
+							'build/block-library/blocks',
+							dirname,
+							filename + '.css'
+						);
+					},
+					transform: stylesTransform,
+				} ) ),
+				Object.entries( {
+					'./packages/block-library/src/':
+						'build/block-library/blocks/',
+					'./packages/edit-widgets/src/blocks/':
+						'build/edit-widgets/blocks/',
+					'./packages/widgets/src/blocks/': 'build/widgets/blocks/',
+				} ).flatMap( ( [ from, to ] ) => [
+					{
+						from: `${ from }/**/index.php`,
+						to( { absoluteFilename } ) {
+							const [ , dirname ] = absoluteFilename.match(
+								new RegExp(
+									`([\\w-]+)${ escapeRegExp(
+										sep
+									) }index\\.php$`
+								)
+							);
+
+							return join( to, `${ dirname }.php` );
+						},
+						transform: ( content ) => {
+							content = content.toString();
+
+							// Within content, search for any function definitions. For
+							// each, replace every other reference to it in the file.
+							return (
+								content
+									.match( /^function [^\(]+/gm )
+									.reduce( ( result, functionName ) => {
+										// Trim leading "function " prefix from match.
+										functionName = functionName.slice( 9 );
+
+										// Prepend the Gutenberg prefix, substituting any
+										// other core prefix (e.g. "wp_").
+										return result.replace(
+											new RegExp( functionName, 'g' ),
+											( match ) =>
+												'gutenberg_' +
+												match.replace( /^wp_/, '' )
+										);
+									}, content )
+									// The core blocks override procedure takes place in
+									// the init action default priority to ensure that core
+									// blocks would have been registered already. Since the
+									// blocks implementations occur at the default priority
+									// and due to WordPress hooks behavior not considering
+									// mutations to the same priority during another's
+									// callback, the Gutenberg build blocks are modified
+									// to occur at a later priority.
+									.replace(
+										/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
+										'$1, 20'
+									)
+							);
+						},
+						noErrorOnMissing: true,
+					},
+					{
+						from: `${ from }/*/block.json`,
+						to( { absoluteFilename } ) {
+							const [ , dirname ] = absoluteFilename.match(
+								new RegExp(
+									`([\\w-]+)${ escapeRegExp(
+										sep
+									) }block\\.json$`
+								)
+							);
+
+							return join( to, dirname, 'block.json' );
+						},
+					},
+				] )
+			),
+		} ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
+	].filter( Boolean ),
+	watchOptions: {
+		ignored: [ '**/node_modules', '**/packages/*/src' ],
+		aggregateTimeout: 500,
+	},
+	devtool,
+};
diff --git a/webpack.config.js b/webpack.config.js
index 20885587050e3..44d14153a938e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,332 +1,6 @@
-/**
- * External dependencies
- */
-const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
-const { DefinePlugin } = require( 'webpack' );
-const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
-const postcss = require( 'postcss' );
-const { escapeRegExp, compact } = require( 'lodash' );
-const { sep } = require( 'path' );
-const fastGlob = require( 'fast-glob' );
-
-/**
- * WordPress dependencies
- */
-const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
-const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
-const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
-
 /**
  * Internal dependencies
  */
-const ReadableJsAssetsWebpackPlugin = require( '@wordpress/readable-js-assets-webpack-plugin' );
-const {
-	camelCaseDash,
-} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
-
-/**
- * Internal dependencies
- */
-const { dependencies } = require( './package' );
-
-const {
-	NODE_ENV: mode = 'development',
-	WP_DEVTOOL: devtool = mode === 'production' ? false : 'source-map',
-} = process.env;
-
-const WORDPRESS_NAMESPACE = '@wordpress/';
-const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
-
-const gutenbergPackages = Object.keys( dependencies )
-	.filter(
-		( packageName ) =>
-			! BUNDLED_PACKAGES.includes( packageName ) &&
-			packageName.startsWith( WORDPRESS_NAMESPACE ) &&
-			! packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' )
-	)
-	.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
-
-const stylesTransform = ( content ) => {
-	if ( mode === 'production' ) {
-		return postcss( [
-			require( 'cssnano' )( {
-				preset: [
-					'default',
-					{
-						discardComments: {
-							removeAll: true,
-						},
-					},
-				],
-			} ),
-		] )
-			.process( content, {
-				from: 'src/app.css',
-				to: 'dest/app.css',
-			} )
-			.then( ( result ) => result.css );
-	}
-	return content;
-};
-
-/*
- * Matches a block's name in paths in the form
- * build-module/<blockName>/view.js
- */
-const blockNameRegex = new RegExp( /(?<=build-module\/).*(?=(\/view))/g );
-
-const createEntrypoints = () => {
-	/*
-	 * Returns an array of paths to view.js files within the `@wordpress/block-library` package.
-	 * These paths can be matched by the regex `blockNameRegex` in order to extract
-	 * the block's name.
-	 *
-	 * Returns an empty array if no files were found.
-	 */
-	const blockViewScriptPaths = fastGlob.sync(
-		'./packages/block-library/build-module/**/view.js'
-	);
-
-	/*
-	 * Go through the paths found above, in order to define webpack entry points for
-	 * each block's view.js file.
-	 */
-	const blockViewScriptEntries = blockViewScriptPaths.reduce(
-		( entries, scriptPath ) => {
-			const [ blockName ] = scriptPath.match( blockNameRegex );
-
-			return {
-				...entries,
-				[ 'blocks/' + blockName ]: scriptPath,
-			};
-		},
-		{}
-	);
-
-	const packageEntries = gutenbergPackages.reduce( ( memo, packageName ) => {
-		return {
-			...memo,
-			[ packageName ]: `./packages/${ packageName }`,
-		};
-	}, {} );
-
-	return { ...packageEntries, ...blockViewScriptEntries };
-};
-
-module.exports = {
-	optimization: {
-		// Only concatenate modules in production, when not analyzing bundles.
-		concatenateModules:
-			mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
-		minimizer: [
-			new TerserPlugin( {
-				cache: true,
-				parallel: true,
-				sourceMap: mode !== 'production',
-				terserOptions: {
-					output: {
-						comments: /translators:/i,
-					},
-					compress: {
-						passes: 2,
-					},
-					mangle: {
-						reserved: [ '__', '_n', '_nx', '_x' ],
-					},
-				},
-				extractComments: false,
-			} ),
-		],
-	},
-	mode,
-	entry: createEntrypoints(),
-	output: {
-		devtoolNamespace: 'wp',
-		filename: ( pathData ) => {
-			const { chunk } = pathData;
-			const { entryModule } = chunk;
-			const { rawRequest, rootModule } = entryModule;
-
-			// When processing ESM files, the requested path
-			// is defined in `entryModule.rootModule.rawRequest`, instead of
-			// being present in `entryModule.rawRequest`.
-			// In the context of frontend view files, they would be processed
-			// as ESM if they use `import` or `export` within it.
-			const request = rootModule?.rawRequest || rawRequest;
-
-			if ( request.includes( '/view.js' ) ) {
-				return `./build/block-library/[name]/view.min.js`;
-			}
-
-			return `./build/[name]/index.min.js`;
-		},
-		path: __dirname,
-		library: [ 'wp', '[camelName]' ],
-		libraryTarget: 'window',
-	},
-	module: {
-		rules: compact( [
-			mode !== 'production' && {
-				test: /\.js$/,
-				use: require.resolve( 'source-map-loader' ),
-				enforce: 'pre',
-			},
-		] ),
-	},
-	plugins: [
-		// The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle
-		// content as a convenient interactive zoomable treemap.
-		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
-		new DefinePlugin( {
-			// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
-			'process.env.GUTENBERG_PHASE': JSON.stringify(
-				parseInt(
-					process.env.npm_package_config_GUTENBERG_PHASE,
-					10
-				) || 1
-			),
-			'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
-				process.env.FORCE_REDUCED_MOTION
-			),
-		} ),
-		new CustomTemplatedPathPlugin( {
-			camelName( path, data ) {
-				return camelCaseDash( data.chunk.name );
-			},
-		} ),
-		new LibraryExportDefaultPlugin( [
-			'api-fetch',
-			'deprecated',
-			'dom-ready',
-			'redux-routine',
-			'token-list',
-			'server-side-render',
-			'shortcode',
-			'warning',
-		] ),
-		new CopyWebpackPlugin(
-			gutenbergPackages.map( ( packageName ) => ( {
-				from: `./packages/${ packageName }/build-style/*.css`,
-				to: `./build/${ packageName }/`,
-				flatten: true,
-				transform: stylesTransform,
-			} ) )
-		),
-		new CopyWebpackPlugin( [
-			{
-				from: './packages/block-library/build-style/*/style.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }style\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/style.css',
-				transform: stylesTransform,
-			},
-			{
-				from: './packages/block-library/build-style/*/style-rtl.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }style-rtl\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/style-rtl.css',
-				transform: stylesTransform,
-			},
-			{
-				from: './packages/block-library/build-style/*/editor.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }editor\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/editor.css',
-				transform: stylesTransform,
-			},
-			{
-				from: './packages/block-library/build-style/*/editor-rtl.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }editor-rtl\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/editor-rtl.css',
-				transform: stylesTransform,
-			},
-			{
-				from: './packages/block-library/build-style/*/theme.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }theme\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/theme.css',
-				transform: stylesTransform,
-			},
-			{
-				from: './packages/block-library/build-style/*/theme-rtl.css',
-				test: new RegExp(
-					`([\\w-]+)${ escapeRegExp( sep ) }theme-rtl\\.css$`
-				),
-				to: 'build/block-library/blocks/[1]/theme-rtl.css',
-				transform: stylesTransform,
-			},
-		] ),
-		new CopyWebpackPlugin(
-			Object.entries( {
-				'./packages/block-library/src/': 'build/block-library/blocks/',
-				'./packages/edit-widgets/src/blocks/':
-					'build/edit-widgets/blocks/',
-				'./packages/widgets/src/blocks/': 'build/widgets/blocks/',
-			} ).flatMap( ( [ from, to ] ) => [
-				{
-					from: `${ from }/**/index.php`,
-					test: new RegExp(
-						`([\\w-]+)${ escapeRegExp( sep ) }index\\.php$`
-					),
-					to: `${ to }/[1].php`,
-					transform: ( content ) => {
-						content = content.toString();
-
-						// Within content, search for any function definitions. For
-						// each, replace every other reference to it in the file.
-						return (
-							content
-								.match( /^function [^\(]+/gm )
-								.reduce( ( result, functionName ) => {
-									// Trim leading "function " prefix from match.
-									functionName = functionName.slice( 9 );
+const packagesConfig = require( './tools/webpack/packages' );
 
-									// Prepend the Gutenberg prefix, substituting any
-									// other core prefix (e.g. "wp_").
-									return result.replace(
-										new RegExp( functionName, 'g' ),
-										( match ) =>
-											'gutenberg_' +
-											match.replace( /^wp_/, '' )
-									);
-								}, content )
-								// The core blocks override procedure takes place in
-								// the init action default priority to ensure that core
-								// blocks would have been registered already. Since the
-								// blocks implementations occur at the default priority
-								// and due to WordPress hooks behavior not considering
-								// mutations to the same priority during another's
-								// callback, the Gutenberg build blocks are modified
-								// to occur at a later priority.
-								.replace(
-									/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
-									'$1, 20'
-								)
-						);
-					},
-				},
-				{
-					from: `${ from }/*/block.json`,
-					test: new RegExp(
-						`([\\w-]+)${ escapeRegExp( sep ) }block\\.json$`
-					),
-					to: `${ to }/[1]/block.json`,
-				},
-			] )
-		),
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
-		mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
-	].filter( Boolean ),
-	watchOptions: {
-		ignored: [ '**/node_modules', '**/packages/*/src' ],
-		aggregateTimeout: 500,
-	},
-	devtool,
-};
+module.exports = packagesConfig;