From 7b578b15a30fc49abcd226b950066799e0559816 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Mon, 2 Jan 2023 12:51:26 +0000
Subject: [PATCH] Merge changes published in the Gutenberg plugin
 "release/14.9" branch

---
 .eslintrc.js                                  |    5 +-
 .github/CODEOWNERS                            |    1 -
 .github/workflows/end2end-test-playwright.yml |   66 -
 .github/workflows/end2end-test.yml            |   97 +-
 .github/workflows/flaky-tests.yml             |   38 -
 bin/api-docs/gen-theme-reference.js           |   29 +-
 bin/plugin/commands/performance.js            |   16 +
 changelog.txt                                 |  643 +++
 docs/README.md                                |    2 +-
 docs/contributors/code/release.md             |    4 +
 docs/contributors/code/scripts.md             |    1 -
 .../extending-the-query-loop-block.md         |    6 +
 .../javascript/extending-the-block-editor.md  |    2 +-
 docs/manifest.json                            |   12 -
 docs/reference-guides/README.md               |    1 -
 .../block-api/block-deprecation.md            |   12 +-
 .../block-api/block-metadata.md               |    2 +-
 .../block-api/block-patterns.md               |    3 +
 .../block-api/block-registration.md           |    2 +-
 docs/reference-guides/core-blocks.md          |    4 +-
 docs/reference-guides/data/README.md          |    1 -
 docs/reference-guides/data/data-core-nux.md   |   99 -
 .../reference-guides/filters/block-filters.md |    5 +-
 docs/reference-guides/slotfills/README.md     |    4 +-
 .../plugin-sidebar-more-menu-item.md          |    5 +-
 .../theme-json-reference/theme-json-living.md |   54 +-
 docs/toc.json                                 |    1 -
 gutenberg.php                                 |    2 +-
 lib/block-supports/typography.php             |   46 +-
 ....php => class-wp-theme-json-gutenberg.php} | 3853 ++++++++++++-----
 ...class-wp-theme-json-resolver-gutenberg.php |  701 +++
 lib/client-assets.php                         |   19 +-
 ...ss-gutenberg-rest-templates-controller.php |    2 +-
 .../class-wp-theme-json-resolver-6-1.php      |  191 -
 lib/compat/wordpress-6.2/block-patterns.php   |    3 +-
 .../wordpress-6.2/block-template-utils.php    |  112 +
 ...erg-rest-block-patterns-controller-6-2.php |  122 +
 ...berg-rest-global-styles-controller-6-2.php |   61 +-
 .../wordpress-6.2/class-wp-theme-json-6-2.php |  391 --
 .../class-wp-theme-json-resolver-6-2.php      |  230 -
 .../get-global-styles-and-settings.php        |    9 +-
 lib/compat/wordpress-6.2/rest-api.php         |   15 +
 lib/compat/wordpress-6.2/script-loader.php    |   27 +-
 lib/compat/wordpress-6.2/theme.php            |   23 +
 lib/compat/wordpress-6.2/widgets.php          |   32 +
 .../block-editor-settings-mobile.php          |    2 +-
 ...-rest-block-editor-settings-controller.php |    6 +
 .../class-wp-theme-json-gutenberg.php         |   31 -
 ...class-wp-theme-json-resolver-gutenberg.php |  177 -
 lib/experimental/class-wp-web-fonts.php       |  744 ++++
 .../class-wp-webfonts-provider-local.php      |   20 +-
 .../class-wp-webfonts-provider.php            |   70 +-
 lib/experimental/class-wp-webfonts-utils.php  |  122 +
 lib/experimental/class-wp-webfonts.php        |  467 +-
 lib/experimental/editor-settings.php          |    3 +
 .../html/class-wp-html-tag-processor.php      |   75 +-
 .../register-webfonts-from-theme-json.php     |  271 +-
 lib/experimental/webfonts-deprecations.php    |  100 +
 lib/experimental/webfonts.php                 |  229 +-
 lib/experiments-page.php                      |   16 +
 lib/load.php                                  |   27 +-
 .../wordpress-6.1 => }/theme-i18n.json        |    0
 lib/{compat/wordpress-6.1 => }/theme.json     |   14 +
 package-lock.json                             |  203 +-
 package.json                                  |    5 +-
 packages/base-styles/_long-content-fade.scss  |   61 +
 packages/base-styles/_mixins.scss             |   64 +-
 packages/base-styles/_variables.scss          |    2 +-
 packages/base-styles/_z-index.scss            |   12 +-
 .../test/index.js                             |    2 +
 packages/block-editor/CHANGELOG.md            |    8 +-
 packages/block-editor/README.md               |    3 +-
 .../alignment-control/test/index.js           |    2 +
 .../src/components/alignment-control/ui.js    |    8 +-
 .../block-alignment-control/test/index.js     |    2 +
 .../use-available-alignments.js               |    7 +-
 .../src/components/block-icon/index.js        |    6 +-
 .../src/components/block-icon/test/index.js   |   14 +-
 .../src/components/block-inspector/index.js   |   81 +-
 .../src/components/block-inspector/style.scss |    7 +
 .../components/block-list-appender/index.js   |  119 +-
 .../block-list-appender/index.native.js       |   79 +-
 .../block-actions-menu.native.js              |   40 +-
 .../block-mobile-toolbar/index.native.js      |    2 +-
 .../block-actions-menu.native.js.snap         |  125 +
 .../test/block-actions-menu.native.js         |  439 ++
 .../test/__snapshots__/index.native.js.snap   |   42 +
 .../block-mover/test/index.native.js          |  158 +-
 .../components/block-pattern-setup/index.js   |   21 +-
 .../components/block-pattern-setup/style.scss |   30 +-
 .../components/block-styles/index.native.js   |    3 +-
 .../src/components/block-styles/utils.js      |   12 +-
 .../components/block-switcher/test/index.js   |    5 +-
 .../components/block-toolbar/index.native.js  |   19 +-
 .../block-tools/selected-block-popover.js     |    4 +-
 .../block-variation-picker/index.js           |    6 +-
 .../test/index.js                             |    2 +
 .../components/colors-gradients/control.js    |    7 -
 .../components/colors-gradients/dropdown.js   |    2 -
 .../panel-color-gradient-settings.js          |   26 +-
 .../use-common-single-multiple-selects.js     |   11 -
 ...se-multiple-origin-colors-and-gradients.js |    6 +-
 .../src/components/colors/test/with-colors.js |    2 +
 .../src/components/colors/utils.js            |    8 +-
 .../src/components/copy-handler/index.js      |   60 +-
 .../default-block-appender/test/index.js      |    2 +
 .../src/components/font-sizes/fluid-utils.js  |    8 +-
 .../src/components/font-sizes/utils.js        |    8 +-
 .../components/font-sizes/with-font-sizes.js  |    8 +-
 .../src/components/gradients/use-gradient.js  |    9 +-
 .../src/components/iframe/index.js            |  111 +-
 .../iframe/use-compatibility-styles.js        |   95 +
 .../image-size-control/test/index.js          |  226 +-
 .../src/components/inner-blocks/index.js      |    6 +-
 .../inserter/hooks/use-insertion-point.js     |    5 +-
 .../src/components/inserter/index.js          |   17 +-
 .../components/inserter/media-tab/hooks.js    |    9 +-
 .../src/components/inserter/quick-inserter.js |    3 +
 .../src/components/inserter/search-items.js   |    3 +-
 .../src/components/inserter/search-results.js |    2 +
 .../src/components/link-control/test/index.js |   22 +-
 .../list-view/block-select-button.js          |    2 +-
 .../src/components/list-view/style.scss       |    8 +-
 .../media-replace-flow/test/index.js          |    2 +
 .../components/off-canvas-editor/appender.js  |   55 +-
 .../off-canvas-editor/block-select-button.js  |    8 +-
 .../src/components/off-canvas-editor/block.js |  169 +-
 .../src/components/off-canvas-editor/index.js |    9 +
 .../components/off-canvas-editor/style.scss   |    6 +-
 .../test/use-inserted-block.js                |  108 +
 .../off-canvas-editor/use-inserted-block.js   |   47 +
 .../responsive-block-control/label.js         |    5 +-
 .../responsive-block-control/test/index.js    |    6 +-
 .../rich-text/file-paste-handler.js           |   13 -
 .../src/components/rich-text/format-edit.js   |   16 +-
 .../src/components/rich-text/index.js         |    1 +
 .../components/rich-text/use-paste-handler.js |   47 +-
 .../components/spacing-sizes-control/index.js |    1 -
 .../components/spacing-sizes-control/utils.js |    2 +-
 .../src/components/typewriter/index.js        |    4 +-
 .../src/components/url-input/test/button.js   |    2 +
 .../url-popover/image-url-input-ui.js         |    9 +-
 .../src/components/url-popover/test/index.js  |   26 +-
 .../src/components/warning/test/index.js      |    2 +
 .../src/components/writing-flow/index.js      |    2 +-
 packages/block-editor/src/hooks/border.js     |    1 -
 .../block-editor/src/hooks/color-panel.js     |    1 -
 packages/block-editor/src/hooks/color.js      |    2 -
 .../block-editor/src/hooks/font-family.js     |    8 +-
 packages/block-editor/src/hooks/font-size.js  |   17 +-
 .../src/hooks/test/use-typography-props.js    |   26 +
 .../src/hooks/use-typography-props.js         |   22 +-
 packages/block-editor/src/store/reducer.js    |   19 +-
 packages/block-editor/src/store/selectors.js  |    5 +-
 packages/block-editor/src/utils/pasting.js    |   12 +-
 packages/block-library/src/categories/edit.js |    2 +-
 packages/block-library/src/comments/index.php |    1 -
 .../src/cover/edit/inspector-controls.js      |    8 +-
 packages/block-library/src/freeform/edit.js   |   77 +-
 packages/block-library/src/freeform/modal.js  |  111 +
 packages/block-library/src/gallery/edit.js    |   19 +-
 packages/block-library/src/gallery/gallery.js |   16 +-
 packages/block-library/src/image/image.js     |    1 +
 .../test/__snapshots__/edit.native.js.snap    |    3 +
 .../src/latest-posts/test/edit.native.js      |   49 +
 packages/block-library/src/media-text/edit.js |    1 +
 .../block-library/src/missing/edit.native.js  |   19 +-
 .../test/__snapshots__/edit.native.js.snap    |    7 +
 .../src/more/test/edit.native.js              |   41 +
 .../block-library/src/navigation-link/edit.js |   63 +-
 .../src/navigation-link/index.php             |   32 +
 .../src/navigation-submenu/edit.js            |  129 +-
 .../src/navigation-submenu/index.php          |   32 +
 .../src/navigation/edit/index.js              |    7 +-
 .../edit/menu-inspector-controls.js           |   99 +-
 .../edit/navigation-menu-selector.js          |   28 +-
 .../src/navigation/edit/utils.js              |   82 +
 .../block-library/src/navigation/editor.scss  |    7 -
 .../block-library/src/navigation/index.php    |   32 +
 .../block-library/src/navigation/style.scss   |    1 -
 .../block-library/src/page-list-item/edit.js  |   26 +-
 .../block-library/src/page-list/block.json    |   19 +-
 packages/block-library/src/page-list/edit.js  |   52 +-
 .../block-library/src/page-list/editor.scss   |    4 +
 packages/block-library/src/page-list/index.js |   10 +-
 .../block-library/src/page-list/index.php     |   19 +-
 .../src/post-featured-image/overlay.js        |    1 -
 packages/block-library/src/query/constants.js |    7 -
 .../block-library/src/query/edit/index.js     |    1 +
 .../query/edit/inspector-controls/index.js    |   87 +-
 .../inspector-controls/taxonomy-controls.js   |  140 +-
 .../src/query/edit/query-content.js           |    3 +-
 .../src/query/edit/query-placeholder.js       |   29 +-
 packages/block-library/src/query/utils.js     |   60 +-
 packages/block-library/src/search/edit.js     |    4 +-
 .../test/__snapshots__/edit.native.js.snap    |    7 +
 .../src/separator/test/edit.native.js         |   41 +
 .../block-library/src/social-link/edit.js     |    6 +-
 .../block-library/src/social-links/edit.js    |    1 -
 .../src/table-of-contents/edit.js             |    2 +-
 packages/block-library/src/table/style.scss   |    8 +
 packages/block-library/src/table/theme.scss   |    8 -
 .../template-part/edit/advanced-controls.js   |   12 +
 .../src/template-part/edit/import-controls.js |  180 +
 .../src/template-part/edit/index.js           |    1 +
 .../template-part/edit/utils/transformers.js  |   37 +
 packages/block-library/src/verse/style.scss   |    5 +-
 .../test/__snapshots__/edit.native.js.snap    |   13 +
 .../src/verse/test/edit.native.js             |   73 +-
 packages/blocks/CHANGELOG.md                  |    2 +-
 packages/components/CHANGELOG.md              |    8 +
 packages/components/CONTRIBUTING.md           |   21 -
 packages/components/src/autocomplete/index.js |    4 +-
 .../components/src/autocomplete/test/index.js |    2 +
 .../src/base-control/test/index.tsx           |    1 +
 .../component.tsx                             |    2 -
 .../border-box-control-split-controls/hook.ts |    2 -
 .../border-box-control/component.tsx          |    7 -
 .../border-box-control/hook.ts                |    2 -
 .../src/border-box-control/test/index.js      |    2 +
 .../border-control-dropdown/component.tsx     |   28 +-
 .../border-control-dropdown/hook.ts           |    2 -
 .../border-control/component.tsx              |    4 -
 .../src/border-control/border-control/hook.ts |    2 -
 .../src/border-control/stories/index.tsx      |    1 -
 .../src/border-control/test/index.js          |  137 +-
 .../components/src/border-control/types.ts    |    5 +-
 .../components/src/box-control/test/index.js  |    2 +
 .../src/checkbox-control/test/index.tsx       |    2 +
 .../components/src/color-palette/index.tsx    |   24 +-
 .../src/color-palette/stories/index.tsx       |   13 -
 .../src/color-palette/test/index.tsx          |    2 +
 .../components/src/color-palette/types.ts     |   20 +-
 .../components/src/color-picker/test/index.js |    2 +
 .../src/combobox-control/test/index.js        |    2 +
 .../src/confirm-dialog/test/index.js          |    2 +
 .../src/date-time/date/test/index.tsx         |    2 +
 .../src/date-time/time/test/index.tsx         |    2 +
 .../components/src/dimension-control/index.js |    5 +-
 .../src/dimension-control/test/index.test.js  |    2 +
 .../components/src/disabled/stories/index.tsx |    8 +-
 .../components/src/disabled/test/index.tsx    |    2 +
 .../components/src/dropdown-menu/README.md    |    5 +-
 .../src/dropdown-menu/test/index.js           |    2 +
 packages/components/src/dropdown/README.md    |   87 +-
 .../src/dropdown/{index.js => index.tsx}      |   70 +-
 .../dropdown/stories/{index.js => index.tsx}  |   29 +-
 .../src/dropdown/test/{index.js => index.tsx} |   18 +-
 packages/components/src/dropdown/types.ts     |  107 +
 .../src/external-link/test/index.tsx          |    2 +
 .../src/focal-point-picker/test/index.js      |    2 +
 .../src/font-size-picker/test/index.tsx       |    2 +
 .../src/form-file-upload/test/index.tsx       |    2 +
 .../components/src/form-toggle/test/index.tsx |    2 +
 .../src/form-token-field/test/index.tsx       |    3 +
 .../components/src/gradient-picker/index.js   |    3 +-
 .../src/gradient-picker/stories/index.js      |    1 -
 packages/components/src/guide/test/index.js   |    2 +
 .../higher-order/navigate-regions/index.js    |    7 +-
 .../higher-order/navigate-regions/style.scss  |   52 +-
 .../higher-order/with-filters/test/index.js   |  144 +-
 .../with-focus-outside/test/index.js          |    2 +
 .../with-focus-return/test/index.js           |    2 +
 .../higher-order/with-notices/test/index.js   |    1 +
 packages/components/src/icon/stories/index.js |  128 -
 .../components/src/icon/stories/index.tsx     |  103 +
 packages/components/src/index.js              |    1 -
 .../src/input-control/test/index.js           |    3 +
 .../isolated-event-container/test/index.js    |    2 +
 .../mobile/bottom-sheet/picker-cell.native.js |    7 +-
 .../global-styles-context/utils.native.js     |   33 +-
 packages/components/src/modal/test/index.tsx  |    4 +-
 .../test/navigable-menu.js                    |    2 +
 .../test/tababble-container.js                |    2 +
 .../components/src/navigation/test/index.js   |    2 +
 .../components/src/navigator/test/index.tsx   |    2 +
 packages/components/src/notice/test/index.js  |   11 +-
 .../src/number-control/test/index.tsx         |    2 +
 .../src/panel/test/__snapshots__/body.js.snap |    9 +
 packages/components/src/panel/test/body.js    |  133 +-
 .../components/src/placeholder/test/index.tsx |    3 +
 .../select-control/test/select-control.tsx    |    2 +
 packages/components/src/tab-panel/index.tsx   |    3 +-
 .../components/src/tab-panel/test/index.tsx   |    2 +
 .../src/text-highlight/test/index.tsx         |    1 +
 .../src/toggle-group-control/test/index.tsx   |    2 +
 .../src/toolbar-group/test/index.js           |    2 +
 packages/components/src/toolbar/style.scss    |    2 +-
 .../components/src/tooltip/stories/index.js   |  146 +-
 packages/components/src/tooltip/test/index.js |    2 +
 .../src/unit-control/test/index.tsx           |    3 +
 .../src/utils/hooks/test/use-latest-ref.js    |    2 +
 .../src/higher-order/pure/test/index.js       |    2 +
 .../higher-order/with-safe-timeout/index.tsx  |    4 +-
 .../src/higher-order/with-state/test/index.js |    2 +
 .../src/hooks/use-focus-outside/test/index.js |    2 +
 .../core-data/src/queried-data/reducer.js     |   29 +-
 .../src/queried-data/test/reducer.js          |   40 +
 packages/customize-widgets/package.json       |    3 +-
 packages/customize-widgets/src/utils.js       |    2 +-
 .../src/components/use-select/test/index.js   |   34 +
 .../components/use-select/test/suspense.js    |    3 +-
 packages/data/src/registry.js                 |   11 +-
 packages/dom/src/tabbable.js                  |   37 +-
 .../src/site-editor/toggle-canvas-mode.js     |    2 +-
 .../e2e-test-utils-playwright/src/test.ts     |    2 +-
 packages/e2e-test-utils/README.md             |   64 +-
 .../src/create-reusable-block.js              |    3 +-
 packages/e2e-test-utils/src/index.js          |   13 +-
 packages/e2e-test-utils/src/inserter.js       |  352 +-
 packages/e2e-test-utils/src/site-editor.js    |    4 +-
 .../assets/small-post-with-containers.html    |   77 +
 .../e2e-tests/config/performance-reporter.js  |   28 +-
 .../blocks/__snapshots__/quote.test.js.snap   |  123 -
 .../specs/editor/blocks/quote.test.js         |  199 -
 .../plugins/block-directory-add.test.js       |    2 +-
 .../specs/editor/various/a11y.test.js         |    4 +-
 .../block-hierarchy-navigation.test.js        |    6 +-
 .../specs/editor/various/editor-modes.test.js |   10 +-
 .../editor/various/font-size-picker.test.js   |  314 --
 .../various/keyboard-navigable-blocks.test.js |    7 +
 .../specs/editor/various/sidebar.test.js      |    2 -
 .../various/toolbar-roving-tabindex.test.js   |  142 -
 .../specs/performance/post-editor.test.js     |  142 +-
 .../specs/performance/site-editor.test.js     |    1 +
 .../site-editor/multi-entity-saving.test.js   |   25 +-
 packages/edit-post/package.json               |    1 +
 .../test/listener-hooks.js                    |    1 +
 .../header/fullscreen-mode-close/style.scss   |    2 +-
 .../options/test/enable-custom-fields.js      |    2 +
 .../secondary-sidebar/list-view-outline.js    |   24 +-
 .../components/secondary-sidebar/style.scss   |   23 +-
 .../src/components/visual-editor/index.js     |   29 +-
 packages/edit-post/src/index.js               |    2 +
 packages/edit-site/CHANGELOG.md               |   11 +-
 packages/edit-site/package.json               |    1 +
 .../src/components/block-editor/index.js      |    8 +-
 .../edit-site/src/components/editor/index.js  |   17 +-
 .../global-styles/block-preview-panel.js      |   33 +-
 .../components/global-styles/border-panel.js  |    1 -
 .../components/global-styles/custom-css.js    |    1 +
 .../global-styles/global-styles-provider.js   |   16 +-
 .../global-styles/screen-background-color.js  |    1 -
 .../components/global-styles/screen-block.js  |    5 +-
 .../components/global-styles/screen-border.js |    2 +
 .../global-styles/screen-button-color.js      |    2 -
 .../components/global-styles/screen-colors.js |    3 +
 .../global-styles/screen-heading-color.js     |    4 +-
 .../components/global-styles/screen-layout.js |    2 +
 .../global-styles/screen-link-color.js        |    1 -
 .../components/global-styles/screen-root.js   |   61 +-
 .../global-styles/screen-text-color.js        |    1 -
 .../global-styles/screen-typography.js        |    3 +
 .../global-styles/test/typography-utils.js    |   95 +-
 .../global-styles/typography-utils.js         |   28 +-
 .../src/components/global-styles/utils.js     |   11 +-
 .../document-actions/index.js                 |   55 +-
 .../components/header-edit-mode/style.scss    |    1 +
 .../edit-site/src/components/layout/index.js  |  287 +-
 .../src/components/layout/style.scss          |  133 +-
 .../edit-site/src/components/list/style.scss  |    9 +-
 .../src/components/sidebar-edit-mode/index.js |    2 +-
 .../navigation-menu.js                        |   10 +
 .../sidebar-navigation-screen-main/index.js   |   30 +-
 .../index.js                                  |   36 +-
 .../sidebar-navigation-screen/style.scss      |    6 +-
 .../edit-site/src/components/sidebar/index.js |    5 +-
 .../src/components/site-hub/index.js          |  150 +
 .../src/components/site-hub/style.scss        |   31 +
 .../src/components/site-title/index.js        |   39 -
 .../use-edited-entity-record/index.js         |   37 +
 packages/edit-site/src/hooks/index.js         |    1 +
 .../push-changes-to-global-styles/index.js    |  162 +
 .../push-changes-to-global-styles/style.scss  |    4 +
 packages/edit-site/src/index.js               |    2 +
 packages/edit-site/src/style.scss             |    2 +
 .../components/editor-help/index.native.js    |   43 +-
 .../components/page-attributes/test/order.js  |    2 +
 .../src/components/post-excerpt/index.js      |    1 +
 .../post-preview-button/test/index.js         |    2 +
 .../post-publish-button/test/index.js         |    2 +
 .../components/post-saved-state/test/index.js |    2 +
 .../src/components/post-slug/test/index.js    |    8 +-
 .../src/components/provider/index.native.js   |    1 +
 packages/element/CHANGELOG.md                 |    4 +
 packages/element/README.md                    |   52 +
 packages/element/src/react-platform.js        |   15 +
 packages/element/src/react.js                 |   48 +-
 packages/icons/src/index.js                   |    1 +
 packages/icons/src/library/lock-small.js      |   16 +
 packages/icons/src/library/update.js          |    4 +-
 .../components/interface-skeleton/index.js    |    8 +-
 .../components/interface-skeleton/style.scss  |   14 -
 .../src/components/navigable-region/index.js  |    4 +-
 packages/jest-preset-default/jest-preset.js   |    2 +-
 packages/keycodes/src/index.js                |    6 +-
 packages/nux/.npmrc                           |    1 -
 packages/nux/CHANGELOG.md                     |  126 -
 packages/nux/README.md                        |  114 -
 packages/nux/package.json                     |   50 -
 packages/nux/src/components/dot-tip/README.md |   38 -
 packages/nux/src/components/dot-tip/index.js  |   93 -
 .../nux/src/components/dot-tip/style.scss     |  123 -
 .../dot-tip/test/__snapshots__/index.js.snap  |   46 -
 .../nux/src/components/dot-tip/test/index.js  |   78 -
 packages/nux/src/index.js                     |   13 -
 packages/nux/src/store/actions.js             |   52 -
 packages/nux/src/store/index.js               |   36 -
 packages/nux/src/store/reducer.js             |   70 -
 packages/nux/src/store/selectors.js           |   81 -
 packages/nux/src/store/test/actions.js        |   40 -
 packages/nux/src/store/test/reducer.js        |   69 -
 packages/nux/src/store/test/selectors.js      |  146 -
 packages/nux/src/style.scss                   |    1 -
 packages/react-native-aztec/package.json      |    2 +-
 .../mobile/WPAndroidGlue/GutenbergProps.kt    |    6 +
 .../local-storage-overrides.json              |    6 -
 .../ios/GutenbergBridgeDelegate.swift         |    2 +
 packages/react-native-bridge/package.json     |    2 +-
 packages/react-native-editor/CHANGELOG.md     |    7 +-
 ...gutenberg-editor-block-insertion-2.test.js |   38 +
 .../gutenberg-editor-block-insertion.test.js  |   12 +-
 .../gutenberg-editor-columns.test.js          |   19 -
 .../gutenberg-editor-latest-posts.test.js     |   16 -
 .../gutenberg-editor-lists-@canary.test.js    |   61 -
 .../gutenberg-editor-lists-end.test.js        |   27 -
 .../gutenberg-editor-lists.test.js            |   47 -
 .../gutenberg-editor-more.test.js             |   16 -
 .../gutenberg-editor-separator.test.js        |   16 -
 .../gutenberg-editor-spacer.test.js           |   16 -
 .../gutenberg-editor-verse.test.js            |   16 -
 .../__device-tests__/helpers/caps.js          |    1 +
 .../__device-tests__/helpers/utils.js         |   12 +-
 .../__device-tests__/pages/editor-page.js     |   14 +-
 .../GutenbergViewController.swift             |    1 +
 packages/react-native-editor/ios/Podfile.lock |   14 +-
 packages/react-native-editor/package.json     |    4 +-
 packages/report-flaky-tests/action.yml        |    6 +-
 packages/report-flaky-tests/package.json      |    3 +-
 .../__tests__/__snapshots__/run.test.ts.snap  |  191 +-
 .../src/__tests__/markdown.test.ts            |   52 +
 .../src/__tests__/run.test.ts                 |  222 +-
 packages/report-flaky-tests/src/github-api.ts |   72 +-
 packages/report-flaky-tests/src/markdown.ts   |   28 +-
 packages/report-flaky-tests/src/run.ts        |   70 +-
 packages/report-flaky-tests/src/types.ts      |    7 +
 .../rich-text/src/register-format-type.js     |    5 +-
 .../src/test/register-format-type.js          |   13 +-
 packages/scripts/config/puppeteer.config.js   |    5 +-
 packages/server-side-render/package.json      |    3 +-
 .../style-engine/class-wp-style-engine.php    |    6 +
 .../src/styles/typography/index.ts            |   13 +
 packages/style-engine/src/test/index.js       |    9 +-
 packages/style-engine/src/types.ts            |    1 +
 packages/widgets/src/index.js                 |   14 +-
 phpunit/block-supports/typography-test.php    |   49 +-
 phpunit/block-template-utils-test.php         |  135 +-
 ...ass-block-library-navigation-link-test.php |   14 +-
 ...rg-rest-block-patterns-controller-test.php |   31 +-
 phpunit/class-wp-theme-json-test.php          |   90 +-
 phpunit/class-wp-webfonts-test.php            |  453 --
 .../style.css                                 |    8 +
 .../theme.json                                |   11 +
 phpunit/fixtures/mock-provider.php            |   27 +
 phpunit/html/wp-html-tag-processor-test.php   |  112 +-
 phpunit/multisite.xml                         |    1 +
 phpunit/style-engine/style-engine-test.php    |    4 +-
 phpunit/webfonts/wp-webfonts-testcase.php     |  268 ++
 .../webfonts/wp-webfonts-tests-dataset.php    | 1155 +++++
 .../webfonts/wpDeregisterFontFamily-test.php  |   74 +
 .../wpDeregisterWebfontVariation-test.php     |  298 ++
 .../wpEnqueueWebfontVariations-test.php       |   82 +
 phpunit/webfonts/wpEnqueueWebfonts-test.php   |  122 +
 phpunit/webfonts/wpPrintWebfonts-test.php     |  127 +
 .../wpRegisterWebfontProvider-test.php        |   96 +
 phpunit/webfonts/wpRegisterWebfonts-test.php  |  325 ++
 phpunit/webfonts/wpWebfonts-test.php          |   38 +
 phpunit/webfonts/wpWebfonts/add-test.php      |   45 +
 .../wpWebfonts/addFontFamily-test.php         |   66 +
 .../webfonts/wpWebfonts/addVariation-test.php |  149 +
 phpunit/webfonts/wpWebfonts/dequeue-test.php  |   72 +
 phpunit/webfonts/wpWebfonts/doItem-test.php   |  336 ++
 phpunit/webfonts/wpWebfonts/doItems-test.php  |  196 +
 phpunit/webfonts/wpWebfonts/enqueue-test.php  |   53 +
 .../webfonts/wpWebfonts/getEnqueued-test.php  |   57 +
 .../webfonts/wpWebfonts/getProviders-test.php |   62 +
 .../wpWebfonts/getRegistered-test.php         |   90 +
 phpunit/webfonts/wpWebfonts/query-test.php    |  151 +
 .../wpWebfonts/registerProvider-test.php      |  116 +
 phpunit/webfonts/wpWebfonts/remove-test.php   |  118 +
 .../wpWebfonts/removeFontFamily-test.php      |   89 +
 .../wpWebfonts/removeVariation-test.php       |  278 ++
 .../wpWebfontsProviderLocal-test.php}         |   91 +-
 .../convertFontFamilyIntoHandle-test.php      |   84 +
 .../convertVariationIntoHandle-test.php       |  122 +
 .../getFontFamilyFromVariation-test.php       |  134 +
 .../wpWebfontsUtils/isDefined-test.php        |   61 +
 schemas/json/block.json                       |    4 +-
 schemas/json/theme.json                       |  473 +-
 storybook/webpack/source-link-loader.js       |    3 +-
 test/e2e/specs/editor/blocks/comments.spec.js |   31 +-
 .../e2e/specs/editor/blocks/paragraph.spec.js |    8 +-
 test/e2e/specs/editor/blocks/quote.spec.js    |  312 +-
 .../various/a11y-region-navigation.spec.js    |    5 +-
 .../editor/various/font-size-picker.spec.js   |  305 ++
 .../various/toolbar-roving-tabindex.spec.js   |  216 +
 .../site-editor/push-to-global-styles.spec.js |  109 +
 .../fixtures/blocks/core__page-list.json      |    3 +-
 .../@wordpress/react-native-aztec/index.js    |    6 +-
 test/native/__mocks__/styleMock.js            |    1 +
 .../initialize-editor.js                      |    5 +-
 511 files changed, 19514 insertions(+), 8872 deletions(-)
 delete mode 100644 .github/workflows/end2end-test-playwright.yml
 delete mode 100644 .github/workflows/flaky-tests.yml
 delete mode 100644 docs/reference-guides/data/data-core-nux.md
 rename lib/{compat/wordpress-6.1/class-wp-theme-json-6-1.php => class-wp-theme-json-gutenberg.php} (52%)
 create mode 100644 lib/class-wp-theme-json-resolver-gutenberg.php
 delete mode 100644 lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
 create mode 100644 lib/compat/wordpress-6.2/block-template-utils.php
 delete mode 100644 lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
 delete mode 100644 lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
 create mode 100644 lib/compat/wordpress-6.2/theme.php
 create mode 100644 lib/compat/wordpress-6.2/widgets.php
 delete mode 100644 lib/experimental/class-wp-theme-json-gutenberg.php
 delete mode 100644 lib/experimental/class-wp-theme-json-resolver-gutenberg.php
 create mode 100644 lib/experimental/class-wp-web-fonts.php
 create mode 100644 lib/experimental/class-wp-webfonts-utils.php
 create mode 100644 lib/experimental/webfonts-deprecations.php
 rename lib/{compat/wordpress-6.1 => }/theme-i18n.json (100%)
 rename lib/{compat/wordpress-6.1 => }/theme.json (96%)
 create mode 100644 packages/base-styles/_long-content-fade.scss
 create mode 100644 packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
 create mode 100644 packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
 delete mode 100644 packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
 create mode 100644 packages/block-editor/src/components/iframe/use-compatibility-styles.js
 create mode 100644 packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
 create mode 100644 packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js
 delete mode 100644 packages/block-editor/src/components/rich-text/file-paste-handler.js
 create mode 100644 packages/block-library/src/freeform/modal.js
 create mode 100644 packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/latest-posts/test/edit.native.js
 create mode 100644 packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/more/test/edit.native.js
 delete mode 100644 packages/block-library/src/query/constants.js
 create mode 100644 packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
 create mode 100644 packages/block-library/src/separator/test/edit.native.js
 create mode 100644 packages/block-library/src/template-part/edit/import-controls.js
 create mode 100644 packages/block-library/src/template-part/edit/utils/transformers.js
 create mode 100644 packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
 rename packages/components/src/dropdown/{index.js => index.tsx} (66%)
 rename packages/components/src/dropdown/stories/{index.js => index.tsx} (75%)
 rename packages/components/src/dropdown/test/{index.js => index.tsx} (77%)
 delete mode 100644 packages/components/src/icon/stories/index.js
 create mode 100644 packages/components/src/icon/stories/index.tsx
 create mode 100644 packages/components/src/panel/test/__snapshots__/body.js.snap
 create mode 100644 packages/e2e-tests/assets/small-post-with-containers.html
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/quote.test.js
 delete mode 100644 packages/e2e-tests/specs/editor/various/font-size-picker.test.js
 delete mode 100644 packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
 create mode 100644 packages/edit-site/src/components/site-hub/index.js
 create mode 100644 packages/edit-site/src/components/site-hub/style.scss
 delete mode 100644 packages/edit-site/src/components/site-title/index.js
 create mode 100644 packages/edit-site/src/components/use-edited-entity-record/index.js
 create mode 100644 packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
 create mode 100644 packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
 create mode 100644 packages/icons/src/library/lock-small.js
 delete mode 100644 packages/nux/.npmrc
 delete mode 100644 packages/nux/CHANGELOG.md
 delete mode 100644 packages/nux/README.md
 delete mode 100644 packages/nux/package.json
 delete mode 100644 packages/nux/src/components/dot-tip/README.md
 delete mode 100644 packages/nux/src/components/dot-tip/index.js
 delete mode 100644 packages/nux/src/components/dot-tip/style.scss
 delete mode 100644 packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
 delete mode 100644 packages/nux/src/components/dot-tip/test/index.js
 delete mode 100644 packages/nux/src/index.js
 delete mode 100644 packages/nux/src/store/actions.js
 delete mode 100644 packages/nux/src/store/index.js
 delete mode 100644 packages/nux/src/store/reducer.js
 delete mode 100644 packages/nux/src/store/selectors.js
 delete mode 100644 packages/nux/src/store/test/actions.js
 delete mode 100644 packages/nux/src/store/test/reducer.js
 delete mode 100644 packages/nux/src/store/test/selectors.js
 delete mode 100644 packages/nux/src/style.scss
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js
 delete mode 100644 phpunit/class-wp-webfonts-test.php
 create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
 create mode 100644 phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
 create mode 100644 phpunit/fixtures/mock-provider.php
 create mode 100644 phpunit/webfonts/wp-webfonts-testcase.php
 create mode 100644 phpunit/webfonts/wp-webfonts-tests-dataset.php
 create mode 100644 phpunit/webfonts/wpDeregisterFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpDeregisterWebfontVariation-test.php
 create mode 100644 phpunit/webfonts/wpEnqueueWebfontVariations-test.php
 create mode 100644 phpunit/webfonts/wpEnqueueWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpPrintWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpRegisterWebfontProvider-test.php
 create mode 100644 phpunit/webfonts/wpRegisterWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/add-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/addFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/addVariation-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/dequeue-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/doItem-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/doItems-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/enqueue-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getEnqueued-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getProviders-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/getRegistered-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/query-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/registerProvider-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/remove-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
 create mode 100644 phpunit/webfonts/wpWebfonts/removeVariation-test.php
 rename phpunit/{class-wp-webfonts-local-provider-test.php => webfonts/wpWebfontsProviderLocal-test.php} (78%)
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
 create mode 100644 phpunit/webfonts/wpWebfontsUtils/isDefined-test.php
 create mode 100644 test/e2e/specs/editor/various/font-size-picker.spec.js
 create mode 100644 test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
 create mode 100644 test/e2e/specs/site-editor/push-to-global-styles.spec.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 51bca0f3bc059b..46c930ee0fb732 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -68,6 +68,7 @@ const restrictedImports = [
 			'every',
 			'extend',
 			'filter',
+			'find',
 			'findIndex',
 			'findKey',
 			'findLast',
@@ -106,6 +107,7 @@ const restrictedImports = [
 			'negate',
 			'noop',
 			'nth',
+			'omit',
 			'omitBy',
 			'once',
 			'orderby',
@@ -370,9 +372,6 @@ module.exports = {
 				'plugin:jest-dom/recommended',
 				'plugin:testing-library/react',
 			],
-			rules: {
-				'testing-library/no-node-access': 'off',
-			},
 		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2cc7b0ce34bd1e..6427516035a5ec 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -87,7 +87,6 @@
 /packages/compose                               @ajitbohra
 /packages/element                               @ajitbohra
 /packages/notices                               @ajitbohra
-/packages/nux                                   @ajitbohra
 /packages/viewport                              @ajitbohra
 /packages/base-styles
 /packages/icons
diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
deleted file mode 100644
index e0aabb17afa019..00000000000000
--- a/.github/workflows/end2end-test-playwright.yml
+++ /dev/null
@@ -1,66 +0,0 @@
-name: End-to-End Tests Playwright
-
-on:
-    pull_request:
-    push:
-        branches:
-            - trunk
-            - 'release/**'
-            - 'wp/**'
-
-# Cancels all previous workflow runs for pull requests that have not completed.
-concurrency:
-    # The concurrency group contains the workflow name and the branch name for pull requests
-    # or the commit hash for any other events.
-    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
-    cancel-in-progress: true
-
-jobs:
-    e2e:
-        name: E2E Tests
-        runs-on: ubuntu-latest
-        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
-        strategy:
-            fail-fast: false
-
-        steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Npm install and build
-              run: |
-                  npm ci
-                  npm run build
-
-            - name: Install Playwright dependencies
-              run: |
-                  npx playwright install chromium firefox webkit --with-deps
-
-            - name: Install WordPress and start the server
-              run: |
-                  npm run wp-env start
-
-            - name: Run the tests
-              run: |
-                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
-
-            - name: Archive debug artifacts (screenshots, traces)
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
-              with:
-                  name: failures-artifacts
-                  path: artifacts/test-results
-                  if-no-files-found: ignore
-
-            - name: Archive flaky tests report
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
-              with:
-                  name: flaky-tests-report-playwright
-                  path: flaky-tests
-                  if-no-files-found: ignore
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 172d3b090eaf0b..46278d6384a5b4 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -16,8 +16,8 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    admin:
-        name: Admin - ${{ matrix.part }}
+    e2e-puppeteer:
+        name: Puppeteer - ${{ matrix.part }}
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
@@ -60,6 +60,97 @@ jobs:
               uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
-                  name: flaky-tests-report-${{ matrix.part }}
+                  name: flaky-tests-report
                   path: flaky-tests
                   if-no-files-found: ignore
+
+    e2e-playwright:
+        name: Playwright
+        runs-on: ubuntu-latest
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        strategy:
+            fail-fast: false
+
+        steps:
+            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+
+            - name: Use desired version of NodeJS
+              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Npm install and build
+              run: |
+                  npm ci
+                  npm run build
+
+            - name: Install Playwright dependencies
+              run: |
+                  npx playwright install chromium firefox webkit --with-deps
+
+            - name: Install WordPress and start the server
+              run: |
+                  npm run wp-env start
+
+            - name: Run the tests
+              run: |
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
+
+            - name: Archive debug artifacts (screenshots, traces)
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              if: always()
+              with:
+                  name: failures-artifacts
+                  path: artifacts/test-results
+                  if-no-files-found: ignore
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              if: always()
+              with:
+                  name: flaky-tests-report
+                  path: flaky-tests
+                  if-no-files-found: ignore
+
+    report-to-issues:
+        name: Report to GitHub
+        needs: [e2e-puppeteer, e2e-playwright]
+        if: ${{ always() }}
+        runs-on: ubuntu-latest
+        steps:
+            # Checkout defaults to using the branch which triggered the event, which
+            # isn't necessarily `trunk` (e.g. in the case of a merge).
+            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              with:
+                  ref: trunk
+
+            - uses: actions/download-artifact@v3
+              id: download_artifact
+              # Don't fail the job if there isn't any flaky tests report.
+              continue-on-error: true
+              with:
+                  name: flaky-tests-report
+                  path: flaky-tests
+
+            - name: Use desired version of NodeJS
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Npm install and build
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              # TODO: We don't have to build the entire project, just the action itself.
+              run: |
+                  npm ci
+                  npm run build:packages
+
+            - name: Report flaky tests
+              if: ${{ steps.download_artifact.outcome == 'success' }}
+              uses: ./packages/report-flaky-tests
+              with:
+                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
+                  label: '[Type] Flaky Test'
+                  artifact-path: flaky-tests
diff --git a/.github/workflows/flaky-tests.yml b/.github/workflows/flaky-tests.yml
deleted file mode 100644
index 6f457f6b2292c5..00000000000000
--- a/.github/workflows/flaky-tests.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-name: Report Flaky Tests
-
-on:
-    workflow_run:
-        workflows: ['End-to-End Tests', 'End-to-End Tests Playwright']
-        types:
-            - completed
-
-jobs:
-    report-to-issues:
-        name: Report to GitHub issues
-        runs-on: ubuntu-latest
-        if: ${{ github.event.workflow_run.conclusion == 'success' }}
-        steps:
-            # Checkout defaults to using the branch which triggered the event, which
-            # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-              with:
-                  ref: trunk
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Npm install and build
-              # TODO: We don't have to build the entire project, just the action itself.
-              run: |
-                  npm ci
-                  npm run build:packages
-
-            - name: Report flaky tests
-              uses: ./packages/report-flaky-tests
-              with:
-                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
-                  label: '[Type] Flaky Test'
-                  artifact-name-prefix: flaky-tests-report
diff --git a/bin/api-docs/gen-theme-reference.js b/bin/api-docs/gen-theme-reference.js
index d051261963daf4..45edecf6bd1a2f 100644
--- a/bin/api-docs/gen-theme-reference.js
+++ b/bin/api-docs/gen-theme-reference.js
@@ -127,7 +127,8 @@ const getStylePropertiesMarkup = ( struct ) => {
 			props[ key ].type === 'object'
 				? keys( props[ key ].properties ).sort().join( ', ' )
 				: '';
-		markup += `| ${ key } | ${ props[ key ].type } | ${ ps } |\n`;
+		const type = formatType( props[ key ] );
+		markup += `| ${ key } | ${ type } | ${ ps } |\n`;
 	} );
 
 	return markup;
@@ -160,6 +161,32 @@ ${ markupFn( data ) }
 
 let autogen = '';
 
+/**
+ * Format list of types.
+ *
+ * @param {Object} prop
+ * @return {string} type
+ */
+const formatType = ( prop ) => {
+	let type = prop.type || '';
+
+	if ( prop.hasOwnProperty( 'anyOf' ) || prop.hasOwnProperty( 'oneOf' ) ) {
+		const propTypes = prop.anyOf || prop.oneOf;
+		const types = [];
+
+		propTypes.forEach( ( item ) => {
+			if ( item.type ) types.push( item.type );
+			// refComplete is always an object
+			if ( item.$ref && item.$ref === '#/definitions/refComplete' )
+				types.push( 'object' );
+		} );
+
+		type = [ ...new Set( types ) ].join( ', ' );
+	}
+
+	return type;
+};
+
 // Settings
 const settings = Object.entries( themejson.definitions )
 	.filter( ( [ settingsKey ] ) =>
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 31a537f373731d..81aa39820c8b5a 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -37,6 +37,7 @@ const config = require( '../config' );
  * @property {number[]} firstContentfulPaint Represents the time when the browser first renders any text or media.
  * @property {number[]} firstBlock           Represents the time when Puppeteer first sees a block selector in the DOM.
  * @property {number[]} type                 Average type time.
+ * @property {number[]} typeContainer        Average type time within a container.
  * @property {number[]} focus                Average block selection time.
  * @property {number[]} inserterOpen         Average time to open global inserter.
  * @property {number[]} inserterSearch       Average time to search the inserter.
@@ -56,6 +57,9 @@ const config = require( '../config' );
  * @property {number=} type                 Average type time.
  * @property {number=} minType              Minimum type time.
  * @property {number=} maxType              Maximum type time.
+ * @property {number=} typeContainer        Average type time within a container.
+ * @property {number=} minTypeContainer     Minimum type time within a container.
+ * @property {number=} maxTypeContainer     Maximum type time within a container.
  * @property {number=} focus                Average block selection time.
  * @property {number=} minFocus             Min block selection time.
  * @property {number=} maxFocus             Max block selection time.
@@ -129,6 +133,9 @@ function curateResults( results ) {
 		type: average( results.type ),
 		minType: Math.min( ...results.type ),
 		maxType: Math.max( ...results.type ),
+		typeContainer: average( results.typeContainer ),
+		minTypeContainer: Math.min( ...results.typeContainer ),
+		maxTypeContainer: Math.max( ...results.typeContainer ),
 		focus: average( results.focus ),
 		minFocus: Math.min( ...results.focus ),
 		maxFocus: Math.max( ...results.focus ),
@@ -393,6 +400,15 @@ async function runPerformanceTests( branches, options ) {
 					type: rawResults.map( ( r ) => r[ branch ].type ),
 					minType: rawResults.map( ( r ) => r[ branch ].minType ),
 					maxType: rawResults.map( ( r ) => r[ branch ].maxType ),
+					typeContainer: rawResults.map(
+						( r ) => r[ branch ].typeContainer
+					),
+					minTypeContainer: rawResults.map(
+						( r ) => r[ branch ].minTypeContainer
+					),
+					maxTypeContainer: rawResults.map(
+						( r ) => r[ branch ].maxTypeContainer
+					),
 					focus: rawResults.map( ( r ) => r[ branch ].focus ),
 					minFocus: rawResults.map( ( r ) => r[ branch ].minFocus ),
 					maxFocus: rawResults.map( ( r ) => r[ branch ].maxFocus ),
diff --git a/changelog.txt b/changelog.txt
index 2d52f25c1bf8a6..93cdbecad9ad8d 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,648 @@
 == Changelog ==
 
+= 14.8.4 =
+
+
+
+## Changelog
+
+### Various
+
+- Fixes an issue where gutenberg bundled `theme.json` was not utilized. ([46810](https://github.com/WordPress/gutenberg/pull/46810)) This meant that Gutenberg features newer than the WordPress `theme.json` file were unavailable in 14.8.
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@madhusudhand
+
+
+= 14.8.3 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Plugin
+Fixes compatibility with WordPress 6.0.x. This includes the following PRs:
+- #46579
+- #46750
+- #46806
+- #46809
+
+Broadly, this needed to include the two refactors of the Theme_JSON compatibility files, along with two fixes switching `wp_*` and `gutenberg_*` function variants as needed.
+ 
+## Contributors
+
+The following contributors were involved with this release:
+
+@geriux @Mamaduka @oandregal @noahtallen
+
+
+= 14.8.2 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+- rich-text: Fix bug where bare tag name format types could not be registered. ([46798](https://github.com/WordPress/gutenberg/pull/46798))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@davilera
+
+
+= 14.8.1 =
+
+## Changelog
+
+### Bug Fixes
+
+- Update the script registration of the react scripts with a cache version to prevent browser cache issues. ([46768](https://github.com/WordPress/gutenberg/pull/46768))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@youknowriad
+
+
+= 14.8.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Add a current-menu-ancestor class to navigation items. ([40778](https://github.com/WordPress/gutenberg/pull/40778))
+- Page List Block: Adds a longdash tree to the parent selector. ([46336](https://github.com/WordPress/gutenberg/pull/46336))
+- Page List Block: Hide page list edit button if no pages are available. ([46331](https://github.com/WordPress/gutenberg/pull/46331))
+-  Page List: Add convert panel to Inspector Controls when within Nav block. ([46352](https://github.com/WordPress/gutenberg/pull/46352))
+- Page List: Prevent users from adding inner blocks to Page List. ([46269](https://github.com/WordPress/gutenberg/pull/46269))
+- Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+- Add page list to Link UI transforms in Nav block. ([46426](https://github.com/WordPress/gutenberg/pull/46426))
+- Heading Block: Don't rely on the experimental selector anymore. ([46284](https://github.com/WordPress/gutenberg/pull/46284))
+- Media & Text Block: Create undo history when media width is changed. ([46084](https://github.com/WordPress/gutenberg/pull/46084))
+- Navigation block: Add location->primary to fallback nav creation for classic menus. ([45976](https://github.com/WordPress/gutenberg/pull/45976))
+- Navigation block: Update fallback nav creation to the most recently created menu. ([46286](https://github.com/WordPress/gutenberg/pull/46286))
+- Navigation: Add a 'open list view' button. ([46335](https://github.com/WordPress/gutenberg/pull/46335))
+- Navigation: Removes the header from the navigation list view in the experiment. ([46070](https://github.com/WordPress/gutenberg/pull/46070))
+- Query: Remove color block supports. ([46147](https://github.com/WordPress/gutenberg/pull/46147))
+- Table block: Make `figcaption` styles consistent between editor and front end. ([46172](https://github.com/WordPress/gutenberg/pull/46172))
+- List/quote: Unwrap inner block when pressing Backspace at start. ([45075](https://github.com/WordPress/gutenberg/pull/45075))
+
+#### Inspector Controls
+- Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. ([46346](https://github.com/WordPress/gutenberg/pull/46346))
+- Sidebar Tabs: Use editor settings to override display. ([46321](https://github.com/WordPress/gutenberg/pull/46321))
+- Summary panel: Try improving spacing and grid. ([46267](https://github.com/WordPress/gutenberg/pull/46267))
+
+#### Global Styles
+- Add Style Book to Global Styles. ([45960](https://github.com/WordPress/gutenberg/pull/45960))
+- Add block preview component in global styles. ([45719](https://github.com/WordPress/gutenberg/pull/45719))
+- Move border from layout to own menu. ([45995](https://github.com/WordPress/gutenberg/pull/45995))
+- Add a css style to theme.json to allow setting of custom css strings. ([46255](https://github.com/WordPress/gutenberg/pull/46255))
+- Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- Global styles: Add custom CSS panel to site editor. ([46141](https://github.com/WordPress/gutenberg/pull/46141))
+
+#### Site Editor
+- Reorganize the site editor to introduce Browse Mode. ([44770](https://github.com/WordPress/gutenberg/pull/44770))
+- Allow adding new templates and template parts directly from the sidebar. ([46458](https://github.com/WordPress/gutenberg/pull/46458))
+- Synchronize the sidebar state in the URL. ([46433](https://github.com/WordPress/gutenberg/pull/46433))
+- Try template drill down on the shell sidebar (browse mode). ([45100](https://github.com/WordPress/gutenberg/pull/45100))
+
+#### Block Editor
+- Update the synced block hover styles in Inserter. ([46442](https://github.com/WordPress/gutenberg/pull/46442))
+- Add new selector getLastInsertedBlockClientId. ([46531](https://github.com/WordPress/gutenberg/pull/46531))
+- Block editor: Hide fixed contextual toolbar. ([46298](https://github.com/WordPress/gutenberg/pull/46298))
+- Inserter: Pattern title tooltip. ([46419](https://github.com/WordPress/gutenberg/pull/46419))
+- useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. ([46357](https://github.com/WordPress/gutenberg/pull/46357))
+- Design: Augmented shadows for modals and popovers. ([46228](https://github.com/WordPress/gutenberg/pull/46228))
+
+#### Components
+- Tabs: Try a simpler tab focus style, alt. ([46276](https://github.com/WordPress/gutenberg/pull/46276))
+- BaseControl: Add convenience hook to generate id-related props. ([46170](https://github.com/WordPress/gutenberg/pull/46170))
+- Dashicon: Refactor to TypeScript. ([45924](https://github.com/WordPress/gutenberg/pull/45924))
+- Lighten borders to gray-600. ([46252](https://github.com/WordPress/gutenberg/pull/46252))
+- Popover: Check positioning by adding and testing is-positioned class. ([46429](https://github.com/WordPress/gutenberg/pull/46429))
+
+### Icons
+- Icons: Update the border icon. ([46264](https://github.com/WordPress/gutenberg/pull/46264))
+
+#### Testing
+- Tests: Fix `toBePositionedPopover` matcher message function. ([46239](https://github.com/WordPress/gutenberg/pull/46239))
+
+#### Plugin
+- Update the Gutenberg plugin to require at least the WP 6.0 version. ([46102](https://github.com/WordPress/gutenberg/pull/46102))
+- PHP: Backport changes from core theme resolver. ([46250](https://github.com/WordPress/gutenberg/pull/46250))
+- Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. ([46249](https://github.com/WordPress/gutenberg/pull/46249))
+- Upgrade React packages to v18. ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+#### Themes
+- Empty Theme: Add the `$schema` property in `theme.json` and rename template directories. ([46300](https://github.com/WordPress/gutenberg/pull/46300))
+
+#### Mobile
+- Mobile: Disable Unsupported Block Editor Tests (Android). ([46542](https://github.com/WordPress/gutenberg/pull/46542))
+- Mobile: Inserter - Remove `.done()` usage. ([46460](https://github.com/WordPress/gutenberg/pull/46460))
+- Mobile: Update Heading block end-to-end test. ([46220](https://github.com/WordPress/gutenberg/pull/46220))
+- Mobile: Updates packages to not use Git HTTPS URLs. ([46422](https://github.com/WordPress/gutenberg/pull/46422))
+
+### Bug Fixes
+
+#### Block Library
+- Fix Nav Submenu block Link UI text control. ([46243](https://github.com/WordPress/gutenberg/pull/46243))
+- Fix auto Nav menu creation due to page list inner blocks. ([46223](https://github.com/WordPress/gutenberg/pull/46223))
+- Handle innerContent too when removing innerBlocks. ([46377](https://github.com/WordPress/gutenberg/pull/46377))
+- Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. ([46497](https://github.com/WordPress/gutenberg/pull/46497))
+- Navigation Block: Add social link singular to list of blocks to be allowed. ([46374](https://github.com/WordPress/gutenberg/pull/46374))
+- Navigation Block: Fixes adding a submenu. ([46364](https://github.com/WordPress/gutenberg/pull/46364))
+- Navigation Block: Prevent circular references in navigation block rendering. ([46387](https://github.com/WordPress/gutenberg/pull/46387))
+- Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. ([46279](https://github.com/WordPress/gutenberg/pull/46279))
+- Navigation link: Use stripHTML. ([46317](https://github.com/WordPress/gutenberg/pull/46317))
+- Page List Block: Fix error loading page list parent options. ([46327](https://github.com/WordPress/gutenberg/pull/46327))
+- Query Loop Block: Add migration of colors to v2 deprecation. ([46522](https://github.com/WordPress/gutenberg/pull/46522))
+- Site Logo: Correctly set the image's natural height and width. ([46214](https://github.com/WordPress/gutenberg/pull/46214))
+- Strip markup from link label data in inspector. ([46171](https://github.com/WordPress/gutenberg/pull/46171))
+- Template Parts: Fix modal search stacking context. ([46421](https://github.com/WordPress/gutenberg/pull/46421))
+- Video: Avoid an error when removal is locked. ([46324](https://github.com/WordPress/gutenberg/pull/46324))
+- Layout child fixed size should not be fixed by default and should always have a value set. ([46139](https://github.com/WordPress/gutenberg/pull/46139))
+
+#### Blocks
+- Paste handler: Remove styles on inline paste. ([46402](https://github.com/WordPress/gutenberg/pull/46402))
+- Improve performance of gutenberg_render_layout_support_flag. ([46074](https://github.com/WordPress/gutenberg/pull/46074))
+
+#### Global Styles
+- Allow indirect properties when unfiltered_html is not allowed. ([46388](https://github.com/WordPress/gutenberg/pull/46388))
+- Fix Reset to defaults action by moving fills to be within context provider. ([46486](https://github.com/WordPress/gutenberg/pull/46486))
+- Fix duplication of synced block colors in CSS output. ([46297](https://github.com/WordPress/gutenberg/pull/46297))
+- Make style book label font size 11px. ([46341](https://github.com/WordPress/gutenberg/pull/46341))
+- Style Book: Clear Global Styles navigation history when selecting a block. ([46391](https://github.com/WordPress/gutenberg/pull/46391))
+- - Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
+- Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities. ([46663](https://github.com/WordPress/gutenberg/pull/46663))
+
+#### Block Editor
+- Block Editor: Fix content locked patterns. ([46494](https://github.com/WordPress/gutenberg/pull/46494))
+- Block Editor: Fix memoized pattern selector dependant arguments. ([46238](https://github.com/WordPress/gutenberg/pull/46238))
+- Block Editor: Restore draggable chip styles. ([46396](https://github.com/WordPress/gutenberg/pull/46396))
+- Block Editor: Revert deoptimization useNestedSettingsUpdate. ([46350](https://github.com/WordPress/gutenberg/pull/46350))
+- Block Editor: Fix some usages of useSelect that return unstable results. ([46226](https://github.com/WordPress/gutenberg/pull/46226))
+- useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. ([46307](https://github.com/WordPress/gutenberg/pull/46307))
+
+#### Patterns
+- Add new pattern categories. ([46144](https://github.com/WordPress/gutenberg/pull/46144))
+- Block Editor: Add initial view mode in `BlockPatternSetup`. ([46399](https://github.com/WordPress/gutenberg/pull/46399))
+
+#### Site Editor
+- Do not remount iframe. ([46431](https://github.com/WordPress/gutenberg/pull/46431))
+- Fix the top bar 'exit' animation. ([46533](https://github.com/WordPress/gutenberg/pull/46533))
+- Keep edited entity in sync when Editor canvas isn't mounted. ([46524](https://github.com/WordPress/gutenberg/pull/46524))
+- [Site Editor]: Add default white background for themes with no `background color` set. ([46314](https://github.com/WordPress/gutenberg/pull/46314))
+
+#### Components
+- InputControl: Fix `Flex` wrapper usage. ([46213](https://github.com/WordPress/gutenberg/pull/46213))
+- Modal: Fix unexpected modal closing in IME Composition. ([46453](https://github.com/WordPress/gutenberg/pull/46453))
+- MaybeCategoryPanel: Avoid 403 requests for users with low permissions. ([46349](https://github.com/WordPress/gutenberg/pull/46349))
+- Rich text: Add button to clear unknown format. ([44086](https://github.com/WordPress/gutenberg/pull/44086))
+
+#### Document Settings
+- Fix template title in `summary` panel and requests for low privileged users. ([46304](https://github.com/WordPress/gutenberg/pull/46304))
+- Permalink: Hide edit field for users without publishing capabilities. ([46361](https://github.com/WordPress/gutenberg/pull/46361))
+
+#### Patterns
+- Content lock: Make filter hook namespace unique. ([46344](https://github.com/WordPress/gutenberg/pull/46344))
+
+#### Layout
+- Child Layout controls: Fix help text for height. ([46319](https://github.com/WordPress/gutenberg/pull/46319))
+
+#### Widgets Editor
+- Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. ([43392](https://github.com/WordPress/gutenberg/pull/43392))
+
+#### Block API
+- HTML block: Fix parsing. ([27268](https://github.com/WordPress/gutenberg/pull/27268))
+
+#### Mobile
+- Social Links mobile test: Wait for URL bottom sheet to appear. ([46308](https://github.com/WordPress/gutenberg/pull/46308))
+
+### Performance
+
+#### Components
+- Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- CircularOption: Avoid paint on circular option hover. ([46197](https://github.com/WordPress/gutenberg/pull/46197))
+- Lodash: Replace `_.isEqual()` with `fastDeepEqual`. ([46200](https://github.com/WordPress/gutenberg/pull/46200))
+- Popover: Avoid paint on popovers when scrolling. ([46187](https://github.com/WordPress/gutenberg/pull/46187))
+- Resizable Box: Avoid paint on resizable-box handles. ([46196](https://github.com/WordPress/gutenberg/pull/46196))
+- ListView: Avoid paint on list view item hover. ([46188](https://github.com/WordPress/gutenberg/pull/46188))
+
+#### Code Quality
+- Lodash: Refactor `blocks` away from `_.find()`. ([46428](https://github.com/WordPress/gutenberg/pull/46428))
+- Lodash: Refactor `core-data` away from `_.find()`. ([46468](https://github.com/WordPress/gutenberg/pull/46468))
+- Lodash: Refactor `edit-site` away from `_.find()`. ([46539](https://github.com/WordPress/gutenberg/pull/46539))
+- Lodash: Refactor away from `_.orderBy()`. ([45146](https://github.com/WordPress/gutenberg/pull/45146))
+- Lodash: Refactor block library away from `_.find()`. ([46430](https://github.com/WordPress/gutenberg/pull/46430))
+- Remove usage of get_default_block_editor_settings. ([46112](https://github.com/WordPress/gutenberg/pull/46112))
+
+#### Post Editor
+- Lodash: Refactor editor away from `_.find()`. ([46464](https://github.com/WordPress/gutenberg/pull/46464))
+- Lodash: Refactor post editor away from `_.find()`. ([46432](https://github.com/WordPress/gutenberg/pull/46432))
+
+#### Block Editor
+- Avoid paint on inserter animation. ([46185](https://github.com/WordPress/gutenberg/pull/46185))
+- Improve inserter search performance. ([46153](https://github.com/WordPress/gutenberg/pull/46153))
+- Block Editor: Refactor the "order" state in the block editor reducer to use a map instead of a plain object. ([46221](https://github.com/WordPress/gutenberg/pull/46221))
+- Block Editor: Refactor the block-editor parents state to use maps instead of objects. ([46225](https://github.com/WordPress/gutenberg/pull/46225))
+- Refactor the block-editor "tree" state to use maps instead of objects. ([46229](https://github.com/WordPress/gutenberg/pull/46229))
+- Refactor the block-editor byClientId redux state to use maps instead of plain objects. ([46204](https://github.com/WordPress/gutenberg/pull/46204))
+- Fix typing performance issue for container blocks. ([46527](https://github.com/WordPress/gutenberg/pull/46527))
+
+#### Testing
+- E2E: Fix performance tests by making inserter search container waiting optional. ([46268](https://github.com/WordPress/gutenberg/pull/46268))
+
+#### Mobile
+- Columns mobile block: Avoid returning unstable innerWidths from useSelect. ([46403](https://github.com/WordPress/gutenberg/pull/46403))
+
+### Experiments
+
+#### Block Library
+- Navigation List View: Remove empty cell when there is no edit button. ([46439](https://github.com/WordPress/gutenberg/pull/46439))
+
+#### Web Fonts
+- WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. ([46378](https://github.com/WordPress/gutenberg/pull/46378))
+
+### Documentation
+- Adds clarifications and clears up inaccuracies. ([46283](https://github.com/WordPress/gutenberg/pull/46283))
+- Adds details of how to find the .zip file. ([46305](https://github.com/WordPress/gutenberg/pull/46305))
+- Doc: Fix description and documentation for link color support. ([46405](https://github.com/WordPress/gutenberg/pull/46405))
+- Docs: Add missing useState import in BorderBoxControl documentation. ([42067](https://github.com/WordPress/gutenberg/pull/42067))
+- Docs: Add missing useState import in color picker docs. ([42069](https://github.com/WordPress/gutenberg/pull/42069))
+- Docs: Add missing useState import in confirm dialog docs. ([42071](https://github.com/WordPress/gutenberg/pull/42071))
+- Docs: Adds reminder to use Node.js v14 in Quick Start. ([46216](https://github.com/WordPress/gutenberg/pull/46216))
+- Docs: Fix missing link to `primitives` package. ([46290](https://github.com/WordPress/gutenberg/pull/46290))
+- Docs: Update reference to IE 11. ([46296](https://github.com/WordPress/gutenberg/pull/46296))
+
+### Code Quality
+- Block Editor: Fix `no-node-access` violations in `BlockPreview`. ([46409](https://github.com/WordPress/gutenberg/pull/46409))
+- Block Editor: Fix `no-node-access` violations in `BlockSelectionClearer`. ([46408](https://github.com/WordPress/gutenberg/pull/46408))
+- Columns mobile edit: Remove unused updateBlockSettings action bind. ([46455](https://github.com/WordPress/gutenberg/pull/46455))
+- ESLint: Fix warning in `getBlockAttribute` documentation. ([46500](https://github.com/WordPress/gutenberg/pull/46500))
+- List View: Use default parameters instead of defaultProps. ([46266](https://github.com/WordPress/gutenberg/pull/46266))
+- Removed: Remove small APIs marked to be removed in WP 6.2. ([46106](https://github.com/WordPress/gutenberg/pull/46106))
+- Site Editor: Remove invalid CSS. ([46288](https://github.com/WordPress/gutenberg/pull/46288))
+
+#### Block Library
+- Group Block: Remove placeholder leftovers. ([46423](https://github.com/WordPress/gutenberg/pull/46423))
+- Group: Remove unnecessary 'useCallback'. ([46418](https://github.com/WordPress/gutenberg/pull/46418))
+- Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. ([46329](https://github.com/WordPress/gutenberg/pull/46329))
+- Navigation Block: Update attribute test for `are-blocks-dirty.js`. ([46355](https://github.com/WordPress/gutenberg/pull/46355))
+- Page List Block: Move shared "convert" description to constant. ([46368](https://github.com/WordPress/gutenberg/pull/46368))
+- Page List Block: Simplify Page List convert to links function API. ([46365](https://github.com/WordPress/gutenberg/pull/46365))
+- Query: Cleanup variation picker component. ([46424](https://github.com/WordPress/gutenberg/pull/46424))
+- RNMobile: Add an inline comment to clarify usage of 'hard' limit vs. unbounded query. ([46245](https://github.com/WordPress/gutenberg/pull/46245))
+- Shared standard Link UI component between Nav Link and Submenu blocks. ([46370](https://github.com/WordPress/gutenberg/pull/46370))
+- Template Parts: Remove unnecessary 'useCallback'. ([46420](https://github.com/WordPress/gutenberg/pull/46420))
+
+#### Components
+- AlignmentMatrixControl: Refactor to TypeScript. ([46162](https://github.com/WordPress/gutenberg/pull/46162))
+- Also ignore `no-node-access` for some components. ([46501](https://github.com/WordPress/gutenberg/pull/46501))
+- Fix `no-node-access` violations in `FocalPointPicker` tests. ([46312](https://github.com/WordPress/gutenberg/pull/46312))
+- Fix `no-node-access` violations in `Popover`. ([46311](https://github.com/WordPress/gutenberg/pull/46311))
+- Fix `no-node-access` violations in `Theme`. ([46310](https://github.com/WordPress/gutenberg/pull/46310))
+- Fix `no-node-access` violations in `ToolsPanel` tests. ([46313](https://github.com/WordPress/gutenberg/pull/46313))
+- withFilters: Use 'act' from React Testing Library. ([46237](https://github.com/WordPress/gutenberg/pull/46237))
+
+#### Data Layer
+- Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. ([45513](https://github.com/WordPress/gutenberg/pull/45513))
+- ESLint: Fix warnings in the data package. ([46499](https://github.com/WordPress/gutenberg/pull/46499))
+
+#### Global Styles
+- Add "custom-css" as an acceptable value in the documentation for gutenberg_get_global_stylesheet. ([46493](https://github.com/WordPress/gutenberg/pull/46493))
+- PaletteEdit: Add changelog. ([46095](https://github.com/WordPress/gutenberg/pull/46095))
+
+#### Block Editor
+- Inserter: Update mobile tab navigation styles. ([46186](https://github.com/WordPress/gutenberg/pull/46186))
+
+#### Layout
+- Clarify inline comment about switching to `safecss_filter_attr`. ([46061](https://github.com/WordPress/gutenberg/pull/46061))
+
+### Tools
+
+#### Build Tooling
+- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247))
+- Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302))
+- Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282))
+
+#### Testing
+- E2E: Fix flaky Block Switcher tests. ([46406](https://github.com/WordPress/gutenberg/pull/46406))
+- end-to-end tests: Add width and color test to button block. ([46452](https://github.com/WordPress/gutenberg/pull/46452))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong @glendaviesnz
+
+
+= 14.8.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Add a current-menu-ancestor class to navigation items. ([40778](https://github.com/WordPress/gutenberg/pull/40778))
+- Page List Block: Adds a longdash tree to the parent selector. ([46336](https://github.com/WordPress/gutenberg/pull/46336))
+- Page List Block: Hide page list edit button if no pages are available. ([46331](https://github.com/WordPress/gutenberg/pull/46331))
+- Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+- Add page list to Link UI transforms in Nav block. ([46426](https://github.com/WordPress/gutenberg/pull/46426))
+- Heading Block: Don't rely on the experimental selector anymore. ([46284](https://github.com/WordPress/gutenberg/pull/46284))
+- Media & Text Block: Create undo history when media width is changed. ([46084](https://github.com/WordPress/gutenberg/pull/46084))
+- Navigation block: Add location->primary to fallback nav creation for classic menus. ([45976](https://github.com/WordPress/gutenberg/pull/45976))
+- Navigation block: Update fallback nav creation to the most recently created menu. ([46286](https://github.com/WordPress/gutenberg/pull/46286))
+- Navigation: Add a 'open list view' button. ([46335](https://github.com/WordPress/gutenberg/pull/46335))
+- Navigation: Removes the header from the navigation list view in the experiment. ([46070](https://github.com/WordPress/gutenberg/pull/46070))
+- Page List: Add convert panel to Inspector Controls when within Nav block. ([46352](https://github.com/WordPress/gutenberg/pull/46352))
+- Page List: Prevent users from adding inner blocks to Page List. ([46269](https://github.com/WordPress/gutenberg/pull/46269))
+- Query: Remove color block supports. ([46147](https://github.com/WordPress/gutenberg/pull/46147))
+- Table block: Make `figcaption` styles consistent between editor and front end. ([46172](https://github.com/WordPress/gutenberg/pull/46172))
+- List/quote: Unwrap inner block when pressing Backspace at start. ([45075](https://github.com/WordPress/gutenberg/pull/45075))
+
+#### Inspector Controls
+- Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. ([46346](https://github.com/WordPress/gutenberg/pull/46346))
+- Sidebar Tabs: Use editor settings to override display. ([46321](https://github.com/WordPress/gutenberg/pull/46321))
+- Summary panel: Try improving spacing and grid. ([46267](https://github.com/WordPress/gutenberg/pull/46267))
+
+#### Global Styles
+- Add Style Book to Global Styles. ([45960](https://github.com/WordPress/gutenberg/pull/45960))
+- Add block preview component in global styles. ([45719](https://github.com/WordPress/gutenberg/pull/45719))
+- Move border from layout to own menu. ([45995](https://github.com/WordPress/gutenberg/pull/45995))
+- Add a css style to theme.json to allow setting of custom css strings. ([46255](https://github.com/WordPress/gutenberg/pull/46255))
+- Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- Global styles: Add custom CSS panel to site editor. ([46141](https://github.com/WordPress/gutenberg/pull/46141))
+
+#### Site Editor
+- Allow adding new templates and template parts directly from the sidebar. ([46458](https://github.com/WordPress/gutenberg/pull/46458))
+- Synchronize the sidebar state in the URL. ([46433](https://github.com/WordPress/gutenberg/pull/46433))
+- Try template drill down on the shell sidebar (browse mode). ([45100](https://github.com/WordPress/gutenberg/pull/45100))
+
+#### Block Editor
+- Update the synced block hover styles in Inserter. ([46442](https://github.com/WordPress/gutenberg/pull/46442))
+- Add new selector getLastInsertedBlockClientId. ([46531](https://github.com/WordPress/gutenberg/pull/46531))
+- Block editor: Hide fixed contextual toolbar. ([46298](https://github.com/WordPress/gutenberg/pull/46298))
+- Inserter: Pattern title tooltip. ([46419](https://github.com/WordPress/gutenberg/pull/46419))
+- useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. ([46357](https://github.com/WordPress/gutenberg/pull/46357))
+- Design: Augmented shadows for modals and popovers. ([46228](https://github.com/WordPress/gutenberg/pull/46228))
+
+#### Components
+- Tabs: Try a simpler tab focus style, alt. ([46276](https://github.com/WordPress/gutenberg/pull/46276))
+- BaseControl: Add convenience hook to generate id-related props. ([46170](https://github.com/WordPress/gutenberg/pull/46170))
+- Dashicon: Refactor to TypeScript. ([45924](https://github.com/WordPress/gutenberg/pull/45924))
+- Lighten borders to gray-600. ([46252](https://github.com/WordPress/gutenberg/pull/46252))
+- Popover: Check positioning by adding and testing is-positioned class. ([46429](https://github.com/WordPress/gutenberg/pull/46429))
+
+### Icons
+- Icons: Update the border icon. ([46264](https://github.com/WordPress/gutenberg/pull/46264))
+
+#### Testing
+- Tests: Fix `toBePositionedPopover` matcher message function. ([46239](https://github.com/WordPress/gutenberg/pull/46239))
+
+#### Accessibility
+- Reorganize the site editor to introduce Browse Mode. ([44770](https://github.com/WordPress/gutenberg/pull/44770))
+
+#### Plugin
+- Update the Gutenberg plugin to require at least the WP 6.0 version. ([46102](https://github.com/WordPress/gutenberg/pull/46102))
+- PHP: Backport changes from core theme resolver. ([46250](https://github.com/WordPress/gutenberg/pull/46250))
+- Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. ([46249](https://github.com/WordPress/gutenberg/pull/46249))
+- Upgrade React packages to v18. ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+#### Themes
+- Empty Theme: Add the `$schema` property in `theme.json` and rename template directories. ([46300](https://github.com/WordPress/gutenberg/pull/46300))
+
+#### Mobile
+- Mobile: Disable Unsupported Block Editor Tests (Android). ([46542](https://github.com/WordPress/gutenberg/pull/46542))
+- Mobile: Inserter - Remove `.done()` usage. ([46460](https://github.com/WordPress/gutenberg/pull/46460))
+- Mobile: Update Heading block end-to-end test. ([46220](https://github.com/WordPress/gutenberg/pull/46220))
+- Mobile: Updates packages to not use Git HTTPS URLs. ([46422](https://github.com/WordPress/gutenberg/pull/46422))
+
+### Bug Fixes
+
+#### Block Library
+- Fix Nav Submenu block Link UI text control. ([46243](https://github.com/WordPress/gutenberg/pull/46243))
+- Fix auto Nav menu creation due to page list inner blocks. ([46223](https://github.com/WordPress/gutenberg/pull/46223))
+- Handle innerContent too when removing innerBlocks. ([46377](https://github.com/WordPress/gutenberg/pull/46377))
+- Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. ([46497](https://github.com/WordPress/gutenberg/pull/46497))
+- Navigation Block: Add social link singular to list of blocks to be allowed. ([46374](https://github.com/WordPress/gutenberg/pull/46374))
+- Navigation Block: Fixes adding a submenu. ([46364](https://github.com/WordPress/gutenberg/pull/46364))
+- Navigation Block: Prevent circular references in navigation block rendering. ([46387](https://github.com/WordPress/gutenberg/pull/46387))
+- Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. ([46279](https://github.com/WordPress/gutenberg/pull/46279))
+- Navigation link: Use stripHTML. ([46317](https://github.com/WordPress/gutenberg/pull/46317))
+- Page List Block: Fix error loading page list parent options. ([46327](https://github.com/WordPress/gutenberg/pull/46327))
+- Query Loop Block: Add migration of colors to v2 deprecation. ([46522](https://github.com/WordPress/gutenberg/pull/46522))
+- Site Logo: Correctly set the image's natural height and width. ([46214](https://github.com/WordPress/gutenberg/pull/46214))
+- Strip markup from link label data in inspector. ([46171](https://github.com/WordPress/gutenberg/pull/46171))
+- Template Parts: Fix modal search stacking context. ([46421](https://github.com/WordPress/gutenberg/pull/46421))
+- Video: Avoid an error when removal is locked. ([46324](https://github.com/WordPress/gutenberg/pull/46324))
+- Layout child fixed size should not be fixed by default and should always have a value set. ([46139](https://github.com/WordPress/gutenberg/pull/46139))
+
+#### Blocks
+- Paste handler: Remove styles on inline paste. ([46402](https://github.com/WordPress/gutenberg/pull/46402))
+- Improve performance of gutenberg_render_layout_support_flag. ([46074](https://github.com/WordPress/gutenberg/pull/46074))
+
+#### Global Styles
+- Allow indirect properties when unfiltered_html is not allowed. ([46388](https://github.com/WordPress/gutenberg/pull/46388))
+- Fix Reset to defaults action by moving fills to be within context provider. ([46486](https://github.com/WordPress/gutenberg/pull/46486))
+- Fix duplication of synced block colors in CSS output. ([46297](https://github.com/WordPress/gutenberg/pull/46297))
+- Make style book label font size 11px. ([46341](https://github.com/WordPress/gutenberg/pull/46341))
+- Style Book: Clear Global Styles navigation history when selecting a block. ([46391](https://github.com/WordPress/gutenberg/pull/46391))
+- Global Styles REST API endpoint: Check custom CSS is included before attempting to validate. ([46561](https://github.com/WordPress/gutenberg/pull/46561))
+- Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities. ([46663](https://github.com/WordPress/gutenberg/pull/46663))
+
+#### Block Editor
+- Block Editor: Fix content locked patterns. ([46494](https://github.com/WordPress/gutenberg/pull/46494))
+- Block Editor: Fix memoized pattern selector dependant arguments. ([46238](https://github.com/WordPress/gutenberg/pull/46238))
+- Block Editor: Restore draggable chip styles. ([46396](https://github.com/WordPress/gutenberg/pull/46396))
+- Block Editor: Revert deoptimization useNestedSettingsUpdate. ([46350](https://github.com/WordPress/gutenberg/pull/46350))
+- Block Editor: Fix some usages of useSelect that return unstable results. ([46226](https://github.com/WordPress/gutenberg/pull/46226))
+- useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. ([46307](https://github.com/WordPress/gutenberg/pull/46307))
+
+#### Patterns
+- Add new pattern categories. ([46144](https://github.com/WordPress/gutenberg/pull/46144))
+- Block Editor: Add initial view mode in `BlockPatternSetup`. ([46399](https://github.com/WordPress/gutenberg/pull/46399))
+
+#### Site Editor
+- Do not remount iframe. ([46431](https://github.com/WordPress/gutenberg/pull/46431))
+- Fix the top bar 'exit' animation. ([46533](https://github.com/WordPress/gutenberg/pull/46533))
+- Keep edited entity in sync when Editor canvas isn't mounted. ([46524](https://github.com/WordPress/gutenberg/pull/46524))
+- [Site Editor]: Add default white background for themes with no `background color` set. ([46314](https://github.com/WordPress/gutenberg/pull/46314))
+
+#### Components
+- InputControl: Fix `Flex` wrapper usage. ([46213](https://github.com/WordPress/gutenberg/pull/46213))
+- Modal: Fix unexpected modal closing in IME Composition. ([46453](https://github.com/WordPress/gutenberg/pull/46453))
+- MaybeCategoryPanel: Avoid 403 requests for users with low permissions. ([46349](https://github.com/WordPress/gutenberg/pull/46349))
+- Rich text: Add button to clear unknown format. ([44086](https://github.com/WordPress/gutenberg/pull/44086))
+
+#### Document Settings
+- Fix template title in `summary` panel and requests for low privileged users. ([46304](https://github.com/WordPress/gutenberg/pull/46304))
+- Permalink: Hide edit field for users without publishing capabilities. ([46361](https://github.com/WordPress/gutenberg/pull/46361))
+
+#### Patterns
+- Content lock: Make filter hook namespace unique. ([46344](https://github.com/WordPress/gutenberg/pull/46344))
+
+#### Layout
+- Child Layout controls: Fix help text for height. ([46319](https://github.com/WordPress/gutenberg/pull/46319))
+
+#### Widgets Editor
+- Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. ([43392](https://github.com/WordPress/gutenberg/pull/43392))
+
+#### Block API
+- HTML block: Fix parsing. ([27268](https://github.com/WordPress/gutenberg/pull/27268))
+
+#### Mobile
+- Social Links mobile test: Wait for URL bottom sheet to appear. ([46308](https://github.com/WordPress/gutenberg/pull/46308))
+
+### Performance
+
+#### Components
+- Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- CircularOption: Avoid paint on circular option hover. ([46197](https://github.com/WordPress/gutenberg/pull/46197))
+- Lodash: Replace `_.isEqual()` with `fastDeepEqual`. ([46200](https://github.com/WordPress/gutenberg/pull/46200))
+- Popover: Avoid paint on popovers when scrolling. ([46187](https://github.com/WordPress/gutenberg/pull/46187))
+- Resizable Box: Avoid paint on resizable-box handles. ([46196](https://github.com/WordPress/gutenberg/pull/46196))
+- ListView: Avoid paint on list view item hover. ([46188](https://github.com/WordPress/gutenberg/pull/46188))
+
+#### Code Quality
+- Lodash: Refactor `blocks` away from `_.find()`. ([46428](https://github.com/WordPress/gutenberg/pull/46428))
+- Lodash: Refactor `core-data` away from `_.find()`. ([46468](https://github.com/WordPress/gutenberg/pull/46468))
+- Lodash: Refactor `edit-site` away from `_.find()`. ([46539](https://github.com/WordPress/gutenberg/pull/46539))
+- Lodash: Refactor away from `_.orderBy()`. ([45146](https://github.com/WordPress/gutenberg/pull/45146))
+- Lodash: Refactor block library away from `_.find()`. ([46430](https://github.com/WordPress/gutenberg/pull/46430))
+- Remove usage of get_default_block_editor_settings. ([46112](https://github.com/WordPress/gutenberg/pull/46112))
+
+#### Post Editor
+- Lodash: Refactor editor away from `_.find()`. ([46464](https://github.com/WordPress/gutenberg/pull/46464))
+- Lodash: Refactor post editor away from `_.find()`. ([46432](https://github.com/WordPress/gutenberg/pull/46432))
+
+#### Block Editor
+- Avoid paint on inserter animation. ([46185](https://github.com/WordPress/gutenberg/pull/46185))
+- Improve inserter search performance. ([46153](https://github.com/WordPress/gutenberg/pull/46153))
+- Block Editor: Refactor the "order" state in the block editor reducer to use a map instead of a plain object. ([46221](https://github.com/WordPress/gutenberg/pull/46221))
+- Block Editor: Refactor the block-editor parents state to use maps instead of objects. ([46225](https://github.com/WordPress/gutenberg/pull/46225))
+- Refactor the block-editor "tree" state to use maps instead of objects. ([46229](https://github.com/WordPress/gutenberg/pull/46229))
+- Refactor the block-editor byClientId redux state to use maps instead of plain objects. ([46204](https://github.com/WordPress/gutenberg/pull/46204))
+- Fix typing performance issue for container blocks. ([46527](https://github.com/WordPress/gutenberg/pull/46527))
+
+#### Testing
+- E2E: Fix performance tests by making inserter search container waiting optional. ([46268](https://github.com/WordPress/gutenberg/pull/46268))
+
+#### Mobile
+- Columns mobile block: Avoid returning unstable innerWidths from useSelect. ([46403](https://github.com/WordPress/gutenberg/pull/46403))
+
+### Experiments
+
+#### Block Library
+- Navigation List View: Remove empty cell when there is no edit button. ([46439](https://github.com/WordPress/gutenberg/pull/46439))
+
+#### Web Fonts
+- WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. ([46378](https://github.com/WordPress/gutenberg/pull/46378))
+
+### Documentation
+- Adds clarifications and clears up inaccuracies. ([46283](https://github.com/WordPress/gutenberg/pull/46283))
+- Adds details of how to find the .zip file. ([46305](https://github.com/WordPress/gutenberg/pull/46305))
+- Doc: Fix description and documentation for link color support. ([46405](https://github.com/WordPress/gutenberg/pull/46405))
+- Docs: Add missing useState import in BorderBoxControl documentation. ([42067](https://github.com/WordPress/gutenberg/pull/42067))
+- Docs: Add missing useState import in color picker docs. ([42069](https://github.com/WordPress/gutenberg/pull/42069))
+- Docs: Add missing useState import in confirm dialog docs. ([42071](https://github.com/WordPress/gutenberg/pull/42071))
+- Docs: Adds reminder to use Node.js v14 in Quick Start. ([46216](https://github.com/WordPress/gutenberg/pull/46216))
+- Docs: Fix missing link to `primitives` package. ([46290](https://github.com/WordPress/gutenberg/pull/46290))
+- Docs: Update reference to IE 11. ([46296](https://github.com/WordPress/gutenberg/pull/46296))
+
+### Code Quality
+- Block Editor: Fix `no-node-access` violations in `BlockPreview`. ([46409](https://github.com/WordPress/gutenberg/pull/46409))
+- Block Editor: Fix `no-node-access` violations in `BlockSelectionClearer`. ([46408](https://github.com/WordPress/gutenberg/pull/46408))
+- Columns mobile edit: Remove unused updateBlockSettings action bind. ([46455](https://github.com/WordPress/gutenberg/pull/46455))
+- ESLint: Fix warning in `getBlockAttribute` documentation. ([46500](https://github.com/WordPress/gutenberg/pull/46500))
+- List View: Use default parameters instead of defaultProps. ([46266](https://github.com/WordPress/gutenberg/pull/46266))
+- Removed: Remove small APIs marked to be removed in WP 6.2. ([46106](https://github.com/WordPress/gutenberg/pull/46106))
+- Site Editor: Remove invalid CSS. ([46288](https://github.com/WordPress/gutenberg/pull/46288))
+
+#### Block Library
+- Group Block: Remove placeholder leftovers. ([46423](https://github.com/WordPress/gutenberg/pull/46423))
+- Group: Remove unnecessary 'useCallback'. ([46418](https://github.com/WordPress/gutenberg/pull/46418))
+- Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. ([46329](https://github.com/WordPress/gutenberg/pull/46329))
+- Navigation Block: Update attribute test for `are-blocks-dirty.js`. ([46355](https://github.com/WordPress/gutenberg/pull/46355))
+- Page List Block: Move shared "convert" description to constant. ([46368](https://github.com/WordPress/gutenberg/pull/46368))
+- Page List Block: Simplify Page List convert to links function API. ([46365](https://github.com/WordPress/gutenberg/pull/46365))
+- Query: Cleanup variation picker component. ([46424](https://github.com/WordPress/gutenberg/pull/46424))
+- RNMobile: Add an inline comment to clarify usage of 'hard' limit vs. unbounded query. ([46245](https://github.com/WordPress/gutenberg/pull/46245))
+- Shared standard Link UI component between Nav Link and Submenu blocks. ([46370](https://github.com/WordPress/gutenberg/pull/46370))
+- Template Parts: Remove unnecessary 'useCallback'. ([46420](https://github.com/WordPress/gutenberg/pull/46420))
+
+#### Components
+- AlignmentMatrixControl: Refactor to TypeScript. ([46162](https://github.com/WordPress/gutenberg/pull/46162))
+- Also ignore `no-node-access` for some components. ([46501](https://github.com/WordPress/gutenberg/pull/46501))
+- Fix `no-node-access` violations in `FocalPointPicker` tests. ([46312](https://github.com/WordPress/gutenberg/pull/46312))
+- Fix `no-node-access` violations in `Popover`. ([46311](https://github.com/WordPress/gutenberg/pull/46311))
+- Fix `no-node-access` violations in `Theme`. ([46310](https://github.com/WordPress/gutenberg/pull/46310))
+- Fix `no-node-access` violations in `ToolsPanel` tests. ([46313](https://github.com/WordPress/gutenberg/pull/46313))
+- withFilters: Use 'act' from React Testing Library. ([46237](https://github.com/WordPress/gutenberg/pull/46237))
+
+#### Data Layer
+- Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. ([45513](https://github.com/WordPress/gutenberg/pull/45513))
+- ESLint: Fix warnings in the data package. ([46499](https://github.com/WordPress/gutenberg/pull/46499))
+
+#### Global Styles
+- Add "custom-css" as an acceptable value in the documentation for gutenberg_get_global_stylesheet. ([46493](https://github.com/WordPress/gutenberg/pull/46493))
+- PaletteEdit: Add changelog. ([46095](https://github.com/WordPress/gutenberg/pull/46095))
+
+#### Block Editor
+- Inserter: Update mobile tab navigation styles. ([46186](https://github.com/WordPress/gutenberg/pull/46186))
+
+#### Layout
+- Clarify inline comment about switching to `safecss_filter_attr`. ([46061](https://github.com/WordPress/gutenberg/pull/46061))
+
+### Tools
+
+#### Build Tooling
+- Adds Github Action to validate Gradle Wrapper. ([46247](https://github.com/WordPress/gutenberg/pull/46247))
+- Prevent api-fetch and core-data from being imported in the block editor package. ([46302](https://github.com/WordPress/gutenberg/pull/46302))
+- Serialize the map objects properly in the Redux dev tools. ([46282](https://github.com/WordPress/gutenberg/pull/46282))
+
+#### Testing
+- E2E: Fix flaky Block Switcher tests. ([46406](https://github.com/WordPress/gutenberg/pull/46406))
+- end-to-end tests: Add width and color test to button block. ([46452](https://github.com/WordPress/gutenberg/pull/46452))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @corentin-gautier: Avoid paint on popover when hovering content. ([46201](https://github.com/WordPress/gutenberg/pull/46201))
+- @ingeniumed: Expose before filter hook in useSettings for injecting block settings in the editor. ([45089](https://github.com/WordPress/gutenberg/pull/45089))
+- @janusqa: Reusable block: Pluralize the message "Convert to regular blocks" depending on the number of blocks contained. ([45819](https://github.com/WordPress/gutenberg/pull/45819))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @andrewserong @aristath @chad1008 @chintu51 @corentin-gautier @derekblank @draganescu @ellatrix @geriux @getdave @glendaviesnz @hideokamoto @ingeniumed @jameskoster @janusqa @jasmussen @jffng @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mburridge @mikachan @mirka @noisysocks @ntsekouras @oandregal @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad
+
+
 = 14.7.3 =
 
 ## Changelog
diff --git a/docs/README.md b/docs/README.md
index 1fe569f7356cbe..4d5343a76141e9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -29,7 +29,7 @@ The Editor offers rich new value to users with visual, drag-and-drop creation to
 Whether you want to extend the functionality of the block editor, or create a plugin based on it, [see the developer documentation](/docs/how-to-guides/README.md) to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.
 
 -   [Gutenberg Architecture](/docs/explanations/architecture/README.md)
--   [Block Styles](/docs/reference-guides/filters/block-filters.md#block-styles)
+-   [Block Styles](/docs/reference-guides/block-api/block-styles.md)
 -   [Creating Block Patterns](/docs/reference-guides/block-api/block-patterns.md)
 -   [Theming for the Block Editor](/docs/how-to-guides/themes/README.md)
 -   [Block API Reference](/docs/reference-guides/block-api/README.md)
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index f463cb319f6657..492813376b2c9d 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -34,6 +34,10 @@ To release a release candidate (RC) version of the plugin, enter `rc`. To releas
 
 This will trigger a GitHub Actions (GHA) workflow that bumps the plugin version, builds the Gutenberg plugin .zip file, creates a release draft, and attaches the plugin .zip file to it. This part of the process typically takes a little under six minutes. You'll see that workflow appear at the top of the list, right under the blue banner. Once it's finished, it'll change its status icon from a yellow dot to a green checkmark. You can follow along in a more detailed view by clicking on the workflow.
 
+#### Publishing the @wordpress packages to NPM
+
+As part of the release candidate (RC) process, all of the `@wordpress` packages are published to NPM. You may see messaging after the ["Build Gutenberg Plugin Zip" action](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) action has created the draft release that the ["Publish npm packages"](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) action requires someone with appropriate permissions to trigger the action. This is not the case as this process is automated and it will automatically run after the release notes are published.
+
 #### View the release draft
 
 As soon as the workflow has finished, you'll find the release draft under [https://github.com/WordPress/gutenberg/releases](https://github.com/WordPress/gutenberg/releases). The draft is pre-populated with changelog entries based on previous release candidates for this version, and any changes that have since been cherry-picked to the release branch. Thus, when releasing the first stable version of a series, make sure to delete any RC version headers (that are only there for your information) and to move the more recent changes to the correct section (see below).
diff --git a/docs/contributors/code/scripts.md b/docs/contributors/code/scripts.md
index 3b36c8f4be4956..b7cabe0130d71c 100644
--- a/docs/contributors/code/scripts.md
+++ b/docs/contributors/code/scripts.md
@@ -31,7 +31,6 @@ The editor includes a number of packages to enable various pieces of functionali
 | [Is Shallow Equal](/packages/is-shallow-equal/README.md)                                     | wp-is-shallow-equal                   | A function for performing a shallow comparison between two objects or arrays                                                                                  |
 | [Keycodes](/packages/keycodes/README.md)                                                     | wp-keycodes                           | Keycodes utilities for WordPress, used to check the key pressed in events like `onKeyDown`                                                                    |
 | [List Reusable blocks](/packages/list-reusable-blocks/README.md)                             | wp-list-reusable-blocks               | Package used to add import/export links to the listing page of the reusable blocks                                                                            |
-| [NUX](/packages/nux/README.md)                                                               | wp-nux                                | Components, and wp.data methods useful for onboarding a new user to the WordPress admin interface                                                             |
 | [Plugins](/packages/plugins/README.md)                                                       | wp-plugins                            | Plugins module for WordPress                                                                                                                                  |
 | [Redux Routine](/packages/redux-routine/README.md)                                           | wp-redux-routine                      | Redux middleware for generator coroutines                                                                                                                     |
 | [Rich Text](/packages/rich-text/README.md)                                                   | wp-rich-text                          | Helper functions to convert HTML or a DOM tree into a rich text value and back                                                                                |
diff --git a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
index e43dcb9727088d..cc4d0b1ee0a0d7 100644
--- a/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
+++ b/docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
@@ -119,6 +119,12 @@ The Query Loop block determines if there is an active variation of itself and if
 
 In order for a pattern to be “connected” with a Query Loop variation, you should add the name of your variation prefixed with the Query Loop name (e.g. `core/query/$variation_name`) to the pattern's `blockTypes` property. For more details about registering patterns [see here](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/).
 
+If you have not provided `innerBlocks` in your variation, there is also a way to suggest “connected” variations when the user selects `Start blank` in the setup phase. This is handled in a similar fashion with “connected” patterns, by checking if there is an active variation of Query Loop and if there are any connected variations to suggest.
+
+In order for a variation to be connected to another Query Loop variation we need to define the `scope` attribute with `['block']` as value and the `namespace` attribute defined as an array. This array should contain the names(`name` property) of any variations they want to be connected to.
+
+For example, if we have a Query Loop variation exposed to the inserter(`scope: ['inserter']`) with the name `products`, we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`. If the user selects this variation after having clicked `Start blank`, the namespace attribute will be overridden by the main inserter variation.
+
 ### Making Gutenberg recognize your variation
 
 There is one slight problem you might have realized after implementing this variation: while it is transparent to the user as they are inserting it, Gutenberg will still recognize the variation as a Query Loop block at its core and so, after its insertion, it will show up as a Query Loop block in the tree view of the editor, for instance.
diff --git a/docs/how-to-guides/javascript/extending-the-block-editor.md b/docs/how-to-guides/javascript/extending-the-block-editor.md
index 75442628f83ac5..5944b9208407f5 100644
--- a/docs/how-to-guides/javascript/extending-the-block-editor.md
+++ b/docs/how-to-guides/javascript/extending-the-block-editor.md
@@ -1,6 +1,6 @@
 # Extending the Block Editor
 
-Let's look at using the [Block Style example](/docs/reference-guides/filters/block-filters.md#block-styles) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
+Let's look at using the [Block Style example](/docs/reference-guides/block-api/block-styles.md) to extend the editor. This example allows you to add your own custom CSS class name to any core block type.
 
 Replace the existing `console.log()` code in your `myguten.js` file with:
 
diff --git a/docs/manifest.json b/docs/manifest.json
index 8cc39af57531e4..a06df18c6c44b9 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1733,12 +1733,6 @@
 		"markdown_source": "../packages/npm-package-json-lint-config/README.md",
 		"parent": "packages"
 	},
-	{
-		"title": "@wordpress/nux",
-		"slug": "packages-nux",
-		"markdown_source": "../packages/nux/README.md",
-		"parent": "packages"
-	},
 	{
 		"title": "@wordpress/plugins",
 		"slug": "packages-plugins",
@@ -1973,12 +1967,6 @@
 		"markdown_source": "../docs/reference-guides/data/data-core-notices.md",
 		"parent": "data"
 	},
-	{
-		"title": "The NUX (New User Experience) Data",
-		"slug": "data-core-nux",
-		"markdown_source": "../docs/reference-guides/data/data-core-nux.md",
-		"parent": "data"
-	},
 	{
 		"title": "Preferences",
 		"slug": "data-core-preferences",
diff --git a/docs/reference-guides/README.md b/docs/reference-guides/README.md
index 33fdd9aa602414..f13c838697f2de 100644
--- a/docs/reference-guides/README.md
+++ b/docs/reference-guides/README.md
@@ -63,7 +63,6 @@
     -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
     -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
     -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
-    -   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
     -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
     -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
     -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)
diff --git a/docs/reference-guides/block-api/block-deprecation.md b/docs/reference-guides/block-api/block-deprecation.md
index 1bb24694749a0f..0314939ee8f649 100644
--- a/docs/reference-guides/block-api/block-deprecation.md
+++ b/docs/reference-guides/block-api/block-deprecation.md
@@ -234,7 +234,6 @@ E.g: a block wants to migrate a title attribute to a paragraph innerBlock.
 
 ```js
 const { registerBlockType } = wp.blocks;
-const { omit } = lodash;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -254,8 +253,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,
@@ -278,8 +279,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 
 ```js
 var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType,
-	omit = lodash.omit;
+	registerBlockType = wp.blocks.registerBlockType;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -295,8 +295,10 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 			},
 
 			migrate: function ( attributes, innerBlocks ) {
+				const { title, ...restAttributes } = attributes;
+
 				return [
-					omit( attributes, 'title' ),
+					restAttributes,
 					[
 						createBlock( 'core/paragraph', {
 							content: attributes.title,
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index 4acb0f914e0379..d78050d79a9a1e 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -408,7 +408,7 @@ It contains as set of options to control features used in the editor. See the [t
 
 Block styles can be used to provide alternative styles to block. It works by adding a class name to the block's wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 ### Example
 
diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md
index 12fac7b479361a..d58e7a2f62d41c 100644
--- a/docs/reference-guides/block-api/block-patterns.md
+++ b/docs/reference-guides/block-api/block-patterns.md
@@ -34,6 +34,7 @@ The properties available for block patterns are:
 -   `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.
 -   `blockTypes` (optional): An array of block types that the pattern is intended to be used with. Each value needs to be the declared block's `name`.
 -   `postTypes` (optional): An array of post types that the pattern is restricted to be used with. The pattern will only be available when editing one of the post types passed on the array, for all the other post types the pattern is not available at all.
+-   `templateTypes` (optional): An array of template types where the pattern makes sense e.g: '404' if the pattern is for a 404 page, single-post if the pattern is for showing a single post.
 -   `inserter` (optional): By default, all patterns will appear in the inserter. To hide a pattern so that it can only be inserted programmatically, set the `inserter` to `false`.
 
 The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':
@@ -113,6 +114,8 @@ _Note:_
 
 `register_block_pattern_category()` should be called from a handler attached to the init hook.
 
+The category will not show under Patterns unless a pattern has been assigned to that category.
+
 ```php
 function my_plugin_register_my_pattern_categories() {
   register_block_pattern_category( ... );
diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 97077cb7efdfaa..bae50ac67a0fd3 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -145,7 +145,7 @@ styles: [
 ],
 ```
 
-Plugins and Themes can also register [custom block style](/docs/reference-guides/filters/block-filters.md#block-styles) for existing blocks.
+Plugins and Themes can also register [custom block style](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 #### attributes (optional)
 
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index d2d66fc0d12de3..25fe5746a04122 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -428,8 +428,8 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 -	**Name:** core/page-list
 -	**Category:** widgets
--	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** parentPageID
+-	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** isNested, parentPageID
 
 ## Page List Item
 
diff --git a/docs/reference-guides/data/README.md b/docs/reference-guides/data/README.md
index 1134c1d5ddd307..5f4d8d92d4bd49 100644
--- a/docs/reference-guides/data/README.md
+++ b/docs/reference-guides/data/README.md
@@ -12,7 +12,6 @@
 -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
 -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
 -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
--   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
 -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
 -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
 -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)
diff --git a/docs/reference-guides/data/data-core-nux.md b/docs/reference-guides/data/data-core-nux.md
deleted file mode 100644
index 4d2e8a0d98d546..00000000000000
--- a/docs/reference-guides/data/data-core-nux.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# The NUX (New User Experience) Data
-
-Namespace: `core/nux`.
-
-## Selectors
-
-<!-- START TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
-
-### areTipsEnabled
-
-Returns whether or not tips are globally enabled.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `boolean`: Whether tips are globally enabled.
-
-### getAssociatedGuide
-
-Returns an object describing the guide, if any, that the given tip is a part
-of.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
--   _tipId_ `string`: The tip to query.
-
-_Returns_
-
--   `?NUXGuideInfo`: Information about the associated guide.
-
-### isTipVisible
-
-Determines whether or not the given tip is showing. Tips are hidden if they
-are disabled, have been dismissed, or are not the current tip in any
-guide that they have been added to.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
--   _tipId_ `string`: The tip to query.
-
-_Returns_
-
--   `boolean`: Whether or not the given tip is showing.
-
-<!-- END TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
-
-## Actions
-
-<!-- START TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->
-
-### disableTips
-
-Returns an action object that, when dispatched, prevents all tips from
-showing again.
-
-_Returns_
-
--   `Object`: Action object.
-
-### dismissTip
-
-Returns an action object that, when dispatched, dismisses the given tip. A
-dismissed tip will not show again.
-
-_Parameters_
-
--   _id_ `string`: The tip to dismiss.
-
-_Returns_
-
--   `Object`: Action object.
-
-### enableTips
-
-Returns an action object that, when dispatched, makes all tips show again.
-
-_Returns_
-
--   `Object`: Action object.
-
-### triggerGuide
-
-Returns an action object that, when dispatched, presents a guide that takes
-the user through a series of tips step by step.
-
-_Parameters_
-
--   _tipIds_ `string[]`: Which tips to show in the guide.
-
-_Returns_
-
--   `Object`: Action object.
-
-<!-- END TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index 823248bb451bdd..e41215d67065a1 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -179,19 +179,18 @@ _Example:_
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
-const { Fragment } = wp.element;
 const { InspectorControls } = wp.blockEditor;
 const { PanelBody } = wp.components;
 
 const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		return (
-			<Fragment>
+			<>
 				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody>My custom control</PanelBody>
 				</InspectorControls>
-			</Fragment>
+			</>
 		);
 	};
 }, 'withInspectorControl' );
diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index b3ab4dcc083862..c41e6da0d8eb9f 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -75,7 +75,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 	>
 		<PluginPostStatusInfo.Slot>
 			{ ( fills ) => (
-				<Fragment>
+				<>
 					<PostVisibility />
 					<PostSchedule />
 					<PostFormat />
@@ -84,7 +84,7 @@ const PostStatus = ( { isOpened, onTogglePanel } ) => (
 					<PostAuthor />
 					{ fills }
 					<PostTrash />
-				</Fragment>
+				</>
 			) }
 		</PluginPostStatusInfo.Slot>
 	</PanelBody>
diff --git a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
index 8ede72e782b02c..4d32d754578cc4 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
@@ -9,17 +9,16 @@ This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match t
 import { registerPlugin } from '@wordpress/plugins';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
 import { image } from '@wordpress/icons';
-import { Fragment } from '@wordpress/element';
 
 const PluginSidebarMoreMenuItemTest = () => (
-	<Fragment>
+	<>
 		<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
 			Expanded Sidebar - More item
 		</PluginSidebarMoreMenuItem>
 		<PluginSidebar name="sidebar-name" icon={ image } title="My Sidebar">
 			Content of the sidebar
 		</PluginSidebar>
-	</Fragment>
+	</>
 );
 
 registerPlugin( 'plugin-sidebar-expanded-test', {
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index a694cf63e909fa..24b060605da718 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -52,6 +52,16 @@ Settings related to borders.
 
 ---
 
+### shadow
+
+Settings related to shadows.
+
+| Property  | Type   | Default | Props  |
+| ---       | ---    | ---    |---   |
+| palette | array |  | name, shadow, slug |
+
+---
+
 ### color
 
 Settings related to colors.
@@ -119,7 +129,7 @@ Settings related to typography.
 | customFontSize | boolean | true |  |
 | fontStyle | boolean | true |  |
 | fontWeight | boolean | true |  |
-| fluid | boolean |  |  |
+| fluid | undefined | false |  |
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
 | textDecoration | boolean | true |  |
@@ -145,10 +155,10 @@ Border styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| color | string |  |
-| radius | undefined |  |
-| style | string |  |
-| width | string |  |
+| color | string, object |  |
+| radius | string, object |  |
+| style | string, object |  |
+| width | string, object |  |
 | top | object | color, style, width |
 | right | object | color, style, width |
 | bottom | object | color, style, width |
@@ -162,9 +172,9 @@ Color styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| background | string |  |
-| gradient | string |  |
-| text | string |  |
+| background | string, object |  |
+| gradient | string, object |  |
+| text | string, object |  |
 
 ---
 
@@ -174,7 +184,7 @@ Spacing styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| blockGap | string |  |
+| blockGap | string, object |  |
 | margin | object | bottom, left, right, top |
 | padding | object | bottom, left, right, top |
 
@@ -186,14 +196,14 @@ Typography styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| fontFamily | string |  |
-| fontSize | string |  |
-| fontStyle | string |  |
-| fontWeight | string |  |
-| letterSpacing | string |  |
-| lineHeight | string |  |
-| textDecoration | string |  |
-| textTransform | string |  |
+| fontFamily | string, object |  |
+| fontSize | string, object |  |
+| fontStyle | string, object |  |
+| fontWeight | string, object |  |
+| letterSpacing | string, object |  |
+| lineHeight | string, object |  |
+| textDecoration | string, object |  |
+| textTransform | string, object |  |
 
 ---
 
@@ -203,7 +213,7 @@ CSS and SVG filter styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| duotone | string |  |
+| duotone | string, object |  |
 
 ---
 
@@ -220,10 +230,10 @@ Outline styles.
 
 | Property  | Type   |  Props  |
 | ---       | ---    |---   |
-| color | string |  |
-| offset | string |  |
-| style | string |  |
-| width | string |  |
+| color | string, object |  |
+| offset | string, object |  |
+| style | string, object |  |
+| width | string, object |  |
 
 ---
 
diff --git a/docs/toc.json b/docs/toc.json
index 532e6ef2d20e1d..4203f40c16cbc4 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -278,7 +278,6 @@
 						"docs/reference-guides/data/data-core-keyboard-shortcuts.md": []
 					},
 					{ "docs/reference-guides/data/data-core-notices.md": [] },
-					{ "docs/reference-guides/data/data-core-nux.md": [] },
 					{
 						"docs/reference-guides/data/data-core-preferences.md": []
 					},
diff --git a/gutenberg.php b/gutenberg.php
index 4d4489ef4c0615..af75dfb7463f20 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: 6.0
  * Requires PHP: 5.6
- * Version: 14.8.0-rc.1
+ * Version: 14.9.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 01d223b84281eb..aa6c74a5d2e73c 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -168,16 +168,21 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 }
 
 /**
- * Note: this method is for backwards compatibility.
- * It mostly replaces `gutenberg_typography_get_css_variable_inline_style()`.
- *
  * Generates an inline style value for a typography feature e.g. text decoration,
  * text transform, and font style.
  *
- * @param string $style_value    A raw style value for a single typography feature from a block's style attribute.
- * @param string $css_property   Slug for the CSS property the inline style sets.
+ * Note: This function is for backwards compatibility.
+ * * It is necessary to parse older blocks whose typography styles contain presets.
+ * * It mostly replaces the deprecated `wp_typography_get_css_variable_inline_style()`,
+ *   but skips compiling a CSS declaration as the style engine takes over this role.
+ *
+ * @link https://github.com/wordpress/gutenberg/pull/27555
+ *
+ * @since 6.1.0
  *
- * @return string?             A CSS inline style value.
+ * @param string $style_value  A raw style value for a single typography feature from a block's style attribute.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string A CSS inline style value.
  */
 function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_property ) {
 	// If the style value is not a preset CSS variable go no further.
@@ -185,10 +190,12 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_
 		return $style_value;
 	}
 
-	// For backwards compatibility.
-	// Presets were removed in https://github.com/WordPress/gutenberg/pull/27555.
-	// We have a preset CSS variable as the style.
-	// Get the style value from the string and return CSS style.
+	/*
+	 * For backwards compatibility.
+	 * Presets were removed in WordPress/gutenberg#27555.
+	 * We have a preset CSS variable as the style.
+	 * Get the style value from the string and return CSS style.
+	 */
 	$index_to_splice = strrpos( $style_value, '|' ) + 1;
 	$slug            = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
 
@@ -197,14 +204,16 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_
 }
 
 /**
- * Deprecated.
- * This method is no longer used and will have to be deprecated in Core.
+ * This method is no longer used and has been deprecated in Core since 6.1.0.
  *
- * It can be deleted once migrated to the next WordPress version.
+ * It can be deleted once Gutenberg's minimum supported WordPress version is >= 6.1
  *
  * Generates an inline style for a typography feature e.g. text decoration,
  * text transform, and font style.
  *
+ * @since 5.8.0
+ * @deprecated 6.1.0
+ *
  * @param array  $attributes   Block's attributes.
  * @param string $feature      Key for the feature within the typography styles.
  * @param string $css_property Slug for the CSS property the inline style sets.
@@ -451,18 +460,25 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 
 	// Checks if fluid font sizes are activated.
 	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
-	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
+	$should_use_fluid_typography
+		= isset( $typography_settings['fluid'] ) &&
+		( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ?
+		true :
+		$should_use_fluid_typography;
 
 	if ( ! $should_use_fluid_typography ) {
 		return $preset['size'];
 	}
 
+	$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
+
 	// Defaults.
 	$default_maximum_viewport_width   = '1600px';
 	$default_minimum_viewport_width   = '768px';
 	$default_minimum_font_size_factor = 0.75;
 	$default_scale_factor             = 1;
-	$default_minimum_font_size_limit  = '14px';
+	$has_min_font_size                = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
+	$default_minimum_font_size_limit  = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
 
 	// Font sizes.
 	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/class-wp-theme-json-gutenberg.php
similarity index 52%
rename from lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
rename to lib/class-wp-theme-json-gutenberg.php
index 0c0ec0451aec4e..ddad36e15fc02d 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1,8 +1,9 @@
 <?php
 /**
- * WP_Theme_JSON_6_1 class
+ * WP_Theme_JSON_Gutenberg class
  *
  * @package gutenberg
+ * @since 5.8.0
  */
 
 /**
@@ -10,31 +11,45 @@
  *
  * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
  * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ * use gutenberg_get_global_settings, gutenberg_get_global_styles, and gutenberg_get_global_stylesheet instead.
  *
  * @access private
  */
-class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Gutenberg {
+
 	/**
-	 * Defines which pseudo selectors are enabled for which elements.
+	 * Container of data in theme.json format.
 	 *
-	 * The order of the selectors should be: visited, hover, focus, active.
-	 * This is to ensure that 'visited' has the lowest specificity
-	 * and the other selectors can always overwrite it.
+	 * @since 5.8.0
+	 * @var array
+	 */
+	protected $theme_json = null;
+
+	/**
+	 * Holds block metadata extracted from block.json
+	 * to be shared among all instances so we don't
+	 * process it twice.
 	 *
-	 * See https://core.trac.wordpress.org/ticket/56928.
-	 * Note: this will affect both top-level and block-level elements.
+	 * @since 5.8.0
+	 * @since 6.1.0 Initialize as an empty array.
+	 * @var array
+	 */
+	protected static $blocks_metadata = array();
+
+	/**
+	 * The CSS selector for the top-level styles.
 	 *
-	 * @since 6.1.0
+	 * @since 5.8.0
+	 * @var string
 	 */
-	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
-		'button' => array( ':visited', ':hover', ':focus', ':active' ),
-	);
+	const ROOT_BLOCK_SELECTOR = 'body';
 
 	/**
 	 * The sources of data this object can represent.
 	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added 'blocks'.
 	 * @var string[]
 	 */
 	const VALID_ORIGINS = array(
@@ -44,11 +59,149 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 		'custom',
 	);
 
+	/**
+	 * Presets are a set of values that serve
+	 * to bootstrap some styles: colors, font sizes, etc.
+	 *
+	 * They are a unkeyed array of values such as:
+	 *
+	 * ```php
+	 * array(
+	 *   array(
+	 *     'slug'      => 'unique-name-within-the-set',
+	 *     'name'      => 'Name for the UI',
+	 *     <value_key> => 'value'
+	 *   ),
+	 * )
+	 * ```
+	 *
+	 * This contains the necessary metadata to process them:
+	 *
+	 * - path             => Where to find the preset within the settings section.
+	 * - prevent_override => Disables override of default presets by theme presets.
+	 *                       The relationship between whether to override the defaults
+	 *                       and whether the defaults are enabled is inverse:
+	 *                         - If defaults are enabled  => theme presets should not be overriden
+	 *                         - If defaults are disabled => theme presets should be overriden
+	 *                       For example, a theme sets defaultPalette to false,
+	 *                       making the default palette hidden from the user.
+	 *                       In that case, we want all the theme presets to be present,
+	 *                       so they should override the defaults by setting this false.
+	 * - use_default_names => whether to use the default names
+	 * - value_key        => the key that represents the value
+	 * - value_func       => optionally, instead of value_key, a function to generate
+	 *                       the value that takes a preset as an argument
+	 *                       (either value_key or value_func should be present)
+	 * - css_vars         => template string to use in generating the CSS Custom Property.
+	 *                       Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
+	 *                       substituting the $slug for the slug's value for each preset value.
+	 * - classes          => array containing a structure with the classes to
+	 *                       generate for the presets, where for each array item
+	 *                       the key is the class name and the value the property name.
+	 *                       The "$slug" substring will be replaced by the slug of each preset.
+	 *                       For example:
+	 *                       'classes' => array(
+	 *                         '.has-$slug-color'            => 'color',
+	 *                         '.has-$slug-background-color' => 'background-color',
+	 *                         '.has-$slug-border-color'     => 'border-color',
+	 *                       )
+	 * - properties       => array of CSS properties to be used by kses to
+	 *                       validate the content of each preset
+	 *                       by means of the remove_insecure_properties method.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets,
+	 *              `use_default_names` preset key, and simplified the metadata structure.
+	 * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
+	 *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
+	 * @var array
+	 */
+	const PRESETS_METADATA = array(
+		array(
+			'path'              => array( 'shadow', 'palette' ),
+			'prevent_override'  => array( 'shadow', 'defaultPalette' ),
+			'use_default_names' => false,
+			'value_key'         => 'shadow',
+			'css_vars'          => '--wp--preset--shadow--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'box-shadow' ),
+		),
+		array(
+			'path'              => array( 'color', 'palette' ),
+			'prevent_override'  => array( 'color', 'defaultPalette' ),
+			'use_default_names' => false,
+			'value_key'         => 'color',
+			'css_vars'          => '--wp--preset--color--$slug',
+			'classes'           => array(
+				'.has-$slug-color'            => 'color',
+				'.has-$slug-background-color' => 'background-color',
+				'.has-$slug-border-color'     => 'border-color',
+			),
+			'properties'        => array( 'color', 'background-color', 'border-color' ),
+		),
+		array(
+			'path'              => array( 'color', 'gradients' ),
+			'prevent_override'  => array( 'color', 'defaultGradients' ),
+			'use_default_names' => false,
+			'value_key'         => 'gradient',
+			'css_vars'          => '--wp--preset--gradient--$slug',
+			'classes'           => array( '.has-$slug-gradient-background' => 'background' ),
+			'properties'        => array( 'background' ),
+		),
+		array(
+			'path'              => array( 'color', 'duotone' ),
+			'prevent_override'  => array( 'color', 'defaultDuotone' ),
+			'use_default_names' => false,
+			'value_func'        => 'gutenberg_get_duotone_filter_property',
+			'css_vars'          => '--wp--preset--duotone--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'filter' ),
+		),
+		array(
+			'path'              => array( 'typography', 'fontSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_func'        => 'gutenberg_get_typography_font_size_value',
+			'css_vars'          => '--wp--preset--font-size--$slug',
+			'classes'           => array( '.has-$slug-font-size' => 'font-size' ),
+			'properties'        => array( 'font-size' ),
+		),
+		array(
+			'path'              => array( 'typography', 'fontFamilies' ),
+			'prevent_override'  => false,
+			'use_default_names' => false,
+			'value_key'         => 'fontFamily',
+			'css_vars'          => '--wp--preset--font-family--$slug',
+			'classes'           => array( '.has-$slug-font-family' => 'font-family' ),
+			'properties'        => array( 'font-family' ),
+		),
+		array(
+			'path'              => array( 'spacing', 'spacingSizes' ),
+			'prevent_override'  => false,
+			'use_default_names' => true,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--spacing--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'padding', 'margin' ),
+		),
+	);
+
 	/**
 	 * Metadata for style properties.
 	 *
 	 * Each element is a direct mapping from the CSS property name to the
 	 * path to the value in theme.json & block attributes.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
+	 *              `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
+	 *              `text-decoration`, `text-transform`, and `filter` properties,
+	 *              simplified the metadata structure.
+	 * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
+	 *              `--wp--style--root--padding-*`, and `box-shadow` properties,
+	 *              removed the `--wp--style--block-gap` property.
+	 * @since 6.2.0 Added `min-height`.
+	 * @var array
 	 */
 	const PROPERTIES_METADATA = array(
 		'background'                        => array( 'color', 'gradient' ),
@@ -85,6 +238,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 		'margin-right'                      => array( 'spacing', 'margin', 'right' ),
 		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
 		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
+		'min-height'                        => array( 'dimensions', 'minHeight' ),
 		'outline-color'                     => array( 'outline', 'color' ),
 		'outline-offset'                    => array( 'outline', 'offset' ),
 		'outline-style'                     => array( 'outline', 'style' ),
@@ -106,260 +260,150 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON {
 	);
 
 	/**
-	 * The valid elements that can be found under styles.
+	 * Protected style properties.
 	 *
-	 * @var string[]
+	 * These style properties are only rendered if a setting enables it
+	 * via a value other than `null`.
+	 *
+	 * Each element maps the style property to the corresponding theme.json
+	 * setting key.
+	 *
+	 * @since 5.9.0
 	 */
-	const ELEMENTS = array(
-		'link'    => 'a:where(:not(.wp-element-button))', // The where is needed to lower the specificity.
-		'heading' => 'h1, h2, h3, h4, h5, h6',
-		'h1'      => 'h1',
-		'h2'      => 'h2',
-		'h3'      => 'h3',
-		'h4'      => 'h4',
-		'h5'      => 'h5',
-		'h6'      => 'h6',
-		'button'  => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
-		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption', // The block classes are necessary to target older content that won't use the new class names.
-		'cite'    => 'cite',
-	);
-
-	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
-		'button'  => 'wp-element-button',
-		'caption' => 'wp-element-caption',
-	);
-
-	// List of block support features that can have their related styles
-	// generated under their own feature level selector rather than the block's.
-	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
-		'__experimentalBorder' => 'border',
-		'color'                => 'color',
-		'spacing'              => 'spacing',
-		'typography'           => 'typography',
+	const PROTECTED_PROPERTIES = array(
+		'spacing.blockGap' => array( 'spacing', 'blockGap' ),
 	);
 
 	/**
-	 * Constructor.
+	 * Indirect metadata for style properties that are not directly output.
 	 *
-	 * @since 5.8.0
+	 * Each element is a direct mapping from a CSS property name to the
+	 * path to the value in theme.json & block attributes.
 	 *
-	 * @param array  $theme_json A structure that follows the theme.json schema.
-	 * @param string $origin     Optional. What source of data this object represents.
-	 *                           One of 'default', 'theme', or 'custom'. Default 'theme'.
+	 * Indirect properties are not output directly by `compute_style_properties`,
+	 * but are used elsewhere in the processing of global styles. The indirect
+	 * property is used to validate whether or not a style value is allowed.
+	 *
+	 * @since 6.2.0
+	 * @var array
 	 */
-	public function __construct( $theme_json = array(), $origin = 'theme' ) {
-		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
-			$origin = 'theme';
-		}
-
-		$this->theme_json    = WP_Theme_JSON_Schema::migrate( $theme_json );
-		$registry            = WP_Block_Type_Registry::get_instance();
-		$valid_block_names   = array_keys( $registry->get_all_registered() );
-		$valid_element_names = array_keys( static::ELEMENTS );
-		$theme_json          = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
-		$this->theme_json    = static::maybe_opt_in_into_settings( $theme_json );
-
-		// Internally, presets are keyed by origin.
-		$nodes = static::get_setting_nodes( $this->theme_json );
-		foreach ( $nodes as $node ) {
-			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
-				$path   = array_merge( $node['path'], $preset_metadata['path'] );
-				$preset = _wp_array_get( $this->theme_json, $path, null );
-				if ( null !== $preset ) {
-					// If the preset is not already keyed by origin.
-					if ( isset( $preset[0] ) || empty( $preset ) ) {
-						_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
-					}
-				}
-			}
-		}
-	}
+	const INDIRECT_PROPERTIES_METADATA = array(
+		'gap'        => array(
+			array( 'spacing', 'blockGap' ),
+		),
+		'column-gap' => array(
+			array( 'spacing', 'blockGap', 'left' ),
+		),
+		'row-gap'    => array(
+			array( 'spacing', 'blockGap', 'top' ),
+		),
+		'max-width'  => array(
+			array( 'layout', 'contentSize' ),
+			array( 'layout', 'wideSize' ),
+		),
+	);
 
 	/**
-	 * Given an element name, returns a class name.
+	 * The top-level keys a theme.json can have.
 	 *
-	 * @param string $element The name of the element.
-	 *
-	 * @return string The name of the class.
-	 *
-	 * @since 6.1.0
+	 * @since 5.8.0 As `ALLOWED_TOP_LEVEL_KEYS`.
+	 * @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`,
+	 *              added the `customTemplates` and `templateParts` values.
+	 * @var string[]
 	 */
-	public static function get_element_class_name( $element ) {
-		return array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ? static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] : '';
-	}
+	const VALID_TOP_LEVEL_KEYS = array(
+		'customTemplates',
+		'patterns',
+		'settings',
+		'styles',
+		'templateParts',
+		'version',
+		'title',
+	);
 
 	/**
-	 * Sanitizes the input according to the schemas.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
+	 * The valid properties under the settings key.
 	 *
-	 * @param array $input               Structure to sanitize.
-	 * @param array $valid_block_names   List of valid block names.
-	 * @param array $valid_element_names List of valid element names.
-	 * @return array The sanitized output.
+	 * @since 5.8.0 As `ALLOWED_SETTINGS`.
+	 * @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
+	 *              added new properties for `border`, `color`, `spacing`,
+	 *              and `typography`, and renamed others according to the new schema.
+	 * @since 6.0.0 Added `color.defaultDuotone`.
+	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
+	 * @since 6.2.0 Added `dimensions.minHeight`.
+	 * @var array
 	 */
-	protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
-
-		$output = array();
-
-		if ( ! is_array( $input ) ) {
-			return $output;
-		}
-
-		// Preserve only the top most level keys.
-		$output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
-
-		// Remove any rules that are annotated as "top" in VALID_STYLES constant.
-		// Some styles are only meant to be available at the top-level (e.g.: blockGap),
-		// hence, the schema for blocks & elements should not have them.
-		$styles_non_top_level = static::VALID_STYLES;
-		foreach ( array_keys( $styles_non_top_level ) as $section ) {
-			if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
-				foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
-					if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
-						unset( $styles_non_top_level[ $section ][ $prop ] );
-					}
-				}
-			}
-		}
-
-		// Build the schema based on valid block & element names.
-		$schema                 = array();
-		$schema_styles_elements = array();
-
-		// Set allowed element pseudo selectors based on per element allow list.
-		// Target data structure in schema:
-		// e.g.
-		// - top level elements: `$schema['styles']['elements']['link'][':hover']`.
-		// - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
-		foreach ( $valid_element_names as $element ) {
-			$schema_styles_elements[ $element ] = $styles_non_top_level;
-
-			if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
-					$schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
-				}
-			}
-		}
-
-		$schema_styles_blocks   = array();
-		$schema_settings_blocks = array();
-		foreach ( $valid_block_names as $block ) {
-			$schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
-			$schema_styles_blocks[ $block ]             = $styles_non_top_level;
-			$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
-		}
-
-		$schema['styles']             = static::VALID_STYLES;
-		$schema['styles']['blocks']   = $schema_styles_blocks;
-		$schema['styles']['elements'] = $schema_styles_elements;
-		$schema['settings']           = static::VALID_SETTINGS;
-		$schema['settings']['blocks'] = $schema_settings_blocks;
-
-		// Remove anything that's not present in the schema.
-		foreach ( array( 'styles', 'settings' ) as $subtree ) {
-			if ( ! isset( $input[ $subtree ] ) ) {
-				continue;
-			}
-
-			if ( ! is_array( $input[ $subtree ] ) ) {
-				unset( $output[ $subtree ] );
-				continue;
-			}
-
-			$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
-
-			if ( empty( $result ) ) {
-				unset( $output[ $subtree ] );
-			} else {
-				$output[ $subtree ] = $result;
-			}
-		}
-
-		return $output;
-	}
-
-	/**
-	 * Removes insecure data from theme.json.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param array $theme_json Structure to sanitize.
-	 * @return array Sanitized structure.
-	 */
-	public static function remove_insecure_properties( $theme_json ) {
-		$sanitized = array();
-
-		$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
-
-		$valid_block_names   = array_keys( static::get_blocks_metadata() );
-		$valid_element_names = array_keys( static::ELEMENTS );
-
-		$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
-
-		$blocks_metadata = static::get_blocks_metadata();
-		$style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
-
-		foreach ( $style_nodes as $metadata ) {
-			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
-			if ( empty( $input ) ) {
-				continue;
-			}
-
-			$output = static::remove_insecure_styles( $input );
-
-			// Get a reference to element name from path.
-			// $metadata['path'] = array('styles','elements','link');.
-			$current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
-
-			// $output is stripped of pseudo selectors. Readd and process them
-			// for insecure styles here.
-			if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-
-				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
-					if ( isset( $input[ $pseudo_selector ] ) ) {
-						$output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
-					}
-				}
-			}
-
-			if ( ! empty( $output ) ) {
-				_wp_array_set( $sanitized, $metadata['path'], $output );
-			}
-		}
-
-		$setting_nodes = static::get_setting_nodes( $theme_json );
-		foreach ( $setting_nodes as $metadata ) {
-			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
-			if ( empty( $input ) ) {
-				continue;
-			}
-
-			$output = static::remove_insecure_settings( $input );
-			if ( ! empty( $output ) ) {
-				_wp_array_set( $sanitized, $metadata['path'], $output );
-			}
-		}
-
-		if ( empty( $sanitized['styles'] ) ) {
-			unset( $theme_json['styles'] );
-		} else {
-			$theme_json['styles'] = $sanitized['styles'];
-		}
-
-		if ( empty( $sanitized['settings'] ) ) {
-			unset( $theme_json['settings'] );
-		} else {
-			$theme_json['settings'] = $sanitized['settings'];
-		}
-
-		return $theme_json;
-	}
+	const VALID_SETTINGS = array(
+		'appearanceTools'               => null,
+		'useRootPaddingAwareAlignments' => null,
+		'border'                        => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'shadow'                        => array(
+			'palette'        => null,
+			'defaultPalette' => null,
+		),
+		'color'                         => array(
+			'background'       => null,
+			'custom'           => null,
+			'customDuotone'    => null,
+			'customGradient'   => null,
+			'defaultDuotone'   => null,
+			'defaultGradients' => null,
+			'defaultPalette'   => null,
+			'duotone'          => null,
+			'gradients'        => null,
+			'link'             => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'                        => null,
+		'dimensions'                    => array(
+			'minHeight' => null,
+		),
+		'layout'                        => array(
+			'contentSize' => null,
+			'definitions' => null,
+			'wideSize'    => null,
+		),
+		'spacing'                       => array(
+			'customSpacingSize' => null,
+			'spacingSizes'      => null,
+			'spacingScale'      => null,
+			'blockGap'          => null,
+			'margin'            => null,
+			'padding'           => null,
+			'units'             => null,
+		),
+		'typography'                    => array(
+			'fluid'          => null,
+			'customFontSize' => null,
+			'dropCap'        => null,
+			'fontFamilies'   => null,
+			'fontSizes'      => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+		),
+	);
 
 	/**
 	 * The valid properties under the styles key.
 	 *
+	 * @since 5.8.0 As `ALLOWED_STYLES`.
+	 * @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
+	 *              added new properties for `border`, `filter`, `spacing`,
+	 *              and `typography`.
+	 * @since 6.1.0 Added new side properties for `border`,
+	 *              added new property `shadow`,
+	 *              updated `blockGap` to be allowed at any level.
+	 * @since 6.2.0 Added `dimensions.minHeight`.
 	 * @var array
 	 */
 	const VALID_STYLES = array(
@@ -378,7 +422,10 @@ public static function remove_insecure_properties( $theme_json ) {
 			'gradient'   => null,
 			'text'       => null,
 		),
-		'shadow'     => null,
+		'css'        => null,
+		'dimensions' => array(
+			'minHeight' => null,
+		),
 		'filter'     => array(
 			'duotone' => null,
 		),
@@ -388,6 +435,7 @@ public static function remove_insecure_properties( $theme_json ) {
 			'style'  => null,
 			'width'  => null,
 		),
+		'shadow'     => null,
 		'spacing'    => array(
 			'margin'   => null,
 			'padding'  => null,
@@ -406,45 +454,338 @@ public static function remove_insecure_properties( $theme_json ) {
 	);
 
 	/**
-	 * Function that appends a sub-selector to a existing one.
+	 * Defines which pseudo selectors are enabled for which elements.
 	 *
-	 * Given the compounded $selector "h1, h2, h3"
-	 * and the $to_append selector ".some-class" the result will be
-	 * "h1.some-class, h2.some-class, h3.some-class".
+	 * The order of the selectors should be: visited, hover, focus, active.
+	 * This is to ensure that 'visited' has the lowest specificity
+	 * and the other selectors can always overwrite it.
+	 *
+	 * See https://core.trac.wordpress.org/ticket/56928.
+	 * Note: this will affect both top-level and block-level elements.
+	 *
+	 * @since 6.1.0
+	 */
+	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
+		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
+		'button' => array( ':visited', ':hover', ':focus', ':active' ),
+	);
+
+	/**
+	 * The valid elements that can be found under styles.
 	 *
 	 * @since 5.8.0
-	 * @since 6.1.0 Added append position.
+	 * @since 6.1.0 Added `heading`, `button`, and `caption` elements.
+	 * @var string[]
+	 */
+	const ELEMENTS = array(
+		'link'    => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
+		'heading' => 'h1, h2, h3, h4, h5, h6',
+		'h1'      => 'h1',
+		'h2'      => 'h2',
+		'h3'      => 'h3',
+		'h4'      => 'h4',
+		'h5'      => 'h5',
+		'h6'      => 'h6',
+		// We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
+		'button'  => '.wp-element-button, .wp-block-button__link',
+		// The block classes are necessary to target older content that won't use the new class names.
+		'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
+		'cite'    => 'cite',
+	);
+
+	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
+		'button'  => 'wp-element-button',
+		'caption' => 'wp-element-caption',
+	);
+
+	/**
+	 * List of block support features that can have their related styles
+	 * generated under their own feature level selector rather than the block's.
 	 *
-	 * @param string $selector  Original selector.
-	 * @param string $to_append Selector to append.
-	 * @param string $position  A position sub-selector should be appended. Default: 'right'.
-	 * @return string
+	 * @since 6.1.0
+	 * @var string[]
 	 */
-	protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
-		$new_selectors = array();
-		$selectors     = explode( ',', $selector );
-		foreach ( $selectors as $sel ) {
-			$new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
+	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
+		'__experimentalBorder' => 'border',
+		'color'                => 'color',
+		'spacing'              => 'spacing',
+		'typography'           => 'typography',
+	);
+
+	/**
+	 * Returns a class name by an element name.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $element The name of the element.
+	 * @return string The name of the class.
+	 */
+	public static function get_element_class_name( $element ) {
+		$class_name = '';
+
+		// TODO: Replace array_key_exists() with isset() check once WordPress drops
+		// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+		if ( array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ) {
+			$class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
 		}
 
-		return implode( ',', $new_selectors );
+		return $class_name;
 	}
 
 	/**
-	 * Returns the metadata for each block.
+	 * Options that settings.appearanceTools enables.
 	 *
-	 * Example:
+	 * @since 6.0.0
+	 * @var array
+	 */
+	const APPEARANCE_TOOLS_OPT_INS = array(
+		array( 'border', 'color' ),
+		array( 'border', 'radius' ),
+		array( 'border', 'style' ),
+		array( 'border', 'width' ),
+		array( 'color', 'link' ),
+		array( 'dimensions', 'minHeight' ),
+		array( 'spacing', 'blockGap' ),
+		array( 'spacing', 'margin' ),
+		array( 'spacing', 'padding' ),
+		array( 'typography', 'lineHeight' ),
+	);
+
+	/**
+	 * The latest version of the schema in use.
 	 *
-	 *     {
-	 *       'core/paragraph': {
-	 *         'selector': 'p',
-	 *         'elements': {
-	 *           'link' => 'link selector',
-	 *           'etc'  => 'element selector'
-	 *         }
-	 *       },
-	 *       'core/heading': {
-	 *         'selector': 'h1',
+	 * @since 5.8.0
+	 * @since 5.9.0 Changed value from 1 to 2.
+	 * @var int
+	 */
+	const LATEST_SCHEMA = 2;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $theme_json A structure that follows the theme.json schema.
+	 * @param string $origin     Optional. What source of data this object represents.
+	 *                           One of 'default', 'theme', or 'custom'. Default 'theme'.
+	 */
+	public function __construct( $theme_json = array(), $origin = 'theme' ) {
+		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
+			$origin = 'theme';
+		}
+
+		$this->theme_json    = WP_Theme_JSON_Schema::migrate( $theme_json );
+		$registry            = WP_Block_Type_Registry::get_instance();
+		$valid_block_names   = array_keys( $registry->get_all_registered() );
+		$valid_element_names = array_keys( static::ELEMENTS );
+		$theme_json          = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
+		$this->theme_json    = static::maybe_opt_in_into_settings( $theme_json );
+
+		// Internally, presets are keyed by origin.
+		$nodes = static::get_setting_nodes( $this->theme_json );
+		foreach ( $nodes as $node ) {
+			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+				$path = $node['path'];
+				foreach ( $preset_metadata['path'] as $subpath ) {
+					$path[] = $subpath;
+				}
+				$preset = _wp_array_get( $this->theme_json, $path, null );
+				if ( null !== $preset ) {
+					// If the preset is not already keyed by origin.
+					if ( isset( $preset[0] ) || empty( $preset ) ) {
+						_wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Enables some opt-in settings if theme declared support.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $theme_json A theme.json structure to modify.
+	 * @return array The modified theme.json structure.
+	 */
+	protected static function maybe_opt_in_into_settings( $theme_json ) {
+		$new_theme_json = $theme_json;
+
+		if (
+			isset( $new_theme_json['settings']['appearanceTools'] ) &&
+			true === $new_theme_json['settings']['appearanceTools']
+		) {
+			static::do_opt_in_into_settings( $new_theme_json['settings'] );
+		}
+
+		if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) {
+			foreach ( $new_theme_json['settings']['blocks'] as &$block ) {
+				if ( isset( $block['appearanceTools'] ) && ( true === $block['appearanceTools'] ) ) {
+					static::do_opt_in_into_settings( $block );
+				}
+			}
+		}
+
+		return $new_theme_json;
+	}
+
+	/**
+	 * Enables some settings.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $context The context to which the settings belong.
+	 */
+	protected static function do_opt_in_into_settings( &$context ) {
+		foreach ( static::APPEARANCE_TOOLS_OPT_INS as $path ) {
+			// Use "unset prop" as a marker instead of "null" because
+			// "null" can be a valid value for some props (e.g. blockGap).
+			if ( 'unset prop' === _wp_array_get( $context, $path, 'unset prop' ) ) {
+				_wp_array_set( $context, $path, true );
+			}
+		}
+
+		unset( $context['appearanceTools'] );
+	}
+
+	/**
+	 * Sanitizes the input according to the schemas.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
+	 *
+	 * @param array $input               Structure to sanitize.
+	 * @param array $valid_block_names   List of valid block names.
+	 * @param array $valid_element_names List of valid element names.
+	 * @return array The sanitized output.
+	 */
+	protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
+
+		$output = array();
+
+		if ( ! is_array( $input ) ) {
+			return $output;
+		}
+
+		// Preserve only the top most level keys.
+		$output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
+
+		/*
+		 * Remove any rules that are annotated as "top" in VALID_STYLES constant.
+		 * Some styles are only meant to be available at the top-level (e.g.: blockGap),
+		 * hence, the schema for blocks & elements should not have them.
+		 */
+		$styles_non_top_level = static::VALID_STYLES;
+		foreach ( array_keys( $styles_non_top_level ) as $section ) {
+			// array_key_exists() needs to be used instead of isset() because the value can be null.
+			if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
+				foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
+					if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
+						unset( $styles_non_top_level[ $section ][ $prop ] );
+					}
+				}
+			}
+		}
+
+		// Build the schema based on valid block & element names.
+		$schema                 = array();
+		$schema_styles_elements = array();
+
+		/*
+		 * Set allowed element pseudo selectors based on per element allow list.
+		 * Target data structure in schema:
+		 * e.g.
+		 * - top level elements: `$schema['styles']['elements']['link'][':hover']`.
+		 * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
+		 */
+		foreach ( $valid_element_names as $element ) {
+			$schema_styles_elements[ $element ] = $styles_non_top_level;
+
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+					$schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
+				}
+			}
+		}
+
+		$schema_styles_blocks   = array();
+		$schema_settings_blocks = array();
+		foreach ( $valid_block_names as $block ) {
+			$schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
+			$schema_styles_blocks[ $block ]             = $styles_non_top_level;
+			$schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
+		}
+
+		$schema['styles']             = static::VALID_STYLES;
+		$schema['styles']['blocks']   = $schema_styles_blocks;
+		$schema['styles']['elements'] = $schema_styles_elements;
+		$schema['settings']           = static::VALID_SETTINGS;
+		$schema['settings']['blocks'] = $schema_settings_blocks;
+
+		// Remove anything that's not present in the schema.
+		foreach ( array( 'styles', 'settings' ) as $subtree ) {
+			if ( ! isset( $input[ $subtree ] ) ) {
+				continue;
+			}
+
+			if ( ! is_array( $input[ $subtree ] ) ) {
+				unset( $output[ $subtree ] );
+				continue;
+			}
+
+			$result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
+
+			if ( empty( $result ) ) {
+				unset( $output[ $subtree ] );
+			} else {
+				$output[ $subtree ] = $result;
+			}
+		}
+
+		return $output;
+	}
+
+	/**
+	 * Appends a sub-selector to an existing one.
+	 *
+	 * Given the compounded $selector "h1, h2, h3"
+	 * and the $to_append selector ".some-class" the result will be
+	 * "h1.some-class, h2.some-class, h3.some-class".
+	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added append position.
+	 *
+	 * @param string $selector  Original selector.
+	 * @param string $to_append Selector to append.
+	 * @param string $position  A position sub-selector should be appended. Default 'right'.
+	 * @return string The new selector.
+	 */
+	protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
+		$new_selectors = array();
+		$selectors     = explode( ',', $selector );
+		foreach ( $selectors as $sel ) {
+			$new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
+		}
+		return implode( ',', $new_selectors );
+	}
+
+	/**
+	 * Returns the metadata for each block.
+	 *
+	 * Example:
+	 *
+	 *     {
+	 *       'core/paragraph': {
+	 *         'selector': 'p',
+	 *         'elements': {
+	 *           'link' => 'link selector',
+	 *           'etc'  => 'element selector'
+	 *         }
+	 *       },
+	 *       'core/heading': {
+	 *         'selector': 'h1',
 	 *         'elements': {}
 	 *       },
 	 *       'core/image': {
@@ -454,17 +795,23 @@ protected static function append_to_selector( $selector, $to_append, $position =
 	 *       }
 	 *     }
 	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added `duotone` key with CSS selector.
+	 * @since 6.1.0 Added `features` key with block support feature level selectors.
+	 *
 	 * @return array Block metadata.
 	 */
 	protected static function get_blocks_metadata() {
-		if ( null !== static::$blocks_metadata ) {
+		// NOTE: the compat/6.1 version of this method in Gutenberg did not have these changes.
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		// Is there metadata for all currently registered blocks?
+		$blocks = array_diff_key( $blocks, static::$blocks_metadata );
+		if ( empty( $blocks ) ) {
 			return static::$blocks_metadata;
 		}
 
-		static::$blocks_metadata = array();
-
-		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = $registry->get_all_registered();
 		foreach ( $blocks as $block_name => $block_type ) {
 			if (
 				isset( $block_type->supports['__experimentalSelector'] ) &&
@@ -501,7 +848,7 @@ protected static function get_blocks_metadata() {
 				static::$blocks_metadata[ $block_name ]['features'] = $features;
 			}
 
-			// Assign defaults, then override those that the block sets by itself.
+			// Assign defaults, then overwrite those that the block sets by itself.
 			// If the block selector is compounded, will append the element to each
 			// individual block selector.
 			$block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
@@ -517,174 +864,90 @@ protected static function get_blocks_metadata() {
 				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
 			}
 		}
+
 		return static::$blocks_metadata;
 	}
 
 	/**
-	 * Builds metadata for the style nodes, which returns in the form of:
+	 * Given a tree, removes the keys that are not present in the schema.
 	 *
-	 *     [
-	 *       [
-	 *         'path'     => [ 'path', 'to', 'some', 'node' ],
-	 *         'selector' => 'CSS selector for some node',
-	 *         'duotone'  => 'CSS selector for duotone for some node'
-	 *       ],
-	 *       [
-	 *         'path'     => ['path', 'to', 'other', 'node' ],
-	 *         'selector' => 'CSS selector for other node',
-	 *         'duotone'  => null
-	 *       ],
-	 *     ]
+	 * It is recursive and modifies the input in-place.
 	 *
 	 * @since 5.8.0
 	 *
-	 * @param array $theme_json The tree to extract style nodes from.
-	 * @param array $selectors  List of selectors per block.
-	 * @return array
+	 * @param array $tree   Input to process.
+	 * @param array $schema Schema to adhere to.
+	 * @return array The modified $tree.
 	 */
-	protected static function get_style_nodes( $theme_json, $selectors = array() ) {
-		$nodes = array();
-		if ( ! isset( $theme_json['styles'] ) ) {
-			return $nodes;
-		}
-
-		// Top-level.
-		$nodes[] = array(
-			'path'     => array( 'styles' ),
-			'selector' => static::ROOT_BLOCK_SELECTOR,
-		);
+	protected static function remove_keys_not_in_schema( $tree, $schema ) {
+		$tree = array_intersect_key( $tree, $schema );
 
-		if ( isset( $theme_json['styles']['elements'] ) ) {
-			foreach ( self::ELEMENTS as $element => $selector ) {
-				if ( ! isset( $theme_json['styles']['elements'][ $element ] ) || ! array_key_exists( $element, static::ELEMENTS ) ) {
-					continue;
-				}
-
-				// Handle element defaults.
-				$nodes[] = array(
-					'path'     => array( 'styles', 'elements', $element ),
-					'selector' => static::ELEMENTS[ $element ],
-				);
-
-				// Handle any pseudo selectors for the element.
-				if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+		foreach ( $schema as $key => $data ) {
+			if ( ! isset( $tree[ $key ] ) ) {
+				continue;
+			}
 
-						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+			if ( is_array( $schema[ $key ] ) && is_array( $tree[ $key ] ) ) {
+				$tree[ $key ] = static::remove_keys_not_in_schema( $tree[ $key ], $schema[ $key ] );
 
-							$nodes[] = array(
-								'path'     => array( 'styles', 'elements', $element ),
-								'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
-							);
-						}
-					}
+				if ( empty( $tree[ $key ] ) ) {
+					unset( $tree[ $key ] );
 				}
+			} elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
+				unset( $tree[ $key ] );
 			}
 		}
 
-		// Blocks.
-		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
-			return $nodes;
-		}
-
-		$nodes = array_merge( $nodes, static::get_block_nodes( $theme_json, $selectors ) );
-
-		// This filter allows us to modify the output of WP_Theme_JSON so that we can do things like loading block CSS independently.
-		return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
+		return $tree;
 	}
 
 	/**
-	 * A public helper to get the block nodes from a theme.json file.
+	 * Returns the existing settings for each block.
 	 *
-	 * @return array The block nodes in theme.json.
-	 */
-	public function get_styles_block_nodes() {
-		return static::get_block_nodes( $this->theme_json );
-	}
-
-	/**
-	 * An internal method to get the block nodes from a theme.json file.
+	 * Example:
 	 *
-	 * @param array $theme_json The theme.json converted to an array.
-	 * @param array $selectors  Optional list of selectors per block.
+	 *     {
+	 *       'root': {
+	 *         'color': {
+	 *           'custom': true
+	 *         }
+	 *       },
+	 *       'core/paragraph': {
+	 *         'spacing': {
+	 *           'customPadding': true
+	 *         }
+	 *       }
+	 *     }
 	 *
-	 * @return array The block nodes in theme.json.
+	 * @since 5.8.0
+	 *
+	 * @return array Settings per block.
 	 */
-	private static function get_block_nodes( $theme_json, $selectors = array() ) {
-		$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
-		$nodes     = array();
-		if ( ! isset( $theme_json['styles'] ) ) {
-			return $nodes;
-		}
-
-		// Blocks.
-		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
-			return $nodes;
-		}
-
-		foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
-			$selector = null;
-			if ( isset( $selectors[ $name ]['selector'] ) ) {
-				$selector = $selectors[ $name ]['selector'];
-			}
-
-			$duotone_selector = null;
-			if ( isset( $selectors[ $name ]['duotone'] ) ) {
-				$duotone_selector = $selectors[ $name ]['duotone'];
-			}
-
-			$feature_selectors = null;
-			if ( isset( $selectors[ $name ]['features'] ) ) {
-				$feature_selectors = $selectors[ $name ]['features'];
-			}
-
-			$nodes[] = array(
-				'name'     => $name,
-				'path'     => array( 'styles', 'blocks', $name ),
-				'selector' => $selector,
-				'duotone'  => $duotone_selector,
-				'features' => $feature_selectors,
-			);
-
-			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
-				foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
-					$nodes[] = array(
-						'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-						'selector' => $selectors[ $name ]['elements'][ $element ],
-					);
-
-					// Handle any pseudo selectors for the element.
-					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
-						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
-							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
-
-								$nodes[] = array(
-									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-									'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
-								);
-							}
-						}
-					}
-				}
-			}
+	public function get_settings() {
+		if ( ! isset( $this->theme_json['settings'] ) ) {
+			return array();
+		} else {
+			return $this->theme_json['settings'];
 		}
-
-		return $nodes;
 	}
 
 	/**
 	 * Returns the stylesheet that results of processing
 	 * the theme.json structure this object represents.
 	 *
-	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
-	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
-	 *                         'styles': only the styles section in theme.json.
-	 *                         'presets': only the classes for the presets.
+	 * @since 5.8.0
+	 * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
+	 *
+	 * @param array $types   Types of styles to load. Will load all by default. It accepts:
+	 *                       - `variables`: only the CSS Custom Properties for presets & custom ones.
+	 *                       - `styles`: only the styles section in theme.json.
+	 *                       - `presets`: only the classes for the presets.
+	 *                       - `custom-css`: only the css from global styles.css.
 	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
 	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
 	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
 	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
-	 * @return string Stylesheet.
+	 * @return string The resulting stylesheet.
 	 */
 	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
 		if ( null === $origins ) {
@@ -693,7 +956,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 
 		if ( is_string( $types ) ) {
 			// Dispatch error and map old arguments to new ones.
-			_deprecated_argument( __FUNCTION__, '5.9' );
+			_deprecated_argument( __FUNCTION__, '5.9.0' );
 			if ( 'block_styles' === $types ) {
 				$types = array( 'styles', 'presets' );
 			} elseif ( 'css_variables' === $types ) {
@@ -772,601 +1035,2163 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets'
 			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
 		}
 
+		// Load the custom CSS last so it has the highest specificity.
+		if ( in_array( 'custom-css', $types, true ) ) {
+			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
+		}
+
 		return $stylesheet;
 	}
-
 	/**
-	 * Returns a filtered declarations array if there is a separator block with only a background
-	 * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+	 * Returns the page templates of the active theme.
 	 *
-	 * @param array $declarations List of declarations.
+	 * @since 5.9.0
 	 *
-	 * @return array $declarations List of declarations filtered.
+	 * @return array
 	 */
-	private static function update_separator_declarations( $declarations ) {
-		$background_matches = array_values(
-			array_filter(
-				$declarations,
-				function( $declaration ) {
-					return 'background-color' === $declaration['name'];
-				}
-			)
-		);
-		if ( ! empty( $background_matches && isset( $background_matches[0]['value'] ) ) ) {
-			$border_color_matches = array_values(
-				array_filter(
-					$declarations,
-					function( $declaration ) {
-						return 'border-color' === $declaration['name'];
-					}
-				)
-			);
-			$text_color_matches   = array_values(
-				array_filter(
-					$declarations,
-					function( $declaration ) {
-						return 'color' === $declaration['name'];
-					}
-				)
-			);
-			if ( empty( $border_color_matches ) && empty( $text_color_matches ) ) {
-				$declarations[] = array(
-					'name'  => 'color',
-					'value' => $background_matches[0]['value'],
+	public function get_custom_templates() {
+		$custom_templates = array();
+		if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
+			return $custom_templates;
+		}
+
+		foreach ( $this->theme_json['customTemplates'] as $item ) {
+			if ( isset( $item['name'] ) ) {
+				$custom_templates[ $item['name'] ] = array(
+					'title'     => isset( $item['title'] ) ? $item['title'] : '',
+					'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
 				);
 			}
 		}
-
-		return $declarations;
+		return $custom_templates;
 	}
 
 	/**
-	 * Gets the CSS rules for a particular block from theme.json.
+	 * Returns the template part data of active theme.
 	 *
-	 * @param array $block_metadata Metadata about the block to get styles for.
+	 * @since 5.9.0
 	 *
-	 * @return string Styles for the block.
+	 * @return array
 	 */
-	public function get_styles_for_block( $block_metadata ) {
-		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
-		$selector         = $block_metadata['selector'];
-		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
-
-		// Process style declarations for block support features the current
-		// block contains selectors for. Values for a feature with a custom
-		// selector are filtered from the theme.json node before it is
-		// processed as normal.
-		$feature_declarations = array();
-
-		if ( ! empty( $block_metadata['features'] ) ) {
-			foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
-				if ( ! empty( $node[ $feature_name ] ) ) {
-					// Create temporary node containing only the feature data
-					// to leverage existing `compute_style_properties` function.
-					$feature = array( $feature_name => $node[ $feature_name ] );
-					// Generate the feature's declarations only.
-					$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
-
-					// Merge new declarations with any that already exist for
-					// the feature selector. This may occur when multiple block
-					// support features use the same custom selector.
-					if ( isset( $feature_declarations[ $feature_selector ] ) ) {
-						$feature_declarations[ $feature_selector ] = array_merge( $feature_declarations[ $feature_selector ], $new_feature_declarations );
-					} else {
-						$feature_declarations[ $feature_selector ] = $new_feature_declarations;
-					}
-
-					// Remove the feature from the block's node now the
-					// styles will be included under the feature level selector.
-					unset( $node[ $feature_name ] );
-				}
-			}
+	public function get_template_parts() {
+		$template_parts = array();
+		if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
+			return $template_parts;
 		}
 
-		// Get a reference to element name from path.
-		// $block_metadata['path'] = array('styles','elements','link');
-		// Make sure that $block_metadata['path'] describes an element node, like ['styles', 'element', 'link'].
-		// Skip non-element paths like just ['styles'].
-		$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
-
-		$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
-
-		$element_pseudo_allowed = array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ? static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] : array();
-
-		// Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
-		// This also resets the array keys.
-		$pseudo_matches = array_values(
-			array_filter(
-				$element_pseudo_allowed,
-				function( $pseudo_selector ) use ( $selector ) {
-					return str_contains( $selector, $pseudo_selector );
-				}
-			)
-		);
-
-		$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
-
-		// If the current selector is a pseudo selector that's defined in the allow list for the current
-		// element then compute the style properties for it.
-		// Otherwise just compute the styles for the default selector as normal.
-		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) && array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ) {
-			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
-		} else {
-			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
+		foreach ( $this->theme_json['templateParts'] as $item ) {
+			if ( isset( $item['name'] ) ) {
+				$template_parts[ $item['name'] ] = array(
+					'title' => isset( $item['title'] ) ? $item['title'] : '',
+					'area'  => isset( $item['area'] ) ? $item['area'] : '',
+				);
+			}
 		}
+		return $template_parts;
+	}
 
+	/**
+	 * Converts each style section into a list of rulesets
+	 * containing the block styles to be appended to the stylesheet.
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each section this creates a new ruleset such as:
+	 *
+	 *   block-selector {
+	 *     style-property-one: value;
+	 *   }
+	 *
+	 * @since 5.8.0 As `get_block_styles()`.
+	 * @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()`
+	 *              and no longer returns preset classes.
+	 *              Removed the `$setting_nodes` parameter.
+	 * @since 6.1.0 Moved most internal logic to `get_styles_for_block()`.
+	 *
+	 * @param array $style_nodes Nodes with styles.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_block_classes( $style_nodes ) {
 		$block_rules = '';
 
-		// 1. Separate the ones who use the general selector
-		// and the ones who use the duotone selector.
-		$declarations_duotone = array();
-		foreach ( $declarations as $index => $declaration ) {
-			if ( 'filter' === $declaration['name'] ) {
-				unset( $declarations[ $index ] );
-				$declarations_duotone[] = $declaration;
+		foreach ( $style_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
 			}
-		}
-
-		// Update declarations if there are separators with only background color defined.
-		if ( '.wp-block-separator' === $selector ) {
-			$declarations = static::update_separator_declarations( $declarations );
-		}
-
-		// 2. Generate and append the rules that use the general selector.
-		$block_rules .= static::to_ruleset( $selector, $declarations );
-
-		// 3. Generate and append the rules that use the duotone selector.
-		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
-			$selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
-			$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
-		}
-
-		// 4. Generate Layout block gap styles.
-		if (
-			static::ROOT_BLOCK_SELECTOR !== $selector &&
-			! empty( $block_metadata['name'] )
-		) {
-			$block_rules .= $this->get_layout_styles( $block_metadata );
-		}
-
-		// 5. Generate and append the feature level rulesets.
-		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
-			$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
+			$block_rules .= static::get_styles_for_block( $metadata );
 		}
 
 		return $block_rules;
 	}
 
 	/**
-	 * Outputs the CSS for layout rules on the root.
+	 * Gets the CSS layout rules for a particular block from theme.json layout definitions.
 	 *
-	 * @param string $selector The root node selector.
-	 * @param array  $block_metadata The metadata for the root block.
-	 * @return string The additional root rules CSS.
+	 * @since 6.1.0
+	 *
+	 * @param array $block_metadata Metadata about the block to get styles for.
+	 * @return string Layout styles for the block.
 	 */
-	public function get_root_layout_rules( $selector, $block_metadata ) {
-		$css              = '';
-		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
-		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
-
-		/*
-		* Reset default browser margin on the root body element.
-		* This is set on the root selector **before** generating the ruleset
-		* from the `theme.json`. This is to ensure that if the `theme.json` declares
-		* `margin` in its `spacing` declaration for the `body` element then these
-		* user-generated values take precedence in the CSS cascade.
-		* @link https://github.com/WordPress/gutenberg/issues/36147.
-		*/
-		$css .= 'body { margin: 0;';
+	protected function get_layout_styles( $block_metadata ) {
+		$block_rules = '';
+		$block_type  = null;
 
-		/*
-		* If there are content and wide widths in theme.json, output them
-		* as custom properties on the body element so all blocks can use them.
-		*/
-		if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
-			$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
-			$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
-			$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
-			$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
-			$css         .= '--wp--style--global--content-size: ' . $content_size . ';';
-			$css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
+		// Skip outputting layout styles if explicitly disabled.
+		if ( current_theme_supports( 'disable-layout-styles' ) ) {
+			return $block_rules;
 		}
 
-		$css .= '}';
+		if ( isset( $block_metadata['name'] ) ) {
+			$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
+			if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
+				return $block_rules;
+			}
+		}
+
+		$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
+		$has_block_gap_support    = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+		$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
+		$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$layout_definitions       = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
+		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
+
+		// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
+		// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
+		if ( $has_block_gap_support || $has_fallback_gap_support ) {
+			$block_gap_value = null;
+			// Use a fallback gap value if block gap support is not available.
+			if ( ! $has_block_gap_support ) {
+				$block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
+				if ( ! empty( $block_type ) ) {
+					$block_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
+				}
+			} else {
+				$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
+			}
+
+			// Support split row / column values and concatenate to a shorthand value.
+			if ( is_array( $block_gap_value ) ) {
+				if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
+					$gap_row         = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
+					$gap_column      = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
+					$block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
+				} else {
+					// Skip outputting gap value if not all sides are provided.
+					$block_gap_value = null;
+				}
+			}
+
+			// If the block should have custom gap, add the gap styles.
+			if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
+				foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
+					// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+					if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
+						continue;
+					}
+
+					$class_name    = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
+					$spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
+
+					if (
+						! empty( $class_name ) &&
+						! empty( $spacing_rules )
+					) {
+						foreach ( $spacing_rules as $spacing_rule ) {
+							$declarations = array();
+							if (
+								isset( $spacing_rule['selector'] ) &&
+								preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
+								! empty( $spacing_rule['rules'] )
+							) {
+								// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
+								foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
+									$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
+									if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
+										$declarations[] = array(
+											'name'  => $css_property,
+											'value' => $current_css_value,
+										);
+									}
+								}
+
+								if ( ! $has_block_gap_support ) {
+									// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
+									$layout_selector = sprintf(
+										$format,
+										$selector,
+										$class_name,
+										$spacing_rule['selector']
+									);
+								} else {
+									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
+									$layout_selector = sprintf(
+										$format,
+										$selector,
+										$class_name,
+										$spacing_rule['selector']
+									);
+								}
+								$block_rules .= static::to_ruleset( $layout_selector, $declarations );
+							}
+						}
+					}
+				}
+			}
+		}
+
+		// Output base styles.
+		if (
+			static::ROOT_BLOCK_SELECTOR === $selector
+		) {
+			$valid_display_modes = array( 'block', 'flex', 'grid' );
+			foreach ( $layout_definitions as $layout_definition ) {
+				$class_name       = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
+				$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
+
+				if (
+					! empty( $class_name ) &&
+					! empty( $base_style_rules )
+				) {
+					// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
+					if (
+						! empty( $layout_definition['displayMode'] ) &&
+						is_string( $layout_definition['displayMode'] ) &&
+						in_array( $layout_definition['displayMode'], $valid_display_modes, true )
+					) {
+						$layout_selector = sprintf(
+							'%s .%s',
+							$selector,
+							$class_name
+						);
+						$block_rules    .= static::to_ruleset(
+							$layout_selector,
+							array(
+								array(
+									'name'  => 'display',
+									'value' => $layout_definition['displayMode'],
+								),
+							)
+						);
+					}
+
+					foreach ( $base_style_rules as $base_style_rule ) {
+						$declarations = array();
+
+						if (
+							isset( $base_style_rule['selector'] ) &&
+							preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
+							! empty( $base_style_rule['rules'] )
+						) {
+							foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
+								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
+									$declarations[] = array(
+										'name'  => $css_property,
+										'value' => $css_value,
+									);
+								}
+							}
+
+							$layout_selector = sprintf(
+								'%s .%s%s',
+								$selector,
+								$class_name,
+								$base_style_rule['selector']
+							);
+							$block_rules    .= static::to_ruleset( $layout_selector, $declarations );
+						}
+					}
+				}
+			}
+		}
+		return $block_rules;
+	}
+
+	/**
+	 * Creates new rulesets as classes for each preset value such as:
+	 *
+	 *   .has-value-color {
+	 *     color: value;
+	 *   }
+	 *
+	 *   .has-value-background-color {
+	 *     background-color: value;
+	 *   }
+	 *
+	 *   .has-value-font-size {
+	 *     font-size: value;
+	 *   }
+	 *
+	 *   .has-value-gradient-background {
+	 *     background: value;
+	 *   }
+	 *
+	 *   p.has-value-gradient-background {
+	 *     background: value;
+	 *   }
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $setting_nodes Nodes with settings.
+	 * @param array $origins       List of origins to process presets from.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_preset_classes( $setting_nodes, $origins ) {
+		$preset_rules = '';
+
+		foreach ( $setting_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$selector      = $metadata['selector'];
+			$node          = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
+		}
+
+		return $preset_rules;
+	}
+
+	/**
+	 * Converts each styles section into a list of rulesets
+	 * to be appended to the stylesheet.
+	 * These rulesets contain all the css variables (custom variables and preset variables).
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each section this creates a new ruleset such as:
+	 *
+	 *     block-selector {
+	 *       --wp--preset--category--slug: value;
+	 *       --wp--custom--variable: value;
+	 *     }
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array $nodes   Nodes with settings.
+	 * @param array $origins List of origins to process.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_css_variables( $nodes, $origins ) {
+		$stylesheet = '';
+		foreach ( $nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$selector = $metadata['selector'];
+
+			$node                    = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$declarations            = static::compute_preset_vars( $node, $origins );
+			$theme_vars_declarations = static::compute_theme_vars( $node );
+			foreach ( $theme_vars_declarations as $theme_vars_declaration ) {
+				$declarations[] = $theme_vars_declaration;
+			}
+
+			$stylesheet .= static::to_ruleset( $selector, $declarations );
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Given a selector and a declaration list,
+	 * creates the corresponding ruleset.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param string $selector     CSS selector.
+	 * @param array  $declarations List of declarations.
+	 * @return string The resulting CSS ruleset.
+	 */
+	protected static function to_ruleset( $selector, $declarations ) {
+		if ( empty( $declarations ) ) {
+			return '';
+		}
+
+		$declaration_block = array_reduce(
+			$declarations,
+			static function ( $carry, $element ) {
+				return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
+			''
+		);
+
+		return $selector . '{' . $declaration_block . '}';
+	}
+
+	/**
+	 * Given a settings array, returns the generated rulesets
+	 * for the preset classes.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array  $settings Settings to process.
+	 * @param string $selector Selector wrapping the classes.
+	 * @param array  $origins  List of origins to process.
+	 * @return string The result of processing the presets.
+	 */
+	protected static function compute_preset_classes( $settings, $selector, $origins ) {
+		if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+			// Classes at the global level do not need any CSS prefixed,
+			// and we don't want to increase its specificity.
+			$selector = '';
+		}
+
+		$stylesheet = '';
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			$slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins );
+			foreach ( $preset_metadata['classes'] as $class => $property ) {
+				foreach ( $slugs as $slug ) {
+					$css_var     = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug );
+					$class_name  = static::replace_slug_in_string( $class, $slug );
+					$stylesheet .= static::to_ruleset(
+						static::append_to_selector( $selector, $class_name ),
+						array(
+							array(
+								'name'  => $property,
+								'value' => 'var(' . $css_var . ') !important',
+							),
+						)
+					);
+				}
+			}
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Function that scopes a selector with another one. This works a bit like
+	 * SCSS nesting except the `&` operator isn't supported.
+	 *
+	 * <code>
+	 * $scope = '.a, .b .c';
+	 * $selector = '> .x, .y';
+	 * $merged = scope_selector( $scope, $selector );
+	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+	 * </code>
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $scope    Selector to scope to.
+	 * @param string $selector Original selector.
+	 * @return string Scoped selector.
+	 */
+	protected static function scope_selector( $scope, $selector ) {
+		$scopes    = explode( ',', $scope );
+		$selectors = explode( ',', $selector );
+
+		$selectors_scoped = array();
+		foreach ( $scopes as $outer ) {
+			foreach ( $selectors as $inner ) {
+				$outer = trim( $outer );
+				$inner = trim( $inner );
+				if ( ! empty( $outer ) && ! empty( $inner ) ) {
+					$selectors_scoped[] = $outer . ' ' . $inner;
+				} elseif ( empty( $outer ) ) {
+					$selectors_scoped[] = $inner;
+				} elseif ( empty( $inner ) ) {
+					$selectors_scoped[] = $outer;
+				}
+			}
+		}
+
+		$result = implode( ', ', $selectors_scoped );
+		return $result;
+	}
+
+	/**
+	 * Gets preset values keyed by slugs based on settings and metadata.
+	 *
+	 * <code>
+	 * $settings = array(
+	 *     'typography' => array(
+	 *         'fontFamilies' => array(
+	 *             array(
+	 *                 'slug'       => 'sansSerif',
+	 *                 'fontFamily' => '"Helvetica Neue", sans-serif',
+	 *             ),
+	 *             array(
+	 *                 'slug'   => 'serif',
+	 *                 'colors' => 'Georgia, serif',
+	 *             )
+	 *         ),
+	 *     ),
+	 * );
+	 * $meta = array(
+	 *    'path'      => array( 'typography', 'fontFamilies' ),
+	 *    'value_key' => 'fontFamily',
+	 * );
+	 * $values_by_slug = get_settings_values_by_slug();
+	 * // $values_by_slug === array(
+	 * //   'sans-serif' => '"Helvetica Neue", sans-serif',
+	 * //   'serif'      => 'Georgia, serif',
+	 * // );
+	 * </code>
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Settings to process.
+	 * @param array $preset_metadata One of the PRESETS_METADATA values.
+	 * @param array $origins         List of origins to process.
+	 * @return array Array of presets where each key is a slug and each value is the preset value.
+	 */
+	protected static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) {
+		$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
+
+		$result = array();
+		foreach ( $origins as $origin ) {
+			if ( ! isset( $preset_per_origin[ $origin ] ) ) {
+				continue;
+			}
+			foreach ( $preset_per_origin[ $origin ] as $preset ) {
+				$slug = _wp_to_kebab_case( $preset['slug'] );
+
+				$value = '';
+				if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
+					$value_key = $preset_metadata['value_key'];
+					$value     = $preset[ $value_key ];
+				} elseif (
+					isset( $preset_metadata['value_func'] ) &&
+					is_callable( $preset_metadata['value_func'] )
+				) {
+					$value_func = $preset_metadata['value_func'];
+					$value      = call_user_func( $value_func, $preset );
+				} else {
+					// If we don't have a value, then don't add it to the result.
+					continue;
+				}
+
+				$result[ $slug ] = $value;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Similar to get_settings_values_by_slug, but doesn't compute the value.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Settings to process.
+	 * @param array $preset_metadata One of the PRESETS_METADATA values.
+	 * @param array $origins         List of origins to process.
+	 * @return array Array of presets where the key and value are both the slug.
+	 */
+	protected static function get_settings_slugs( $settings, $preset_metadata, $origins = null ) {
+		if ( null === $origins ) {
+			$origins = static::VALID_ORIGINS;
+		}
+
+		$preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
+
+		$result = array();
+		foreach ( $origins as $origin ) {
+			if ( ! isset( $preset_per_origin[ $origin ] ) ) {
+				continue;
+			}
+			foreach ( $preset_per_origin[ $origin ] as $preset ) {
+				$slug = _wp_to_kebab_case( $preset['slug'] );
+
+				// Use the array as a set so we don't get duplicates.
+				$result[ $slug ] = $slug;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Transforms a slug into a CSS Custom Property.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $input String to replace.
+	 * @param string $slug  The slug value to use to generate the custom property.
+	 * @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`.
+	 */
+	protected static function replace_slug_in_string( $input, $slug ) {
+		return strtr( $input, array( '$slug' => $slug ) );
+	}
+
+	/**
+	 * Given the block settings, extracts the CSS Custom Properties
+	 * for the presets and adds them to the $declarations array
+	 * following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$origins` parameter.
+	 *
+	 * @param array $settings Settings to process.
+	 * @param array $origins  List of origins to process.
+	 * @return array The modified $declarations.
+	 */
+	protected static function compute_preset_vars( $settings, $origins ) {
+		$declarations = array();
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			$values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
+			foreach ( $values_by_slug as $slug => $value ) {
+				$declarations[] = array(
+					'name'  => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
+					'value' => $value,
+				);
+			}
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Given an array of settings, extracts the CSS Custom Properties
+	 * for the custom values and adds them to the $declarations
+	 * array following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $settings Settings to process.
+	 * @return array The modified $declarations.
+	 */
+	protected static function compute_theme_vars( $settings ) {
+		$declarations  = array();
+		$custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
+		$css_vars      = static::flatten_tree( $custom_values );
+		foreach ( $css_vars as $key => $value ) {
+			$declarations[] = array(
+				'name'  => '--wp--custom--' . $key,
+				'value' => $value,
+			);
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Given a tree, it creates a flattened one
+	 * by merging the keys and binding the leaf values
+	 * to the new keys.
+	 *
+	 * It also transforms camelCase names into kebab-case
+	 * and substitutes '/' by '-'.
+	 *
+	 * This is thought to be useful to generate
+	 * CSS Custom Properties from a tree,
+	 * although there's nothing in the implementation
+	 * of this function that requires that format.
+	 *
+	 * For example, assuming the given prefix is '--wp'
+	 * and the token is '--', for this input tree:
+	 *
+	 *     {
+	 *       'some/property': 'value',
+	 *       'nestedProperty': {
+	 *         'sub-property': 'value'
+	 *       }
+	 *     }
+	 *
+	 * it'll return this output:
+	 *
+	 *     {
+	 *       '--wp--some-property': 'value',
+	 *       '--wp--nested-property--sub-property': 'value'
+	 *     }
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $tree   Input tree to process.
+	 * @param string $prefix Optional. Prefix to prepend to each variable. Default empty string.
+	 * @param string $token  Optional. Token to use between levels. Default '--'.
+	 * @return array The flattened tree.
+	 */
+	protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
+		$result = array();
+		foreach ( $tree as $property => $value ) {
+			$new_key = $prefix . str_replace(
+				'/',
+				'-',
+				strtolower( _wp_to_kebab_case( $property ) )
+			);
+
+			if ( is_array( $value ) ) {
+				$new_prefix        = $new_key . $token;
+				$flattened_subtree = static::flatten_tree( $value, $new_prefix, $token );
+				foreach ( $flattened_subtree as $subtree_key => $subtree_value ) {
+					$result[ $subtree_key ] = $subtree_value;
+				}
+			} else {
+				$result[ $new_key ] = $value;
+			}
+		}
+		return $result;
+	}
+
+	/**
+	 * Given a styles array, it extracts the style properties
+	 * and adds them to the $declarations array following the format:
+	 *
+	 * ```php
+	 * array(
+	 *   'name'  => 'property_name',
+	 *   'value' => 'property_value,
+	 * )
+	 * ```
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$settings` and `$properties` parameters.
+	 * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
+	 *
+	 * @param array   $styles Styles to process.
+	 * @param array   $settings Theme settings.
+	 * @param array   $properties Properties metadata.
+	 * @param array   $theme_json Theme JSON array.
+	 * @param string  $selector The style block selector.
+	 * @param boolean $use_root_padding Whether to add custom properties at root level.
+	 * @return array  Returns the modified $declarations.
+	 */
+	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
+		if ( null === $properties ) {
+			$properties = static::PROPERTIES_METADATA;
+		}
+
+		$declarations = array();
+		if ( empty( $styles ) ) {
+			return $declarations;
+		}
+
+		$root_variable_duplicates = array();
+
+		foreach ( $properties as $css_property => $value_path ) {
+			$value = static::get_property_value( $styles, $value_path, $theme_json );
+
+			if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+				continue;
+			}
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
+				continue;
+			}
+
+			if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
+				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+			}
+
+			// Look up protected properties, keyed by value path.
+			// Skip protected properties that are explicitly set to `null`.
+			if ( is_array( $value_path ) ) {
+				$path_string = implode( '.', $value_path );
+				if (
+					// TODO: Replace array_key_exists() with isset() check once WordPress drops
+					// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+					array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
+					_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
+				) {
+					continue;
+				}
+			}
+
+			// Skip if empty and not "0" or value represents array of longhand values.
+			$has_missing_value = empty( $value ) && ! is_numeric( $value );
+			if ( $has_missing_value || is_array( $value ) ) {
+				continue;
+			}
+
+			// Calculates fluid typography rules where available.
+			if ( 'font-size' === $css_property ) {
+				/*
+				 * wp_get_typography_font_size_value() will check
+				 * if fluid typography has been activated and also
+				 * whether the incoming value can be converted to a fluid value.
+				 * Values that already have a clamp() function will not pass the test,
+				 * and therefore the original $value will be returned.
+				 */
+				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
+			}
+
+			$declarations[] = array(
+				'name'  => $css_property,
+				'value' => $value,
+			);
+		}
+
+		// If a variable value is added to the root, the corresponding property should be removed.
+		foreach ( $root_variable_duplicates as $duplicate ) {
+			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
+			if ( is_numeric( $discard ) ) {
+				array_splice( $declarations, $discard, 1 );
+			}
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * Returns the style property for the given path.
+	 *
+	 * It also converts CSS Custom Property stored as
+	 * "var:preset|color|secondary" to the form
+	 * "--wp--preset--color--secondary".
+	 *
+	 * It also converts references to a path to the value
+	 * stored at that location, e.g.
+	 * { "ref": "style.color.background" } => "#fff".
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added support for values of array type, which are returned as is.
+	 * @since 6.1.0 Added the `$theme_json` parameter.
+	 *
+	 * @param array $styles Styles subtree.
+	 * @param array $path   Which property to process.
+	 * @param array $theme_json Theme JSON array.
+	 * @return string|array Style property value.
+	 */
+	protected static function get_property_value( $styles, $path, $theme_json = null ) {
+		$value = _wp_array_get( $styles, $path, '' );
+
+		// Gutenberg didn't have this check.
+		if ( '' === $value || null === $value ) {
+			// No need to process the value further.
+			return '';
+		}
+
+		/*
+		 * This converts references to a path to the value at that path
+		 * where the values is an array with a "ref" key, pointing to a path.
+		 * For example: { "ref": "style.color.background" } => "#fff".
+		 */
+		if ( is_array( $value ) && isset( $value['ref'] ) ) {
+			$value_path = explode( '.', $value['ref'] );
+			$ref_value  = _wp_array_get( $theme_json, $value_path );
+			// Only use the ref value if we find anything.
+			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+				$value = $ref_value;
+			}
+
+			if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) {
+				$path_string      = json_encode( $path );
+				$ref_value_string = json_encode( $ref_value );
+				_doing_it_wrong(
+					'get_property_value',
+					sprintf(
+						/* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
+						__( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.', 'gutenberg' ),
+						'theme.json',
+						$ref_value_string,
+						$path_string,
+						$ref_value['ref']
+					),
+					'6.1.0'
+				);
+			}
+		}
+
+		if ( is_array( $value ) ) {
+			return $value;
+		}
+
+		// Convert custom CSS properties.
+		$prefix     = 'var:';
+		$prefix_len = strlen( $prefix );
+		$token_in   = '|';
+		$token_out  = '--';
+		if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
+			$unwrapped_name = str_replace(
+				$token_in,
+				$token_out,
+				substr( $value, $prefix_len )
+			);
+			$value          = "var(--wp--$unwrapped_name)";
+		}
+
+		return $value;
+	}
+
+	/**
+	 * Builds metadata for the setting nodes, which returns in the form of:
+	 *
+	 *     [
+	 *       [
+	 *         'path'     => ['path', 'to', 'some', 'node' ],
+	 *         'selector' => 'CSS selector for some node'
+	 *       ],
+	 *       [
+	 *         'path'     => [ 'path', 'to', 'other', 'node' ],
+	 *         'selector' => 'CSS selector for other node'
+	 *       ],
+	 *     ]
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $theme_json The tree to extract setting nodes from.
+	 * @param array $selectors  List of selectors per block.
+	 * @return array An array of setting nodes metadata.
+	 */
+	protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
+		$nodes = array();
+		if ( ! isset( $theme_json['settings'] ) ) {
+			return $nodes;
+		}
+
+		// Top-level.
+		$nodes[] = array(
+			'path'     => array( 'settings' ),
+			'selector' => static::ROOT_BLOCK_SELECTOR,
+		);
+
+		// Calculate paths for blocks.
+		if ( ! isset( $theme_json['settings']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
+			$selector = null;
+			if ( isset( $selectors[ $name ]['selector'] ) ) {
+				$selector = $selectors[ $name ]['selector'];
+			}
+
+			$nodes[] = array(
+				'path'     => array( 'settings', 'blocks', $name ),
+				'selector' => $selector,
+			);
+		}
+
+		return $nodes;
+	}
+
+	/**
+	 * Builds metadata for the style nodes, which returns in the form of:
+	 *
+	 *     [
+	 *       [
+	 *         'path'     => [ 'path', 'to', 'some', 'node' ],
+	 *         'selector' => 'CSS selector for some node',
+	 *         'duotone'  => 'CSS selector for duotone for some node'
+	 *       ],
+	 *       [
+	 *         'path'     => ['path', 'to', 'other', 'node' ],
+	 *         'selector' => 'CSS selector for other node',
+	 *         'duotone'  => null
+	 *       ],
+	 *     ]
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $theme_json The tree to extract style nodes from.
+	 * @param array $selectors  List of selectors per block.
+	 * @return array An array of style nodes metadata.
+	 */
+	protected static function get_style_nodes( $theme_json, $selectors = array() ) {
+		$nodes = array();
+		if ( ! isset( $theme_json['styles'] ) ) {
+			return $nodes;
+		}
+
+		// Top-level.
+		$nodes[] = array(
+			'path'     => array( 'styles' ),
+			'selector' => static::ROOT_BLOCK_SELECTOR,
+		);
+
+		if ( isset( $theme_json['styles']['elements'] ) ) {
+			foreach ( self::ELEMENTS as $element => $selector ) {
+				if ( ! isset( $theme_json['styles']['elements'][ $element ] ) || ! array_key_exists( $element, static::ELEMENTS ) ) {
+					continue;
+				}
+
+				// Handle element defaults.
+				$nodes[] = array(
+					'path'     => array( 'styles', 'elements', $element ),
+					'selector' => static::ELEMENTS[ $element ],
+				);
+
+				// Handle any pseudo selectors for the element.
+				// TODO: Replace array_key_exists() with isset() check once WordPress drops
+				// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+				if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+
+						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+							$nodes[] = array(
+								'path'     => array( 'styles', 'elements', $element ),
+								'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
+							);
+						}
+					}
+				}
+			}
+		}
+
+		// Blocks.
+		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		$block_nodes = static::get_block_nodes( $theme_json, $selectors );
+		foreach ( $block_nodes as $block_node ) {
+			$nodes[] = $block_node;
+		}
+
+		/**
+		 * Filters the list of style nodes with metadata.
+		 *
+		 * This allows for things like loading block CSS independently.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param array $nodes Style nodes with metadata.
+		 */
+		return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
+	}
+
+	/**
+	 * A public helper to get the block nodes from a theme.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return array The block nodes in theme.json.
+	 */
+	public function get_styles_block_nodes() {
+		return static::get_block_nodes( $this->theme_json );
+	}
+
+	/**
+	 * Returns a filtered declarations array if there is a separator block with only a background
+	 * style defined in theme.json by adding a color attribute to reflect the changes in the front.
+	 *
+	 * @since 6.1.1
+	 *
+	 * @param array $declarations List of declarations.
+	 * @return array $declarations List of declarations filtered.
+	 */
+	private static function update_separator_declarations( $declarations ) {
+		// Gutenberg and core implementation differed.
+		// https://github.com/WordPress/gutenberg/pull/44943.
+		$background_color     = '';
+		$border_color_matches = false;
+		$text_color_matches   = false;
+
+		foreach ( $declarations as $declaration ) {
+			if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
+				$background_color = $declaration['value'];
+			} elseif ( 'border-color' === $declaration['name'] ) {
+				$border_color_matches = true;
+			} elseif ( 'color' === $declaration['name'] ) {
+				$text_color_matches = true;
+			}
+
+			if ( $background_color && $border_color_matches && $text_color_matches ) {
+				break;
+			}
+		}
+
+		if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
+			$declarations[] = array(
+				'name'  => 'color',
+				'value' => $background_color,
+			);
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * An internal method to get the block nodes from a theme.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param array $theme_json The theme.json converted to an array.
+	 * @param array $selectors  Optional list of selectors per block.
+	 * @return array The block nodes in theme.json.
+	 */
+	private static function get_block_nodes( $theme_json, $selectors = array() ) {
+		$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
+		$nodes     = array();
+		if ( ! isset( $theme_json['styles'] ) ) {
+			return $nodes;
+		}
+
+		// Blocks.
+		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
+			$selector = null;
+			if ( isset( $selectors[ $name ]['selector'] ) ) {
+				$selector = $selectors[ $name ]['selector'];
+			}
+
+			$duotone_selector = null;
+			if ( isset( $selectors[ $name ]['duotone'] ) ) {
+				$duotone_selector = $selectors[ $name ]['duotone'];
+			}
+
+			$feature_selectors = null;
+			if ( isset( $selectors[ $name ]['features'] ) ) {
+				$feature_selectors = $selectors[ $name ]['features'];
+			}
+
+			$nodes[] = array(
+				'name'     => $name,
+				'path'     => array( 'styles', 'blocks', $name ),
+				'selector' => $selector,
+				'duotone'  => $duotone_selector,
+				'features' => $feature_selectors,
+			);
+
+			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
+				foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
+					$nodes[] = array(
+						'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+						'selector' => $selectors[ $name ]['elements'][ $element ],
+					);
+
+					// Handle any pseudo selectors for the element.
+					// TODO: Replace array_key_exists() with isset() check once WordPress drops
+					// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+								$nodes[] = array(
+									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+									'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
+								);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		return $nodes;
+	}
+
+	/**
+	 * Gets the CSS rules for a particular block from theme.json.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param array $block_metadata Metadata about the block to get styles for.
+	 *
+	 * @return string Styles for the block.
+	 */
+	public function get_styles_for_block( $block_metadata ) {
+		$node             = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
+		$selector         = $block_metadata['selector'];
+		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
+
+		/*
+		 * Process style declarations for block support features the current
+		 * block contains selectors for. Values for a feature with a custom
+		 * selector are filtered from the theme.json node before it is
+		 * processed as normal.
+		*/
+		$feature_declarations = array();
+
+		if ( ! empty( $block_metadata['features'] ) ) {
+			foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
+				if ( ! empty( $node[ $feature_name ] ) ) {
+					// Create temporary node containing only the feature data
+					// to leverage existing `compute_style_properties` function.
+					$feature = array( $feature_name => $node[ $feature_name ] );
+					// Generate the feature's declarations only.
+					$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
+
+					// Merge new declarations with any that already exist for
+					// the feature selector. This may occur when multiple block
+					// support features use the same custom selector.
+					if ( isset( $feature_declarations[ $feature_selector ] ) ) {
+						foreach ( $new_feature_declarations as $new_feature_declaration ) {
+							$feature_declarations[ $feature_selector ][] = $new_feature_declaration;
+						}
+					} else {
+						$feature_declarations[ $feature_selector ] = $new_feature_declarations;
+					}
+
+					// Remove the feature from the block's node now the
+					// styles will be included under the feature level selector.
+					unset( $node[ $feature_name ] );
+				}
+			}
+		}
+
+		/*
+		 * Get a reference to element name from path.
+		 * $block_metadata['path'] = array( 'styles','elements','link' );
+		 * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
+		 * Skip non-element paths like just ['styles'].
+		 */
+		$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
+
+		$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
+
+		$element_pseudo_allowed = array();
+
+		// TODO: Replace array_key_exists() with isset() check once WordPress drops
+		// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+		if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+			$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
+		}
+
+		/*
+		 * Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
+		 * This also resets the array keys.
+		 */
+		$pseudo_matches = array_values(
+			array_filter(
+				$element_pseudo_allowed,
+				function( $pseudo_selector ) use ( $selector ) {
+					return str_contains( $selector, $pseudo_selector );
+				}
+			)
+		);
+
+		$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
+
+		/*
+		 * If the current selector is a pseudo selector that's defined in the allow list for the current
+		 * element then compute the style properties for it.
+		 * Otherwise just compute the styles for the default selector as normal.
+		 */
+		if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
+			&& in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
+		) {
+			$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
+		} else {
+			$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
+		}
+
+		$block_rules = '';
+
+		/*
+		 * 1. Separate the declarations that use the general selector
+		 * from the ones using the duotone selector.
+		 */
+		$declarations_duotone = array();
+		foreach ( $declarations as $index => $declaration ) {
+			if ( 'filter' === $declaration['name'] ) {
+				unset( $declarations[ $index ] );
+				$declarations_duotone[] = $declaration;
+			}
+		}
+
+		// Update declarations if there are separators with only background color defined.
+		if ( '.wp-block-separator' === $selector ) {
+			$declarations = static::update_separator_declarations( $declarations );
+		}
+
+		// 2. Generate and append the rules that use the general selector.
+		$block_rules .= static::to_ruleset( $selector, $declarations );
+
+		// 3. Generate and append the rules that use the duotone selector.
+		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
+			$selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
+			$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
+		}
+
+		// 4. Generate Layout block gap styles.
+		if (
+			static::ROOT_BLOCK_SELECTOR !== $selector &&
+			! empty( $block_metadata['name'] )
+		) {
+			$block_rules .= $this->get_layout_styles( $block_metadata );
+		}
+
+		// 5. Generate and append the feature level rulesets.
+		foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
+			$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
+		}
+
+		return $block_rules;
+	}
+
+	/**
+	 * Outputs the CSS for layout rules on the root.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $selector The root node selector.
+	 * @param array  $block_metadata The metadata for the root block.
+	 * @return string The additional root rules CSS.
+	 */
+	public function get_root_layout_rules( $selector, $block_metadata ) {
+		$css              = '';
+		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
+		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
+
+		/*
+		* Reset default browser margin on the root body element.
+		* This is set on the root selector **before** generating the ruleset
+		* from the `theme.json`. This is to ensure that if the `theme.json` declares
+		* `margin` in its `spacing` declaration for the `body` element then these
+		* user-generated values take precedence in the CSS cascade.
+		* @link https://github.com/WordPress/gutenberg/issues/36147.
+		*/
+		$css .= 'body { margin: 0;';
+
+		/*
+		* If there are content and wide widths in theme.json, output them
+		* as custom properties on the body element so all blocks can use them.
+		*/
+		if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
+			$content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
+			$content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
+			$wide_size    = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
+			$wide_size    = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
+			$css         .= '--wp--style--global--content-size: ' . $content_size . ';';
+			$css         .= '--wp--style--global--wide-size: ' . $wide_size . ';';
+		}
+
+		$css .= '}';
+
+		if ( $use_root_padding ) {
+			// Top and bottom padding are applied to the outer block container.
+			$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
+			// Right and left padding are applied to the first container with `.has-global-padding` class.
+			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			// Nested containers with `.has-global-padding` class do not get padding.
+			$css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
+			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
+			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
+			// The above rule is negated for alignfull children of nested containers.
+			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
+			// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
+			$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+			// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
+			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+		}
+
+		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+		$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+		$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+		$block_gap_value       = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
+		$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+		if ( $has_block_gap_support ) {
+			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
+			$css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+			$css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
+
+			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+			$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+		}
+		$css .= $this->get_layout_styles( $block_metadata );
+
+		return $css;
+	}
+
+	/**
+	 * For metadata values that can either be booleans or paths to booleans, gets the value.
+	 *
+	 * ```php
+	 * $data = array(
+	 *   'color' => array(
+	 *     'defaultPalette' => true
+	 *   )
+	 * );
+	 *
+	 * static::get_metadata_boolean( $data, false );
+	 * // => false
+	 *
+	 * static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
+	 * // => true
+	 * ```
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param array      $data    The data to inspect.
+	 * @param bool|array $path    Boolean or path to a boolean.
+	 * @param bool       $default Default value if the referenced path is missing.
+	 *                            Default false.
+	 * @return bool Value of boolean metadata.
+	 */
+	protected static function get_metadata_boolean( $data, $path, $default = false ) {
+		if ( is_bool( $path ) ) {
+			return $path;
+		}
+
+		if ( is_array( $path ) ) {
+			$value = _wp_array_get( $data, $path );
+			if ( null !== $value ) {
+				return $value;
+			}
+		}
+
+		return $default;
+	}
+
+	/**
+	 * Merges new incoming data.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Duotone preset also has origins.
+	 *
+	 * @param WP_Theme_JSON $incoming Data to merge.
+	 */
+	public function merge( $incoming ) {
+		$incoming_data    = $incoming->get_raw_data();
+		$this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
+
+		/*
+		 * The array_replace_recursive algorithm merges at the leaf level,
+		 * but we don't want leaf arrays to be merged, so we overwrite it.
+		 *
+		 * For leaf values that are sequential arrays it will use the numeric indexes for replacement.
+		 * We rather replace the existing with the incoming value, if it exists.
+		 * This is the case of spacing.units.
+		 *
+		 * For leaf values that are associative arrays it will merge them as expected.
+		 * This is also not the behavior we want for the current associative arrays (presets).
+		 * We rather replace the existing with the incoming value, if it exists.
+		 * This happens, for example, when we merge data from theme.json upon existing
+		 * theme supports or when we merge anything coming from the same source twice.
+		 * This is the case of color.palette, color.gradients, color.duotone,
+		 * typography.fontSizes, or typography.fontFamilies.
+		 *
+		 * Additionally, for some preset types, we also want to make sure the
+		 * values they introduce don't conflict with default values. We do so
+		 * by checking the incoming slugs for theme presets and compare them
+		 * with the equivalent default presets: if a slug is present as a default
+		 * we remove it from the theme presets.
+		 */
+		$nodes        = static::get_setting_nodes( $incoming_data );
+		$slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
+		foreach ( $nodes as $node ) {
+			// Replace the spacing.units.
+			$path   = $node['path'];
+			$path[] = 'spacing';
+			$path[] = 'units';
+
+			$content = _wp_array_get( $incoming_data, $path, null );
+			if ( isset( $content ) ) {
+				_wp_array_set( $this->theme_json, $path, $content );
+			}
+
+			// Replace the presets.
+			foreach ( static::PRESETS_METADATA as $preset ) {
+				$override_preset = ! static::get_metadata_boolean( $this->theme_json['settings'], $preset['prevent_override'], true );
+
+				foreach ( static::VALID_ORIGINS as $origin ) {
+					$base_path = $node['path'];
+					foreach ( $preset['path'] as $leaf ) {
+						$base_path[] = $leaf;
+					}
+
+					$path   = $base_path;
+					$path[] = $origin;
 
-		if ( $use_root_padding ) {
-			// Top and bottom padding are applied to the outer block container.
-			$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
-			// Right and left padding are applied to the first container with `.has-global-padding` class.
-			$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// Nested containers with `.has-global-padding` class do not get padding.
-			$css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
-			// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
-			$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
-			// The above rule is negated for alignfull children of nested containers.
-			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
-			// Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
-			$css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
-			// The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
-			$css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
+					$content = _wp_array_get( $incoming_data, $path, null );
+					if ( ! isset( $content ) ) {
+						continue;
+					}
+
+					if ( 'theme' === $origin && $preset['use_default_names'] ) {
+						foreach ( $content as $key => $item ) {
+							if ( ! isset( $item['name'] ) ) {
+								$name = static::get_name_from_defaults( $item['slug'], $base_path );
+								if ( null !== $name ) {
+									$content[ $key ]['name'] = $name;
+								}
+							}
+						}
+					}
+
+					if (
+						( 'theme' !== $origin ) ||
+						( 'theme' === $origin && $override_preset )
+					) {
+						_wp_array_set( $this->theme_json, $path, $content );
+					} else {
+						$slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
+						$slugs      = array_merge_recursive( $slugs_global, $slugs_node );
+
+						$slugs_for_preset = _wp_array_get( $slugs, $preset['path'], array() );
+						$content          = static::filter_slugs( $content, $slugs_for_preset );
+						_wp_array_set( $this->theme_json, $path, $content );
+					}
+				}
+			}
 		}
+	}
 
-		$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-		$css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-		$css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+	/**
+	 * Converts all filter (duotone) presets into SVGs.
+	 *
+	 * @since 5.9.1
+	 *
+	 * @param array $origins List of origins to process.
+	 * @return string SVG filters.
+	 */
+	public function get_svg_filters( $origins ) {
+		$blocks_metadata = static::get_blocks_metadata();
+		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
 
-		$block_gap_value       = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
-		$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-		if ( $has_block_gap_support ) {
-			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
-			$css            .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-			$css            .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
+		$filters = '';
+		foreach ( $setting_nodes as $metadata ) {
+			$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			if ( empty( $node['color']['duotone'] ) ) {
+				continue;
+			}
 
-			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-			$css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
+			$duotone_presets = $node['color']['duotone'];
+
+			foreach ( $origins as $origin ) {
+				if ( ! isset( $duotone_presets[ $origin ] ) ) {
+					continue;
+				}
+				foreach ( $duotone_presets[ $origin ] as $duotone_preset ) {
+					$filters .= wp_get_duotone_filter_svg( $duotone_preset );
+				}
+			}
 		}
-		$css .= $this->get_layout_styles( $block_metadata );
 
-		return $css;
+		return $filters;
 	}
 
 	/**
-	 * Converts each style section into a list of rulesets
-	 * containing the block styles to be appended to the stylesheet.
+	 * Determines whether a presets should be overridden or not.
 	 *
-	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 * @since 5.9.0
+	 * @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
 	 *
-	 * For each section this creates a new ruleset such as:
+	 * @param array      $theme_json The theme.json like structure to inspect.
+	 * @param array      $path       Path to inspect.
+	 * @param bool|array $override   Data to compute whether to override the preset.
+	 * @return boolean
+	 */
+	protected static function should_override_preset( $theme_json, $path, $override ) {
+		_deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
+
+		if ( is_bool( $override ) ) {
+			return $override;
+		}
+
+		/*
+		 * The relationship between whether to override the defaults
+		 * and whether the defaults are enabled is inverse:
+		 *
+		 * - If defaults are enabled  => theme presets should not be overridden
+		 * - If defaults are disabled => theme presets should be overridden
+		 *
+		 * For example, a theme sets defaultPalette to false,
+		 * making the default palette hidden from the user.
+		 * In that case, we want all the theme presets to be present,
+		 * so they should override the defaults.
+		 */
+		if ( is_array( $override ) ) {
+			$value = _wp_array_get( $theme_json, array_merge( $path, $override ) );
+			if ( isset( $value ) ) {
+				return ! $value;
+			}
+
+			// Search the top-level key if none was found for this node.
+			$value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) );
+			if ( isset( $value ) ) {
+				return ! $value;
+			}
+
+			return true;
+		}
+	}
+
+	/**
+	 * Returns the default slugs for all the presets in an associative array
+	 * whose keys are the preset paths and the leafs is the list of slugs.
 	 *
-	 *   block-selector {
-	 *     style-property-one: value;
-	 *   }
+	 * For example:
 	 *
-	 * @param array $style_nodes Nodes with styles.
-	 * @return string The new stylesheet.
+	 *  array(
+	 *   'color' => array(
+	 *     'palette'   => array( 'slug-1', 'slug-2' ),
+	 *     'gradients' => array( 'slug-3', 'slug-4' ),
+	 *   ),
+	 * )
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $data      A theme.json like structure.
+	 * @param array $node_path The path to inspect. It's 'settings' by default.
+	 * @return array
 	 */
-	protected function get_block_classes( $style_nodes ) {
-		$block_rules = '';
+	protected static function get_default_slugs( $data, $node_path ) {
+		$slugs = array();
 
-		foreach ( $style_nodes as $metadata ) {
-			if ( null === $metadata['selector'] ) {
+		foreach ( static::PRESETS_METADATA as $metadata ) {
+			$path = $node_path;
+			foreach ( $metadata['path'] as $leaf ) {
+				$path[] = $leaf;
+			}
+			$path[] = 'default';
+
+			$preset = _wp_array_get( $data, $path, null );
+			if ( ! isset( $preset ) ) {
 				continue;
 			}
-			$block_rules .= static::get_styles_for_block( $metadata );
+
+			$slugs_for_preset = array();
+			foreach ( $preset as $item ) {
+				if ( isset( $item['slug'] ) ) {
+					$slugs_for_preset[] = $item['slug'];
+				}
+			}
+
+			_wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
 		}
 
-		return $block_rules;
+		return $slugs;
 	}
 
 	/**
-	 * Given a styles array, it extracts the style properties
-	 * and adds them to the $declarations array following the format:
+	 * Gets a `default`'s preset name by a provided slug.
 	 *
-	 * ```php
-	 * array(
-	 *   'name'  => 'property_name',
-	 *   'value' => 'property_value,
-	 * )
-	 * ```
+	 * @since 5.9.0
 	 *
-	 * @param array   $styles Styles to process.
-	 * @param array   $settings Theme settings.
-	 * @param array   $properties Properties metadata.
-	 * @param array   $theme_json Theme JSON array.
-	 * @param string  $selector The style block selector.
-	 * @param boolean $use_root_padding Whether to add custom properties at root level.
-	 * @return array  Returns the modified $declarations.
+	 * @param string $slug The slug we want to find a match from default presets.
+	 * @param array  $base_path The path to inspect. It's 'settings' by default.
+	 * @return string|null
 	 */
-	protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
-		if ( null === $properties ) {
-			$properties = static::PROPERTIES_METADATA;
+	protected function get_name_from_defaults( $slug, $base_path ) {
+		$path            = $base_path;
+		$path[]          = 'default';
+		$default_content = _wp_array_get( $this->theme_json, $path, null );
+		if ( ! $default_content ) {
+			return null;
+		}
+		foreach ( $default_content as $item ) {
+			if ( $slug === $item['slug'] ) {
+				return $item['name'];
+			}
 		}
+		return null;
+	}
 
-		$declarations = array();
-		if ( empty( $styles ) ) {
-			return $declarations;
+	/**
+	 * Removes the preset values whose slug is equal to any of given slugs.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $node  The node with the presets to validate.
+	 * @param array $slugs The slugs that should not be overridden.
+	 * @return array The new node.
+	 */
+	protected static function filter_slugs( $node, $slugs ) {
+		if ( empty( $slugs ) ) {
+			return $node;
 		}
 
-		$root_variable_duplicates = array();
+		$new_node = array();
+		foreach ( $node as $value ) {
+			if ( isset( $value['slug'] ) && ! in_array( $value['slug'], $slugs, true ) ) {
+				$new_node[] = $value;
+			}
+		}
 
-		foreach ( $properties as $css_property => $value_path ) {
-			$value = static::get_property_value( $styles, $value_path, $theme_json );
+		return $new_node;
+	}
 
-			if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+	/**
+	 * Removes insecure data from theme.json.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $theme_json Structure to sanitize.
+	 * @return array Sanitized structure.
+	 */
+	public static function remove_insecure_properties( $theme_json ) {
+		$sanitized = array();
+
+		$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+
+		$valid_block_names   = array_keys( static::get_blocks_metadata() );
+		$valid_element_names = array_keys( static::ELEMENTS );
+
+		$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
+
+		$blocks_metadata = static::get_blocks_metadata();
+		$style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
+
+		foreach ( $style_nodes as $metadata ) {
+			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
+			if ( empty( $input ) ) {
 				continue;
 			}
-			// Root-level padding styles don't currently support strings with CSS shorthand values.
-			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
-			if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
+
+			$output = static::remove_insecure_styles( $input );
+
+			/*
+			 * Get a reference to element name from path.
+			 * $metadata['path'] = array( 'styles', 'elements', 'link' );
+			 */
+			$current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
+
+			/*
+			 * $output is stripped of pseudo selectors. Re-add and process them
+			 * or insecure styles here.
+			 */
+			// TODO: Replace array_key_exists() with isset() check once WordPress drops
+			// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
+			if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+				foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
+					if ( isset( $input[ $pseudo_selector ] ) ) {
+						$output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
+					}
+				}
+			}
+
+			if ( ! empty( $output ) ) {
+				_wp_array_set( $sanitized, $metadata['path'], $output );
+			}
+		}
+
+		$setting_nodes = static::get_setting_nodes( $theme_json );
+		foreach ( $setting_nodes as $metadata ) {
+			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
+			if ( empty( $input ) ) {
 				continue;
 			}
 
-			if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
-				$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
+			$output = static::remove_insecure_settings( $input );
+			if ( ! empty( $output ) ) {
+				_wp_array_set( $sanitized, $metadata['path'], $output );
 			}
+		}
 
-			// Look up protected properties, keyed by value path.
-			// Skip protected properties that are explicitly set to `null`.
-			if ( is_array( $value_path ) ) {
-				$path_string = implode( '.', $value_path );
-				if (
-					array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
-					_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
-				) {
+		if ( empty( $sanitized['styles'] ) ) {
+			unset( $theme_json['styles'] );
+		} else {
+			$theme_json['styles'] = $sanitized['styles'];
+		}
+
+		if ( empty( $sanitized['settings'] ) ) {
+			unset( $theme_json['settings'] );
+		} else {
+			$theme_json['settings'] = $sanitized['settings'];
+		}
+
+		return $theme_json;
+	}
+
+	/**
+	 * Processes a setting node and returns the same node
+	 * without the insecure settings.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $input Node to process.
+	 * @return array
+	 */
+	protected static function remove_insecure_settings( $input ) {
+		$output = array();
+		foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+			foreach ( static::VALID_ORIGINS as $origin ) {
+				$path_with_origin   = $preset_metadata['path'];
+				$path_with_origin[] = $origin;
+				$presets            = _wp_array_get( $input, $path_with_origin, null );
+				if ( null === $presets ) {
 					continue;
 				}
+
+				$escaped_preset = array();
+				foreach ( $presets as $preset ) {
+					if (
+						esc_attr( esc_html( $preset['name'] ) ) === $preset['name'] &&
+						sanitize_html_class( $preset['slug'] ) === $preset['slug']
+					) {
+						$value = null;
+						if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
+							$value = $preset[ $preset_metadata['value_key'] ];
+						} elseif (
+							isset( $preset_metadata['value_func'] ) &&
+							is_callable( $preset_metadata['value_func'] )
+						) {
+							$value = call_user_func( $preset_metadata['value_func'], $preset );
+						}
+
+						$preset_is_valid = true;
+						foreach ( $preset_metadata['properties'] as $property ) {
+							if ( ! static::is_safe_css_declaration( $property, $value ) ) {
+								$preset_is_valid = false;
+								break;
+							}
+						}
+
+						if ( $preset_is_valid ) {
+							$escaped_preset[] = $preset;
+						}
+					}
+				}
+
+				if ( ! empty( $escaped_preset ) ) {
+					_wp_array_set( $output, $path_with_origin, $escaped_preset );
+				}
 			}
+		}
 
-			// Skip if empty and not "0" or value represents array of longhand values.
-			$has_missing_value = empty( $value ) && ! is_numeric( $value );
-			if ( $has_missing_value || is_array( $value ) ) {
-				continue;
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+			foreach ( $paths as $path ) {
+				$value = _wp_array_get( $input, $path, array() );
+				if (
+					isset( $value ) &&
+					! is_array( $value ) &&
+					static::is_safe_css_declaration( $property, $value )
+				) {
+					_wp_array_set( $output, $path, $value );
+				}
 			}
+		}
+		return $output;
+	}
 
-			// Calculates fluid typography rules where available.
-			if ( 'font-size' === $css_property ) {
-				/*
-				 * gutenberg_get_typography_font_size_value() will check
-				 * if fluid typography has been activated and also
-				 * whether the incoming value can be converted to a fluid value.
-				 * Values that already have a "clamp()" function will not pass the test,
-				 * and therefore the original $value will be returned.
-				 */
-				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
+	/**
+	 * Processes a style node and returns the same node
+	 * without the insecure styles.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Allow indirect properties used outside of `compute_style_properties`.
+	 *
+	 * @param array $input Node to process.
+	 * @return array
+	 */
+	protected static function remove_insecure_styles( $input ) {
+		$output       = array();
+		$declarations = static::compute_style_properties( $input );
+
+		foreach ( $declarations as $declaration ) {
+			if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
+				$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
+
+				// Check the value isn't an array before adding so as to not
+				// double up shorthand and longhand styles.
+				$value = _wp_array_get( $input, $path, array() );
+				if ( ! is_array( $value ) ) {
+					_wp_array_set( $output, $path, $value );
+				}
 			}
-
-			$declarations[] = array(
-				'name'  => $css_property,
-				'value' => $value,
-			);
 		}
 
-		// If a variable value is added to the root, the corresponding property should be removed.
-		foreach ( $root_variable_duplicates as $duplicate ) {
-			$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
-			if ( is_numeric( $discard ) ) {
-				array_splice( $declarations, $discard, 1 );
+		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+			foreach ( $paths as $path ) {
+				$value = _wp_array_get( $input, $path, array() );
+				if (
+					isset( $value ) &&
+					! is_array( $value ) &&
+					static::is_safe_css_declaration( $property, $value )
+				) {
+					_wp_array_set( $output, $path, $value );
+				}
 			}
 		}
 
-		return $declarations;
+		return $output;
 	}
 
 	/**
-	 * Returns the style property for the given path.
+	 * Checks that a declaration provided by the user is safe.
 	 *
-	 * It also converts CSS Custom Property stored as
-	 * "var:preset|color|secondary" to the form
-	 * "--wp--preset--color--secondary".
+	 * @since 5.9.0
 	 *
-	 * It also converts references to a path to the value
-	 * stored at that location, e.g.
-	 * { "ref": "style.color.background" } => "#fff".
+	 * @param string $property_name  Property name in a CSS declaration, i.e. the `color` in `color: red`.
+	 * @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`.
+	 * @return bool
+	 */
+	protected static function is_safe_css_declaration( $property_name, $property_value ) {
+		$style_to_validate = $property_name . ': ' . $property_value;
+		$filtered          = esc_html( safecss_filter_attr( $style_to_validate ) );
+		return ! empty( trim( $filtered ) );
+	}
+
+	/**
+	 * Returns the raw data.
 	 *
-	 * @param array $styles Styles subtree.
-	 * @param array $path   Which property to process.
-	 * @param array $theme_json Theme JSON array.
-	 * @return string|array|null Style property value.
+	 * @since 5.8.0
+	 *
+	 * @return array Raw data.
 	 */
-	protected static function get_property_value( $styles, $path, $theme_json = null ) {
-		$value = _wp_array_get( $styles, $path );
+	public function get_raw_data() {
+		return $this->theme_json;
+	}
 
-		// This converts references to a path to the value at that path
-		// where the values is an array with a "ref" key, pointing to a path.
-		// For example: { "ref": "style.color.background" } => "#fff".
-		if ( is_array( $value ) && array_key_exists( 'ref', $value ) ) {
-			$value_path = explode( '.', $value['ref'] );
-			$ref_value  = _wp_array_get( $theme_json, $value_path );
-			// Only use the ref value if we find anything.
-			if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
-				$value = $ref_value;
+	/**
+	 * Transforms the given editor settings according the
+	 * add_theme_support format to the theme.json format.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $settings Existing editor settings.
+	 * @return array Config that adheres to the theme.json schema.
+	 */
+	public static function get_from_editor_settings( $settings ) {
+		$theme_settings = array(
+			'version'  => static::LATEST_SCHEMA,
+			'settings' => array(),
+		);
+
+		// Deprecated theme supports.
+		if ( isset( $settings['disableCustomColors'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
 			}
+			$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
+		}
 
-			if ( is_array( $ref_value ) && array_key_exists( 'ref', $ref_value ) ) {
-				$path_string      = json_encode( $path );
-				$ref_value_string = json_encode( $ref_value );
-				_doing_it_wrong( 'get_property_value', "Your theme.json file uses a dynamic value ({$ref_value_string}) for the path at {$path_string}. However, the value at {$path_string} is also a dynamic value (pointing to {$ref_value['ref']}) and pointing to another dynamic value is not supported. Please update {$path_string} to point directly to {$ref_value['ref']}.", '6.1.0' );
+		if ( isset( $settings['disableCustomGradients'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
 			}
+			$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
 		}
 
-		if ( ! $value || is_array( $value ) ) {
-			return $value;
+		if ( isset( $settings['disableCustomFontSizes'] ) ) {
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
 		}
 
-		// Convert custom CSS properties.
-		$prefix     = 'var:';
-		$prefix_len = strlen( $prefix );
-		$token_in   = '|';
-		$token_out  = '--';
-		if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
-			$unwrapped_name = str_replace(
-				$token_in,
-				$token_out,
-				substr( $value, $prefix_len )
-			);
-			$value          = "var(--wp--$unwrapped_name)";
+		if ( isset( $settings['enableCustomLineHeight'] ) ) {
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
 		}
 
-		return $value;
+		if ( isset( $settings['enableCustomUnits'] ) ) {
+			if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
+				$theme_settings['settings']['spacing'] = array();
+			}
+			$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
+				array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
+				$settings['enableCustomUnits'];
+		}
+
+		if ( isset( $settings['colors'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
+			}
+			$theme_settings['settings']['color']['palette'] = $settings['colors'];
+		}
+
+		if ( isset( $settings['gradients'] ) ) {
+			if ( ! isset( $theme_settings['settings']['color'] ) ) {
+				$theme_settings['settings']['color'] = array();
+			}
+			$theme_settings['settings']['color']['gradients'] = $settings['gradients'];
+		}
+
+		if ( isset( $settings['fontSizes'] ) ) {
+			$font_sizes = $settings['fontSizes'];
+			// Back-compatibility for presets without units.
+			foreach ( $font_sizes as $key => $font_size ) {
+				if ( is_numeric( $font_size['size'] ) ) {
+					$font_sizes[ $key ]['size'] = $font_size['size'] . 'px';
+				}
+			}
+			if ( ! isset( $theme_settings['settings']['typography'] ) ) {
+				$theme_settings['settings']['typography'] = array();
+			}
+			$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
+		}
+
+		if ( isset( $settings['enableCustomSpacing'] ) ) {
+			if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
+				$theme_settings['settings']['spacing'] = array();
+			}
+			$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
+		}
+
+		return $theme_settings;
 	}
 
 	/**
-	 * Presets are a set of values that serve
-	 * to bootstrap some styles: colors, font sizes, etc.
-	 *
-	 * They are a unkeyed array of values such as:
-	 *
-	 * ```php
-	 * array(
-	 *   array(
-	 *     'slug'      => 'unique-name-within-the-set',
-	 *     'name'      => 'Name for the UI',
-	 *     <value_key> => 'value'
-	 *   ),
-	 * )
-	 * ```
+	 * Returns the current theme's wanted patterns(slugs) to be
+	 * registered from Pattern Directory.
 	 *
-	 * This contains the necessary metadata to process them:
+	 * @since 6.0.0
 	 *
-	 * - path             => Where to find the preset within the settings section.
-	 * - prevent_override => Disables override of default presets by theme presets.
-	 *                       The relationship between whether to override the defaults
-	 *                       and whether the defaults are enabled is inverse:
-	 *                         - If defaults are enabled  => theme presets should not be overridden
-	 *                         - If defaults are disabled => theme presets should be overridden
-	 *                       For example, a theme sets defaultPalette to false,
-	 *                       making the default palette hidden from the user.
-	 *                       In that case, we want all the theme presets to be present,
-	 *                       so they should override the defaults by setting this false.
-	 * - use_default_names => whether to use the default names
-	 * - value_key        => the key that represents the value
-	 * - value_func       => optionally, instead of value_key, a function to generate
-	 *                       the value that takes a preset as an argument
-	 *                       (either value_key or value_func should be present)
-	 * - css_vars         => template string to use in generating the CSS Custom Property.
-	 *                       Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
-	 *                       substituting the $slug for the slug's value for each preset value.
-	 * - classes          => array containing a structure with the classes to
-	 *                       generate for the presets, where for each array item
-	 *                       the key is the class name and the value the property name.
-	 *                       The "$slug" substring will be replaced by the slug of each preset.
-	 *                       For example:
-	 *                       'classes' => array(
-	 *                         '.has-$slug-color'            => 'color',
-	 *                         '.has-$slug-background-color' => 'background-color',
-	 *                         '.has-$slug-border-color'     => 'border-color',
-	 *                       )
-	 * - properties       => array of CSS properties to be used by kses to
-	 *                       validate the content of each preset
-	 *                       by means of the remove_insecure_properties method.
+	 * @return string[]
 	 */
-	const PRESETS_METADATA = array(
-		array(
-			'path'              => array( 'color', 'palette' ),
-			'prevent_override'  => array( 'color', 'defaultPalette' ),
-			'use_default_names' => false,
-			'value_key'         => 'color',
-			'css_vars'          => '--wp--preset--color--$slug',
-			'classes'           => array(
-				'.has-$slug-color'            => 'color',
-				'.has-$slug-background-color' => 'background-color',
-				'.has-$slug-border-color'     => 'border-color',
-			),
-			'properties'        => array( 'color', 'background-color', 'border-color' ),
-		),
-		array(
-			'path'              => array( 'color', 'gradients' ),
-			'prevent_override'  => array( 'color', 'defaultGradients' ),
-			'use_default_names' => false,
-			'value_key'         => 'gradient',
-			'css_vars'          => '--wp--preset--gradient--$slug',
-			'classes'           => array( '.has-$slug-gradient-background' => 'background' ),
-			'properties'        => array( 'background' ),
-		),
-		array(
-			'path'              => array( 'color', 'duotone' ),
-			'prevent_override'  => array( 'color', 'defaultDuotone' ),
-			'use_default_names' => false,
-			'value_func'        => 'gutenberg_get_duotone_filter_property',
-			'css_vars'          => '--wp--preset--duotone--$slug',
-			'classes'           => array(),
-			'properties'        => array( 'filter' ),
-		),
-		array(
-			'path'              => array( 'typography', 'fontSizes' ),
-			'prevent_override'  => false,
-			'use_default_names' => true,
-			'value_func'        => 'gutenberg_get_typography_font_size_value',
-			'css_vars'          => '--wp--preset--font-size--$slug',
-			'classes'           => array( '.has-$slug-font-size' => 'font-size' ),
-			'properties'        => array( 'font-size' ),
-		),
-		array(
-			'path'              => array( 'typography', 'fontFamilies' ),
-			'prevent_override'  => false,
-			'use_default_names' => false,
-			'value_key'         => 'fontFamily',
-			'css_vars'          => '--wp--preset--font-family--$slug',
-			'classes'           => array( '.has-$slug-font-family' => 'font-family' ),
-			'properties'        => array( 'font-family' ),
-		),
-		array(
-			'path'              => array( 'spacing', 'spacingSizes' ),
-			'prevent_override'  => false,
-			'use_default_names' => true,
-			'value_key'         => 'size',
-			'css_vars'          => '--wp--preset--spacing--$slug',
-			'classes'           => array(),
-			'properties'        => array( 'padding', 'margin' ),
-		),
-	);
+	public function get_patterns() {
+		if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
+			return $this->theme_json['patterns'];
+		}
+		return array();
+	}
 
 	/**
-	 * The valid properties under the settings key.
+	 * Returns a valid theme.json as provided by a theme.
 	 *
-	 * @var array
+	 * Unlike get_raw_data() this returns the presets flattened, as provided by a theme.
+	 * This also uses appearanceTools instead of their opt-ins if all of them are true.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return array
 	 */
-	const VALID_SETTINGS = array(
-		'appearanceTools'               => null,
-		'useRootPaddingAwareAlignments' => null,
-		'border'                        => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-		),
-		'color'                         => array(
-			'background'       => null,
-			'custom'           => null,
-			'customDuotone'    => null,
-			'customGradient'   => null,
-			'defaultDuotone'   => null,
-			'defaultGradients' => null,
-			'defaultPalette'   => null,
-			'duotone'          => null,
-			'gradients'        => null,
-			'link'             => null,
-			'palette'          => null,
-			'text'             => null,
-		),
-		'custom'                        => null,
-		'layout'                        => array(
-			'contentSize' => null,
-			'definitions' => null,
-			'wideSize'    => null,
-		),
-		'spacing'                       => array(
-			'customSpacingSize' => null,
-			'spacingSizes'      => null,
-			'spacingScale'      => null,
-			'blockGap'          => null,
-			'margin'            => null,
-			'padding'           => null,
-			'units'             => null,
-		),
-		'typography'                    => array(
-			'fluid'          => null,
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-	);
+	public function get_data() {
+		$output = $this->theme_json;
+		$nodes  = static::get_setting_nodes( $output );
+
+		/**
+		 * Flatten the theme & custom origins into a single one.
+		 *
+		 * For example, the following:
+		 *
+		 * {
+		 *   "settings": {
+		 *     "color": {
+		 *       "palette": {
+		 *         "theme": [ {} ],
+		 *         "custom": [ {} ]
+		 *       }
+		 *     }
+		 *   }
+		 * }
+		 *
+		 * will be converted to:
+		 *
+		 * {
+		 *   "settings": {
+		 *     "color": {
+		 *       "palette": [ {} ]
+		 *     }
+		 *   }
+		 * }
+		 */
+		foreach ( $nodes as $node ) {
+			foreach ( static::PRESETS_METADATA as $preset_metadata ) {
+				$path = $node['path'];
+				foreach ( $preset_metadata['path'] as $preset_metadata_path ) {
+					$path[] = $preset_metadata_path;
+				}
+				$preset = _wp_array_get( $output, $path, null );
+				if ( null === $preset ) {
+					continue;
+				}
+
+				$items = array();
+				if ( isset( $preset['theme'] ) ) {
+					foreach ( $preset['theme'] as $item ) {
+						$slug = $item['slug'];
+						unset( $item['slug'] );
+						$items[ $slug ] = $item;
+					}
+				}
+				if ( isset( $preset['custom'] ) ) {
+					foreach ( $preset['custom'] as $item ) {
+						$slug = $item['slug'];
+						unset( $item['slug'] );
+						$items[ $slug ] = $item;
+					}
+				}
+				$flattened_preset = array();
+				foreach ( $items as $slug => $value ) {
+					$flattened_preset[] = array_merge( array( 'slug' => (string) $slug ), $value );
+				}
+				_wp_array_set( $output, $path, $flattened_preset );
+			}
+		}
+
+		// If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
+		// this code unsets them and sets 'appearanceTools' instead.
+		foreach ( $nodes as $node ) {
+			$all_opt_ins_are_set = true;
+			foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
+				$full_path = $node['path'];
+				foreach ( $opt_in_path as $opt_in_path_item ) {
+					$full_path[] = $opt_in_path_item;
+				}
+				// Use "unset prop" as a marker instead of "null" because
+				// "null" can be a valid value for some props (e.g. blockGap).
+				$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
+				if ( 'unset prop' === $opt_in_value ) {
+					$all_opt_ins_are_set = false;
+					break;
+				}
+			}
+
+			if ( $all_opt_ins_are_set ) {
+				$node_path_with_appearance_tools   = $node['path'];
+				$node_path_with_appearance_tools[] = 'appearanceTools';
+				_wp_array_set( $output, $node_path_with_appearance_tools, true );
+				foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
+					$full_path = $node['path'];
+					foreach ( $opt_in_path as $opt_in_path_item ) {
+						$full_path[] = $opt_in_path_item;
+					}
+					// Use "unset prop" as a marker instead of "null" because
+					// "null" can be a valid value for some props (e.g. blockGap).
+					$opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
+					if ( true !== $opt_in_value ) {
+						continue;
+					}
+
+					// The following could be improved to be path independent.
+					// At the moment it relies on a couple of assumptions:
+					//
+					// - all opt-ins having a path of size 2.
+					// - there's two sources of settings: the top-level and the block-level.
+					if (
+						( 1 === count( $node['path'] ) ) &&
+						( 'settings' === $node['path'][0] )
+					) {
+						// Top-level settings.
+						unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] );
+						if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) {
+							unset( $output['settings'][ $opt_in_path[0] ] );
+						}
+					} elseif (
+						( 3 === count( $node['path'] ) ) &&
+						( 'settings' === $node['path'][0] ) &&
+						( 'blocks' === $node['path'][1] )
+					) {
+						// Block-level settings.
+						$block_name = $node['path'][2];
+						unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] );
+						if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) {
+							unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] );
+						}
+					}
+				}
+			}
+		}
+
+		wp_recursive_ksort( $output );
+
+		return $output;
+	}
 
 	/**
-	 * Transform the spacing scale values into an array of spacing scale presets.
+	 * Sets the spacingSizes array based on the spacingScale values from theme.json.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return null|void
 	 */
 	public function set_spacing_sizes() {
 		$spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
 
-		if ( ! is_numeric( $spacing_scale['steps'] )
+		// Gutenberg didn't have the 1st isset check.
+		if ( ! isset( $spacing_scale['steps'] )
+			|| ! is_numeric( $spacing_scale['steps'] )
 			|| ! isset( $spacing_scale['mediumStep'] )
 			|| ! isset( $spacing_scale['unit'] )
 			|| ! isset( $spacing_scale['operator'] )
@@ -1410,7 +3235,7 @@ public function set_spacing_sizes() {
 
 			$below_sizes[] = array(
 				/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
-				'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), strval( $x_small_count ) ),
+				'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small', 'gutenberg' ) : sprintf( __( '%sX-Small', 'gutenberg' ), (string) $x_small_count ),
 				'slug' => (string) $slug,
 				'size' => round( $current_step, 2 ) . $unit,
 			);
@@ -1420,7 +3245,7 @@ public function set_spacing_sizes() {
 			}
 
 			if ( $below_midpoint_count < $steps_mid_point - 2 ) {
-				++$x_small_count;
+				$x_small_count++;
 			}
 
 			$slug -= 10;
@@ -1447,7 +3272,7 @@ public function set_spacing_sizes() {
 
 			$above_sizes[] = array(
 				/* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
-				'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), strval( $x_large_count ) ),
+				'name' => 0 === $above_midpoint_count ? __( 'Large', 'gutenberg' ) : sprintf( __( '%sX-Large', 'gutenberg' ), (string) $x_large_count ),
 				'slug' => (string) $slug,
 				'size' => round( $current_step, 2 ) . $unit,
 			);
@@ -1457,244 +3282,24 @@ public function set_spacing_sizes() {
 			}
 
 			if ( $above_midpoint_count > 1 ) {
-				++$x_large_count;
+				$x_large_count++;
 			}
 
 			$slug += 10;
 		}
 
-		$spacing_sizes = array_merge( $below_sizes, $above_sizes );
+		$spacing_sizes = $below_sizes;
+		foreach ( $above_sizes as $above_sizes_item ) {
+			$spacing_sizes[] = $above_sizes_item;
+		}
 
 		// If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
 		if ( $spacing_scale['steps'] <= 7 ) {
 			for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
-				$spacing_sizes[ $spacing_sizes_count ]['name'] = strval( $spacing_sizes_count + 1 );
+				$spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
 			}
 		}
 
 		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
 	}
-
-	/**
-	 * Get the CSS layout rules for a particular block from theme.json layout definitions.
-	 *
-	 * @param array $block_metadata Metadata about the block to get styles for.
-	 *
-	 * @return string Layout styles for the block.
-	 */
-	protected function get_layout_styles( $block_metadata ) {
-		$block_rules = '';
-		$block_type  = null;
-
-		// Skip outputting layout styles if explicitly disabled.
-		if ( current_theme_supports( 'disable-layout-styles' ) ) {
-			return $block_rules;
-		}
-
-		if ( isset( $block_metadata['name'] ) ) {
-			$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
-			if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
-				return $block_rules;
-			}
-		}
-
-		$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
-		$has_block_gap_support    = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-		$has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
-		$node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
-		$layout_definitions       = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
-		$layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
-
-		// Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
-		// Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
-		if ( $has_block_gap_support || $has_fallback_gap_support ) {
-			$block_gap_value = null;
-			// Use a fallback gap value if block gap support is not available.
-			if ( ! $has_block_gap_support ) {
-				$block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
-				if ( ! empty( $block_type ) ) {
-					$block_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
-				}
-			} else {
-				$block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
-			}
-
-			// Support split row / column values and concatenate to a shorthand value.
-			if ( is_array( $block_gap_value ) ) {
-				if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
-					$gap_row         = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
-					$gap_column      = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
-					$block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
-				} else {
-					// Skip outputting gap value if not all sides are provided.
-					$block_gap_value = null;
-				}
-			}
-
-			// If the block should have custom gap, add the gap styles.
-			if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
-				foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
-					// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-					if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
-						continue;
-					}
-
-					$class_name    = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
-					$spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
-
-					if (
-						! empty( $class_name ) &&
-						! empty( $spacing_rules )
-					) {
-						foreach ( $spacing_rules as $spacing_rule ) {
-							$declarations = array();
-							if (
-								isset( $spacing_rule['selector'] ) &&
-								preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
-								! empty( $spacing_rule['rules'] )
-							) {
-								// Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
-								foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
-									$current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
-									if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
-										$declarations[] = array(
-											'name'  => $css_property,
-											'value' => $current_css_value,
-										);
-									}
-								}
-
-								if ( ! $has_block_gap_support ) {
-									// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
-									$layout_selector = sprintf(
-										$format,
-										$selector,
-										$class_name,
-										$spacing_rule['selector']
-									);
-								} else {
-									$format          = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
-									$layout_selector = sprintf(
-										$format,
-										$selector,
-										$class_name,
-										$spacing_rule['selector']
-									);
-								}
-								$block_rules .= static::to_ruleset( $layout_selector, $declarations );
-							}
-						}
-					}
-				}
-			}
-		}
-
-		// Output base styles.
-		if (
-			static::ROOT_BLOCK_SELECTOR === $selector
-		) {
-			$valid_display_modes = array( 'block', 'flex', 'grid' );
-			foreach ( $layout_definitions as $layout_definition ) {
-				$class_name       = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
-				$base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
-
-				if (
-					! empty( $class_name ) &&
-					! empty( $base_style_rules )
-				) {
-					// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
-					if (
-						! empty( $layout_definition['displayMode'] ) &&
-						is_string( $layout_definition['displayMode'] ) &&
-						in_array( $layout_definition['displayMode'], $valid_display_modes, true )
-					) {
-						$layout_selector = sprintf(
-							'%s .%s',
-							$selector,
-							$class_name
-						);
-						$block_rules    .= static::to_ruleset(
-							$layout_selector,
-							array(
-								array(
-									'name'  => 'display',
-									'value' => $layout_definition['displayMode'],
-								),
-							)
-						);
-					}
-
-					foreach ( $base_style_rules as $base_style_rule ) {
-						$declarations = array();
-
-						if (
-							isset( $base_style_rule['selector'] ) &&
-							preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
-							! empty( $base_style_rule['rules'] )
-						) {
-							foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
-								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
-									$declarations[] = array(
-										'name'  => $css_property,
-										'value' => $css_value,
-									);
-								}
-							}
-
-							$layout_selector = sprintf(
-								'%s .%s%s',
-								$selector,
-								$class_name,
-								$base_style_rule['selector']
-							);
-							$block_rules    .= static::to_ruleset( $layout_selector, $declarations );
-						}
-					}
-				}
-			}
-		}
-		return $block_rules;
-	}
-
-	/**
-	 * Function that scopes a selector with another one. This works a bit like
-	 * SCSS nesting except the `&` operator isn't supported.
-	 *
-	 * <code>
-	 * $scope = '.a, .b .c';
-	 * $selector = '> .x, .y';
-	 * $merged = scope_selector( $scope, $selector );
-	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
-	 * </code>
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param string $scope    Selector to scope to.
-	 * @param string $selector Original selector.
-	 * @return string Scoped selector.
-	 */
-	public static function scope_selector( $scope, $selector ) {
-		$scopes    = explode( ',', $scope );
-		$selectors = explode( ',', $selector );
-
-		$selectors_scoped = array();
-		foreach ( $scopes as $outer ) {
-			foreach ( $selectors as $inner ) {
-				$outer = trim( $outer );
-				$inner = trim( $inner );
-				if ( ! empty( $outer ) && ! empty( $inner ) ) {
-					$selectors_scoped[] = $outer . ' ' . $inner;
-				} elseif ( empty( $outer ) ) {
-					$selectors_scoped[] = $inner;
-				} elseif ( empty( $inner ) ) {
-					$selectors_scoped[] = $outer;
-				}
-			}
-		}
-
-		$result = implode( ', ', $selectors_scoped );
-		return $result;
-	}
-
 }
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
new file mode 100644
index 00000000000000..8733fd13bf2c77
--- /dev/null
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -0,0 +1,701 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver class
+ *
+ * @package gutenberg
+ * @since 5.8.0
+ */
+
+/**
+ * Class that abstracts the processing of the different data sources
+ * for site-level config and offers an API to work with them.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use gutenberg_get_global_settings, gutenberg_get_global_styles, and gutenberg_get_global_stylesheet instead.
+ *
+ * @access private
+ */
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Resolver_Gutenberg {
+
+	/**
+	 * Container for keep track of registered blocks.
+	 *
+	 * @since 6.1.0
+	 * @var array
+	 */
+	protected static $blocks_cache = array(
+		'core'   => array(),
+		'blocks' => array(),
+		'theme'  => array(),
+		'user'   => array(),
+	);
+
+	/**
+	 * Container for data coming from core.
+	 *
+	 * @since 5.8.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $core = null;
+
+	/**
+	 * Container for data coming from the blocks.
+	 *
+	 * @since 6.1.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $blocks = null;
+
+	/**
+	 * Container for data coming from the theme.
+	 *
+	 * @since 5.8.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $theme = null;
+
+	/**
+	 * Container for data coming from the user.
+	 *
+	 * @since 5.9.0
+	 * @var WP_Theme_JSON
+	 */
+	protected static $user = null;
+
+	/**
+	 * Stores the ID of the custom post type
+	 * that holds the user data.
+	 *
+	 * @since 5.9.0
+	 * @var int
+	 */
+	protected static $user_custom_post_type_id = null;
+
+	/**
+	 * Container to keep loaded i18n schema for `theme.json`.
+	 *
+	 * @since 5.8.0 As `$theme_json_i18n`.
+	 * @since 5.9.0 Renamed from `$theme_json_i18n` to `$i18n_schema`.
+	 * @var array
+	 */
+	protected static $i18n_schema = null;
+
+	/**
+	 * `theme.json` file cache.
+	 *
+	 * @since 6.1.0
+	 * @var array
+	 */
+	protected static $theme_json_file_cache = array();
+
+	/**
+	 * Processes a file that adheres to the theme.json schema
+	 * and returns an array with its contents, or a void array if none found.
+	 *
+	 * @since 5.8.0
+	 * @since 6.1.0 Added caching.
+	 *
+	 * @param string $file_path Path to file. Empty if no file.
+	 * @return array Contents that adhere to the theme.json schema.
+	 */
+	protected static function read_json_file( $file_path ) {
+		if ( $file_path ) {
+			if ( array_key_exists( $file_path, static::$theme_json_file_cache ) ) {
+				return static::$theme_json_file_cache[ $file_path ];
+			}
+
+			$decoded_file = wp_json_file_decode( $file_path, array( 'associative' => true ) );
+			if ( is_array( $decoded_file ) ) {
+				static::$theme_json_file_cache[ $file_path ] = $decoded_file;
+				return static::$theme_json_file_cache[ $file_path ];
+			}
+		}
+
+		return array();
+	}
+
+	/**
+	 * Returns a data structure used in theme.json translation.
+	 *
+	 * @since 5.8.0
+	 * @deprecated 5.9.0
+	 *
+	 * @return array An array of theme.json fields that are translatable and the keys that are translatable.
+	 */
+	public static function get_fields_to_translate() {
+		_deprecated_function( __METHOD__, '5.9.0' );
+		return array();
+	}
+
+	/**
+	 * Given a theme.json structure modifies it in place to update certain values
+	 * by its translated strings according to the language set by the user.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array  $theme_json The theme.json to translate.
+	 * @param string $domain     Optional. Text domain. Unique identifier for retrieving translated strings.
+	 *                           Default 'default'.
+	 * @return array Returns the modified $theme_json_structure.
+	 */
+	protected static function translate( $theme_json, $domain = 'default' ) {
+		if ( null === static::$i18n_schema ) {
+			$i18n_schema         = wp_json_file_decode( __DIR__ . '/theme-i18n.json' );
+			static::$i18n_schema = null === $i18n_schema ? array() : $i18n_schema;
+		}
+
+		return translate_settings_using_i18n_schema( static::$i18n_schema, $theme_json, $domain );
+	}
+
+	/**
+	 * Returns core's origin config.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @return WP_Theme_JSON Entity that holds core data.
+	 */
+	public static function get_core_data() {
+		if ( null !== static::$core && static::has_same_registered_blocks( 'core' ) ) {
+			return static::$core;
+		}
+
+		$config = static::read_json_file( __DIR__ . '/theme.json' );
+		$config = static::translate( $config );
+
+		/**
+		 * Filters the default data provided by WordPress for global styles & settings.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+		 */
+		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
+		$config       = $theme_json->get_data();
+		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
+
+		return static::$core;
+	}
+
+	/**
+	 * Checks whether the registered blocks were already processed for this origin.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $origin Data source for which to cache the blocks.
+	 *                       Valid values are 'core', 'blocks', 'theme', and 'user'.
+	 * @return bool True on success, false otherwise.
+	 */
+	protected static function has_same_registered_blocks( $origin ) {
+		// Bail out if the origin is invalid.
+		if ( ! isset( static::$blocks_cache[ $origin ] ) ) {
+			return false;
+		}
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		// Is there metadata for all currently registered blocks?
+		$block_diff = array_diff_key( $blocks, static::$blocks_cache[ $origin ] );
+		if ( empty( $block_diff ) ) {
+			return true;
+		}
+
+		foreach ( $blocks as $block_name => $block_type ) {
+			static::$blocks_cache[ $origin ][ $block_name ] = true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns the theme's data.
+	 *
+	 * Data from theme.json will be backfilled from existing
+	 * theme supports, if any. Note that if the same data
+	 * is present in theme.json and in theme supports,
+	 * the theme.json takes precedence.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Theme supports have been inlined and the `$theme_support_data` argument removed.
+	 * @since 6.0.0 Added an `$options` parameter to allow the theme data to be returned without theme supports.
+	 *
+	 * @param array $deprecated Deprecated. Not used.
+	 * @param array $options {
+	 *     Options arguments.
+	 *
+	 *     @type bool $with_supports Whether to include theme supports in the data. Default true.
+	 * }
+	 * @return WP_Theme_JSON Entity that holds theme data.
+	 */
+	public static function get_theme_data( $deprecated = array(), $options = array() ) {
+		if ( ! empty( $deprecated ) ) {
+			_deprecated_argument( __METHOD__, '5.9.0' );
+		}
+
+		$options = wp_parse_args( $options, array( 'with_supports' => true ) );
+
+		if ( null === static::$theme || ! static::has_same_registered_blocks( 'theme' ) ) {
+			$theme_json_file = static::get_file_path_from_theme( 'theme.json' );
+			$wp_theme        = wp_get_theme();
+			if ( '' !== $theme_json_file ) {
+				$theme_json_data = static::read_json_file( $theme_json_file );
+				$theme_json_data = static::translate( $theme_json_data, $wp_theme->get( 'TextDomain' ) );
+			} else {
+				$theme_json_data = array();
+			}
+			// BEGIN OF EXPERIMENTAL CODE. Not to backport to core.
+			$theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $theme_json_data );
+			// END OF EXPERIMENTAL CODE.
+
+			/**
+			 * Filters the data provided by the theme for global styles and settings.
+			 *
+			 * @since 6.1.0
+			 *
+			 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+			 */
+			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
+			$theme_json_data = $theme_json->get_data();
+			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
+
+			if ( $wp_theme->parent() ) {
+				// Get parent theme.json.
+				$parent_theme_json_file = static::get_file_path_from_theme( 'theme.json', true );
+				if ( '' !== $parent_theme_json_file ) {
+					$parent_theme_json_data = static::read_json_file( $parent_theme_json_file );
+					$parent_theme_json_data = static::translate( $parent_theme_json_data, $wp_theme->parent()->get( 'TextDomain' ) );
+					// BEGIN OF EXPERIMENTAL CODE. Not to backport to core.
+					$parent_theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $parent_theme_json_data );
+					// END OF EXPERIMENTAL CODE.
+					$parent_theme = new WP_Theme_JSON_Gutenberg( $parent_theme_json_data );
+
+					/*
+					 * Merge the child theme.json into the parent theme.json.
+					 * The child theme takes precedence over the parent.
+					 */
+					$parent_theme->merge( static::$theme );
+					static::$theme = $parent_theme;
+				}
+			}
+		}
+
+		if ( ! $options['with_supports'] ) {
+			return static::$theme;
+		}
+
+		/*
+		 * We want the presets and settings declared in theme.json
+		 * to override the ones declared via theme supports.
+		 * So we take theme supports, transform it to theme.json shape
+		 * and merge the static::$theme upon that.
+		 */
+		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_legacy_theme_supports_for_theme_json() );
+		if ( ! wp_theme_has_theme_json() ) {
+			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
+				$theme_support_data['settings']['color'] = array();
+			}
+
+			$default_palette = false;
+			if ( current_theme_supports( 'default-color-palette' ) ) {
+				$default_palette = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['color']['palette'] ) ) {
+				// If the theme does not have any palette, we still want to show the core one.
+				$default_palette = true;
+			}
+			$theme_support_data['settings']['color']['defaultPalette'] = $default_palette;
+
+			$default_gradients = false;
+			if ( current_theme_supports( 'default-gradient-presets' ) ) {
+				$default_gradients = true;
+			}
+			if ( ! isset( $theme_support_data['settings']['color']['gradients'] ) ) {
+				// If the theme does not have any gradients, we still want to show the core ones.
+				$default_gradients = true;
+			}
+			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
+
+			// Classic themes without a theme.json don't support global duotone.
+			$theme_support_data['settings']['color']['defaultDuotone'] = false;
+
+			// Allow themes to enable appearance tools via theme_support.
+			if ( current_theme_supports( 'appearance-tools' ) ) {
+				$theme_support_data['settings']['appearanceTools'] = true;
+			}
+		}
+		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
+		$with_theme_supports->merge( static::$theme );
+		return $with_theme_supports;
+	}
+
+	/**
+	 * Gets the styles for blocks from the block.json file.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public static function get_block_data() {
+		$registry = WP_Block_Type_Registry::get_instance();
+		$blocks   = $registry->get_all_registered();
+
+		if ( null !== static::$blocks && static::has_same_registered_blocks( 'blocks' ) ) {
+			return static::$blocks;
+		}
+
+		$config = array( 'version' => 2 );
+		foreach ( $blocks as $block_name => $block_type ) {
+			if ( isset( $block_type->supports['__experimentalStyle'] ) ) {
+				$config['styles']['blocks'][ $block_name ] = static::remove_json_comments( $block_type->supports['__experimentalStyle'] );
+			}
+
+			if (
+				isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) &&
+				null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null )
+			) {
+				// Ensure an empty placeholder value exists for the block, if it provides a default blockGap value.
+				// The real blockGap value to be used will be determined when the styles are rendered for output.
+				$config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null;
+			}
+		}
+
+		/**
+		 * Filters the data provided by the blocks for global styles & settings.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+		 */
+		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
+		$config     = $theme_json->get_data();
+
+		static::$blocks = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
+		return static::$blocks;
+	}
+
+	/**
+	 * When given an array, this will remove any keys with the name `//`.
+	 *
+	 * @param array $array The array to filter.
+	 * @return array The filtered array.
+	 */
+	private static function remove_json_comments( $array ) {
+		unset( $array['//'] );
+		foreach ( $array as $k => $v ) {
+			if ( is_array( $v ) ) {
+				$array[ $k ] = static::remove_json_comments( $v );
+			}
+		}
+
+		return $array;
+	}
+
+	/**
+	 * Returns the custom post type that contains the user's origin config
+	 * for the active theme or a void array if none are found.
+	 *
+	 * This can also create and return a new draft custom post type.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param WP_Theme $theme              The theme object. If empty, it
+	 *                                     defaults to the active theme.
+	 * @param bool     $create_post        Optional. Whether a new custom post
+	 *                                     type should be created if none are
+	 *                                     found. Default false.
+	 * @param array    $post_status_filter Optional. Filter custom post type by
+	 *                                     post status. Default `array( 'publish' )`,
+	 *                                     so it only fetches published posts.
+	 * @return array Custom Post Type for the user's origin config.
+	 */
+	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
+		if ( ! $theme instanceof WP_Theme ) {
+			$theme = wp_get_theme();
+		}
+
+		/*
+		 * Bail early if the theme does not support a theme.json.
+		 *
+		 * Since wp_theme_has_theme_json only supports the active
+		 * theme, the extra condition for whether $theme is the active theme is
+		 * present here.
+		 */
+		if ( $theme->get_stylesheet() === get_stylesheet() && ! wp_theme_has_theme_json() ) {
+			return array();
+		}
+
+		$user_cpt         = array();
+		$post_type_filter = 'wp_global_styles';
+		$stylesheet       = $theme->get_stylesheet();
+		$args             = array(
+			'posts_per_page'         => 1,
+			'orderby'                => 'date',
+			'order'                  => 'desc',
+			'post_type'              => $post_type_filter,
+			'post_status'            => $post_status_filter,
+			'ignore_sticky_posts'    => true,
+			'no_found_rows'          => true,
+			'update_post_meta_cache' => false,
+			'update_post_term_cache' => false,
+			'tax_query'              => array(
+				array(
+					'taxonomy' => 'wp_theme',
+					'field'    => 'name',
+					'terms'    => $stylesheet,
+				),
+			),
+		);
+
+		$global_style_query = new WP_Query();
+		$recent_posts       = $global_style_query->query( $args );
+		if ( count( $recent_posts ) === 1 ) {
+			$user_cpt = get_object_vars( $recent_posts[0] );
+		} elseif ( $create_post ) {
+			$cpt_post_id = wp_insert_post(
+				array(
+					'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
+					'post_status'  => 'publish',
+					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
+					'post_type'    => $post_type_filter,
+					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
+					'tax_input'    => array(
+						'wp_theme' => array( $stylesheet ),
+					),
+				),
+				true
+			);
+			if ( ! is_wp_error( $cpt_post_id ) ) {
+				$user_cpt = get_object_vars( get_post( $cpt_post_id ) );
+			}
+		}
+
+		return $user_cpt;
+	}
+
+	/**
+	 * Returns the user's origin config.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return WP_Theme_JSON Entity that holds styles for user data.
+	 */
+	public static function get_user_data() {
+		if ( null !== static::$user && static::has_same_registered_blocks( 'user' ) ) {
+			return static::$user;
+		}
+
+		$config   = array();
+		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
+
+		if ( array_key_exists( 'post_content', $user_cpt ) ) {
+			$decoded_data = json_decode( $user_cpt['post_content'], true );
+
+			$json_decoding_error = json_last_error();
+			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
+				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
+				/**
+				 * Filters the data provided by the user for global styles & settings.
+				 *
+				 * @since 6.1.0
+				 *
+				 * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+				 */
+				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+				$config     = $theme_json->get_data();
+				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+			}
+
+			// Very important to verify that the flag isGlobalStylesUserThemeJSON is true.
+			// If it's not true then the content was not escaped and is not safe.
+			if (
+				is_array( $decoded_data ) &&
+				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
+				$decoded_data['isGlobalStylesUserThemeJSON']
+			) {
+				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
+				$config = $decoded_data;
+			}
+		}
+
+		/** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */
+		$theme_json   = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
+		$config       = $theme_json->get_data();
+		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
+
+		return static::$user;
+	}
+
+	/**
+	 * Returns the data merged from multiple origins.
+	 *
+	 * There are four sources of data (origins) for a site:
+	 *
+	 * - default => WordPress
+	 * - blocks  => each one of the blocks provides data for itself
+	 * - theme   => the active theme
+	 * - custom  => data provided by the user
+	 *
+	 * The custom's has higher priority than the theme's, the theme's higher than blocks',
+	 * and block's higher than default's.
+	 *
+	 * Unlike the getters
+	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_core_data/ get_core_data},
+	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_theme_data/ get_theme_data},
+	 * and {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_user_data/ get_user_data},
+	 * this method returns data after it has been merged with the previous origins.
+	 * This means that if the same piece of data is declared in different origins
+	 * (default, blocks, theme, custom), the last origin overrides the previous.
+	 *
+	 * For example, if the user has set a background color
+	 * for the paragraph block, and the theme has done it as well,
+	 * the user preference wins.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added user data, removed the `$settings` parameter,
+	 *              added the `$origin` parameter.
+	 * @since 6.1.0 Added block data and generation of spacingSizes array.
+	 *
+	 * @param string $origin Optional. To what level should we merge data:'default', 'blocks', 'theme' or 'custom'.
+	 *                       'custom' is used as default value as well as fallback value if the origin is unknown.
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public static function get_merged_data( $origin = 'custom' ) {
+		if ( is_array( $origin ) ) {
+			_deprecated_argument( __FUNCTION__, '5.9.0' );
+		}
+
+		$result = static::get_core_data();
+		if ( 'default' === $origin ) {
+			$result->set_spacing_sizes();
+			return $result;
+		}
+
+		$result->merge( static::get_block_data() );
+		if ( 'blocks' === $origin ) {
+			return $result;
+		}
+
+		$result->merge( static::get_theme_data() );
+		if ( 'theme' === $origin ) {
+			$result->set_spacing_sizes();
+			return $result;
+		}
+
+		$result->merge( static::get_user_data() );
+		$result->set_spacing_sizes();
+		return $result;
+	}
+
+	/**
+	 * Returns the ID of the custom post type
+	 * that stores user data.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return integer|null
+	 */
+	public static function get_user_global_styles_post_id() {
+		if ( null !== static::$user_custom_post_type_id ) {
+			return static::$user_custom_post_type_id;
+		}
+
+		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme(), true );
+
+		if ( array_key_exists( 'ID', $user_cpt ) ) {
+			static::$user_custom_post_type_id = $user_cpt['ID'];
+		}
+
+		return static::$user_custom_post_type_id;
+	}
+
+	/**
+	 * Determines whether the active theme has a theme.json file.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added a check in the parent theme.
+	 * @deprecated 6.2.0 Use wp_theme_has_theme_json() instead.
+	 *
+	 * @return bool
+	 */
+	public static function theme_has_support() {
+		_deprecated_function( __METHOD__, '6.2.0', 'wp_theme_has_theme_json()' );
+
+		return wp_theme_has_theme_json();
+	}
+
+	/**
+	 * Builds the path to the given file and checks that it is readable.
+	 *
+	 * If it isn't, returns an empty string, otherwise returns the whole file path.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Adapted to work with child themes, added the `$template` argument.
+	 *
+	 * @param string $file_name Name of the file.
+	 * @param bool   $template  Optional. Use template theme directory. Default false.
+	 * @return string The whole file path or empty if the file doesn't exist.
+	 */
+	protected static function get_file_path_from_theme( $file_name, $template = false ) {
+		$path      = $template ? get_template_directory() : get_stylesheet_directory();
+		$candidate = $path . '/' . $file_name;
+
+		return is_readable( $candidate ) ? $candidate : '';
+	}
+
+	/**
+	 * Cleans the cached data so it can be recalculated.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added the `$user`, `$user_custom_post_type_id`,
+	 *              and `$i18n_schema` variables to reset.
+	 * @since 6.1.0 Added the `$blocks` and `$blocks_cache` variables
+	 *              to reset.
+	 */
+	public static function clean_cached_data() {
+		static::$core                     = null;
+		static::$blocks                   = null;
+		static::$blocks_cache             = array(
+			'core'   => array(),
+			'blocks' => array(),
+			'theme'  => array(),
+			'user'   => array(),
+		);
+		static::$theme                    = null;
+		static::$user                     = null;
+		static::$user_custom_post_type_id = null;
+		static::$i18n_schema              = null;
+	}
+
+	/**
+	 * Returns the style variations defined by the theme.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return array
+	 */
+	public static function get_style_variations() {
+		$variations     = array();
+		$base_directory = get_stylesheet_directory() . '/styles';
+		if ( is_dir( $base_directory ) ) {
+			$nested_files      = new RecursiveIteratorIterator( new RecursiveDirectoryIterator( $base_directory ) );
+			$nested_html_files = iterator_to_array( new RegexIterator( $nested_files, '/^.+\.json$/i', RecursiveRegexIterator::GET_MATCH ) );
+			ksort( $nested_html_files );
+			foreach ( $nested_html_files as $path => $file ) {
+				$decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) );
+				if ( is_array( $decoded_file ) ) {
+					$translated = static::translate( $decoded_file, wp_get_theme()->get( 'TextDomain' ) );
+					$variation  = ( new WP_Theme_JSON_Gutenberg( $translated ) )->get_raw_data();
+					if ( empty( $variation['title'] ) ) {
+						$variation['title'] = basename( $path, '.json' );
+					}
+					$variations[] = $variation;
+				}
+			}
+		}
+		return $variations;
+	}
+
+}
diff --git a/lib/client-assets.php b/lib/client-assets.php
index b7a11724a5e096..e23e1c4b89bd76 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -274,7 +274,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-editor',
 		gutenberg_url( 'build/editor/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-nux', 'wp-reusable-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-reusable-blocks' ),
 		$version
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -283,7 +283,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-post',
 		gutenberg_url( 'build/edit-post/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -367,15 +367,6 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
 
-	gutenberg_override_style(
-		$styles,
-		'wp-nux',
-		gutenberg_url( 'build/nux/style.css' ),
-		array( 'wp-components' ),
-		$version
-	);
-	$styles->add_data( 'wp-nux', 'rtl', 'replace' );
-
 	gutenberg_override_style(
 		$styles,
 		'wp-block-library-theme',
@@ -558,13 +549,15 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		'react',
 		gutenberg_url( 'build/vendors/react' . $extension ),
 		// See https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react.
-		SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' )
+		SCRIPT_DEBUG ? array( 'wp-react-refresh-entry', 'wp-polyfill' ) : array( 'wp-polyfill' ),
+		'18'
 	);
 	gutenberg_override_script(
 		$scripts,
 		'react-dom',
 		gutenberg_url( 'build/vendors/react-dom' . $extension ),
-		array( 'react' )
+		array( 'react' ),
+		'18'
 	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
diff --git a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
index e911b0f1e4d203..f0416e0a50e96f 100644
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
+++ b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
@@ -55,7 +55,7 @@ public function register_routes() {
 	 * @return WP_REST_Response|WP_Error
 	 */
 	public function get_template_fallback( $request ) {
-		$hierarchy         = get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] );
+		$hierarchy         = gutenberg_get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] );
 		$fallback_template = resolve_block_template( $request['slug'], $hierarchy, '' );
 		$response          = $this->prepare_item_for_response( $fallback_template, $request );
 		return rest_ensure_response( $response );
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
deleted file mode 100644
index 1d4a83e3406fbe..00000000000000
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php
+++ /dev/null
@@ -1,191 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_6_1 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_6_1 extends WP_Theme_JSON_Resolver {
-
-	/**
-	 * Container for data coming from core.
-	 *
-	 * @since 5.8.0
-	 * @var WP_Theme_JSON
-	 */
-	protected static $core = null;
-
-	/**
-	 * Given a theme.json structure modifies it in place
-	 * to update certain values by its translated strings
-	 * according to the language set by the user.
-	 *
-	 * @param array  $theme_json The theme.json to translate.
-	 * @param string $domain     Optional. Text domain. Unique identifier for retrieving translated strings.
-	 *                           Default 'default'.
-	 * @return array Returns the modified $theme_json_structure.
-	 */
-	protected static function translate( $theme_json, $domain = 'default' ) {
-		if ( null === static::$i18n_schema ) {
-			$i18n_schema         = wp_json_file_decode( __DIR__ . '/theme-i18n.json' );
-			static::$i18n_schema = null === $i18n_schema ? array() : $i18n_schema;
-		}
-
-		return translate_settings_using_i18n_schema( static::$i18n_schema, $theme_json, $domain );
-	}
-
-	/**
-	 * Return core's origin config.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds core data.
-	 */
-	public static function get_core_data() {
-		if ( null !== static::$core ) {
-			return static::$core;
-		}
-
-		$config = static::read_json_file( __DIR__ . '/theme.json' );
-		$config = static::translate( $config );
-		/**
-		 * Filters the default data provided by WordPress for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json   = apply_filters( 'wp_theme_json_data_default', new WP_Theme_JSON_Data_Gutenberg( $config, 'default' ) );
-		$config       = $theme_json->get_data();
-		static::$core = new WP_Theme_JSON_Gutenberg( $config, 'default' );
-
-		return static::$core;
-	}
-
-	/**
-	 * Returns the user's origin config.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
-	 */
-	public static function get_user_data() {
-		if ( null !== static::$user ) {
-			return static::$user;
-		}
-
-		$config   = array();
-		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
-
-		if ( array_key_exists( 'post_content', $user_cpt ) ) {
-			$decoded_data = json_decode( $user_cpt['post_content'], true );
-
-			$json_decoding_error = json_last_error();
-			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
-				/**
-				 * Filters the data provided by the user for global styles & settings.
-				 *
-				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-				 */
-				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-			}
-
-			// Very important to verify if the flag isGlobalStylesUserThemeJSON is true.
-			// If is not true the content was not escaped and is not safe.
-			if (
-				is_array( $decoded_data ) &&
-				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
-				$decoded_data['isGlobalStylesUserThemeJSON']
-			) {
-				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
-				$config = $decoded_data;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the user for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json   = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-		$config       = $theme_json->get_data();
-		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-
-		return static::$user;
-	}
-
-	/**
-	 * Returns the custom post type that contains the user's origin config
-	 * for the active theme or a void array if none are found.
-	 *
-	 * This can also create and return a new draft custom post type.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_Theme $theme              The theme object. If empty, it
-	 *                                     defaults to the active theme.
-	 * @param bool     $create_post        Optional. Whether a new custom post
-	 *                                     type should be created if none are
-	 *                                     found. Default false.
-	 * @param array    $post_status_filter Optional. Filter custom post type by
-	 *                                     post status. Default `array( 'publish' )`,
-	 *                                     so it only fetches published posts.
-	 * @return array Custom Post Type for the user's origin config.
-	 */
-	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
-		if ( ! $theme instanceof WP_Theme ) {
-			$theme = wp_get_theme();
-		}
-		$user_cpt         = array();
-		$post_type_filter = 'wp_global_styles';
-		$stylesheet       = $theme->get_stylesheet();
-		$args             = array(
-			'posts_per_page'      => 1,
-			'orderby'             => 'date',
-			'order'               => 'desc',
-			'post_type'           => $post_type_filter,
-			'post_status'         => $post_status_filter,
-			'ignore_sticky_posts' => true,
-			'no_found_rows'       => true,
-			'tax_query'           => array(
-				array(
-					'taxonomy' => 'wp_theme',
-					'field'    => 'name',
-					'terms'    => $stylesheet,
-				),
-			),
-		);
-
-		$global_style_query = new WP_Query();
-		$recent_posts       = $global_style_query->query( $args );
-		if ( count( $recent_posts ) === 1 ) {
-			$user_cpt = get_post( $recent_posts[0], ARRAY_A );
-		} elseif ( $create_post ) {
-			$cpt_post_id = wp_insert_post(
-				array(
-					'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-					'post_status'  => 'publish',
-					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
-					'post_type'    => $post_type_filter,
-					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
-					'tax_input'    => array(
-						'wp_theme' => array( $stylesheet ),
-					),
-				),
-				true
-			);
-			if ( ! is_wp_error( $cpt_post_id ) ) {
-				$user_cpt = get_post( $cpt_post_id, ARRAY_A );
-			}
-		}
-
-		return $user_cpt;
-	}
-}
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
index 1e529faf963210..13d9af96220494 100644
--- a/lib/compat/wordpress-6.2/block-patterns.php
+++ b/lib/compat/wordpress-6.2/block-patterns.php
@@ -225,6 +225,7 @@ function gutenberg_register_theme_block_patterns() {
 		'blockTypes'    => 'Block Types',
 		'postTypes'     => 'Post Types',
 		'inserter'      => 'Inserter',
+		'templateTypes' => 'Template Types',
 	);
 
 	/*
@@ -294,7 +295,7 @@ function gutenberg_register_theme_block_patterns() {
 					}
 
 					// For properties of type array, parse data as comma-separated.
-					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes' ) as $property ) {
+					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes', 'templateTypes' ) as $property ) {
 						if ( ! empty( $pattern_data[ $property ] ) ) {
 							$pattern_data[ $property ] = array_filter(
 								preg_split(
diff --git a/lib/compat/wordpress-6.2/block-template-utils.php b/lib/compat/wordpress-6.2/block-template-utils.php
new file mode 100644
index 00000000000000..832b9714dd13d3
--- /dev/null
+++ b/lib/compat/wordpress-6.2/block-template-utils.php
@@ -0,0 +1,112 @@
+<?php
+/**
+ * Temporary compatibility shims for features present in Gutenberg.
+ * This file should be removed when WordPress 6.1.0 becomes the lowest
+ * supported version by this plugin.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Helper function to get the Template Hierarchy for a given slug.
+ * We need to Handle special cases here like `front-page`, `singular` and `archive` templates.
+ *
+ * Noting that we always add `index` as the last fallback template.
+ *
+ * @param string  $slug            The template slug to be created.
+ * @param boolean $is_custom       Indicates if a template is custom or part of the template hierarchy.
+ * @param string  $template_prefix The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`.
+ *
+ * @return array<string> The template hierarchy.
+ */
+function gutenberg_get_template_hierarchy( $slug, $is_custom = false, $template_prefix = '' ) {
+	if ( 'index' === $slug ) {
+		return array( 'index' );
+	}
+	if ( $is_custom ) {
+		return array( 'page', 'singular', 'index' );
+	}
+	if ( 'front-page' === $slug ) {
+		return array( 'front-page', 'home', 'index' );
+	}
+
+	$template_hierarchy = array( $slug );
+	// Most default templates don't have `$template_prefix` assigned.
+	if ( ! empty( $template_prefix ) ) {
+		list($type) = explode( '-', $template_prefix );
+		// We need these checks because we always add the `$slug` above.
+		if ( ! in_array( $template_prefix, array( $slug, $type ), true ) ) {
+			$template_hierarchy[] = $template_prefix;
+		}
+		if ( $slug !== $type ) {
+			$template_hierarchy[] = $type;
+		}
+	} else {
+		$matches = array();
+		if ( preg_match( '/^(author|category|archive|tag|page)-(.+)$/', $slug, $matches ) ) {
+			$template_hierarchy[] = $matches[1];
+		} elseif ( preg_match( '/^(single|taxonomy)-(.+)$/', $slug, $matches ) ) {
+			$type           = $matches[1];
+			$slug_remaining = $matches[2];
+			if ( 'single' === $type ) {
+				$post_types = get_post_types();
+				foreach ( $post_types as $post_type ) {
+					if ( str_starts_with( $slug_remaining, $post_type ) ) {
+						// If $slug_remaining is equal to $post_type we have the single-$post_type template.
+						if ( $slug_remaining === $post_type ) {
+							$template_hierarchy[] = 'single';
+							break;
+						}
+						// If $slug_remaining is single-$post_type-$slug template.
+						if ( str_starts_with( $slug_remaining, $post_type . '-' ) && strlen( $slug_remaining ) > strlen( $post_type ) + 1 ) {
+							$template_hierarchy[] = "single-$post_type";
+							$template_hierarchy[] = 'single';
+							break;
+						}
+					}
+				}
+			} elseif ( 'taxonomy' === $type ) {
+				$taxonomies = get_taxonomies();
+				foreach ( $taxonomies as $taxonomy ) {
+					if ( str_starts_with( $slug_remaining, $taxonomy ) ) {
+						// If $slug_remaining is equal to $taxonomy we have the taxonomy-$taxonomy template.
+						if ( $slug_remaining === $taxonomy ) {
+							$template_hierarchy[] = 'taxonomy';
+							break;
+						}
+						// If $slug_remaining is taxonomy-$taxonomy-$term template.
+						if ( str_starts_with( $slug_remaining, $taxonomy . '-' ) && strlen( $slug_remaining ) > strlen( $taxonomy ) + 1 ) {
+							$template_hierarchy[] = "taxonomy-$taxonomy";
+							$template_hierarchy[] = 'taxonomy';
+							break;
+						}
+					}
+				}
+			}
+		}
+	}
+	// Handle `archive` template.
+	if (
+		str_starts_with( $slug, 'author' ) ||
+		str_starts_with( $slug, 'taxonomy' ) ||
+		str_starts_with( $slug, 'category' ) ||
+		str_starts_with( $slug, 'tag' ) ||
+		'date' === $slug
+	) {
+		$template_hierarchy[] = 'archive';
+	}
+	// Handle `single` template.
+	if ( 'attachment' === $slug ) {
+		$template_hierarchy[] = 'single';
+	}
+	// Handle `singular` template.
+	if (
+		str_starts_with( $slug, 'single' ) ||
+		str_starts_with( $slug, 'page' ) ||
+		'attachment' === $slug
+	) {
+		$template_hierarchy[] = 'singular';
+	}
+	$template_hierarchy[] = 'index';
+	return $template_hierarchy;
+}
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
index d34160edb2af0b..604818fcd30a70 100644
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
@@ -34,6 +34,128 @@ class Gutenberg_REST_Block_Patterns_Controller_6_2 extends Gutenberg_REST_Block_
 		'query'   => 'posts',
 	);
 
+	/**
+	 * Prepare a raw block pattern before it gets output in a REST API response.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param array           $item    Raw pattern as registered, before any changes.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$fields = $this->get_fields_for_response( $request );
+		$keys   = array(
+			'name'          => 'name',
+			'title'         => 'title',
+			'description'   => 'description',
+			'viewportWidth' => 'viewport_width',
+			'blockTypes'    => 'block_types',
+			'postTypes'     => 'post_types',
+			'categories'    => 'categories',
+			'keywords'      => 'keywords',
+			'content'       => 'content',
+			'inserter'      => 'inserter',
+			'templateTypes' => 'template_types',
+		);
+		$data   = array();
+		foreach ( $keys as $item_key => $rest_key ) {
+			if ( isset( $item[ $item_key ] ) && rest_is_field_included( $rest_key, $fields ) ) {
+				$data[ $rest_key ] = $item[ $item_key ];
+			}
+		}
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Retrieves the block pattern schema, conforming to JSON Schema.
+	 *
+	 * @since 6.0.0
+	 * @since 6.1.0 Added `post_types` property.
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		$schema = array(
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => 'block-pattern',
+			'type'       => 'object',
+			'properties' => array(
+				'name'           => array(
+					'description' => __( 'The pattern name.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'title'          => array(
+					'description' => __( 'The pattern title, in human readable format.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'description'    => array(
+					'description' => __( 'The pattern detailed description.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'viewport_width' => array(
+					'description' => __( 'The pattern viewport width for inserter preview.', 'gutenberg' ),
+					'type'        => 'number',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'block_types'    => array(
+					'description' => __( 'Block types that the pattern is intended to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'post_types'     => array(
+					'description' => __( 'An array of post types that the pattern is restricted to be used with.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'categories'     => array(
+					'description' => __( 'The pattern category slugs.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'keywords'       => array(
+					'description' => __( 'The pattern keywords.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'template_types' => array(
+					'description' => __( 'An array of template types where the pattern fits.', 'gutenberg' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'content'        => array(
+					'description' => __( 'The pattern content.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'inserter'       => array(
+					'description' => __( 'Determines whether the pattern is visible in inserter.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			),
+		);
+
+		return $this->add_additional_fields_schema( $schema );
+	}
+
 	/**
 	 * Registers the routes for the objects of the controller.
 	 *
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
index 9f762dd961d058..643374aba490cc 100644
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-global-styles-controller-6-2.php
@@ -151,10 +151,12 @@ protected function prepare_item_for_database( $request ) {
 		if ( isset( $request['styles'] ) || isset( $request['settings'] ) ) {
 			$config = array();
 			if ( isset( $request['styles'] ) ) {
-				$config['styles']    = $request['styles'];
-				$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
-				if ( is_wp_error( $validate_custom_css ) ) {
-					return $validate_custom_css;
+				$config['styles'] = $request['styles'];
+				if ( isset( $request['styles']['css'] ) ) {
+					$validate_custom_css = $this->validate_custom_css( $request['styles']['css'] );
+					if ( is_wp_error( $validate_custom_css ) ) {
+						return $validate_custom_css;
+					}
 				}
 			} elseif ( isset( $existing_config['styles'] ) ) {
 				$config['styles'] = $existing_config['styles'];
@@ -199,4 +201,55 @@ private function validate_custom_css( $css ) {
 		}
 		return true;
 	}
+
+	/**
+	 * Returns the given theme global styles config.
+	 * Duplicated from core.
+	 * The only change is that we call WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' ) instead of WP_Theme_JSON_Resolver::get_merged_data( 'theme' ).
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_theme_item( $request ) {
+		if ( get_stylesheet() !== $request['stylesheet'] ) {
+			// This endpoint only supports the active theme for now.
+			return new WP_Error(
+				'rest_theme_not_found',
+				__( 'Theme not found.', 'gutenberg' ),
+				array( 'status' => 404 )
+			);
+		}
+
+		$theme  = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' );
+		$data   = array();
+		$fields = $this->get_fields_for_response( $request );
+
+		if ( rest_is_field_included( 'settings', $fields ) ) {
+			$data['settings'] = $theme->get_settings();
+		}
+
+		if ( rest_is_field_included( 'styles', $fields ) ) {
+			$raw_data       = $theme->get_raw_data();
+			$data['styles'] = isset( $raw_data['styles'] ) ? $raw_data['styles'] : array();
+		}
+
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links = array(
+				'self' => array(
+					'href' => rest_url( sprintf( '%s/%s/themes/%s', $this->namespace, $this->rest_base, $request['stylesheet'] ) ),
+				),
+			);
+			$response->add_links( $links );
+		}
+
+		return $response;
+	}
 }
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
deleted file mode 100644
index fe01eb273066e2..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
+++ /dev/null
@@ -1,391 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_6_2 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that encapsulates the processing of structures that adhere to the theme.json spec.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
-	const APPEARANCE_TOOLS_OPT_INS = array(
-		array( 'border', 'color' ),
-		array( 'border', 'radius' ),
-		array( 'border', 'style' ),
-		array( 'border', 'width' ),
-		array( 'color', 'link' ),
-		array( 'dimensions', 'minHeight' ),
-		array( 'spacing', 'blockGap' ),
-		array( 'spacing', 'margin' ),
-		array( 'spacing', 'padding' ),
-		array( 'typography', 'lineHeight' ),
-	);
-
-	/**
-	 * Metadata for style properties.
-	 *
-	 * Each element is a direct mapping from the CSS property name to the
-	 * path to the value in theme.json & block attributes.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
-	 *              `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
-	 *              `text-decoration`, `text-transform`, and `filter` properties,
-	 *              simplified the metadata structure.
-	 * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
-	 *              `--wp--style--root--padding-*`, and `box-shadow` properties,
-	 *              removed the `--wp--style--block-gap` property.
-	 * @since 6.2.0 Added `min-height`.
-	 * @var array
-	 */
-	const PROPERTIES_METADATA = array(
-		'background'                        => array( 'color', 'gradient' ),
-		'background-color'                  => array( 'color', 'background' ),
-		'border-radius'                     => array( 'border', 'radius' ),
-		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
-		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
-		'border-bottom-left-radius'         => array( 'border', 'radius', 'bottomLeft' ),
-		'border-bottom-right-radius'        => array( 'border', 'radius', 'bottomRight' ),
-		'border-color'                      => array( 'border', 'color' ),
-		'border-width'                      => array( 'border', 'width' ),
-		'border-style'                      => array( 'border', 'style' ),
-		'border-top-color'                  => array( 'border', 'top', 'color' ),
-		'border-top-width'                  => array( 'border', 'top', 'width' ),
-		'border-top-style'                  => array( 'border', 'top', 'style' ),
-		'border-right-color'                => array( 'border', 'right', 'color' ),
-		'border-right-width'                => array( 'border', 'right', 'width' ),
-		'border-right-style'                => array( 'border', 'right', 'style' ),
-		'border-bottom-color'               => array( 'border', 'bottom', 'color' ),
-		'border-bottom-width'               => array( 'border', 'bottom', 'width' ),
-		'border-bottom-style'               => array( 'border', 'bottom', 'style' ),
-		'border-left-color'                 => array( 'border', 'left', 'color' ),
-		'border-left-width'                 => array( 'border', 'left', 'width' ),
-		'border-left-style'                 => array( 'border', 'left', 'style' ),
-		'color'                             => array( 'color', 'text' ),
-		'font-family'                       => array( 'typography', 'fontFamily' ),
-		'font-size'                         => array( 'typography', 'fontSize' ),
-		'font-style'                        => array( 'typography', 'fontStyle' ),
-		'font-weight'                       => array( 'typography', 'fontWeight' ),
-		'letter-spacing'                    => array( 'typography', 'letterSpacing' ),
-		'line-height'                       => array( 'typography', 'lineHeight' ),
-		'margin'                            => array( 'spacing', 'margin' ),
-		'margin-top'                        => array( 'spacing', 'margin', 'top' ),
-		'margin-right'                      => array( 'spacing', 'margin', 'right' ),
-		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
-		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
-		'min-height'                        => array( 'dimensions', 'minHeight' ),
-		'padding'                           => array( 'spacing', 'padding' ),
-		'padding-top'                       => array( 'spacing', 'padding', 'top' ),
-		'padding-right'                     => array( 'spacing', 'padding', 'right' ),
-		'padding-bottom'                    => array( 'spacing', 'padding', 'bottom' ),
-		'padding-left'                      => array( 'spacing', 'padding', 'left' ),
-		'--wp--style--root--padding'        => array( 'spacing', 'padding' ),
-		'--wp--style--root--padding-top'    => array( 'spacing', 'padding', 'top' ),
-		'--wp--style--root--padding-right'  => array( 'spacing', 'padding', 'right' ),
-		'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
-		'--wp--style--root--padding-left'   => array( 'spacing', 'padding', 'left' ),
-		'text-decoration'                   => array( 'typography', 'textDecoration' ),
-		'text-transform'                    => array( 'typography', 'textTransform' ),
-		'filter'                            => array( 'filter', 'duotone' ),
-		'box-shadow'                        => array( 'shadow' ),
-	);
-
-	/**
-	 * Indirect metadata for style properties that are not directly output.
-	 *
-	 * Each element is a direct mapping from a CSS property name to the
-	 * path to the value in theme.json & block attributes.
-	 *
-	 * Indirect properties are not output directly by `compute_style_properties`,
-	 * but are used elsewhere in the processing of global styles. The indirect
-	 * property is used to validate whether or not a style value is allowed.
-	 *
-	 * @since 6.2.0
-	 * @var array
-	 */
-	const INDIRECT_PROPERTIES_METADATA = array(
-		'gap'        => array( 'spacing', 'blockGap' ),
-		'column-gap' => array( 'spacing', 'blockGap', 'left' ),
-		'row-gap'    => array( 'spacing', 'blockGap', 'top' ),
-	);
-
-	/**
-	 * The valid properties under the settings key.
-	 *
-	 * @since 5.8.0 As `ALLOWED_SETTINGS`.
-	 * @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
-	 *              added new properties for `border`, `color`, `spacing`,
-	 *              and `typography`, and renamed others according to the new schema.
-	 * @since 6.0.0 Added `color.defaultDuotone`.
-	 * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
-	 * @since 6.2.0 Added `dimensions.minHeight`.
-	 * @var array
-	 */
-	const VALID_SETTINGS = array(
-		'appearanceTools'               => null,
-		'useRootPaddingAwareAlignments' => null,
-		'border'                        => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-		),
-		'color'                         => array(
-			'background'       => null,
-			'custom'           => null,
-			'customDuotone'    => null,
-			'customGradient'   => null,
-			'defaultDuotone'   => null,
-			'defaultGradients' => null,
-			'defaultPalette'   => null,
-			'duotone'          => null,
-			'gradients'        => null,
-			'link'             => null,
-			'palette'          => null,
-			'text'             => null,
-		),
-		'custom'                        => null,
-		'dimensions'                    => array(
-			'minHeight' => null,
-		),
-		'layout'                        => array(
-			'contentSize' => null,
-			'definitions' => null,
-			'wideSize'    => null,
-		),
-		'spacing'                       => array(
-			'customSpacingSize' => null,
-			'spacingSizes'      => null,
-			'spacingScale'      => null,
-			'blockGap'          => null,
-			'margin'            => null,
-			'padding'           => null,
-			'units'             => null,
-		),
-		'typography'                    => array(
-			'fluid'          => null,
-			'customFontSize' => null,
-			'dropCap'        => null,
-			'fontFamilies'   => null,
-			'fontSizes'      => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-	);
-
-	/**
-	 * The valid properties under the styles key.
-	 *
-	 * @since 5.8.0 As `ALLOWED_STYLES`.
-	 * @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
-	 *              added new properties for `border`, `filter`, `spacing`,
-	 *              and `typography`.
-	 * @since 6.1.0 Added new side properties for `border`,
-	 *              added new property `shadow`,
-	 *              updated `blockGap` to be allowed at any level.
-	 * @since 6.2.0 Added new property `css`.
-	 * @var array
-	 */
-	const VALID_STYLES = array(
-		'border'     => array(
-			'color'  => null,
-			'radius' => null,
-			'style'  => null,
-			'width'  => null,
-			'top'    => null,
-			'right'  => null,
-			'bottom' => null,
-			'left'   => null,
-		),
-		'color'      => array(
-			'background' => null,
-			'gradient'   => null,
-			'text'       => null,
-		),
-		'dimensions' => array(
-			'minHeight' => null,
-		),
-		'filter'     => array(
-			'duotone' => null,
-		),
-		'shadow'     => null,
-		'spacing'    => array(
-			'margin'   => null,
-			'padding'  => null,
-			'blockGap' => null,
-		),
-		'typography' => array(
-			'fontFamily'     => null,
-			'fontSize'       => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-		'css'        => null,
-	);
-
-	/**
-	 * Processes a style node and returns the same node
-	 * without the insecure styles.
-	 *
-	 * @since 5.9.0
-	 * @since 6.2.0 Allow indirect properties used outside of `compute_style_properties`.
-	 *
-	 * @param array $input Node to process.
-	 * @return array
-	 */
-	protected static function remove_insecure_styles( $input ) {
-		$output       = array();
-		$declarations = static::compute_style_properties( $input );
-
-		foreach ( $declarations as $declaration ) {
-			if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
-				$path = static::PROPERTIES_METADATA[ $declaration['name'] ];
-
-				// Check the value isn't an array before adding so as to not
-				// double up shorthand and longhand styles.
-				$value = _wp_array_get( $input, $path, array() );
-				if ( ! is_array( $value ) ) {
-					_wp_array_set( $output, $path, $value );
-				}
-			}
-		}
-
-		// Ensure indirect properties not handled by `compute_style_properties` are allowed.
-		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $path ) {
-			$value = _wp_array_get( $input, $path, array() );
-			if (
-				isset( $value ) &&
-				! is_array( $value ) &&
-				static::is_safe_css_declaration( $property, $value )
-			) {
-				_wp_array_set( $output, $path, $value );
-			}
-		}
-
-		return $output;
-	}
-
-	/**
-	 * Returns the stylesheet that results of processing
-	 * the theme.json structure this object represents.
-	 *
-	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
-	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
-	 *                         'styles': only the styles section in theme.json.
-	 *                         'presets': only the classes for the presets.
-	 *                         'custom-css': only the css from global styles.css.
-	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
-	 * @param array $options An array of options for now used for internal purposes only (may change without notice).
-	 *                       The options currently supported are 'scope' that makes sure all style are scoped to a given selector,
-	 *                       and root_selector which overwrites and forces a given selector to be used on the root node.
-	 * @return string Stylesheet.
-	 */
-	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
-		if ( null === $origins ) {
-			$origins = static::VALID_ORIGINS;
-		}
-
-		if ( is_string( $types ) ) {
-			// Dispatch error and map old arguments to new ones.
-			_deprecated_argument( __FUNCTION__, '5.9' );
-			if ( 'block_styles' === $types ) {
-				$types = array( 'styles', 'presets' );
-			} elseif ( 'css_variables' === $types ) {
-				$types = array( 'variables' );
-			} else {
-				$types = array( 'variables', 'styles', 'presets' );
-			}
-		}
-
-		$blocks_metadata = static::get_blocks_metadata();
-		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
-		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
-
-		$root_style_key    = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
-		$root_settings_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $setting_nodes, 'selector' ), true );
-
-		if ( ! empty( $options['scope'] ) ) {
-			foreach ( $setting_nodes as &$node ) {
-				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
-			}
-			foreach ( $style_nodes as &$node ) {
-				$node['selector'] = static::scope_selector( $options['scope'], $node['selector'] );
-			}
-		}
-
-		if ( ! empty( $options['root_selector'] ) ) {
-			if ( false !== $root_settings_key ) {
-				$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
-			}
-			if ( false !== $root_style_key ) {
-				$setting_nodes[ $root_style_key ]['selector'] = $options['root_selector'];
-			}
-		}
-
-		$stylesheet = '';
-
-		if ( in_array( 'variables', $types, true ) ) {
-			$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
-		}
-
-		if ( in_array( 'styles', $types, true ) ) {
-			if ( false !== $root_style_key ) {
-				$stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
-			}
-			$stylesheet .= $this->get_block_classes( $style_nodes );
-		} elseif ( in_array( 'base-layout-styles', $types, true ) ) {
-			$root_selector    = static::ROOT_BLOCK_SELECTOR;
-			$columns_selector = '.wp-block-columns';
-			if ( ! empty( $options['scope'] ) ) {
-				$root_selector    = static::scope_selector( $options['scope'], $root_selector );
-				$columns_selector = static::scope_selector( $options['scope'], $columns_selector );
-			}
-			if ( ! empty( $options['root_selector'] ) ) {
-				$root_selector = $options['root_selector'];
-			}
-			// Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
-			// For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
-			$base_styles_nodes = array(
-				array(
-					'path'     => array( 'styles' ),
-					'selector' => $root_selector,
-				),
-				array(
-					'path'     => array( 'styles', 'blocks', 'core/columns' ),
-					'selector' => $columns_selector,
-					'name'     => 'core/columns',
-				),
-			);
-
-			foreach ( $base_styles_nodes as $base_style_node ) {
-				$stylesheet .= $this->get_layout_styles( $base_style_node );
-			}
-		}
-
-		if ( in_array( 'presets', $types, true ) ) {
-			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
-		}
-
-		// Load the custom CSS last so it has the highest specificity.
-		if ( in_array( 'custom-css', $types, true ) ) {
-			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
-		}
-
-		return $stylesheet;
-	}
-}
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
deleted file mode 100644
index 110c8bac7b147c..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
+++ /dev/null
@@ -1,230 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_6_1 class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_6_2 extends WP_Theme_JSON_Resolver_6_1 {
-
-	/**
-	 * Returns the custom post type that contains the user's origin config
-	 * for the active theme or a void array if none are found.
-	 *
-	 * This can also create and return a new draft custom post type.
-	 *
-	 * @param WP_Theme $theme              The theme object. If empty, it
-	 *                                     defaults to the active theme.
-	 * @param bool     $create_post        Optional. Whether a new custom post
-	 *                                     type should be created if none are
-	 *                                     found. Default false.
-	 * @param array    $post_status_filter Optional. Filter custom post type by
-	 *                                     post status. Default `array( 'publish' )`,
-	 *                                     so it only fetches published posts.
-	 * @return array Custom Post Type for the user's origin config.
-	 */
-	public static function get_user_data_from_wp_global_styles( $theme, $create_post = false, $post_status_filter = array( 'publish' ) ) {
-		if ( ! $theme instanceof WP_Theme ) {
-			$theme = wp_get_theme();
-		}
-
-		/*
-		 * Bail early if the theme does not support a theme.json.
-		 *
-		 * Since wp_theme_has_theme_json only supports the active
-		 * theme, the extra condition for whether $theme is the active theme is
-		 * present here.
-		 */
-		if ( $theme->get_stylesheet() === get_stylesheet() && ! wp_theme_has_theme_json() ) {
-			return array();
-		}
-
-		$user_cpt         = array();
-		$post_type_filter = 'wp_global_styles';
-		$stylesheet       = $theme->get_stylesheet();
-		$args             = array(
-			'posts_per_page'         => 1,
-			'orderby'                => 'date',
-			'order'                  => 'desc',
-			'post_type'              => $post_type_filter,
-			'post_status'            => $post_status_filter,
-			'ignore_sticky_posts'    => true,
-			'no_found_rows'          => true,
-			'update_post_meta_cache' => false,
-			'update_post_term_cache' => false,
-			'tax_query'              => array(
-				array(
-					'taxonomy' => 'wp_theme',
-					'field'    => 'name',
-					'terms'    => $stylesheet,
-				),
-			),
-		);
-
-		$global_style_query = new WP_Query();
-		$recent_posts       = $global_style_query->query( $args );
-		if ( count( $recent_posts ) === 1 ) {
-			$user_cpt = get_object_vars( $recent_posts[0] );
-		} elseif ( $create_post ) {
-			$cpt_post_id = wp_insert_post(
-				array(
-					'post_content' => '{"version": ' . WP_Theme_JSON::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-					'post_status'  => 'publish',
-					'post_title'   => 'Custom Styles', // Do not make string translatable, see https://core.trac.wordpress.org/ticket/54518.
-					'post_type'    => $post_type_filter,
-					'post_name'    => sprintf( 'wp-global-styles-%s', urlencode( $stylesheet ) ),
-					'tax_input'    => array(
-						'wp_theme' => array( $stylesheet ),
-					),
-				),
-				true
-			);
-			if ( ! is_wp_error( $cpt_post_id ) ) {
-				$user_cpt = get_object_vars( get_post( $cpt_post_id ) );
-			}
-		}
-
-		return $user_cpt;
-	}
-
-	/**
-	 * Determines whether the active theme has a theme.json file.
-	 *
-	 * @since 5.8.0
-	 * @since 5.9.0 Added a check in the parent theme.
-	 * @deprecated 6.2.0 Use wp_theme_has_theme_json() instead.
-	 *
-	 * @return bool
-	 */
-	public static function theme_has_support() {
-		_deprecated_function( __METHOD__, '6.2.0', 'wp_theme_has_theme_json()' );
-
-		return wp_theme_has_theme_json();
-	}
-
-	/**
-	 * Returns the data merged from multiple origins.
-	 *
-	 * There are four sources of data (origins) for a site:
-	 *
-	 * - default => WordPress
-	 * - blocks  => each one of the blocks provides data for itself
-	 * - theme   => the active theme
-	 * - custom  => data provided by the user
-	 *
-	 * The custom's has higher priority than the theme's, the theme's higher than blocks',
-	 * and block's higher than default's.
-	 *
-	 * Unlike the getters
-	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_core_data/ get_core_data},
-	 * {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_theme_data/ get_theme_data},
-	 * and {@link https://developer.wordpress.org/reference/classes/wp_theme_json_resolver/get_user_data/ get_user_data},
-	 * this method returns data after it has been merged with the previous origins.
-	 * This means that if the same piece of data is declared in different origins
-	 * (default, blocks, theme, custom), the last origin overrides the previous.
-	 *
-	 * For example, if the user has set a background color
-	 * for the paragraph block, and the theme has done it as well,
-	 * the user preference wins.
-	 *
-	 * @param string $origin Optional. To what level should we merge data:'default', 'blocks', 'theme' or 'custom'.
-	 *                       'custom' is used as default value as well as fallback value if the origin is unknown.
-	 *
-	 * @return WP_Theme_JSON
-	 */
-	public static function get_merged_data( $origin = 'custom' ) {
-		if ( is_array( $origin ) ) {
-			_deprecated_argument( __FUNCTION__, '5.9.0' );
-		}
-
-		$result = static::get_core_data();
-		if ( 'default' === $origin ) {
-			$result->set_spacing_sizes();
-			return $result;
-		}
-
-		$result->merge( static::get_block_data() );
-		if ( 'blocks' === $origin ) {
-			return $result;
-		}
-
-		$result->merge( static::get_theme_data() );
-		if ( 'theme' === $origin ) {
-			$result->set_spacing_sizes();
-			return $result;
-		}
-
-		$result->merge( static::get_user_data() );
-		$result->set_spacing_sizes();
-		return $result;
-	}
-
-	/**
-	 * Returns the user's origin config.
-	 *
-	 * @since 6.2 Added check for the WP_Theme_JSON_Gutenberg class to prevent $user
-	 * values set in core fron overriding the new custom css values added to VALID_STYLES.
-	 * This does not need to be backported to core as the new VALID_STYLES[css] value will
-	 * be added to core with 6.2.
-	 *
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
-	 */
-	public static function get_user_data() {
-		if ( null !== static::$user && static::$user instanceof WP_Theme_JSON_Gutenberg ) {
-			return static::$user;
-		}
-
-		$config   = array();
-		$user_cpt = static::get_user_data_from_wp_global_styles( wp_get_theme() );
-
-		if ( array_key_exists( 'post_content', $user_cpt ) ) {
-			$decoded_data = json_decode( $user_cpt['post_content'], true );
-
-			$json_decoding_error = json_last_error();
-			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
-				/**
-				 * Filters the data provided by the user for global styles & settings.
-				 *
-				 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-				 */
-				$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-				$config     = $theme_json->get_data();
-				return new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-			}
-
-			// Very important to verify if the flag isGlobalStylesUserThemeJSON is true.
-			// If is not true the content was not escaped and is not safe.
-			if (
-				is_array( $decoded_data ) &&
-				isset( $decoded_data['isGlobalStylesUserThemeJSON'] ) &&
-				$decoded_data['isGlobalStylesUserThemeJSON']
-			) {
-				unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
-				$config = $decoded_data;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the user for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
-		$config     = $theme_json->get_data();
-
-		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-
-		return static::$user;
-	}
-}
diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
index 8556a0be1663f4..4006b4c23cc0b1 100644
--- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
@@ -63,9 +63,10 @@ function wp_theme_has_theme_json_clean_cache() {
  * Returns the stylesheet resulting of merging core, theme, and user data.
  *
  * @param array $types Types of styles to load. Optional.
- *                     It accepts 'variables', 'styles', 'presets', 'custom-css' as values.
- *                     If empty, it'll load all for themes with theme.json support
- *                     and only [ 'variables', 'presets' ] for themes without theme.json support.
+ *                     It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles, and 'custom-css'.
+ *                     If empty, it'll load the following:
+ *                     - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
+ *                     - for temes with theme.json: 'variables', 'presets', 'styles', 'custom-css'.
  *
  * @return string Stylesheet.
  */
@@ -85,7 +86,7 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 	if ( empty( $types ) && ! $supports_theme_json ) {
 		$types = array( 'variables', 'presets', 'base-layout-styles' );
 	} elseif ( empty( $types ) ) {
-		$types = array( 'variables', 'styles', 'presets', 'custom-css' );
+		$types = array( 'variables', 'presets', 'styles', 'custom-css' );
 	}
 
 	/*
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 4900a622b6c01b..12f7afda3b4d5d 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -101,3 +101,18 @@ function gutenberg_register_global_styles_endpoints() {
 	$editor_settings->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
+
+/**
+ * Updates REST API response for the sidebars and marks them as 'inactive'.
+ *
+ * Note: This can be a part of the `prepare_item_for_response` in `class-wp-rest-sidebars-controller.php`.
+ *
+ * @param WP_REST_Response $response The sidebar response object.
+ * @return WP_REST_Response $response Updated response object.
+ */
+function gutenberg_modify_rest_sidebars_response( $response ) {
+	$response->data['status'] = wp_is_block_theme() ? 'inactive' : 'active';
+
+	return $response;
+}
+add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index e08bfa6e46ca8e..e3e11d9cf1f563 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -127,6 +127,30 @@ function gutenberg_resolve_assets_override() {
 
 	$scripts = ob_get_clean();
 
+	/*
+	 * Generate web font @font-face styles for the site editor iframe.
+	 * Use the registered font families for printing.
+	 */
+	if ( class_exists( 'WP_Web_Fonts' ) ) {
+		$wp_webfonts = wp_webfonts();
+		$registered  = $wp_webfonts->get_registered_font_families();
+		if ( ! empty( $registered ) ) {
+			$queue = $wp_webfonts->queue;
+			$done  = $wp_webfonts->done;
+
+			$wp_webfonts->done  = array();
+			$wp_webfonts->queue = $registered;
+
+			ob_start();
+			$wp_webfonts->do_items();
+			$styles .= ob_get_clean();
+
+			// Reset the Web Fonts API.
+			$wp_webfonts->done  = $done;
+			$wp_webfonts->queue = $queue;
+		}
+	}
+
 	return array(
 		'styles'  => $styles,
 		'scripts' => $scripts,
@@ -137,7 +161,8 @@ function gutenberg_resolve_assets_override() {
 	'block_editor_settings_all',
 	function( $settings ) {
 		// We must override what core is passing now.
-		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets_override();
+		$settings['__unstableResolvedAssets']    = gutenberg_resolve_assets_override();
+		$settings['__unstableIsBlockBasedTheme'] = wp_is_block_theme();
 		return $settings;
 	},
 	100
diff --git a/lib/compat/wordpress-6.2/theme.php b/lib/compat/wordpress-6.2/theme.php
new file mode 100644
index 00000000000000..79d55206449472
--- /dev/null
+++ b/lib/compat/wordpress-6.2/theme.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * Theme overrides for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Store legacy sidebars for later use by block themes.
+ *
+ * Note: This can be a part of the `switch_theme` method in `wp-includes/theme.php`.
+ *
+ * @param string   $new_name  Name of the new theme.
+ * @param WP_Theme $new_theme WP_Theme instance of the new theme.
+ */
+function gutenberg_set_legacy_sidebars( $new_name, $new_theme ) {
+	global $wp_registered_sidebars;
+
+	if ( $new_theme->is_block_theme() ) {
+		set_theme_mod( 'wp_legacy_sidebars', $wp_registered_sidebars );
+	}
+}
+add_action( 'switch_theme', 'gutenberg_set_legacy_sidebars', 10, 2 );
diff --git a/lib/compat/wordpress-6.2/widgets.php b/lib/compat/wordpress-6.2/widgets.php
new file mode 100644
index 00000000000000..19591ae64607e3
--- /dev/null
+++ b/lib/compat/wordpress-6.2/widgets.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Core Widget APIs for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( '_wp_block_theme_stub_sidebars' ) ) {
+	/**
+	 * Register the previous theme's sidebars for the block themes.
+	 *
+	 * @return void
+	 */
+	function _wp_block_theme_stub_sidebars() {
+		global $wp_registered_sidebars;
+
+		if ( ! wp_is_block_theme() ) {
+			return;
+		}
+
+		$legacy_sidebars = get_theme_mod( 'wp_legacy_sidebars' );
+		if ( empty( $legacy_sidebars ) ) {
+			return;
+		}
+
+		// Don't use `register_sidebar` since it will enable the `widgets` support for a theme.
+		foreach ( $legacy_sidebars as $sidebar ) {
+			$wp_registered_sidebars[ $sidebar['id'] ] = $sidebar;
+		}
+	}
+	add_action( 'widgets_init', '_wp_block_theme_stub_sidebars' );
+}
diff --git a/lib/experimental/block-editor-settings-mobile.php b/lib/experimental/block-editor-settings-mobile.php
index 91e3694c199f83..b9d1147d60f96c 100644
--- a/lib/experimental/block-editor-settings-mobile.php
+++ b/lib/experimental/block-editor-settings-mobile.php
@@ -23,7 +23,7 @@ function gutenberg_get_block_editor_settings_mobile( $settings ) {
 		'mobile' === $_GET['context']
 	) {
 		if ( wp_theme_has_theme_json() ) {
-			$settings['__experimentalStyles'] = gutenberg_get_global_styles();
+			$settings['__experimentalStyles'] = wp_get_global_styles();
 		}
 
 		// To tell mobile that the site uses quote v2 (inner blocks).
diff --git a/lib/experimental/class-wp-rest-block-editor-settings-controller.php b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
index d95fb497d3a0a3..7031a14e89ccac 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -174,6 +174,12 @@ public function get_item_schema() {
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
 
+				'__experimentalBlockInspectorAnimation'  => array(
+					'description' => __( 'Whether to enable animation when showing and hiding the block inspector.', 'gutenberg' ),
+					'type'        => 'object',
+					'context'     => array( 'site-editor' ),
+				),
+
 				'alignWide'                              => array(
 					'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ),
 					'type'        => 'boolean',
diff --git a/lib/experimental/class-wp-theme-json-gutenberg.php b/lib/experimental/class-wp-theme-json-gutenberg.php
deleted file mode 100644
index a16697dff07d07..00000000000000
--- a/lib/experimental/class-wp-theme-json-gutenberg.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Gutenberg class
- *
- * @package gutenberg
- */
-
-/**
- * Class that encapsulates the processing of structures that adhere to the theme.json spec.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_2 {
-	/**
-	 * Holds block metadata extracted from block.json
-	 * to be shared among all instances so we don't
-	 * process it twice.
-	 *
-	 * It is necessary to redefine $blocks_metadata here so that it
-	 * doesn't get inherited from an earlier instantiation of the
-	 * parent class.
-	 *
-	 * @since 5.8.0
-	 * @var array
-	 */
-	protected static $blocks_metadata = null;
-}
diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
deleted file mode 100644
index 566f6c4e4501e6..00000000000000
--- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
+++ /dev/null
@@ -1,177 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_Gutenberg class
- *
- * @package gutenberg
- */
-
-/**
- * Class that abstracts the processing of the different data sources
- * for site-level config and offers an API to work with them.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
-class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_2 {
-	/**
-	 * Returns the theme's data.
-	 *
-	 * Data from theme.json will be backfilled from existing
-	 * theme supports, if any. Note that if the same data
-	 * is present in theme.json and in theme supports,
-	 * the theme.json takes precedence.
-	 *
-	 * @param array $deprecated Deprecated argument.
-	 * @param array $settings Contains a key called with_supports to determine whether to include theme supports in the data.
-	 * @return WP_Theme_JSON_Gutenberg Entity that holds theme data.
-	 */
-	public static function get_theme_data( $deprecated = array(), $settings = array( 'with_supports' => true ) ) {
-		if ( ! empty( $deprecated ) ) {
-			_deprecated_argument( __METHOD__, '5.9' );
-		}
-
-		// When backporting to core, remove the instanceof Gutenberg class check, as it is only required for the Gutenberg plugin.
-		if ( null === static::$theme || ! static::has_same_registered_blocks( 'theme' ) ) {
-			$theme_json_file = static::get_file_path_from_theme( 'theme.json' );
-			$wp_theme        = wp_get_theme();
-			if ( '' !== $theme_json_file ) {
-				$theme_json_data = static::read_json_file( $theme_json_file );
-				$theme_json_data = static::translate( $theme_json_data, $wp_theme->get( 'TextDomain' ) );
-			} else {
-				$theme_json_data = array();
-			}
-			$theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $theme_json_data );
-
-			/**
-			 * Filters the data provided by the theme for global styles & settings.
-			 *
-			 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-			 */
-			$theme_json      = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
-			$theme_json_data = $theme_json->get_data();
-			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
-
-			if ( $wp_theme->parent() ) {
-				// Get parent theme.json.
-				$parent_theme_json_file = static::get_file_path_from_theme( 'theme.json', true );
-				if ( '' !== $parent_theme_json_file ) {
-					$parent_theme_json_data = static::read_json_file( $parent_theme_json_file );
-					$parent_theme_json_data = gutenberg_add_registered_webfonts_to_theme_json( $parent_theme_json_data );
-					$parent_theme           = new WP_Theme_JSON_Gutenberg( $parent_theme_json_data );
-
-					/*
-					 * Merge the child theme.json into the parent theme.json.
-					 * The child theme takes precedence over the parent.
-					 */
-					$parent_theme->merge( static::$theme );
-					static::$theme = $parent_theme;
-				}
-			}
-		}
-
-		if ( ! $settings['with_supports'] ) {
-			return static::$theme;
-		}
-
-		/*
-		 * We want the presets and settings declared in theme.json
-		 * to override the ones declared via theme supports.
-		 * So we take theme supports, transform it to theme.json shape
-		 * and merge the static::$theme upon that.
-		 */
-		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( gutenberg_get_legacy_theme_supports_for_theme_json() );
-		if ( ! wp_theme_has_theme_json() ) {
-			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
-				$theme_support_data['settings']['color'] = array();
-			}
-
-			$default_palette = false;
-			if ( current_theme_supports( 'default-color-palette' ) ) {
-				$default_palette = true;
-			}
-			if ( ! isset( $theme_support_data['settings']['color']['palette'] ) ) {
-				// If the theme does not have any palette, we still want to show the core one.
-				$default_palette = true;
-			}
-			$theme_support_data['settings']['color']['defaultPalette'] = $default_palette;
-
-			$default_gradients = false;
-			if ( current_theme_supports( 'default-gradient-presets' ) ) {
-				$default_gradients = true;
-			}
-			if ( ! isset( $theme_support_data['settings']['color']['gradients'] ) ) {
-				// If the theme does not have any gradients, we still want to show the core ones.
-				$default_gradients = true;
-			}
-			$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;
-
-			// Classic themes without a theme.json don't support global duotone.
-			$theme_support_data['settings']['color']['defaultDuotone'] = false;
-
-			// Allow themes to enable appearance tools via theme_support.
-			if ( current_theme_supports( 'appearance-tools' ) ) {
-				$theme_support_data['settings']['appearanceTools'] = true;
-			}
-		}
-		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
-		$with_theme_supports->merge( static::$theme );
-
-		return $with_theme_supports;
-	}
-
-	/**
-	 * Gets the styles for blocks from the block.json file.
-	 *
-	 * @return WP_Theme_JSON
-	 */
-	public static function get_block_data() {
-		$registry = WP_Block_Type_Registry::get_instance();
-		$blocks   = $registry->get_all_registered();
-		$config   = array( 'version' => 1 );
-		foreach ( $blocks as $block_name => $block_type ) {
-			if ( isset( $block_type->supports['__experimentalStyle'] ) ) {
-				$config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] );
-			}
-
-			if (
-				isset( $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ) &&
-				null === _wp_array_get( $config, array( 'styles', 'blocks', $block_name, 'spacing', 'blockGap' ), null )
-			) {
-				// Ensure an empty placeholder value exists for the block, if it provides a default blockGap value.
-				// The real blockGap value to be used will be determined when the styles are rendered for output.
-				$config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] = null;
-			}
-		}
-
-		/**
-		 * Filters the data provided by the blocks for global styles & settings.
-		 *
-		 * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
-		 */
-		$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
-		$config     = $theme_json->get_data();
-
-		return new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
-	}
-
-	/**
-	 * When given an array, this will remove any keys with the name `//`.
-	 *
-	 * @param array $array The array to filter.
-	 * @return array The filtered array.
-	 */
-	private static function remove_JSON_comments( $array ) {
-		unset( $array['//'] );
-		foreach ( $array as $k => $v ) {
-			if ( is_array( $v ) ) {
-				$array[ $k ] = static::remove_JSON_comments( $v );
-			}
-		}
-
-		return $array;
-	}
-
-}
diff --git a/lib/experimental/class-wp-web-fonts.php b/lib/experimental/class-wp-web-fonts.php
new file mode 100644
index 00000000000000..15df7ecf47e5c5
--- /dev/null
+++ b/lib/experimental/class-wp-web-fonts.php
@@ -0,0 +1,744 @@
+<?php
+/**
+ * Web Fonts API class.
+ *
+ * @package    WordPress
+ * @subpackage WebFonts
+ * @since      X.X.X
+ */
+
+if ( class_exists( 'WP_Web_Fonts' ) ) {
+	return;
+}
+
+/**
+ * Class WP_Web_Fonts
+ *
+ * @since X.X.X
+ */
+class WP_Web_Fonts extends WP_Webfonts {
+
+	/**
+	 * An array of registered providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $providers = array();
+
+	/**
+	 * The flipped $to_do array of web font handles.
+	 *
+	 * Used for a faster lookup of the web font handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string[]
+	 */
+	private $to_do_keyed_handles;
+
+	/**
+	 * Provider instance store, keyed by provider ID.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $provider_instances = array();
+
+	/**
+	 * Variation property defaults.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var array
+	 */
+	private $variation_property_defaults = array(
+		'provider'     => 'local',
+		'font-family'  => '',
+		'font-style'   => 'normal',
+		'font-weight'  => '400',
+		'font-display' => 'fallback',
+	);
+
+	/**
+	 * Constructor.
+	 *
+	 * @since X.X.X
+	 */
+	public function __construct() {
+		/**
+		 * Filters the web font variation's property defaults.
+		 *
+		 * @since X.X.X
+		 *
+		 * @param array $defaults {
+		 *     An array of required web font properties and defaults.
+		 *
+		 *     @type string $provider     The provider ID. Default 'local'.
+		 *     @type string $font-family  The font-family property. Default empty string.
+		 *     @type string $font-style   The font-style property. Default 'normal'.
+		 *     @type string $font-weight  The font-weight property. Default '400'.
+		 *     @type string $font-display The font-display property. Default 'fallback'.
+		 * }
+		 */
+		$this->variation_property_defaults = apply_filters( 'wp_webfont_variation_defaults', $this->variation_property_defaults );
+
+		/**
+		 * Fires when the WP_Webfonts instance is initialized.
+		 *
+		 * @since X.X.X
+		 *
+		 * @param WP_Web_Fonts $wp_webfonts WP_Web_Fonts instance (passed by reference).
+		 */
+		do_action_ref_array( 'wp_default_webfonts', array( &$this ) );
+	}
+
+	/**
+	 * Get the list of registered providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array $providers {
+	 *     An associative array of registered providers, keyed by their unique ID.
+	 *
+	 *     @type string $provider_id => array {
+	 *         An associate array of provider's class name and fonts.
+	 *
+	 *         @type string $class   Fully qualified name of the provider's class.
+	 *         @type string[] $fonts An array of enqueued font handles for this provider.
+	 *     }
+	 * }
+	 */
+	public function get_providers() {
+		return $this->providers;
+	}
+
+	/**
+	 * Register a provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider's unique ID.
+	 * @param string $class       The provider class name.
+	 * @return bool True if successfully registered, else false.
+	 */
+	public function register_provider( $provider_id, $class ) {
+		if ( empty( $provider_id ) || empty( $class ) || ! class_exists( $class ) ) {
+			return false;
+		}
+
+		$this->providers[ $provider_id ] = array(
+			'class' => $class,
+			'fonts' => array(),
+		);
+		return true;
+	}
+
+	/**
+	 * Get the list of all registered font family handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	public function get_registered_font_families() {
+		$font_families = array();
+		foreach ( $this->registered as $handle => $obj ) {
+			if ( $obj->extra['is_font_family'] ) {
+				$font_families[] = $handle;
+			}
+		}
+		return $font_families;
+	}
+
+	/**
+	 * Get the list of all registered font families and their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	public function get_registered() {
+		return array_keys( $this->registered );
+	}
+
+	/**
+	 * Get the list of enqueued font families and their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array[]
+	 */
+	public function get_enqueued() {
+		return $this->queue;
+	}
+
+	/**
+	 * Registers a font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family Font family name to register.
+	 * @return string|null Font family handle when registration successes. Null on failure.
+	 */
+	public function add_font_family( $font_family ) {
+		$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+		if ( ! $font_family_handle ) {
+			return null;
+		}
+
+		if ( isset( $this->registered[ $font_family_handle ] ) ) {
+			return $font_family_handle;
+		}
+
+		$registered = $this->add( $font_family_handle, false );
+		if ( ! $registered ) {
+			return null;
+		}
+
+		$this->add_data( $font_family_handle, 'font-properties', array( 'font-family' => $font_family ) );
+		$this->add_data( $font_family_handle, 'is_font_family', true );
+
+		return $font_family_handle;
+	}
+
+	/**
+	 * Removes a font family and all registered variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family to remove.
+	 */
+	public function remove_font_family( $font_family_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return;
+		}
+
+		$variations = $this->registered[ $font_family_handle ]->deps;
+
+		foreach ( $variations as $variation ) {
+			$this->remove( $variation );
+		}
+
+		$this->remove( $font_family_handle );
+	}
+
+	/**
+	 * Add a variation to an existing family or register family if none exists.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 * @param string $variation_handle   Optional. The variation's handle. When none is provided, the
+	 *                                   handle will be dynamically generated.
+	 *                                   Default empty string.
+	 * @return string|null Variation handle on success. Else null.
+	 */
+	public function add_variation( $font_family_handle, array $variation, $variation_handle = '' ) {
+		if ( ! WP_Webfonts_Utils::is_defined( $font_family_handle ) ) {
+			trigger_error( 'Font family handle must be a non-empty string.' );
+			return null;
+		}
+
+		// When there is a variation handle, check it.
+		if ( '' !== $variation_handle && ! WP_Webfonts_Utils::is_defined( $variation_handle ) ) {
+			trigger_error( 'Variant handle must be a non-empty string.' );
+			return null;
+		}
+
+		// Register the font family when it does not yet exist.
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			if ( ! $this->add_font_family( $font_family_handle ) ) {
+				return null;
+			}
+		}
+
+		$variation = $this->validate_variation( $variation );
+
+		// Variation validation failed.
+		if ( ! $variation ) {
+			return null;
+		}
+
+		// When there's no variation handle, attempt to create one.
+		if ( '' === $variation_handle ) {
+			$variation_handle = WP_Webfonts_Utils::convert_variation_into_handle( $font_family_handle, $variation );
+			if ( is_null( $variation_handle ) ) {
+				return null;
+			}
+		}
+
+		// Bail out if the variant is already registered.
+		if ( $this->is_variation_registered( $font_family_handle, $variation_handle ) ) {
+			return $variation_handle;
+		}
+
+		$variation_src = array_key_exists( 'src', $variation ) ? $variation['src'] : false;
+		$result        = $this->add( $variation_handle, $variation_src );
+
+		// Bail out if the registration failed.
+		if ( ! $result ) {
+			return null;
+		}
+
+		$this->add_data( $variation_handle, 'font-properties', $variation );
+		$this->add_data( $variation_handle, 'is_font_family', false );
+
+		// Add the font variation as a dependency to the registered font family.
+		$this->add_dependency( $font_family_handle, $variation_handle );
+
+		$this->providers[ $variation['provider'] ]['fonts'][] = $variation_handle;
+
+		return $variation_handle;
+	}
+
+	/**
+	 * Removes a variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family for this variation.
+	 * @param string $variation_handle   The variation's handle to remove.
+	 */
+	public function remove_variation( $font_family_handle, $variation_handle ) {
+		if ( isset( $this->registered[ $variation_handle ] ) ) {
+			$this->remove( $variation_handle );
+		}
+
+		if ( ! $this->is_variation_registered( $font_family_handle, $variation_handle ) ) {
+			return;
+		}
+
+		// Remove the variation as a dependency from its font family.
+		$this->registered[ $font_family_handle ]->deps = array_values(
+			array_diff(
+				$this->registered[ $font_family_handle ]->deps,
+				array( $variation_handle )
+			)
+		);
+	}
+
+	/**
+	 * Checks if the variation is registered.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param string $variation_handle   Variation's handle.
+	 * @return bool True when registered to the given font family. Else false.
+	 */
+	private function is_variation_registered( $font_family_handle, $variation_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return false;
+		}
+
+		return in_array( $variation_handle, $this->registered[ $font_family_handle ]->deps, true );
+	}
+
+	/**
+	 * Adds a variation as a dependency to the given font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param string $variation_handle   The variation's handle.
+	 */
+	private function add_dependency( $font_family_handle, $variation_handle ) {
+		$this->registered[ $font_family_handle ]->deps[] = $variation_handle;
+	}
+
+	/**
+	 * Validates and sanitizes a variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $variation  Variation properties to add.
+	 * @return false|array Validated variation on success. Else, false.
+	 */
+	private function validate_variation( $variation ) {
+		$variation = wp_parse_args( $variation, $this->variation_property_defaults );
+
+		// Check the font-family.
+		if ( empty( $variation['font-family'] ) || ! is_string( $variation['font-family'] ) ) {
+			trigger_error( 'Webfont font-family must be a non-empty string.' );
+			return false;
+		}
+
+		// Local fonts need a "src".
+		if ( 'local' === $variation['provider'] ) {
+			// Make sure that local fonts have 'src' defined.
+			if ( empty( $variation['src'] ) || ( ! is_string( $variation['src'] ) && ! is_array( $variation['src'] ) ) ) {
+				trigger_error( 'Webfont src must be a non-empty string or an array of strings.' );
+				return false;
+			}
+		} elseif ( ! isset( $this->providers[ $variation['provider'] ] ) ) {
+			trigger_error( sprintf( 'The provider "%s" is not registered', $variation['provider'] ) );
+			return false;
+		} elseif ( ! class_exists( $this->providers[ $variation['provider'] ]['class'] ) ) {
+			trigger_error( sprintf( 'The provider class "%s" does not exist', $variation['provider'] ) );
+			return false;
+		}
+
+		// Validate the 'src' property.
+		if ( ! empty( $variation['src'] ) ) {
+			foreach ( (array) $variation['src'] as $src ) {
+				if ( empty( $src ) || ! is_string( $src ) ) {
+					trigger_error( 'Each webfont src must be a non-empty string.' );
+					return false;
+				}
+			}
+		}
+
+		// Check the font-weight.
+		if ( ! is_string( $variation['font-weight'] ) && ! is_int( $variation['font-weight'] ) ) {
+			trigger_error( 'Webfont font-weight must be a properly formatted string or integer.' );
+			return false;
+		}
+
+		// Check the font-display.
+		if ( ! in_array( $variation['font-display'], array( 'auto', 'block', 'fallback', 'swap', 'optional' ), true ) ) {
+			$variation['font-display'] = 'fallback';
+		}
+
+		$valid_props = array(
+			'ascent-override',
+			'descent-override',
+			'font-display',
+			'font-family',
+			'font-stretch',
+			'font-style',
+			'font-weight',
+			'font-variant',
+			'font-feature-settings',
+			'font-variation-settings',
+			'line-gap-override',
+			'size-adjust',
+			'src',
+			'unicode-range',
+
+			// Exceptions.
+			'provider',
+		);
+
+		foreach ( $variation as $prop => $value ) {
+			if ( ! in_array( $prop, $valid_props, true ) ) {
+				unset( $variation[ $prop ] );
+			}
+		}
+
+		return $variation;
+	}
+
+	/**
+	 * Processes the items and dependencies.
+	 *
+	 * Processes the items passed to it or the queue, and their dependencies.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[]|bool $handles Optional. Items to be processed: queue (false),
+	 *                                      single item (string), or multiple items (array of strings).
+	 *                                      Default false.
+	 * @param int|false            $group   Optional. Group level: level (int), no group (false).
+	 *
+	 * @return array|string[] Array of web font handles that have been processed.
+	 *                        An empty array if none were processed.
+	 */
+	public function do_items( $handles = false, $group = false ) {
+		$handles = $this->prepare_handles_for_printing( $handles );
+
+		if ( empty( $handles ) ) {
+			return $this->done;
+		}
+
+		$this->all_deps( $handles );
+		if ( empty( $this->to_do ) ) {
+			return $this->done;
+		}
+
+		$this->to_do_keyed_handles = array_flip( $this->to_do );
+
+		foreach ( $this->get_providers() as $provider_id => $provider ) {
+			// Alert and skip if the provider class does not exist.
+			if ( ! class_exists( $provider['class'] ) ) {
+				/* translators: %s is the provider name. */
+				trigger_error(
+					sprintf(
+						'Class "%s" not found for "%s" web font provider',
+						$provider['class'],
+						$provider_id
+					)
+				);
+				continue;
+			}
+
+			$this->do_item( $provider_id, $group );
+		}
+
+		$this->process_font_families_after_printing( $handles );
+
+		return $this->done;
+	}
+
+	/**
+	 * Prepares the given handles for printing.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[]|bool $handles Optional. Handles to prepare.
+	 *                                      Default false.
+	 * @return array Array of handles.
+	 */
+	private function prepare_handles_for_printing( $handles = false ) {
+		if ( false !== $handles ) {
+			$handles = $this->validate_handles( $handles );
+			// Bail out when invalid.
+			if ( empty( $handles ) ) {
+				return array();
+			}
+		}
+
+		// Use the enqueued queue.
+		if ( empty( $handles ) ) {
+			if ( empty( $this->queue ) ) {
+				return array();
+			}
+			$handles = $this->queue;
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Validates handle(s) to ensure each is a non-empty string.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string|string[] $handles Handles to prepare.
+	 * @return string[]|null Array of handles on success. Else null.
+	 */
+	private function validate_handles( $handles ) {
+		// Validate each element is a non-empty string handle.
+		$handles = array_filter( (array) $handles, array( WP_Webfonts_Utils::class, 'is_defined' ) );
+
+		if ( empty( $handles ) ) {
+			trigger_error( 'Handles must be a non-empty string or array of non-empty strings' );
+			return null;
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Invokes each provider to process and print its styles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @see WP_Dependencies::do_item()
+	 *
+	 * @param string    $provider_id The provider to process.
+	 * @param int|false $group       Not used.
+	 * @return bool
+	 */
+	public function do_item( $provider_id, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		// Bail out if the provider is not registered.
+		if ( ! isset( $this->providers[ $provider_id ] ) ) {
+			return false;
+		}
+
+		$font_handles = $this->get_enqueued_fonts_for_provider( $provider_id );
+		if ( empty( $font_handles ) ) {
+			return false;
+		}
+
+		$properties_by_font = $this->get_font_properties_for_provider( $font_handles );
+		if ( empty( $properties_by_font ) ) {
+			return false;
+		}
+
+		// Invoke provider to print its styles.
+		$provider = $this->get_provider_instance( $provider_id );
+		$provider->set_webfonts( $properties_by_font );
+		$provider->print_styles();
+
+		// Clean up.
+		$this->update_queues_for_printed_fonts( $font_handles );
+
+		return true;
+	}
+
+	/**
+	 * Retrieves a list of enqueued web font variations for a provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider to process.
+	 * @return array[] Webfonts organized by providers.
+	 */
+	private function get_enqueued_fonts_for_provider( $provider_id ) {
+		$providers = $this->get_providers();
+
+		if ( empty( $providers[ $provider_id ] ) ) {
+			return array();
+		}
+
+		return array_intersect(
+			$providers[ $provider_id ]['fonts'],
+			$this->to_do
+		);
+	}
+
+	/**
+	 * Gets a list of font properties for each of the given font handles.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $font_handles Font handles to get properties.
+	 * @return array A list of fonts with each font's properties.
+	 */
+	private function get_font_properties_for_provider( array $font_handles ) {
+		$font_properties = array();
+
+		foreach ( $font_handles as $font_handle ) {
+			$properties = $this->get_data( $font_handle, 'font-properties' );
+			if ( ! $properties ) {
+				continue;
+			}
+			$font_properties[ $font_handle ] = $properties;
+		}
+
+		return $font_properties;
+	}
+
+	/**
+	 * Gets the instance of the provider from the WP_Webfonts::$provider_instance store.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id The provider to get.
+	 * @return object Instance of the provider.
+	 */
+	private function get_provider_instance( $provider_id ) {
+		if ( ! isset( $this->provider_instances[ $provider_id ] ) ) {
+			$this->provider_instances[ $provider_id ] = new $this->providers[ $provider_id ]['class']();
+		}
+		return $this->provider_instances[ $provider_id ];
+	}
+
+	/**
+	 * Update queues for the given printed fonts.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $font_handles Font handles to get properties.
+	 */
+	private function update_queues_for_printed_fonts( array $font_handles ) {
+		foreach ( $font_handles as $font_handle ) {
+			$this->set_as_done( $font_handle );
+			$this->remove_from_to_do_queues( $font_handle );
+		}
+	}
+
+	/**
+	 * Processes the font families after printing the variations.
+	 *
+	 * For each queued font family:
+	 *
+	 * a. if any of their variations were printed, the font family is added to the `done` list.
+	 * b. removes each from the to_do queues.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $handles Handles to process.
+	 */
+	private function process_font_families_after_printing( array $handles ) {
+		foreach ( $handles as $handle ) {
+			if (
+				! $this->get_data( $handle, 'is_font_family' ) ||
+				! isset( $this->to_do_keyed_handles[ $handle ] )
+			) {
+				continue;
+			}
+			$font_family = $this->registered[ $handle ];
+
+			// Add the font family to `done` list if any of its variations were printed.
+			if ( ! empty( $font_family->deps ) ) {
+				$processed = array_intersect( $font_family->deps, $this->done );
+				if ( ! empty( $processed ) ) {
+					$this->set_as_done( $handle );
+				}
+			}
+
+			$this->remove_from_to_do_queues( $handle );
+		}
+	}
+
+	/**
+	 * Removes the handle from the `to_do` and `to_do_keyed_handles` lists.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $handle Handle to remove.
+	 */
+	private function remove_from_to_do_queues( $handle ) {
+		unset(
+			$this->to_do[ $this->to_do_keyed_handles[ $handle ] ],
+			$this->to_do_keyed_handles[ $handle ]
+		);
+	}
+
+	/**
+	 * Sets the given handle to done by adding it to the `done` list.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $handle Handle to set as done.
+	 */
+	private function set_as_done( $handle ) {
+		if ( ! is_array( $this->done ) ) {
+			$this->done = array();
+		}
+		$this->done[] = $handle;
+	}
+
+	/**
+	 * Converts the font family and its variations into theme.json structural format.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family_handle Font family to convert.
+	 * @return array Webfonts in theme.json structural format.
+	 */
+	public function to_theme_json( $font_family_handle ) {
+		if ( ! isset( $this->registered[ $font_family_handle ] ) ) {
+			return array();
+		}
+
+		$font_family_name  = $this->registered[ $font_family_handle ]->extra['font-properties']['font-family'];
+		$theme_json_format = array(
+			'fontFamily' => str_contains( $font_family_name, ' ' ) ? "'{$font_family_name}'" : $font_family_name,
+			'name'       => $font_family_name,
+			'slug'       => $font_family_handle,
+			'fontFace'   => array(),
+		);
+
+		foreach ( $this->registered[ $font_family_handle ]->deps as $variation_handle ) {
+			if ( ! isset( $this->registered[ $variation_handle ] ) ) {
+				continue;
+			}
+
+			$variation_obj        = $this->registered[ $variation_handle ];
+			$variation_properties = array( 'origin' => 'gutenberg_wp_webfonts_api' );
+			foreach ( $variation_obj->extra['font-properties'] as $property_name => $property_value ) {
+				$property_in_camelcase                          = lcfirst( str_replace( '-', '', ucwords( $property_name, '-' ) ) );
+				$variation_properties[ $property_in_camelcase ] = $property_value;
+			}
+			$theme_json_format['fontFace'][ $variation_obj->handle ] = $variation_properties;
+		}
+
+		return $theme_json_format;
+	}
+}
diff --git a/lib/experimental/class-wp-webfonts-provider-local.php b/lib/experimental/class-wp-webfonts-provider-local.php
index 9af27fa7c436a7..3950ebcd624c39 100644
--- a/lib/experimental/class-wp-webfonts-provider-local.php
+++ b/lib/experimental/class-wp-webfonts-provider-local.php
@@ -35,6 +35,21 @@ class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
 	 */
 	protected $id = 'local';
 
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.1.0
+	 */
+	public function __construct() {
+		if (
+			function_exists( 'is_admin' ) && ! is_admin()
+			&&
+			function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5', 'style' )
+		) {
+			$this->style_tag_atts = array( 'type' => 'text/css' );
+		}
+	}
+
 	/**
 	 * Gets the `@font-face` CSS styles for locally-hosted font files.
 	 *
@@ -81,7 +96,7 @@ class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
 	 * }
 	 * </code>
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @return string The `@font-face` CSS.
 	 */
@@ -183,7 +198,8 @@ private function order_src( array $webfont ) {
 	private function build_font_face_css( array $webfont ) {
 		$css = '';
 
-		// Wrap font-family in quotes if it contains spaces.
+		// Wrap font-family in quotes if it contains spaces
+		// and is not already wrapped in quotes.
 		if (
 			str_contains( $webfont['font-family'], ' ' ) &&
 			! str_contains( $webfont['font-family'], '"' ) &&
diff --git a/lib/experimental/class-wp-webfonts-provider.php b/lib/experimental/class-wp-webfonts-provider.php
index a49b8a324b7f5f..8fcbd76a76d3cf 100644
--- a/lib/experimental/class-wp-webfonts-provider.php
+++ b/lib/experimental/class-wp-webfonts-provider.php
@@ -6,7 +6,7 @@
  *
  * @package    WordPress
  * @subpackage WebFonts
- * @since      6.0.0
+ * @since      X.X.X
  */
 
 if ( class_exists( 'WP_Webfonts_Provider' ) ) {
@@ -30,26 +30,46 @@
  * into styles (in a performant way for the provider service
  * it manages).
  *
- * @since 6.0.0
+ * @since X.X.X
  */
 abstract class WP_Webfonts_Provider {
 
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string
+	 */
+	protected $id = '';
+
 	/**
 	 * Webfonts to be processed.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @var array[]
 	 */
 	protected $webfonts = array();
 
+	/**
+	 * Array of Font-face style tag's attribute(s)
+	 * where the key is the attribute name and the
+	 * value is its value.
+	 *
+	 * @since X.X.X
+	 *
+	 * @var string[]
+	 */
+	protected $style_tag_atts = array();
+
 	/**
 	 * Sets this provider's webfonts property.
 	 *
 	 * The API's Controller passes this provider's webfonts
 	 * for processing here in the provider.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @param array[] $webfonts Registered webfonts.
 	 */
@@ -57,6 +77,18 @@ public function set_webfonts( array $webfonts ) {
 		$this->webfonts = $webfonts;
 	}
 
+	/**
+	 * Prints the generated styles.
+	 *
+	 * @since X.X.X
+	 */
+	public function print_styles() {
+		printf(
+			$this->get_style_element(),
+			$this->get_css()
+		);
+	}
+
 	/**
 	 * Gets the `@font-face` CSS for the provider's webfonts.
 	 *
@@ -64,9 +96,37 @@ public function set_webfonts( array $webfonts ) {
 	 * needed `@font-face` CSS for all of its webfonts. Specifics of how
 	 * this processing is done is contained in each provider.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
 	 * @return string The `@font-face` CSS.
 	 */
 	abstract public function get_css();
+
+	/**
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string The style element.
+	 */
+	protected function get_style_element() {
+		$attributes = $this->generate_style_element_attributes();
+
+		return "<style id='wp-webfonts-{$this->id}'{$attributes}>\n%s\n</style>\n";
+	}
+
+	/**
+	 * Gets the defined <style> element's attributes.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string A string of attribute=value when defined, else, empty string.
+	 */
+	private function generate_style_element_attributes() {
+		$attributes = '';
+		foreach ( $this->style_tag_atts as $name => $value ) {
+			$attributes .= " {$name}='{$value}'";
+		}
+		return $attributes;
+	}
 }
diff --git a/lib/experimental/class-wp-webfonts-utils.php b/lib/experimental/class-wp-webfonts-utils.php
new file mode 100644
index 00000000000000..3c086a974ab9d0
--- /dev/null
+++ b/lib/experimental/class-wp-webfonts-utils.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * Webfont API's utility helpers.
+ *
+ * @package    WordPress
+ * @subpackage WebFonts
+ * @since      X.X.X
+ */
+
+if ( class_exists( 'WP_Webfonts_Utils' ) ) {
+	return;
+}
+
+/**
+ * Utility helpers for the Webfonts API.
+ *
+ * @since X.X.X
+ */
+class WP_Webfonts_Utils {
+
+	/**
+	 * Converts the given font family into a handle.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family Font family to convert into a handle.
+	 * @return string|null The font family handle on success. Else, null.
+	 */
+	public static function convert_font_family_into_handle( $font_family ) {
+		if ( ! self::is_defined( $font_family ) ) {
+			return null;
+		}
+
+		// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
+		if ( str_contains( $font_family, ',' ) ) {
+			$font_family = explode( ',', $font_family )[0];
+		}
+
+		return sanitize_title( $font_family );
+	}
+
+	/**
+	 * Converts the given variation and its font-family into a handle.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $font_family The font family's handle for this variation.
+	 * @param array  $variation   An array of variation properties.
+	 * @return string|null The variation handle.
+	 */
+	public static function convert_variation_into_handle( $font_family, array $variation ) {
+		$handle = '';
+		foreach ( array( 'font-weight', 'font-style' ) as $property ) {
+			if ( ! array_key_exists( $property, $variation ) || ! static::is_defined( $variation[ $property ] ) ) {
+				continue;
+			}
+
+			$handle .= ' ' . $variation[ $property ];
+		}
+
+		if ( '' === $handle ) {
+			trigger_error( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+			return null;
+		}
+
+		return sanitize_title( $font_family . $handle );
+	}
+
+	/**
+	 * Gets the font family from the variation.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $variation An array of variation properties to search.
+	 * @return string|null The font family if defined. Else, null.
+	 */
+	public static function get_font_family_from_variation( array $variation ) {
+		return static::search_for_font_family( $variation );
+	}
+
+	/**
+	 * Checks if the given input is defined, i.e. meaning is a non-empty string.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $input The input to check.
+	 * @return bool True when non-empty string. Else false.
+	 */
+	public static function is_defined( $input ) {
+		return ( is_string( $input ) && ! empty( $input ) );
+	}
+
+	/**
+	 * Searches the variation array to extract the font family.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array $haystack An array of variation properties to search.
+	 * @return string|null The font family when found. Else, null.
+	 */
+	private static function search_for_font_family( array $haystack ) {
+		if ( array_key_exists( 'fontFamily', $haystack ) ) {
+			$key = 'fontFamily';
+		} elseif ( array_key_exists( 'font-family', $haystack ) ) {
+			$key = 'font-family';
+		} else {
+			trigger_error( 'Font family not found.' );
+			return null;
+		}
+
+		if ( static::is_defined( $haystack[ $key ] ) ) {
+			// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
+			if ( strpos( $haystack[ $key ], ',' ) !== false ) {
+				return explode( ',', $haystack[ $key ] )[0];
+			}
+			return $haystack[ $key ];
+		}
+
+		trigger_error( 'Font family not defined in the variation.' );
+		return null;
+	}
+}
diff --git a/lib/experimental/class-wp-webfonts.php b/lib/experimental/class-wp-webfonts.php
index 0c0cb06a27ffb3..fd00d39cfc5bf8 100644
--- a/lib/experimental/class-wp-webfonts.php
+++ b/lib/experimental/class-wp-webfonts.php
@@ -1,10 +1,15 @@
 <?php
 /**
- * Webfonts API class.
+ * Webfonts API class: backwards-compatibility (BC) layer for all
+ * deprecated publicly exposed methods and functionality.
  *
- * @package    WordPress
+ * This class/file will NOT be backported to Core. Rather for sites
+ * using the previous API, it exists to prevent breakages, giving
+ * developers time to upgrade their code.
+ *
+ * @since      X.X.X
  * @subpackage WebFonts
- * @since      6.0.0
+ * @package    WordPress
  */
 
 if ( class_exists( 'WP_Webfonts' ) ) {
@@ -14,411 +19,277 @@
 /**
  * Class WP_Webfonts
  *
- * @since 6.0.0
+ * BACKPORT NOTE: Do not backport this file to Core.
+ * This class exists to give extenders guidance and time to upgrade their code
+ * to use the new Web Fonts API.
  */
-class WP_Webfonts {
+class WP_Webfonts extends WP_Dependencies {
 
 	/**
-	 * An array of registered webfonts.
-	 *
-	 * @since 6.0.0
+	 * Gets the font slug.
 	 *
-	 * @var array[]
-	 */
-	private $registered_webfonts = array();
-
-	/**
-	 * An array of enqueued webfonts.
+	 * @since X.X.X
+	 * @deprecated Use WP_Webfonts_Utils::convert_font_family_into_handle() or WP_Webfonts_Utils::get_font_family_from_variation().
 	 *
-	 * @var array[]
-	 */
-	private $enqueued_webfonts = array();
-
-	/**
-	 * An array of registered providers.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var array
+	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
+	 *                                 or a font-family as a string.
+	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
 	 */
-	private $providers = array();
+	public static function get_font_slug( $to_convert ) {
+		$message = is_array( $to_convert )
+			? 'Use WP_Webfonts_Utils::get l_font_family_from_variation() to get the font family from an array and then WP_Webfonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle'
+			: 'Use WP_Webfonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle';
+		_deprecated_function( __METHOD__, 'X.X.X', $message );
 
-	/**
-	 * Stylesheet handle.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var string
-	 */
-	private $stylesheet_handle = '';
+		return static::_get_font_slug( $to_convert );
+	}
 
 	/**
-	 * Init.
+	 * Initializes the API.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts().
 	 */
-	public function init() {
-		// Register default providers.
-		$this->register_provider( 'local', 'WP_Webfonts_Provider_Local' );
-
-		// Register callback to generate and enqueue styles.
-		if ( did_action( 'wp_enqueue_scripts' ) ) {
-			$this->stylesheet_handle = 'webfonts-footer';
-			$hook                    = 'wp_print_footer_scripts';
-		} else {
-			$this->stylesheet_handle = 'webfonts';
-			$hook                    = 'wp_enqueue_scripts';
-		}
-		add_action( $hook, array( $this, 'generate_and_enqueue_styles' ) );
-
-		// Enqueue webfonts in the block editor.
-		add_action( 'admin_init', array( $this, 'generate_and_enqueue_editor_styles' ) );
+	public static function init() {
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()' );
 	}
 
 	/**
-	 * Get the list of registered fonts.
+	 * Gets the list of registered fonts.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_registered().
 	 *
 	 * @return array[]
 	 */
 	public function get_registered_webfonts() {
-		return $this->registered_webfonts;
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_registered()' );
+
+		return $this->_get_registered_webfonts();
 	}
 
 	/**
-	 * Get the list of enqueued fonts.
+	 * Gets the list of enqueued fonts.
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_enqueued().
 	 *
 	 * @return array[]
 	 */
 	public function get_enqueued_webfonts() {
-		return $this->enqueued_webfonts;
-	}
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_enqueued()' );
 
-	/**
-	 * Get the list of all fonts.
-	 *
-	 * @return array[]
-	 */
-	public function get_all_webfonts() {
-		return array_merge( $this->get_registered_webfonts(), $this->get_enqueued_webfonts() );
+		return $this->queue;
 	}
 
 	/**
-	 * Get the list of providers.
+	 * Gets the list of all fonts.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_webfonts()->get_registered().
 	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
+	 * @return array[]
 	 */
-	public function get_providers() {
-		return $this->providers;
+	public function get_all_webfonts() {
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_webfonts()->get_registered()' );
+
+		return $this->_get_registered_webfonts();
 	}
 
 	/**
-	 * Register a webfont.
+	 * Registers a webfont.
 	 *
 	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_register_webfonts().
 	 *
-	 * @param array $webfont Webfont to be registered.
+	 * @param array  $webfont             Web font to register.
+	 * @param string $font_family_handle  Optional. Font family handle for the given variation.
+	 *                                    Default empty string.
+	 * @param string $variation_handle    Optional. Handle for the variation to register.
+	 * @param bool   $silence_deprecation Optional. Silences the deprecation notice. For internal use.
 	 * @return string|false The font family slug if successfully registered, else false.
 	 */
-	public function register_webfont( array $webfont ) {
-		$webfont = $this->validate_webfont( $webfont );
-
-		// If not valid, bail out.
-		if ( ! $webfont ) {
-			return false;
+	public function register_webfont( array $webfont, $font_family_handle = '', $variation_handle = '', $silence_deprecation = false ) {
+		if ( ! $silence_deprecation ) {
+			_deprecated_function( __METHOD__, 'X.X.X', 'wp_register_webfonts()' );
 		}
 
-		$slug = $this->get_font_slug( $webfont );
+		// When font family's handle is not passed, attempt to get it from the variation.
+		if ( ! WP_Webfonts_Utils::is_defined( $font_family_handle ) ) {
+			$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+			if ( $font_family ) {
+				$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+			}
+		}
 
-		// Initialize a new font-family collection.
-		if ( ! isset( $this->registered_webfonts[ $slug ] ) ) {
-			$this->registered_webfonts[ $slug ] = array();
+		if ( empty( $font_family_handle ) ) {
+			return false;
 		}
 
-		$this->registered_webfonts[ $slug ][] = $webfont;
-		return $slug;
+		return $this->add_variation( $font_family_handle, $webfont, $variation_handle )
+			? $font_family_handle
+			: false;
 	}
 
 	/**
 	 * Enqueue a font-family that has been already registered.
 	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_enqueue_webfonts().
+	 *
 	 * @param string $font_family_name The font family name to be enqueued.
 	 * @return bool True if successfully enqueued, else false.
 	 */
 	public function enqueue_webfont( $font_family_name ) {
-		$slug = $this->get_font_slug( $font_family_name );
-
-		if ( isset( $this->enqueued_webfonts[ $slug ] ) ) {
-			return true;
-		}
-
-		if ( ! isset( $this->registered_webfonts[ $slug ] ) ) {
-			/* translators: %s unique slug to identify the font family of the webfont */
-			_doing_it_wrong( __METHOD__, sprintf( __( 'The "%s" font family is not registered.', 'gutenberg' ), $slug ), '6.0.0' );
-
-			return false;
-		}
+		_deprecated_function( __METHOD__, 'X.X.X', 'wp_enqueue_webfonts()' );
 
-		$this->enqueued_webfonts[ $slug ] = $this->registered_webfonts[ $slug ];
-		unset( $this->registered_webfonts[ $slug ] );
+		wp_enqueue_webfonts( array( $font_family_name ) );
 		return true;
 	}
 
 	/**
-	 * Get the font slug.
-	 *
-	 * @since 6.0.0
+	 * Migrates deprecated webfonts structure into new API data structure,
+	 * i.e. variations grouped by their font-family.
 	 *
-	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
-	 *                                 or a font-family as a string.
-	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
+	 * @param array $webfonts Array of webfonts to migrate.
+	 * @return array
 	 */
-	public static function get_font_slug( $to_convert ) {
-		if ( is_array( $to_convert ) ) {
-			if ( isset( $to_convert['slug'] ) ) {
-				return $to_convert['slug'];
-			} elseif ( isset( $to_convert['font-family'] ) ) {
-				$to_convert = $to_convert['font-family'];
-			} elseif ( isset( $to_convert['fontFamily'] ) ) {
-				$to_convert = $to_convert['fontFamily'];
-			} else {
-				_doing_it_wrong( __METHOD__, __( 'Could not determine the font family name.', 'gutenberg' ), '6.0.0' );
-				return false;
+	public function migrate_deprecated_structure( array $webfonts ) {
+		$message = 'A deprecated web fonts array structure passed to wp_register_webfonts(). ' .
+			'Variations must be grouped and keyed by their font family.';
+		trigger_error( $message, E_USER_DEPRECATED );
+
+		$new_webfonts = array();
+		foreach ( $webfonts as $webfont ) {
+			$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+			if ( ! $font_family ) {
+				continue;
+			}
+
+			if ( ! isset( $new_webfonts[ $font_family ] ) ) {
+				$new_webfonts[ $font_family ] = array();
 			}
-		}
 
-		// If the font-family is a comma-separated list (example: "Inter, sans-serif" ), use just the first font.
-		if ( strpos( $to_convert, ',' ) !== false ) {
-			$to_convert = explode( ',', $to_convert )[0];
+			$new_webfonts[ $font_family ][] = $webfont;
 		}
 
-		return sanitize_title( $to_convert );
+		return $new_webfonts;
 	}
 
 	/**
-	 * Validate a webfont.
+	 * Determines if the given webfonts array is the deprecated array structure.
 	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont The webfont arguments.
-	 *
-	 * @return array|false The validated webfont arguments, or false if the webfont is invalid.
+	 * @param array $webfonts Array of webfonts to check.
+	 * @return bool True when deprecated structure, else false.
 	 */
-	public function validate_webfont( $webfont ) {
-		$webfont = wp_parse_args(
-			$webfont,
-			array(
-				'provider'     => 'local',
-				'font-family'  => '',
-				'font-style'   => 'normal',
-				'font-weight'  => '400',
-				'font-display' => 'fallback',
-			)
-		);
-
-		// Check the font-family.
-		if ( empty( $webfont['font-family'] ) || ! is_string( $webfont['font-family'] ) ) {
-			trigger_error( __( 'Webfont font family must be a non-empty string.', 'gutenberg' ) );
-			return false;
-		}
-
-		// Local fonts need a "src".
-		if ( 'local' === $webfont['provider'] ) {
-			// Make sure that local fonts have 'src' defined.
-			if ( empty( $webfont['src'] ) || ( ! is_string( $webfont['src'] ) && ! is_array( $webfont['src'] ) ) ) {
-				trigger_error( __( 'Webfont src must be a non-empty string or an array of strings.', 'gutenberg' ) );
-				return false;
-			}
-		}
-
-		// Validate the 'src' property.
-		if ( ! empty( $webfont['src'] ) ) {
-			foreach ( (array) $webfont['src'] as $src ) {
-				if ( empty( $src ) || ! is_string( $src ) ) {
-					trigger_error( __( 'Each webfont src must be a non-empty string.', 'gutenberg' ) );
-					return false;
-				}
-			}
-		}
-
-		// Check the font-weight.
-		if ( ! is_string( $webfont['font-weight'] ) && ! is_int( $webfont['font-weight'] ) ) {
-			trigger_error( __( 'Webfont font weight must be a properly formatted string or integer.', 'gutenberg' ) );
-			return false;
+	public function is_deprecated_structure( array $webfonts ) {
+		// Checks the first key to determine if it's empty or non-string.
+		foreach ( $webfonts as $font_family => $variations ) {
+			return ! WP_Webfonts_Utils::is_defined( $font_family );
 		}
+	}
 
-		// Check the font-display.
-		if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'swap', 'optional' ), true ) ) {
-			$webfont['font-display'] = 'fallback';
-		}
+	/**
+	 * Handle the deprecated web fonts structure.
+	 *
+	 * @param array  $webfont Web font for extracting font family.
+	 * @param string $message Deprecation message to throw.
+	 * @return string|null The font family slug if successfully registered. Else null.
+	 */
+	protected function extract_font_family_from_deprecated_webfonts_structure( array $webfont, $message ) {
+		trigger_error( $message, E_USER_DEPRECATED );
 
-		$valid_props = array(
-			'ascent-override',
-			'descent-override',
-			'font-display',
-			'font-family',
-			'font-stretch',
-			'font-style',
-			'font-weight',
-			'font-variant',
-			'font-feature-settings',
-			'font-variation-settings',
-			'line-gap-override',
-			'size-adjust',
-			'src',
-			'unicode-range',
-
-			// Exceptions.
-			'provider',
-		);
-
-		foreach ( $webfont as $prop => $value ) {
-			if ( ! in_array( $prop, $valid_props, true ) ) {
-				unset( $webfont[ $prop ] );
-			}
+		$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $webfont );
+		if ( ! $font_family ) {
+			return null;
 		}
 
-		return $webfont;
+		return WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
 	}
 
 	/**
-	 * Register a provider.
+	 * Gets the font slug.
 	 *
-	 * @since 6.0.0
+	 * Helper function for reuse without the deprecation.
 	 *
-	 * @param string $provider The provider name.
-	 * @param string $class    The provider class name.
-	 * @return bool True if successfully registered, else false.
+	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
+	 *                                 or a font-family as a string.
+	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
 	 */
-	public function register_provider( $provider, $class ) {
-		if ( empty( $provider ) || empty( $class ) ) {
-			return false;
-		}
-		$this->providers[ $provider ] = $class;
-		return true;
+	private static function _get_font_slug( $to_convert ) {
+		$font_family_name = is_array( $to_convert ) ? WP_Webfonts_Utils::get_font_family_from_variation( $to_convert ) : $to_convert;
+		return ! empty( $font_family_name )
+			? WP_Webfonts_Utils::convert_font_family_into_handle( $font_family_name )
+			: false;
 	}
 
 	/**
-	 * Generate and enqueue webfonts styles.
+	 * Gets the registered webfonts in the original web font property structure keyed by each handle.
 	 *
-	 * @since 6.0.0
+	 * @return array[]
 	 */
-	public function generate_and_enqueue_styles() {
-		// Generate the styles.
-		$webfonts = $this->get_webfonts_by_provider( $this->get_enqueued_webfonts() );
-		$styles   = $this->generate_styles( $webfonts );
-
-		// Bail out if there are no styles to enqueue.
-		if ( '' === $styles ) {
-			return;
-		}
+	private function _get_registered_webfonts() {
+		$font_families = array();
+		$registered    = array();
 
-		// Enqueue the stylesheet.
-		wp_register_style( $this->stylesheet_handle, '' );
-		wp_enqueue_style( $this->stylesheet_handle );
+		// Find the registered font families.
+		foreach ( $this->registered as $handle => $obj ) {
+			if ( ! $obj->extra['is_font_family'] ) {
+				continue;
+			}
 
-		// Add the styles to the stylesheet.
-		wp_add_inline_style( $this->stylesheet_handle, $styles );
-	}
+			if ( ! isset( $registered[ $handle ] ) ) {
+				$registered[ $handle ] = array();
+			}
 
-	/**
-	 * Generate and enqueue editor styles.
-	 *
-	 * @since 6.0.0
-	 */
-	public function generate_and_enqueue_editor_styles() {
-		// Generate the styles.
-		$webfonts = $this->get_webfonts_by_provider( $this->get_all_webfonts() );
-		$styles   = $this->generate_styles( $webfonts );
-
-		// Bail out if there are no styles to enqueue.
-		if ( '' === $styles ) {
-			return;
+			$font_families[ $handle ] = $obj->deps;
+		}
+
+		// Build the return array structure.
+		foreach ( $font_families as $font_family_handle => $variations ) {
+			foreach ( $variations as $variation_handle ) {
+				$variation_obj = $this->registered[ $variation_handle ];
+
+				$registered[ $font_family_handle ][ $variation_handle ] = $variation_obj->extra['font-properties'];
+			}
 		}
 
-		wp_enqueue_style( 'wp-block-library' );
-		wp_add_inline_style( 'wp-block-library', $styles );
+		return $registered;
 	}
 
 	/**
-	 * Generate styles for webfonts.
-	 *
-	 * @since 6.0.0
+	 * Gets the enqueued webfonts in the original web font property structure keyed by each handle.
 	 *
-	 * @param array[] $webfonts_by_provider Webfonts organized by provider.
-	 * @return string $styles Generated styles.
+	 * @return array[]
 	 */
-	private function generate_styles( array $webfonts_by_provider ) {
-		$styles    = '';
-		$providers = $this->get_providers();
-
-		/*
-		 * Loop through each of the providers to get the CSS for their respective webfonts
-		 * to incrementally generate the collective styles for all of them.
-		 */
-		foreach ( $providers as $provider_id => $provider_class ) {
-
-			// Bail out if the provider class does not exist.
-			if ( ! class_exists( $provider_class ) ) {
-				/* translators: %s is the provider name. */
-				trigger_error( sprintf( __( 'Webfont provider "%s" is not registered.', 'gutenberg' ), $provider_id ) );
+	private function _get_enqueued_webfonts() {
+		$enqueued = array();
+		foreach ( $this->queue as $handle ) {
+			// Skip if not registered.
+			if ( ! isset( $this->registered[ $handle ] ) ) {
 				continue;
 			}
 
-			$provider_webfonts = isset( $webfonts_by_provider[ $provider_id ] )
-				? $webfonts_by_provider[ $provider_id ]
-				: array();
-
-			// If there are no registered webfonts for this provider, skip it.
-			if ( empty( $provider_webfonts ) ) {
+			// Skip if already found.
+			if ( isset( $enqueued[ $handle ] ) ) {
 				continue;
 			}
 
-			/*
-			 * Process the webfonts by first passing them to the provider via `set_webfonts()`
-			 * and then getting the CSS from the provider.
-			 */
-			$provider = new $provider_class();
-			$provider->set_webfonts( $provider_webfonts );
-			$styles .= $provider->get_css();
-		}
-
-		return $styles;
-	}
+			$obj = $this->registered[ $handle ];
 
+			// If a variation, add it.
+			if ( ! $obj->extra['is_font_family'] ) {
+				$enqueued[ $handle ] = $obj->extra['font-properties'];
+				continue;
+			}
 
-	/**
-	 * Reorganizes webfonts grouped by font-family into grouped by provider.
-	 *
-	 * @param array[] $font_families Font families and each of their webfonts.
-	 * @return array[] Webfonts organized by providers.
-	 */
-	private function get_webfonts_by_provider( array $font_families ) {
-		$providers            = $this->get_providers();
-		$webfonts_by_provider = array();
-
-		foreach ( $font_families as $webfonts ) {
-			foreach ( $webfonts as $webfont ) {
-				$provider = $webfont['provider'];
-
-				// Skip if the provider is not registered.
-				if ( ! isset( $providers[ $provider ] ) ) {
-					/* translators: %s is the provider name. */
-					trigger_error( sprintf( __( 'Webfont provider "%s" is not registered.', 'gutenberg' ), $provider ) );
-					continue;
-				}
-
-				// Initialize a new provider collection.
-				if ( ! isset( $webfonts_by_provider[ $provider ] ) ) {
-					$webfonts_by_provider[ $provider ] = array();
-				}
-				$webfonts_by_provider[ $provider ][] = $webfont;
+			// If font-family, add all of its variations.
+			foreach ( $obj->deps as $variation_handle ) {
+				$obj                           = $this->registered[ $variation_handle ];
+				$enqueued[ $variation_handle ] = $obj->extra['font-properties'];
 			}
 		}
 
-		return $webfonts_by_provider;
+		return $enqueued;
 	}
 }
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 862a1bfe2b28c6..fbff977cb9fb2d 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -89,6 +89,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experimental/html/class-wp-html-tag-processor.php b/lib/experimental/html/class-wp-html-tag-processor.php
index affbb6fb27b5c1..0dfa57f30f2aab 100644
--- a/lib/experimental/html/class-wp-html-tag-processor.php
+++ b/lib/experimental/html/class-wp-html-tag-processor.php
@@ -1059,9 +1059,19 @@ private function parse_next_attribute() {
 			return true;
 		}
 
+		/**
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$comparable_name = strtolower( $attribute_name );
+
 		// If an attribute is listed many times, only use the first declaration and ignore the rest.
-		if ( ! array_key_exists( $attribute_name, $this->attributes ) ) {
-			$this->attributes[ $attribute_name ] = new WP_HTML_Attribute_Token(
+		if ( ! array_key_exists( $comparable_name, $this->attributes ) ) {
+			$this->attributes[ $comparable_name ] = new WP_HTML_Attribute_Token(
 				$attribute_name,
 				$value_start,
 				$value_length,
@@ -1071,7 +1081,7 @@ private function parse_next_attribute() {
 			);
 		}
 
-		return $this->attributes[ $attribute_name ];
+		return $this->attributes[ $comparable_name ];
 	}
 
 	/**
@@ -1331,16 +1341,33 @@ public function seek( $bookmark_name ) {
 	}
 
 	/**
-	 * Sort function to arrange objects with a start property in ascending order.
+	 * Compare two WP_HTML_Text_Replacement objects.
 	 *
 	 * @since 6.2.0
 	 *
-	 * @param object $a First attribute update.
-	 * @param object $b Second attribute update.
+	 * @param WP_HTML_Text_Replacement $a First attribute update.
+	 * @param WP_HTML_Text_Replacement $b Second attribute update.
 	 * @return integer
 	 */
 	private static function sort_start_ascending( $a, $b ) {
-		return $a->start - $b->start;
+		$by_start = $a->start - $b->start;
+		if ( 0 !== $by_start ) {
+			return $by_start;
+		}
+
+		$by_text = isset( $a->text, $b->text ) ? strcmp( $a->text, $b->text ) : 0;
+		if ( 0 !== $by_text ) {
+			return $by_text;
+		}
+
+		/*
+		 * We shouldn't ever get here because it would imply
+		 * that we have two identical updates, or that we're
+		 * trying to replace the same input text twice. Still
+		 * we'll handle this sort to preserve determinism,
+		 * which might come in handy when debugging.
+		 */
+		return $a->end - $b->end;
 	}
 
 	/**
@@ -1512,7 +1539,17 @@ public function set_attribute( $name, $value ) {
 			$updated_attribute = "{$name}=\"{$escaped_new_value}\"";
 		}
 
-		if ( isset( $this->attributes[ $name ] ) ) {
+		/**
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$comparable_name = strtolower( $name );
+
+		if ( isset( $this->attributes[ $comparable_name ] ) ) {
 			/*
 			 * Update an existing attribute.
 			 *
@@ -1524,7 +1561,7 @@ public function set_attribute( $name, $value ) {
 			 *
 			 *    Result: <div id="new"/>
 			 */
-			$existing_attribute               = $this->attributes[ $name ];
+			$existing_attribute               = $this->attributes[ $comparable_name ];
 			$this->attribute_updates[ $name ] = new WP_HTML_Text_Replacement(
 				$existing_attribute->start,
 				$existing_attribute->end,
@@ -1542,7 +1579,7 @@ public function set_attribute( $name, $value ) {
 			 *
 			 *    Result: <div id="new"/>
 			 */
-			$this->attribute_updates[ $name ] = new WP_HTML_Text_Replacement(
+			$this->attribute_updates[ $comparable_name ] = new WP_HTML_Text_Replacement(
 				$this->tag_name_starts_at + $this->tag_name_length,
 				$this->tag_name_starts_at + $this->tag_name_length,
 				' ' . $updated_attribute
@@ -1558,6 +1595,15 @@ public function set_attribute( $name, $value ) {
 	 * @param string $name The attribute name to remove.
 	 */
 	public function remove_attribute( $name ) {
+		/**
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$name = strtolower( $name );
 		if ( $this->is_closing_tag || ! isset( $this->attributes[ $name ] ) ) {
 			return false;
 		}
@@ -1657,7 +1703,14 @@ public function get_updated_html() {
 		$this->updated_bytes = strlen( $this->updated_html );
 
 		// 3. Point this tag processor at the original tag opener and consume it
-		$this->parsed_bytes = strlen( $updated_html_up_to_current_tag_name_end ) - $this->tag_name_length - 2;
+
+		/*
+		 * When we get here we're at the end of the tag name, and we want to rewind to before it
+		 * <p>Previous HTML<em>More HTML</em></p>
+		 *                 ^  | back up by the length of the tag name plus the opening <
+		 *                 \<-/ back up by strlen("em") + 1 ==> 3
+		 */
+		$this->parsed_bytes = strlen( $updated_html_up_to_current_tag_name_end ) - $this->tag_name_length - 1;
 		$this->next_tag();
 
 		return $this->html;
diff --git a/lib/experimental/register-webfonts-from-theme-json.php b/lib/experimental/register-webfonts-from-theme-json.php
index f0a37677eb0637..4b49f6e0534fa3 100644
--- a/lib/experimental/register-webfonts-from-theme-json.php
+++ b/lib/experimental/register-webfonts-from-theme-json.php
@@ -5,173 +5,174 @@
  * @package gutenberg
  */
 
-/**
- * Register webfonts defined in theme.json.
- */
-function gutenberg_register_webfonts_from_theme_json() {
-	// Get settings.
-	$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_settings();
-
-	// If in the editor, add webfonts defined in variations.
-	if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
-		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
-
-		foreach ( $variations as $variation ) {
-
-			// Sanity check: Skip if fontFamilies are not defined in the variation.
-			if (
-				empty( $variation['settings'] ) ||
-				empty( $variation['settings']['typography'] ) ||
-				empty( $variation['settings']['typography']['fontFamilies'] )
-			) {
-				continue;
-			}
+if ( ! function_exists( 'gutenberg_register_webfonts_from_theme_json' ) ) {
+	/**
+	 * Register webfonts defined in theme.json.
+	 */
+	function gutenberg_register_webfonts_from_theme_json() {
+		// Get settings.
+		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_settings();
+
+		// If in the editor, add webfonts defined in variations.
+		if ( is_admin() || ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) {
+			$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
+
+			foreach ( $variations as $variation ) {
+
+				// Sanity check: Skip if fontFamilies are not defined in the variation.
+				if (
+					empty( $variation['settings'] ) ||
+					empty( $variation['settings']['typography'] ) ||
+					empty( $variation['settings']['typography']['fontFamilies'] )
+				) {
+					continue;
+				}
 
-			// Merge the variation settings with the global settings.
-			$settings['typography']                          = empty( $settings['typography'] ) ? array() : $settings['typography'];
-			$settings['typography']['fontFamilies']          = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies'];
-			$settings['typography']['fontFamilies']['theme'] = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies']['theme'];
-			$settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
+				// Merge the variation settings with the global settings.
+				$settings['typography']                          = empty( $settings['typography'] ) ? array() : $settings['typography'];
+				$settings['typography']['fontFamilies']          = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies'];
+				$settings['typography']['fontFamilies']['theme'] = empty( $settings['typography']['fontFamilies'] ) ? array() : $settings['typography']['fontFamilies']['theme'];
+				$settings['typography']['fontFamilies']['theme'] = array_merge( $settings['typography']['fontFamilies']['theme'], $variation['settings']['typography']['fontFamilies']['theme'] );
 
-			// Make sure there are no duplicates.
-			$settings['typography']['fontFamilies'] = array_unique( $settings['typography']['fontFamilies'] );
+				// Make sure there are no duplicates.
+				$settings['typography']['fontFamilies'] = array_unique( $settings['typography']['fontFamilies'] );
+			}
 		}
-	}
-
-	// Bail out early if there are no settings for webfonts.
-	if ( empty( $settings['typography'] ) || empty( $settings['typography']['fontFamilies'] ) ) {
-		return;
-	}
-
-	$webfonts = array();
 
-	// Look for fontFamilies.
-	foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
-		foreach ( $font_families as $font_family ) {
+		// Bail out early if there are no settings for webfonts.
+		if ( empty( $settings['typography'] ) || empty( $settings['typography']['fontFamilies'] ) ) {
+			return;
+		}
 
-			// Skip if fontFace is not defined.
-			if ( empty( $font_family['fontFace'] ) ) {
-				continue;
-			}
+		$webfonts = array();
+		$handles  = array();
 
-			$font_family['fontFace'] = (array) $font_family['fontFace'];
+		// Look for fontFamilies.
+		foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
+			foreach ( $font_families as $font_family ) {
 
-			foreach ( $font_family['fontFace'] as $font_face ) {
-				// Skip if the webfont was registered through the Webfonts API.
-				if ( isset( $font_face['origin'] ) && 'gutenberg_wp_webfonts_api' === $font_face['origin'] ) {
+				// Skip if fontFace is not defined.
+				if ( empty( $font_family['fontFace'] ) ) {
 					continue;
 				}
 
-				// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
-				if ( ! empty( $font_face['src'] ) ) {
-					$font_face['src'] = (array) $font_face['src'];
+				$font_family['fontFace'] = (array) $font_family['fontFace'];
+
+				foreach ( $font_family['fontFace'] as $font_face ) {
+					// Skip if the webfont was registered through the Webfonts API.
+					if ( isset( $font_face['origin'] ) && 'gutenberg_wp_webfonts_api' === $font_face['origin'] ) {
+						continue;
+					}
+
+					// Check if webfonts have a "src" param, and if they do account for the use of "file:./".
+					if ( ! empty( $font_face['src'] ) ) {
+						$font_face['src'] = (array) $font_face['src'];
 
-					foreach ( $font_face['src'] as $src_key => $url ) {
-						// Tweak the URL to be relative to the theme root.
-						if ( ! str_starts_with( $url, 'file:./' ) ) {
-							continue;
+						foreach ( $font_face['src'] as $src_key => $url ) {
+							// Tweak the URL to be relative to the theme root.
+							if ( ! str_starts_with( $url, 'file:./' ) ) {
+								continue;
+							}
+							$font_face['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
 						}
-						$font_face['src'][ $src_key ] = get_theme_file_uri( str_replace( 'file:./', '', $url ) );
 					}
-				}
 
-				// Convert keys to kebab-case.
-				foreach ( $font_face as $property => $value ) {
-					$kebab_case               = _wp_to_kebab_case( $property );
-					$font_face[ $kebab_case ] = $value;
-					if ( $kebab_case !== $property ) {
-						unset( $font_face[ $property ] );
+					// Convert keys to kebab-case.
+					foreach ( $font_face as $property => $value ) {
+						$kebab_case               = _wp_to_kebab_case( $property );
+						$font_face[ $kebab_case ] = $value;
+						if ( $kebab_case !== $property ) {
+							unset( $font_face[ $property ] );
+						}
+					}
+
+					$font_family_handle = WP_Webfonts_Utils::get_font_family_from_variation( $font_face );
+					if ( empty( $font_family_handle ) && isset( $font_family['slug'] ) ) {
+						$font_family_handle = $font_family['slug'];
+					}
+					if ( ! empty( $font_family_handle ) ) {
+						$font_family_handle = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family_handle );
+					}
+					if ( empty( $font_family_handle ) ) {
+						_doing_it_wrong( __FUNCTION__, __( 'Font family not defined in the variation or "slug".', 'gutenberg' ), '6.1.0' );
+					}
+
+					$handles[] = $font_family_handle;
+					if ( ! array_key_exists( $font_family_handle, $webfonts ) ) {
+						$webfonts[ $font_family_handle ] = array();
 					}
-				}
 
-				$webfonts[] = $font_face;
+					$webfonts[ $font_family_handle ][] = $font_face;
+				}
 			}
 		}
-	}
-	foreach ( $webfonts as $webfont ) {
-		wp_webfonts()->register_webfont( $webfont );
-	}
-	foreach ( $webfonts as $webfont ) {
-		wp_webfonts()->enqueue_webfont( $webfont['font-family'] );
-	}
-}
 
-/**
- * Add missing fonts data to the global styles.
- *
- * @param array $data The global styles.
- * @return array The global styles with missing fonts data.
- */
-function gutenberg_add_registered_webfonts_to_theme_json( $data ) {
-	$font_families_registered = wp_webfonts()->get_all_webfonts();
-	$font_families_from_theme = array();
-	if ( ! empty( $data['settings'] ) && ! empty( $data['settings']['typography'] ) && ! empty( $data['settings']['typography']['fontFamilies'] ) ) {
-		$font_families_from_theme = $data['settings']['typography']['fontFamilies'];
+		wp_register_webfonts( $webfonts );
+		wp_enqueue_webfonts( $handles );
 	}
+}
 
+if ( ! function_exists( 'gutenberg_add_registered_webfonts_to_theme_json' ) ) {
 	/**
-	 * Helper to get an array of the font-families.
+	 * Add missing fonts data to the global styles.
 	 *
-	 * @param array $families_data The font-families data.
-	 * @return array The font-families array.
+	 * @param array $data The global styles.
+	 * @return array The global styles with missing fonts data.
 	 */
-	$get_families = static function( $families_data ) {
-		$families = array();
-		foreach ( $families_data as $family ) {
-			$families[] = WP_Webfonts::get_font_slug( $family );
-		}
-
-		// Micro-optimization: Use array_flip( array_flip( $array ) )
-		// instead of array_unique( $array ) because it's faster.
-		// The result is the same.
-		return array_flip( array_flip( $families ) );
-	};
+	function gutenberg_add_registered_webfonts_to_theme_json( $data ) {
+		$font_families_registered = wp_webfonts()->get_registered_font_families();
+		$font_families_from_theme = ! empty( $data['settings']['typography']['fontFamilies'] )
+			? $data['settings']['typography']['fontFamilies']
+			: array();
+
+		/**
+		 * Helper to get an array of the font-families.
+		 *
+		 * @param array $families_data The font-families data.
+		 * @return array The font-families array.
+		 */
+		$get_families = static function ( $families_data ) {
+			$families = array();
+			foreach ( $families_data as $family ) {
+				$font_family = WP_Webfonts_Utils::get_font_family_from_variation( $family );
+				$handle      = WP_Webfonts_Utils::convert_font_family_into_handle( $font_family );
+				if ( ! empty( $handle ) ) {
+					$families[ $handle ] = true;
+				}
+			}
 
-	// Diff the arrays to find the missing fonts.
-	$to_add = array_diff(
-		array_keys( $font_families_registered ),
-		$get_families( $font_families_from_theme )
-	);
+			return ! empty( $families ) ? array_keys( $families ) : array();
+		};
 
-	// Bail out early if there are no missing fonts.
-	if ( empty( $to_add ) ) {
-		return $data;
-	}
+		// Find missing fonts that are not in the theme's theme.json.
+		$to_add = array();
+		if ( ! empty( $font_families_registered ) ) {
+			$to_add = array_diff( $font_families_registered, $get_families( $font_families_from_theme ) );
+		}
 
-	// Make sure the path to settings.typography.fontFamilies.theme exists
-	// before adding missing fonts.
-	if ( empty( $data['settings'] ) ) {
-		$data['settings'] = array();
-	}
-	if ( empty( $data['settings']['typography'] ) ) {
-		$data['settings']['typography'] = array();
-	}
-	if ( empty( $data['settings']['typography']['fontFamilies'] ) ) {
-		$data['settings']['typography']['fontFamilies'] = array();
-	}
+		// Bail out early if there are no missing fonts.
+		if ( empty( $to_add ) ) {
+			return $data;
+		}
 
-	foreach ( $to_add as $slug ) {
-		$font_faces_for_family = $font_families_registered[ $slug ];
-		$family_name           = $font_faces_for_family[0]['font-family'];
-		$font_faces            = array();
+		// Make sure the path to settings.typography.fontFamilies.theme exists
+		// before adding missing fonts.
+		if ( empty( $data['settings'] ) ) {
+			$data['settings'] = array();
+		}
+		if ( empty( $data['settings']['typography'] ) ) {
+			$data['settings']['typography'] = array();
+		}
+		if ( empty( $data['settings']['typography']['fontFamilies'] ) ) {
+			$data['settings']['typography']['fontFamilies'] = array();
+		}
 
-		foreach ( $font_faces_for_family as $font_face ) {
-			$camel_cased = array( 'origin' => 'gutenberg_wp_webfonts_api' );
-			foreach ( $font_face as $key => $value ) {
-				$camel_cased[ lcfirst( str_replace( '-', '', ucwords( $key, '-' ) ) ) ] = $value;
-			}
-			$font_faces[] = $camel_cased;
+		foreach ( $to_add as $font_family_handle ) {
+			$data['settings']['typography']['fontFamilies'][] = wp_webfonts()->to_theme_json( $font_family_handle );
 		}
 
-		$data['settings']['typography']['fontFamilies'][] = array(
-			'fontFamily' => str_contains( $family_name, ' ' ) ? "'{$family_name}'" : $family_name,
-			'name'       => $family_name,
-			'slug'       => $slug,
-			'fontFace'   => $font_faces,
-		);
+		return $data;
 	}
-
-	return $data;
 }
 
 // `gutenberg_register_webfonts_from_theme_json()` calls `WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()`, which instantiates `WP_Theme_JSON_Gutenberg()`;
diff --git a/lib/experimental/webfonts-deprecations.php b/lib/experimental/webfonts-deprecations.php
new file mode 100644
index 00000000000000..bd50b0f476d96a
--- /dev/null
+++ b/lib/experimental/webfonts-deprecations.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * Deprecated functions provided here to give extenders time to change
+ * their plugins/themes before this API is introduced into Core.
+ *
+ * BACKPORT NOTE: Do not backport these deprecated functions to Core.
+ *
+ * @since      X.X.X
+ * @subpackage WebFonts
+ * @package    WordPress
+ */
+
+if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
+	/**
+	 * Enqueue a single font family that has been registered beforehand.
+	 *
+	 * Example of how to enqueue Source Serif Pro font:
+	 *
+	 * <code>
+	 * wp_enqueue_webfont( 'Source Serif Pro' );
+	 * </code>
+	 *
+	 * Font families should be enqueued from the `init` hook or later.
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_enqueue_webfonts().
+	 *
+	 * @param string $font_family_name The font family name to be enqueued.
+	 * @return bool True if successfully enqueued, else false.
+	 */
+	function wp_enqueue_webfont( $font_family_name ) {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_enqueue_webfonts()' );
+
+		wp_enqueue_webfonts( array( $font_family_name ) );
+		return true;
+	}
+}
+
+if ( ! function_exists( 'wp_register_webfont' ) ) {
+	/**
+	 * Registers a single webfont.
+	 *
+	 * Example of how to register Source Serif Pro font with font-weight range of 200-900:
+	 *
+	 * If the font file is contained within the theme:
+	 *
+	 * <code>
+	 * wp_register_webfont(
+	 *      array(
+	 *          'provider'    => 'local',
+	 *          'font-family' => 'Source Serif Pro',
+	 *          'font-weight' => '200 900',
+	 *          'font-style'  => 'normal',
+	 *          'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
+	 *      )
+	 * );
+	 * </code>
+	 *
+	 * @since 6.0.0
+	 * @deprecated X.X.X Use wp_register_webfonts().
+	 *
+	 * @param array $webfont Webfont to be registered.
+	 * @return string|false The font family slug if successfully registered, else false.
+	 */
+	function wp_register_webfont( array $webfont ) {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_register_webfonts()' );
+
+		return wp_webfonts()->register_webfont( $webfont, '', '', false );
+	}
+}
+
+if ( ! function_exists( 'wp_get_webfont_providers' ) ) {
+	/**
+	 * Gets all registered providers.
+	 *
+	 * Return an array of providers, each keyed by their unique
+	 * ID (i.e. the `$id` property in the provider's object) with
+	 * an instance of the provider (object):
+	 *     ID => provider instance
+	 *
+	 * Each provider contains the business logic for how to
+	 * process its specific font service (i.e. local or remote)
+	 * and how to generate the `@font-face` styles for its service.
+	 *
+	 * @since X.X.X
+	 * @deprecated X.X.X Use wp_webfonts()->get_providers().
+	 *
+	 * @return string[] All registered providers, each keyed by their unique ID.
+	 */
+	function wp_get_webfont_providers() {
+		_deprecated_function( __FUNCTION__, 'X.X.X', 'wp_webfonts()->get_providers()' );
+
+		$providers = array();
+		foreach ( wp_webfonts()->get_providers() as $id => $config ) {
+			$providers[ $id ] = $config['class'];
+		}
+
+		return $providers;
+	}
+}
diff --git a/lib/experimental/webfonts.php b/lib/experimental/webfonts.php
index 201101d1d7093e..c4ccc1640d9c83 100644
--- a/lib/experimental/webfonts.php
+++ b/lib/experimental/webfonts.php
@@ -4,23 +4,25 @@
  *
  * @package    WordPress
  * @subpackage WebFonts
- * @since      6.0.0
+ * @since      X.X.X
  */
 
 if ( ! function_exists( 'wp_webfonts' ) ) {
 	/**
-	 * Instantiates the webfonts controller, if not already set, and returns it.
+	 * Initialize $wp_webfonts if it has not been set.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
+	 *
+	 * @global WP_Web_Fonts $wp_webfonts
 	 *
-	 * @return WP_Webfonts Instance of the controller.
+	 * @return WP_Web_Fonts WP_Web_Fonts instance.
 	 */
 	function wp_webfonts() {
 		global $wp_webfonts;
 
-		if ( ! $wp_webfonts instanceof WP_Webfonts ) {
-			$wp_webfonts = new WP_Webfonts();
-			$wp_webfonts->init();
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = new WP_Web_Fonts();
+			$wp_webfonts->register_provider( 'local', 'WP_Webfonts_Provider_Local' );
 		}
 
 		return $wp_webfonts;
@@ -29,132 +31,111 @@ function wp_webfonts() {
 
 if ( ! function_exists( 'wp_register_webfonts' ) ) {
 	/**
-	 * Registers a collection of webfonts.
-	 *
-	 * Example of how to register Source Serif Pro font with font-weight range of 200-900
-	 * and font-style of normal and italic:
-	 *
-	 * If the font files are contained within the theme:
-	 * <code>
-	 * wp_register_webfonts(
-	 *      array(
-	 *          array(
-	 *              'provider'    => 'local',
-	 *              'font-family' => 'Source Serif Pro',
-	 *              'font-weight' => '200 900',
-	 *              'font-style'  => 'normal',
-	 *              'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
-	 *          ),
-	 *          array(
-	 *              'provider'    => 'local',
-	 *              'font-family' => 'Source Serif Pro',
-	 *              'font-weight' => '200 900',
-	 *              'font-style'  => 'italic',
-	 *              'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2' ),
-	 *          ),
-	 *      )
-	 * );
-	 * </code>
-	 *
-	 * Webfonts should be registered in the `after_setup_theme` hook.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array[] $webfonts Webfonts to be registered.
-	 *                        This contains an array of webfonts to be registered.
-	 *                        Each webfont is an array.
-	 * @return string[] The font family slug of the registered webfonts.
+	 * Registers one or more font-families and each of their variations.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array[] $webfonts {
+	 *     Web fonts to be registered, grouped by each font-family.
+	 *
+	 *     @type string $font-family => array[] $variations {
+	 *          An array of web font variations for this font-family.
+	 *          Each variation has the following structure.
+	 *
+	 *          @type array $variation {
+	 *              @type string $provider     The provider ID. Default 'local'.
+	 *              @type string $font-style   The font-style property. Default 'normal'.
+	 *              @type string $font-weight  The font-weight property. Default '400'.
+	 *              @type string $font-display The font-display property. Default 'fallback'.
+	 *         }
+	 *     }
+	 * }
+	 * @return string[] Array of registered font family handles.
 	 */
 	function wp_register_webfonts( array $webfonts ) {
-		$registered_webfont_slugs = array();
+		$registered  = array();
+		$wp_webfonts = wp_webfonts();
 
-		foreach ( $webfonts as $webfont ) {
-			$slug = wp_register_webfont( $webfont );
+		// BACKPORT NOTE: Do not backport this code block to Core.
+		if ( $wp_webfonts->is_deprecated_structure( $webfonts ) ) {
+			$webfonts = $wp_webfonts->migrate_deprecated_structure( $webfonts );
+		}
+		// BACKPORT NOTE: end of code block.
 
-			if ( is_string( $slug ) ) {
-				$registered_webfont_slugs[ $slug ] = true;
+		foreach ( $webfonts as $font_family => $variations ) {
+			$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+			if ( ! $font_family_handle ) {
+				continue;
 			}
+
+			// Register each of the variations for this font family.
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! WP_Webfonts_Utils::is_defined( $variation_handle ) ) {
+					$variation_handle = '';
+				}
+
+				$wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+			}
+
+			$registered[] = $font_family_handle;
 		}
 
-		return array_keys( $registered_webfont_slugs );
+		return $registered;
 	}
 }
 
-if ( ! function_exists( 'wp_register_webfont' ) ) {
+if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
 	/**
-	 * Registers a single webfont.
+	 * Enqueues one or more font family and all of its variations.
 	 *
-	 * Example of how to register Source Serif Pro font with font-weight range of 200-900:
+	 * @since X.X.X
 	 *
-	 * If the font file is contained within the theme:
-	 *
-	 * <code>
-	 * wp_register_webfont(
-	 *      array(
-	 *          'provider'    => 'local',
-	 *          'font-family' => 'Source Serif Pro',
-	 *          'font-weight' => '200 900',
-	 *          'font-style'  => 'normal',
-	 *          'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
-	 *      )
-	 * );
-	 * </code>
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont Webfont to be registered.
-	 * @return string|false The font family slug if successfully registered, else false.
+	 * @param string[] $font_families Font family(ies) to enqueue.
 	 */
-	function wp_register_webfont( array $webfont ) {
-		return wp_webfonts()->register_webfont( $webfont );
+	function wp_enqueue_webfonts( array $font_families ) {
+		$handles = array_map( array( WP_Webfonts_Utils::class, 'convert_font_family_into_handle' ), $font_families );
+
+		wp_webfonts()->enqueue( $handles );
 	}
 }
 
-if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
+if ( ! function_exists( 'wp_enqueue_webfont_variations' ) ) {
 	/**
-	 * Enqueues a collection of font families.
-	 *
-	 * Example of how to enqueue Source Serif Pro and Roboto font families, both registered beforehand.
-	 *
-	 * <code>
-	 * wp_enqueue_webfonts(
-	 *  'Roboto',
-	 *  'Sans Serif Pro'
-	 * );
-	 * </code>
+	 * Enqueues a specific set of web font variations.
 	 *
-	 * Font families should be enqueued from the `init` hook or later.
-	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @param string[] $webfonts Font families to be enqueued.
+	 * @param string|string[] $variation_handles Variation handle (string) or handles (array of strings).
 	 */
-	function wp_enqueue_webfonts( array $webfonts ) {
-		foreach ( $webfonts as $webfont ) {
-			wp_enqueue_webfont( $webfont );
-		}
+	function wp_enqueue_webfont_variations( $variation_handles ) {
+		wp_webfonts()->enqueue( $variation_handles );
 	}
 }
 
-if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
+if ( ! function_exists( 'wp_deregister_font_family' ) ) {
 	/**
-	 * Enqueue a single font family that has been registered beforehand.
-	 *
-	 * Example of how to enqueue Source Serif Pro font:
+	 * Deregisters a font family and all of its registered variations.
 	 *
-	 * <code>
-	 * wp_enqueue_webfont( 'Source Serif Pro' );
-	 * </code>
+	 * @since X.X.X
 	 *
-	 * Font families should be enqueued from the `init` hook or later.
+	 * @param string $font_family_handle The font family to remove.
+	 */
+	function wp_deregister_font_family( $font_family_handle ) {
+		wp_webfonts()->remove_font_family( $font_family_handle );
+	}
+}
+
+if ( ! function_exists( 'wp_deregister_webfont_variation' ) ) {
+	/**
+	 * Deregisters a font variation.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @param string $font_family_name The font family name to be enqueued.
-	 * @return bool True if successfully enqueued, else false.
+	 * @param string $font_family_handle The font family for this variation.
+	 * @param string $variation_handle   The variation's handle to remove.
 	 */
-	function wp_enqueue_webfont( $font_family_name ) {
-		return wp_webfonts()->enqueue_webfont( $font_family_name );
+	function wp_deregister_webfont_variation( $font_family_handle, $variation_handle ) {
+		wp_webfonts()->remove_variation( $font_family_handle, $variation_handle );
 	}
 }
 
@@ -189,28 +170,40 @@ function wp_register_webfont_provider( $name, $classname ) {
 	}
 }
 
-if ( ! function_exists( 'wp_get_webfont_providers' ) ) {
+if ( ! function_exists( 'wp_print_webfonts' ) ) {
 	/**
-	 * Gets all registered providers.
-	 *
-	 * Return an array of providers, each keyed by their unique
-	 * ID (i.e. the `$id` property in the provider's object) with
-	 * an instance of the provider (object):
-	 *     ID => provider instance
-	 *
-	 * Each provider contains the business logic for how to
-	 * process its specific font service (i.e. local or remote)
-	 * and how to generate the `@font-face` styles for its service.
+	 * Invokes each provider to process and print its styles.
 	 *
-	 * @since 6.0.0
+	 * @since X.X.X
 	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
+	 * @param string|string[]|false $handles Optional. Items to be processed: queue (false),
+	 *                                       single item (string), or multiple items (array of strings).
+	 *                                       Default false.
+	 * @return array|string[] Array of web font handles that have been processed.
+	 *                        An empty array if none were processed.
 	 */
-	function wp_get_webfont_providers() {
-		return wp_webfonts()->get_providers();
+	function wp_print_webfonts( $handles = false ) {
+		global $wp_webfonts;
+
+		if ( empty( $handles ) ) {
+			$handles = false;
+		}
+
+		_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
+
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			if ( ! $handles ) {
+				return array(); // No need to instantiate if nothing is there.
+			}
+		}
+
+		return wp_webfonts()->do_items( $handles );
 	}
 }
 
+add_action( 'admin_print_styles', 'wp_print_webfonts', 50 );
+add_action( 'wp_head', 'wp_print_webfonts', 50 );
+
 /**
  * Add webfonts mime types.
  */
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 6051aed56bc405..83e926da520e93 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -89,6 +89,22 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-global-styles-custom-css',
+		__( 'Global styles custom css ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => sprintf(
+				/* translators: %s: WordPress documentation for roles and capabilities. */
+				__( 'Test the Global Styles custom CSS field in the site editor. This requires a user to have <a href="%s">unfiltered html capabilities</a>.', 'gutenberg' ),
+				'https://wordpress.org/support/article/roles-and-capabilities/#unfiltered_html'
+			),
+			'id'    => 'gutenberg-global-styles-custom-css',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/load.php b/lib/load.php
index b634b85b977e38..1b296053965319 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -66,8 +66,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/persisted-preferences.php';
 require __DIR__ . '/compat/wordpress-6.1/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php';
-require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-6-1.php';
-require __DIR__ . '/compat/wordpress-6.1/class-wp-theme-json-resolver-6-1.php';
 require __DIR__ . '/compat/wordpress-6.1/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.1/wp-theme-get-post-templates.php';
 require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
@@ -78,32 +76,39 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.2 compat.
 require __DIR__ . '/compat/wordpress-6.2/script-loader.php';
+require __DIR__ . '/compat/wordpress-6.2/block-template-utils.php';
 require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
-require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
-require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
 require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
+require __DIR__ . '/compat/wordpress-6.2/theme.php';
+require __DIR__ . '/compat/wordpress-6.2/widgets.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
-require __DIR__ . '/experimental/register-webfonts-from-theme-json.php';
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/experimental/html/index.php';
 }
-require __DIR__ . '/experimental/class-wp-theme-json-gutenberg.php';
-require __DIR__ . '/experimental/class-wp-theme-json-resolver-gutenberg.php';
-require __DIR__ . '/experimental/class-wp-webfonts.php';
-require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
-require __DIR__ . '/experimental/class-wp-webfonts-provider-local.php';
-require __DIR__ . '/experimental/webfonts.php';
+require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/navigation-page.php';
 require __DIR__ . '/experimental/kses.php';
 
+// Web Fonts API.
+require __DIR__ . '/experimental/webfonts-deprecations.php'; // Temporary deprecated functions.
+require __DIR__ . '/experimental/class-wp-webfonts.php'; // Temporary deprecated class.
+require __DIR__ . '/experimental/class-wp-webfonts-utils.php';
+require __DIR__ . '/experimental/register-webfonts-from-theme-json.php';
+require __DIR__ . '/experimental/class-wp-web-fonts.php';
+require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
+require __DIR__ . '/experimental/class-wp-webfonts-provider-local.php';
+require __DIR__ . '/experimental/webfonts.php';
+
 // Plugin specific code.
+require __DIR__ . '/class-wp-theme-json-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
diff --git a/lib/compat/wordpress-6.1/theme-i18n.json b/lib/theme-i18n.json
similarity index 100%
rename from lib/compat/wordpress-6.1/theme-i18n.json
rename to lib/theme-i18n.json
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/theme.json
similarity index 96%
rename from lib/compat/wordpress-6.1/theme.json
rename to lib/theme.json
index 40432cedf38777..6221873a032973 100644
--- a/lib/compat/wordpress-6.1/theme.json
+++ b/lib/theme.json
@@ -186,6 +186,20 @@
 			],
 			"text": true
 		},
+		"shadow": {
+			"palette": [
+				{
+					"name": "Natural",
+					"slug": "natural",
+					"shadow": "0 .2rem .3rem 0 rgba(0,0,0, 0.3), 0 .5rem .6rem 0 rgba(0,0,0, 0.4)"
+				},
+				{
+					"name": "Sharp",
+					"slug": "sharp",
+					"shadow": ".5rem .5rem 0 0 rgba(0,0,0, 0.4)"
+				}
+			]
+		},
 		"layout": {
 			"definitions": {
 				"default": {
diff --git a/package-lock.json b/package-lock.json
index 66631f6f478042..942a06240f848c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.1",
+	"version": "14.9.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -17148,15 +17148,6 @@
 			"integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==",
 			"dev": true
 		},
-		"@types/unzipper": {
-			"version": "0.10.5",
-			"resolved": "https://registry.npmjs.org/@types/unzipper/-/unzipper-0.10.5.tgz",
-			"integrity": "sha512-NrLJb29AdnBARpg9S/4ktfPEisbJ0AvaaAr3j7Q1tg8AgcEUsq2HqbNzvgLRoWyRtjzeLEv7vuL39u1mrNIyNA==",
-			"dev": true,
-			"requires": {
-				"@types/node": "*"
-			}
-		},
 		"@types/uuid": {
 			"version": "8.3.1",
 			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
@@ -18322,8 +18313,7 @@
 				"@wordpress/preferences": "file:packages/preferences",
 				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
-				"fast-deep-equal": "^3.1.3",
-				"lodash": "^4.17.21"
+				"fast-deep-equal": "^3.1.3"
 			}
 		},
 		"@wordpress/data": {
@@ -18506,6 +18496,7 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
 				"@wordpress/warning": "file:packages/warning",
+				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
@@ -18543,6 +18534,7 @@
 				"@wordpress/style-engine": "file:packages/style-engine",
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/viewport": "file:packages/viewport",
+				"@wordpress/widgets": "file:packages/widgets",
 				"classnames": "^2.3.1",
 				"colord": "^2.9.2",
 				"downloadjs": "^1.4.7",
@@ -18987,20 +18979,6 @@
 			"version": "file:packages/npm-package-json-lint-config",
 			"dev": true
 		},
-		"@wordpress/nux": {
-			"version": "file:packages/nux",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"rememo": "^4.0.0"
-			}
-		},
 		"@wordpress/plugins": {
 			"version": "file:packages/plugins",
 			"requires": {
@@ -19165,8 +19143,7 @@
 			"requires": {
 				"@actions/core": "^1.8.0",
 				"@actions/github": "^5.0.1",
-				"jest-message-util": "^28.0.2",
-				"unzipper": "^0.10.11"
+				"jest-message-util": "^28.0.2"
 			},
 			"dependencies": {
 				"@actions/core": {
@@ -19582,8 +19559,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/i18n": "file:packages/i18n",
 				"@wordpress/url": "file:packages/url",
-				"fast-deep-equal": "^3.1.3",
-				"lodash": "^4.17.21"
+				"fast-deep-equal": "^3.1.3"
 			}
 		},
 		"@wordpress/shortcode": {
@@ -28889,7 +28865,8 @@
 			"version": "1.6.48",
 			"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
 			"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==",
-			"dev": true
+			"dev": true,
+			"optional": true
 		},
 		"big.js": {
 			"version": "5.2.2",
@@ -28935,16 +28912,6 @@
 				}
 			}
 		},
-		"binary": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-			"integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",
-			"dev": true,
-			"requires": {
-				"buffers": "~0.1.1",
-				"chainsaw": "~0.1.0"
-			}
-		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -29435,24 +29402,12 @@
 			"integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
 			"dev": true
 		},
-		"buffer-indexof-polyfill": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
-			"integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
-			"dev": true
-		},
 		"buffer-xor": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
 			"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
 			"dev": true
 		},
-		"buffers": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-			"integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
-			"dev": true
-		},
 		"builtin-modules": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
@@ -29851,23 +29806,6 @@
 			"integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==",
 			"dev": true
 		},
-		"chainsaw": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-			"integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",
-			"dev": true,
-			"requires": {
-				"traverse": ">=0.3.0 <0.4"
-			},
-			"dependencies": {
-				"traverse": {
-					"version": "0.3.9",
-					"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-					"integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=",
-					"dev": true
-				}
-			}
-		},
 		"chalk": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
@@ -32066,7 +32004,7 @@
 		"css.escape": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
 			"dev": true
 		},
 		"cssesc": {
@@ -33193,15 +33131,6 @@
 			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
 			"dev": true
 		},
-		"duplexer2": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-			"integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
-			"dev": true,
-			"requires": {
-				"readable-stream": "^2.0.2"
-			}
-		},
 		"duplexify": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
@@ -35019,7 +34948,7 @@
 		"eventemitter2": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz",
-			"integrity": "sha512-EUFhWUYzqqBZlzBMI+dPU8rnKXfQZEUnitnccQuEIAnvWFHCpt3+4fts2+4dpxLtlsiseVXCMFg37KjYChSxpg=="
+			"integrity": "sha1-+YNhBRexc3wLncZDvsqTiTwE3xg="
 		},
 		"eventemitter3": {
 			"version": "4.0.7",
@@ -36765,43 +36694,6 @@
 			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 			"optional": true
 		},
-		"fstream": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-			"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
-			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"inherits": "~2.0.0",
-				"mkdirp": ">=0.5 0",
-				"rimraf": "2"
-			},
-			"dependencies": {
-				"glob": {
-					"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",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.0.4",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
-				},
-				"rimraf": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-					"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-					"dev": true,
-					"requires": {
-						"glob": "^7.1.3"
-					}
-				}
-			}
-		},
 		"function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -38257,7 +38149,7 @@
 		"htmlparser2-without-node-native": {
 			"version": "3.9.2",
 			"resolved": "https://registry.npmjs.org/htmlparser2-without-node-native/-/htmlparser2-without-node-native-3.9.2.tgz",
-			"integrity": "sha512-+FplQXqmY5fRx6vCIp2P5urWaoBCpTNJMXnKP/6mNCcyb+AZWWJzA8D03peXfozlxDL+vpgLK5dJblqEgu8j6A==",
+			"integrity": "sha1-s+0FDYd9D/NGWWnjOYd7f59mMfY=",
 			"requires": {
 				"domelementtype": "^1.3.0",
 				"domhandler": "^2.3.0",
@@ -44501,12 +44393,6 @@
 				}
 			}
 		},
-		"listenercount": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
-			"integrity": "sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=",
-			"dev": true
-		},
 		"listr": {
 			"version": "0.14.3",
 			"resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
@@ -45000,7 +44886,7 @@
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
+			"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
 			"dev": true
 		},
 		"macos-release": {
@@ -52700,16 +52586,6 @@
 			"requires": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.0"
-			},
-			"dependencies": {
-				"scheduler": {
-					"version": "0.23.0",
-					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-					"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-					"requires": {
-						"loose-envify": "^1.1.0"
-					}
-				}
 			}
 		},
 		"react-easy-crop": {
@@ -53096,6 +52972,14 @@
 					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
 					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
 				},
+				"scheduler": {
+					"version": "0.21.0",
+					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+					"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+					"requires": {
+						"loose-envify": "^1.1.0"
+					}
+				},
 				"semver": {
 					"version": "6.3.0",
 					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -53752,15 +53636,6 @@
 					"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
 					"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
 					"dev": true
-				},
-				"scheduler": {
-					"version": "0.23.0",
-					"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-					"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-					"dev": true,
-					"requires": {
-						"loose-envify": "^1.1.0"
-					}
 				}
 			}
 		},
@@ -55609,9 +55484,9 @@
 			}
 		},
 		"scheduler": {
-			"version": "0.21.0",
-			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
-			"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
 			"requires": {
 				"loose-envify": "^1.1.0"
 			}
@@ -60457,38 +60332,6 @@
 				"os-homedir": "^1.0.0"
 			}
 		},
-		"unzipper": {
-			"version": "0.10.11",
-			"resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.11.tgz",
-			"integrity": "sha512-+BrAq2oFqWod5IESRjL3S8baohbevGcVA+teAIOYWM3pDVdseogqbzhhvvmiyQrUNKFUnDMtELW3X8ykbyDCJw==",
-			"dev": true,
-			"requires": {
-				"big-integer": "^1.6.17",
-				"binary": "~0.3.0",
-				"bluebird": "~3.4.1",
-				"buffer-indexof-polyfill": "~1.0.0",
-				"duplexer2": "~0.1.4",
-				"fstream": "^1.0.12",
-				"graceful-fs": "^4.2.2",
-				"listenercount": "~1.0.1",
-				"readable-stream": "~2.3.6",
-				"setimmediate": "~1.0.4"
-			},
-			"dependencies": {
-				"bluebird": {
-					"version": "3.4.7",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-					"integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=",
-					"dev": true
-				},
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-					"dev": true
-				}
-			}
-		},
 		"upath": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
diff --git a/package.json b/package.json
index b1ebbf430f35fe..0c66c6acc2acb8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.8.0-rc.1",
+	"version": "14.9.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -63,7 +63,6 @@
 		"@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
 		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",
-		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/preferences": "file:packages/preferences",
 		"@wordpress/preferences-persistence": "file:packages/preferences-persistence",
@@ -132,7 +131,6 @@
 		"@types/requestidlecallback": "0.3.4",
 		"@types/semver": "7.3.8",
 		"@types/sprintf-js": "1.1.2",
-		"@types/unzipper": "0.10.5",
 		"@types/uuid": "8.3.1",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
@@ -240,7 +238,6 @@
 		"terser-webpack-plugin": "5.1.4",
 		"typescript": "4.4.2",
 		"uglify-js": "3.13.7",
-		"unzipper": "0.10.11",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
 		"webpack": "5.65.0",
diff --git a/packages/base-styles/_long-content-fade.scss b/packages/base-styles/_long-content-fade.scss
new file mode 100644
index 00000000000000..d33a2aede366df
--- /dev/null
+++ b/packages/base-styles/_long-content-fade.scss
@@ -0,0 +1,61 @@
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+
+@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
+	content: "";
+	display: block;
+	position: absolute;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+
+	@if $z-index {
+		z-index: $z-index;
+	}
+
+	@if $direction == "bottom" {
+		background: linear-gradient(to top, transparent, $color 90%);
+		left: $edge;
+		right: $edge;
+		top: $edge;
+		bottom: calc(100% - $size);
+		width: auto;
+	}
+
+	@if $direction == "top" {
+		background: linear-gradient(to bottom, transparent, $color 90%);
+		top: calc(100% - $size);
+		left: $edge;
+		right: $edge;
+		bottom: $edge;
+		width: auto;
+	}
+
+	@if $direction == "left" {
+		background: linear-gradient(to left, transparent, $color 90%);
+		top: $edge;
+		left: $edge;
+		bottom: $edge;
+		right: auto;
+		width: $size;
+		height: auto;
+	}
+
+	@if $direction == "right" {
+		background: linear-gradient(to right, transparent, $color 90%);
+		top: $edge;
+		bottom: $edge;
+		right: $edge;
+		left: auto;
+		width: $size;
+		height: auto;
+	}
+}
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 9eee5820eba811..630456b5f59892 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,4 +1,5 @@
 @import "./functions";
+@import "./long-content-fade";
 
 /**
  * Breakpoint mixins
@@ -52,69 +53,6 @@
 	}
 }
 
-
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-
-@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
-	content: "";
-	display: block;
-	position: absolute;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	pointer-events: none;
-
-	@if $z-index {
-		z-index: $z-index;
-	}
-
-	@if $direction == "bottom" {
-		background: linear-gradient(to top, transparent, $color 90%);
-		left: $edge;
-		right: $edge;
-		top: $edge;
-		bottom: calc(100% - $size);
-		width: auto;
-	}
-
-	@if $direction == "top" {
-		background: linear-gradient(to bottom, transparent, $color 90%);
-		top: calc(100% - $size);
-		left: $edge;
-		right: $edge;
-		bottom: $edge;
-		width: auto;
-	}
-
-	@if $direction == "left" {
-		background: linear-gradient(to left, transparent, $color 90%);
-		top: $edge;
-		left: $edge;
-		bottom: $edge;
-		right: auto;
-		width: $size;
-		height: auto;
-	}
-
-	@if $direction == "right" {
-		background: linear-gradient(to right, transparent, $color 90%);
-		top: $edge;
-		bottom: $edge;
-		right: $edge;
-		left: auto;
-		width: $size;
-		height: auto;
-	}
-}
-
 /**
  * Focus styles.
  */
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index c4b0edd50e61b8..5bf04f5b73474b 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -49,7 +49,7 @@ $button-size: 36px;
 $button-size-small: 24px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
-$nav-sidebar-width: 300px;
+$nav-sidebar-width: 360px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index ec3be48f1b9752..d7c7842bdfd248 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -142,10 +142,10 @@ $z-layers: (
 	".skip-to-selected-block": 100000,
 	".interface-interface-skeleton__actions": 100000,
 
-	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
-	".nux-dot-tip": 1000001,
+	// The focus styles of the region navigation containers should be above their content.
+	".is-focusing-regions {region} :focus::after": 1000000,
 
-	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
+	// Show tooltips above wp-admin menus, submenus, and sidebar:
 	".components-tooltip": 1000002,
 
 	// Keep template popover underneath 'Create custom template' modal overlay.
@@ -178,7 +178,11 @@ $z-layers: (
 	// Appear under the topbar.
 	".customize-widgets__block-toolbar": 7,
 
-	".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker": -1,
+	// Site editor layout
+	".edit-site-layout__hub": 3,
+	".edit-site-layout__header": 2,
+	".edit-site-layout__canvas-container": 2,
+	".edit-site-layout__sidebar": 1,
 );
 
 @function z-index( $key ) {
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
index d2939624fab68e..3e22334aeb6a6d 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
 import DownloadableBlockListItem from '../';
 import { plugin } from '../../test/fixtures';
 
+jest.useFakeTimers();
+
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
 	const mock = jest.fn();
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index e9f3aebc0132c6..d3759fb4a87819 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -10,7 +10,13 @@
 
 ### Enhancements
 
-- `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
+-   `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
+-   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
+
+### Bug Fix
+
+-   `SpacingSizesControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#46530](https://github.com/WordPress/gutenberg/pull/46530)).
+-   `FocalPointPicker`:  Fix layout misalignment when placed in the `BlockInspector` ([#46631](https://github.com/WordPress/gutenberg/pull/46631)).
 
 ## 10.5.0 (2022-11-16)
 
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 5760f1584c5db8..5a861eaa1acad7 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -428,6 +428,7 @@ _Parameters_
 -   _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional.
 -   _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional.
 -   _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+-   _args.minimumFontSizeLimit_ `?string`: The smallest a calculated font size may be. Optional.
 
 _Returns_
 
@@ -520,7 +521,7 @@ attributes.
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
--   _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values.
+-   _fluidTypographySettings_ `Object|boolean`: If boolean, whether the function should try to convert font sizes to fluid values, otherwise an object containing theme fluid typography settings.
 
 _Returns_
 
diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js
index c792b3e9b7f82b..5cfab9d2d48a04 100644
--- a/packages/block-editor/src/components/alignment-control/test/index.js
+++ b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index f50e69044f9e59..171a8d34c45f5c 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/packages/block-editor/src/components/alignment-control/ui.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index abf2a0a7c448ae..58846a04cd1c49 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();
diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
index ba6f885a09cd55..ab6213b4389282 100644
--- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
+++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
@@ -10,6 +10,7 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
@@ -40,14 +41,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
 		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
-			return [];
+			return EMPTY_ARRAY;
 		}
 		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
 	const enabledControls = controls
@@ -66,7 +67,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		enabledControls.length === 1 &&
 		enabledControls[ 0 ].name === 'none'
 	) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 
 	return enabledControls;
diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index ad3484c9e4a049..58d7b3a04adb9e 100644
--- a/packages/block-editor/src/components/block-icon/index.js
+++ b/packages/block-editor/src/components/block-icon/index.js
@@ -10,14 +10,16 @@ import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { memo } from '@wordpress/element';
 
-function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className, context } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
index 28d82660c54df8..0524bb6efa7c5e 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -13,6 +13,10 @@ import { image } from '@wordpress/icons';
  */
 import BlockIcon from '../';
 
+function getIconWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
@@ -23,13 +27,13 @@ describe( 'BlockIcon', () => {
 	it( 'renders a span without the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect( container.firstChild ).not.toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).not.toHaveClass( 'has-colors' );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		expect( container.firstChild ).toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'has-colors' );
 	} );
 
 	it( 'supports adding a className to the wrapper', () => {
@@ -37,7 +41,7 @@ describe( 'BlockIcon', () => {
 			<BlockIcon icon={ image } className="foo-bar" />
 		);
 
-		expect( container.firstChild ).toHaveClass( 'foo-bar' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
@@ -51,7 +55,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).not.toHaveAttribute( 'style' );
+		expect( getIconWrapper( container ) ).not.toHaveAttribute( 'style' );
 	} );
 
 	it( 'adds background and foreground styles when colors are enabled', () => {
@@ -66,7 +70,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( getIconWrapper( container ) ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index d676bf5dac6a5b..3e2aebb5d500a5 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -14,6 +14,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback } from '@wordpress/element';
@@ -171,6 +172,24 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	const blockInspectorAnimationSettings = useSelect(
+		( select ) => {
+			if ( isOffCanvasNavigationEditorEnabled ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.__experimentalBlockInspectorAnimation;
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+	);
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -231,11 +250,65 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			/>
 		);
 	}
+
 	return (
-		<BlockInspectorSingleBlock
-			clientId={ selectedBlockClientId }
-			blockName={ blockType.name }
-		/>
+		<BlockInspectorSingleBlockWrapper
+			animate={
+				isOffCanvasNavigationEditorEnabled &&
+				blockInspectorAnimationSettings
+			}
+			wrapper={ ( children ) => (
+				<AnimatedContainer
+					blockInspectorAnimationSettings={
+						blockInspectorAnimationSettings
+					}
+					selectedBlockClientId={ selectedBlockClientId }
+				>
+					{ children }
+				</AnimatedContainer>
+			) }
+		>
+			<BlockInspectorSingleBlock
+				clientId={ selectedBlockClientId }
+				blockName={ blockType.name }
+			/>
+		</BlockInspectorSingleBlockWrapper>
+	);
+};
+
+const BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {
+	return animate ? wrapper( children ) : children;
+};
+
+const AnimatedContainer = ( {
+	blockInspectorAnimationSettings,
+	selectedBlockClientId,
+	children,
+} ) => {
+	const animationOrigin =
+		blockInspectorAnimationSettings &&
+		blockInspectorAnimationSettings.enterDirection === 'leftToRight'
+			? -50
+			: 50;
+
+	return (
+		<motion.div
+			animate={ {
+				x: 0,
+				opacity: 1,
+				transition: {
+					ease: 'easeInOut',
+					duration: 0.14,
+				},
+			} }
+			initial={ {
+				x: animationOrigin,
+				opacity: 0,
+			} }
+			key={ selectedBlockClientId }
+		>
+			{ children }
+		</motion.div>
 	);
 };
 
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 08ca013629927e..3dd4744fb87e2a 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -17,6 +17,13 @@
 			margin-bottom: $grid-unit-10;
 		}
 	}
+
+	// Reset unexpected margin-bottom from being applied to the `BaseControl`
+	// component of the `FocalPointPicker` component.
+	.components-focal-point-picker-control .components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index cb20d64cf80dcd..fc1e624e9a15d5 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -16,67 +16,78 @@ import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	rootClientId,
-	renderAppender: CustomAppender,
-	className,
-	tagName: TagName = 'div',
-} ) {
-	const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } =
-		useSelect(
-			( select ) => {
-				const {
-					canInsertBlockType,
-					getTemplateLock,
-					getSelectedBlockClientId,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				return {
-					hideInserter:
-						!! getTemplateLock( rootClientId ) ||
-						__unstableGetEditorMode() === 'zoom-out',
-					canInsertDefaultBlock: canInsertBlockType(
-						getDefaultBlockName(),
-						rootClientId
-					),
-					selectedBlockClientId: getSelectedBlockClientId(),
-				};
-			},
-			[ rootClientId ]
-		);
+function DefaultAppender( { rootClientId } ) {
+	const canInsertDefaultBlock = useSelect( ( select ) =>
+		select( blockEditorStore ).canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		)
+	);
+
+	if ( canInsertDefaultBlock ) {
+		// Render the default block appender if the context supports use
+		// of the default appender.
+		return <DefaultBlockAppender rootClientId={ rootClientId } />;
+	}
+
+	// Fallback in case the default block can't be inserted.
+	return (
+		<ButtonBlockAppender
+			rootClientId={ rootClientId }
+			className="block-list-appender__toggle"
+		/>
+	);
+}
+
+function useAppender( rootClientId, CustomAppender ) {
+	const { hideInserter, isParentSelected } = useSelect(
+		( select ) => {
+			const {
+				getTemplateLock,
+				getSelectedBlockClientId,
+				__unstableGetEditorMode,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				hideInserter:
+					!! getTemplateLock( rootClientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+				isParentSelected:
+					rootClientId === selectedBlockClientId ||
+					( ! rootClientId && ! selectedBlockClientId ),
+			};
+		},
+		[ rootClientId ]
+	);
 
 	if ( hideInserter || CustomAppender === false ) {
 		return null;
 	}
 
-	let appender;
 	if ( CustomAppender ) {
 		// Prefer custom render prop if provided.
-		appender = <CustomAppender />;
-	} else {
-		const isParentSelected =
-			selectedBlockClientId === rootClientId ||
-			( ! rootClientId && ! selectedBlockClientId );
-
-		if ( ! isParentSelected ) {
-			return null;
-		}
-
-		if ( canInsertDefaultBlock ) {
-			// Render the default block appender when renderAppender has not been
-			// provided and the context supports use of the default appender.
-			appender = <DefaultBlockAppender rootClientId={ rootClientId } />;
-		} else {
-			// Fallback in the case no renderAppender has been provided and the
-			// default block can't be inserted.
-			appender = (
-				<ButtonBlockAppender
-					rootClientId={ rootClientId }
-					className="block-list-appender__toggle"
-				/>
-			);
-		}
+		return <CustomAppender />;
+	}
+
+	if ( ! isParentSelected ) {
+		return null;
+	}
+
+	return <DefaultAppender rootClientId={ rootClientId } />;
+}
+
+function BlockListAppender( {
+	rootClientId,
+	renderAppender,
+	className,
+	tagName: TagName = 'div',
+} ) {
+	const appender = useAppender( rootClientId, renderAppender );
+
+	if ( ! appender ) {
+		return null;
 	}
 
 	return (
diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/packages/block-editor/src/components/block-list-appender/index.native.js
index 913bfb01732dde..2db2ed930b8cc9 100644
--- a/packages/block-editor/src/components/block-list-appender/index.native.js
+++ b/packages/block-editor/src/components/block-list-appender/index.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -11,14 +11,48 @@ import DefaultBlockAppender from '../default-block-appender';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
-function BlockListAppender( {
-	blockClientIds,
+function DefaultAppender( { rootClientId, showSeparator } ) {
+	const { blockClientIds, canInsertDefaultBlock } = useSelect(
+		( select ) => {
+			const { getBlockOrder, canInsertBlockType } =
+				select( blockEditorStore );
+			return {
+				blockClientIds: getBlockOrder( rootClientId ),
+				canInsertDefaultBlock: canInsertBlockType(
+					getDefaultBlockName(),
+					rootClientId
+				),
+			};
+		},
+		[ rootClientId ]
+	);
+
+	if ( ! canInsertDefaultBlock ) {
+		return null;
+	}
+
+	return (
+		<DefaultBlockAppender
+			rootClientId={ rootClientId }
+			lastBlockClientId={ blockClientIds[ blockClientIds.length - 1 ] }
+			containerStyle={ styles.blockListAppender }
+			placeholder={ blockClientIds.length > 0 ? '' : null }
+			showSeparator={ showSeparator }
+		/>
+	);
+}
+
+export default function BlockListAppender( {
 	rootClientId,
-	canInsertDefaultBlock,
-	isLocked,
 	renderAppender: CustomAppender,
 	showSeparator,
 } ) {
+	const isLocked = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).getTemplateLock( rootClientId ),
+		[ rootClientId ]
+	);
+
 	if ( isLocked ) {
 		return null;
 	}
@@ -27,33 +61,10 @@ function BlockListAppender( {
 		return <CustomAppender showSeparator={ showSeparator } />;
 	}
 
-	if ( canInsertDefaultBlock ) {
-		return (
-			<DefaultBlockAppender
-				rootClientId={ rootClientId }
-				lastBlockClientId={
-					blockClientIds[ blockClientIds.length - 1 ]
-				}
-				containerStyle={ styles.blockListAppender }
-				placeholder={ blockClientIds.length > 0 ? '' : null }
-				showSeparator={ showSeparator }
-			/>
-		);
-	}
-
-	return null;
+	return (
+		<DefaultAppender
+			rootClientId={ rootClientId }
+			showSeparator={ showSeparator }
+		/>
+	);
 }
-
-export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
-		select( blockEditorStore );
-
-	return {
-		isLocked: !! getTemplateLock( rootClientId ),
-		blockClientIds: getBlockOrder( rootClientId ),
-		canInsertDefaultBlock: canInsertBlockType(
-			getDefaultBlockName(),
-			rootClientId
-		),
-	};
-} )( BlockListAppender );
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
index 0c00b36e4d7666..018f695086b640 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -286,6 +286,7 @@ const BlockActionsMenu = ( {
 				} }
 			/>
 			<Picker
+				testID="block-actions-menu"
 				ref={ blockActionsMenuPickerRef }
 				options={ options }
 				onChange={ onPickerSelect }
@@ -312,7 +313,7 @@ const BlockActionsMenu = ( {
 const EMPTY_BLOCK_LIST = [];
 
 export default compose(
-	withSelect( ( select, { clientIds } ) => {
+	withSelect( ( select, { clientId } ) => {
 		const {
 			getBlockIndex,
 			getBlockRootClientId,
@@ -325,23 +326,18 @@ export default compose(
 			canInsertBlockType,
 			getTemplateLock,
 		} = select( blockEditorStore );
-		const normalizedClientIds = Array.isArray( clientIds )
-			? clientIds
-			: [ clientIds ];
-		const block = getBlock( normalizedClientIds );
-		const blockName = getBlockName( normalizedClientIds );
+		const block = getBlock( clientId );
+		const blockName = getBlockName( clientId );
 		const blockType = getBlockType( blockName );
 		const blockTitle = blockType?.title;
-		const firstClientId = normalizedClientIds[ 0 ];
-		const rootClientId = getBlockRootClientId( firstClientId );
+		const rootClientId = getBlockRootClientId( clientId );
 		const blockOrder = getBlockOrder( rootClientId );
 
-		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex(
-			normalizedClientIds[ normalizedClientIds.length - 1 ]
-		);
+		const currentBlockIndex = getBlockIndex( clientId );
+		const isFirst = currentBlockIndex === 0;
+		const isLast = currentBlockIndex === blockOrder.length - 1;
 
-		const innerBlocks = getBlocksByClientId( clientIds );
+		const innerBlocks = getBlocksByClientId( clientId );
 
 		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
 			return (
@@ -378,13 +374,13 @@ export default compose(
 		return {
 			blockTitle,
 			canInsertBlockType,
-			currentIndex: firstIndex,
+			currentIndex: currentBlockIndex,
 			getBlocksByClientId,
 			isEmptyDefaultBlock,
 			isLocked,
 			canDuplicate,
-			isFirst: firstIndex === 0,
-			isLast: lastIndex === blockOrder.length - 1,
+			isFirst,
+			isLast,
 			isReusableBlockType,
 			reusableBlock,
 			rootClientId,
@@ -395,7 +391,7 @@ export default compose(
 	withDispatch(
 		(
 			dispatch,
-			{ clientIds, rootClientId, currentIndex, selectedBlockClientId },
+			{ clientId, rootClientId, currentIndex, selectedBlockClientId },
 			{ select }
 		) => {
 			const {
@@ -404,7 +400,7 @@ export default compose(
 				duplicateBlocks,
 				removeBlocks,
 				insertBlock,
-				replaceBlocks,
+				replaceBlock,
 				clearSelectedBlock,
 			} = dispatch( blockEditorStore );
 			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
@@ -426,12 +422,12 @@ export default compose(
 					);
 				},
 				duplicateBlock() {
-					return duplicateBlocks( clientIds );
+					return duplicateBlocks( [ clientId ] );
 				},
 				onMoveDown: ( ...args ) =>
-					moveBlocksDown( clientIds, rootClientId, ...args ),
+					moveBlocksDown( [ clientId ], rootClientId, ...args ),
 				onMoveUp: ( ...args ) =>
-					moveBlocksUp( clientIds, rootClientId, ...args ),
+					moveBlocksUp( [ clientId ], rootClientId, ...args ),
 				openGeneralSidebar: () =>
 					openGeneralSidebar( 'edit-post/block' ),
 				pasteBlock: ( clipboardBlock ) => {
@@ -452,7 +448,7 @@ export default compose(
 							rootClientId
 						);
 					} else {
-						replaceBlocks( clientIds, clipboardBlock );
+						replaceBlock( clientId, clipboardBlock );
 					}
 				},
 				removeBlocks,
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
index b1b9c4635a29b7..d4dd69551715f4 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -98,7 +98,7 @@ const BlockMobileToolbar = ( {
 			</BlockSettingsButton.Slot>
 
 			<BlockActionsMenu
-				clientIds={ [ clientId ] }
+				clientId={ clientId }
 				wrapBlockMover={ wrapBlockMover }
 				wrapBlockSettings={ wrapBlockSettings && fillsLength }
 				isStackedHorizontally={ isStackedHorizontally }
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap b/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
new file mode 100644
index 00000000000000..c5b98857991c44
--- /dev/null
+++ b/packages/block-editor/src/components/block-mobile-toolbar/test/__snapshots__/block-actions-menu.native.js.snap
@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Block Actions Menu block options copies and pastes a block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Block Actions Menu block options does not replace a non empty Paragraph block when pasting another block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options duplicates a block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class=\\"wp-block-pullquote\\"><blockquote><p>Hello!</p></blockquote></figure>
+<!-- /wp:pullquote -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks disables the Move Down button for the last block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks disables the Move Up button for the first block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
new file mode 100644
index 00000000000000..4731470b7bf3f5
--- /dev/null
+++ b/packages/block-editor/src/components/block-mobile-toolbar/test/block-actions-menu.native.js
@@ -0,0 +1,439 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	changeTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Block Actions Menu', () => {
+	it( "renders the block name in the Picker's header", async () => {
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph -->
+            <p></p>
+            <!-- /wp:paragraph -->`,
+		} );
+		const { getByLabelText, getByRole } = screen;
+
+		// Get block
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open block actions menu
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
+		fireEvent.press( blockActionsButton );
+
+		// Get Picker title
+		const pickerHeader = getByRole( 'header' );
+		const headerTitle = within( pickerHeader ).getByText(
+			/Paragraph block options/
+		);
+		expect( headerTitle ).toBeVisible();
+	} );
+
+	describe( 'moving blocks', () => {
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			let blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Down button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block down' )
+			);
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Tap on the Move Up button
+			fireEvent.press(
+				within( blockActionsMenu ).getByLabelText( 'Move block up' )
+			);
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100, // To collapse the up/arrow buttons bellow blocks
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Up button
+			const upButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block up' );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor( {
+				screenWidth: 100,
+			} );
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Get block actions modal
+			const blockActionsMenu = await getByTestId( 'block-actions-menu' );
+
+			// Get the Move Down button
+			const downButton =
+				within( blockActionsMenu ).getByLabelText( 'Move block down' );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'block options', () => {
+		it( 'copies and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Paste block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'does not replace a non empty Paragraph block when pasting another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy block/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Past block after button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'cuts and pastes a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Cut block/ ) );
+
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Cut button
+			fireEvent.press( getByLabelText( /Paste block after/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'duplicates a block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Duplicate button
+			fireEvent.press( getByLabelText( /Duplicate block/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'transforms a Paragraph block into a Pullquote block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByRole } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			fireEvent.press( getByLabelText( /Open Block Actions Menu/ ) );
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Transform block…/ ) );
+
+			// Get Picker title
+			const pickerHeader = getByRole( 'header' );
+			const headerTitle = within( pickerHeader ).getByText(
+				/Transform Paragraph to/
+			);
+			expect( headerTitle ).toBeVisible();
+
+			// Tap on the Transform block button
+			fireEvent.press( getByLabelText( /Pullquote/ ) );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
index 053c3289b80550..a896a7909f0b9e 100644
--- a/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
+++ b/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
+"<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
 exports[`Block Mover Picker should match snapshot 1`] = `
 Array [
   <View>
diff --git a/packages/block-editor/src/components/block-mover/test/index.native.js b/packages/block-editor/src/components/block-mover/test/index.native.js
index f75583c9613733..903289c6d5a316 100644
--- a/packages/block-editor/src/components/block-mover/test/index.native.js
+++ b/packages/block-editor/src/components/block-mover/test/index.native.js
@@ -1,7 +1,22 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	render,
+	changeTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -46,4 +61,145 @@ describe( 'Block Mover Picker', () => {
 		const screen = render( <BlockMover { ...props } /> );
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
+
+	describe( 'moving blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'moves blocks up and down', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( spacerBlock );
+
+			// Tap on the Move Down button
+			const downButton = getByLabelText(
+				/Move block down from row 2 to row 3/
+			);
+			fireEvent.press( downButton );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Tap on the Move Up button
+			const upButton = getByLabelText(
+				/Move block up from row 2 to row 1/
+			);
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Up button for the first block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			let paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get the Move Up button
+			const upButton = getByLabelText( /Move block up/ );
+			const isUpButtonDisabled =
+				upButton.props.accessibilityState?.disabled;
+			expect( isUpButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( upButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'disables the Move Down button for the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+			const paragraphField =
+				within( paragraphBlock ).getByPlaceholderText(
+					'Start writing…'
+				);
+			changeTextOfRichText( paragraphField, 'Hello!' );
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 3,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get the Move Down button
+			const downButton = getByLabelText( /Move block down/ );
+			const isDownButtonDisabled =
+				downButton.props.accessibilityState?.disabled;
+			expect( isDownButtonDisabled ).toBe( true );
+
+			// Press the button to make sure the block doesn't move
+			fireEvent.press( downButton );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
index d36bc4ae80aa16..b39aa070c529e3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -28,6 +28,7 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
 	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
@@ -67,6 +68,7 @@ const SetupContent = ( {
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
 						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
@@ -74,7 +76,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -98,12 +100,17 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
 		</div>
 	);
 }
@@ -139,6 +146,7 @@ const BlockPatternSetup = ( {
 	filterPatternsFn,
 	onBlockPatternSelect,
 	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
@@ -165,6 +173,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }
diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 15edb5cd75f3ff..c1b85f511d9514 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -6,8 +6,9 @@
 	width: 100%;
 	border-radius: $radius-block-ui;
 
-	// TODO change to check parent.
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -30,10 +31,33 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+					// Windows High Contrast mode will show this outline, but not the box-shadow.
+					outline: 2px solid transparent;
+				}
+				&:hover .block-editor-block-pattern-setup-list__item-title,
+				&:focus .block-editor-block-pattern-setup-list__item-title {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
 
+				.block-editor-block-pattern-setup-list__item-title {
+					padding-top: $grid-unit-10;
+					font-size: 12px;
+					text-align: center;
+					cursor: pointer;
+				}
+
 				.block-editor-block-preview__container {
 					min-height: 100px;
 					border-radius: $radius-block-ui;
@@ -84,6 +108,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 
 		.carousel-container {
@@ -91,6 +116,7 @@
 			position: relative;
 			padding: 0;
 			margin: 0;
+			height: 100%;
 			list-style: none;
 			transform-style: preserve-3d;
 			* {
@@ -100,6 +126,8 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				height: 100%;
+				background-color: $white;
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;
diff --git a/packages/block-editor/src/components/block-styles/index.native.js b/packages/block-editor/src/components/block-styles/index.native.js
index 142deafacfa7f1..7967e79c2c1cd8 100644
--- a/packages/block-editor/src/components/block-styles/index.native.js
+++ b/packages/block-editor/src/components/block-styles/index.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { ScrollView } from 'react-native';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const renderedStyles = find( styles, 'isDefault' )
+	const renderedStyles = styles?.find( ( style ) => style.isDefault )
 		? styles
 		: [
 				{
diff --git a/packages/block-editor/src/components/block-styles/utils.js b/packages/block-editor/src/components/block-styles/utils.js
index f60a23a4287b21..511e78da83da60 100644
--- a/packages/block-editor/src/components/block-styles/utils.js
+++ b/packages/block-editor/src/components/block-styles/utils.js
@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -23,13 +19,15 @@ export function getActiveStyle( styles, className ) {
 		}
 
 		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
+		const activeStyle = styles?.find(
+			( { name } ) => name === potentialStyleName
+		);
 		if ( activeStyle ) {
 			return activeStyle;
 		}
 	}
 
-	return find( styles, 'isDefault' );
+	return getDefaultStyle( styles );
 }
 
 /**
@@ -88,5 +86,5 @@ export function getRenderedStyles( styles ) {
  * @return {Object?}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
-	return find( styles, 'isDefault' );
+	return styles?.find( ( style ) => style.isDefault );
 }
diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
index 8c1983dd8569d9..0a5ae2342a39b7 100644
--- a/packages/block-editor/src/components/block-switcher/test/index.js
+++ b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -15,7 +15,8 @@ import { copy } from '@wordpress/icons';
  * Internal dependencies
  */
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
-import { act } from 'react-test-renderer';
+
+jest.useFakeTimers();
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
index 7ae9f8cbaa4ced..a1726441031b14 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -11,31 +11,28 @@ import UngroupButton from '../ungroup-button';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockToolbar() {
-	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
+	const { isSelected, isValidAndVisual } = useSelect( ( select ) => {
 		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
 			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {
-			blockClientIds: selectedBlockClientIds,
-			isValid:
+			isSelected: selectedBlockClientIds.length > 0,
+			isValidAndVisual:
 				selectedBlockClientIds.length === 1
-					? isBlockValid( selectedBlockClientIds[ 0 ] )
-					: null,
-			mode:
-				selectedBlockClientIds.length === 1
-					? getBlockMode( selectedBlockClientIds[ 0 ] )
-					: null,
+					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
+					  getBlockMode( selectedBlockClientIds[ 0 ] ) === 'visual'
+					: false,
 		};
 	}, [] );
 
-	if ( blockClientIds.length === 0 ) {
+	if ( ! isSelected ) {
 		return null;
 	}
 
 	return (
 		<>
-			{ mode === 'visual' && isValid && (
+			{ isValidAndVisual && (
 				<>
 					<UngroupButton />
 					<BlockControls.Slot group="block" />
diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
index 343cd50058655a..294813b1f34a15 100644
--- a/packages/block-editor/src/components/block-tools/selected-block-popover.js
+++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -240,8 +239,7 @@ function wrapperSelector( select ) {
 	);
 
 	// Get the clientId of the topmost parent with the capture toolbars setting.
-	const capturingClientId = find(
-		blockParentsClientIds,
+	const capturingClientId = blockParentsClientIds.find(
 		( parentClientId ) =>
 			parentBlockListSettings[ parentClientId ]
 				?.__experimentalCaptureToolbars
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 27e214ec39bb07..6fbad1aab612d3 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -43,7 +43,11 @@ function BlockVariationPicker( {
 					<li key={ variation.name }>
 						<Button
 							variant="secondary"
-							icon={ variation.icon }
+							icon={
+								variation.icon && variation.icon.src
+									? variation.icon.src
+									: variation.icon
+							}
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index f2645357a197c3..6db1bb96b58798 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockVerticalAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockVerticalAlignmentUI', () => {
 	const alignment = 'top';
 	const onChange = jest.fn();
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 685adea3a664d6..fb81f800c2b98d 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -45,7 +45,6 @@ function ColorGradientControlInner( {
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	className,
 	label,
@@ -80,9 +79,6 @@ function ColorGradientControlInner( {
 						: onColorChange
 				}
 				{ ...{ colors, disableCustomColors } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
@@ -103,9 +99,6 @@ function ColorGradientControlInner( {
 						: onGradientChange
 				}
 				{ ...{ gradients, disableCustomGradients } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 9c13efba03cdbb..eb78b8b29a41ba 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -111,7 +111,6 @@ export default function ColorGradientSettingsDropdown( {
 	enableAlpha,
 	gradients,
 	settings,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
@@ -140,7 +139,6 @@ export default function ColorGradientSettingsDropdown( {
 					onColorChange: setting.onColorChange,
 					onGradientChange: setting.onGradientChange,
 					showTitle: false,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					...setting,
 				};
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index a69a53e549902a..a5bab5a3ca986c 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -18,9 +18,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+import useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -39,7 +37,6 @@ export const PanelColorGradientSettingsInner = ( {
 	settings,
 	title,
 	showTitle = true,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 } ) => {
@@ -100,7 +97,6 @@ export const PanelColorGradientSettingsInner = ( {
 					gradients,
 					disableCustomColors,
 					disableCustomGradients,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					enableAlpha,
 				} }
@@ -114,19 +110,8 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSingleSelect = ( props ) => {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	return (
-		<PanelColorGradientSettingsInner
-			{ ...{ ...colorGradientSettings, ...props } }
-		/>
-	);
-};
-
-const PanelColorGradientSettingsMultipleSelect = ( props ) => {
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+const PanelColorGradientSettingsSelect = ( props ) => {
+	const colorGradientSettings = useColorsAndGradientsPalettes();
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -140,10 +125,7 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	if ( props.__experimentalHasMultipleOrigins ) {
-		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
-	}
-	return <PanelColorGradientSettingsSingleSelect { ...props } />;
+	return <PanelColorGradientSettingsSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;
diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
deleted file mode 100644
index 6a538a33de44e7..00000000000000
--- a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import useSetting from '../use-setting';
-
-export default function useCommonSingleMultipleSelects() {
-	return {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
-	};
-}
diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
index ca3ecc26446358..8ed039565ae47a 100644
--- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -8,7 +8,6 @@ import { _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
 
 /**
  * Retrieves color and gradient related settings.
@@ -19,7 +18,10 @@ import useCommonSingleMultipleSelects from './use-common-single-multiple-selects
  * @return {Object} Color and gradient related settings.
  */
 export default function useMultipleOriginColorsAndGradients() {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const colorGradientSettings = {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
 	const customColors = useSetting( 'color.palette.custom' );
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
diff --git a/packages/block-editor/src/components/colors/test/with-colors.js b/packages/block-editor/src/components/colors/test/with-colors.js
index dc1efe7e386dad..0ba0b40f397e55 100644
--- a/packages/block-editor/src/components/colors/test/with-colors.js
+++ b/packages/block-editor/src/components/colors/test/with-colors.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { createCustomColorsHOC } from '../with-colors';
 
+jest.useFakeTimers();
+
 describe( 'createCustomColorsHOC', () => {
 	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index e22b5ed8661d36..e48b599faa6b96 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -26,7 +26,9 @@ export const getColorObjectByAttributeValues = (
 	customColor
 ) => {
 	if ( definedColor ) {
-		const colorObj = find( colors, { slug: definedColor } );
+		const colorObj = colors?.find(
+			( color ) => color.slug === definedColor
+		);
 
 		if ( colorObj ) {
 			return colorObj;
@@ -47,7 +49,7 @@ export const getColorObjectByAttributeValues = (
  *                   Returns undefined if no color object matches this requirement.
  */
 export const getColorObjectByColorValue = ( colors, colorValue ) => {
-	return find( colors, { color: colorValue } );
+	return colors?.find( ( color ) => color.color === colorValue );
 };
 
 /**
diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
index 3e5a50a8fe49ea..3881ff06f2bf30 100644
--- a/packages/block-editor/src/components/copy-handler/index.js
+++ b/packages/block-editor/src/components/copy-handler/index.js
@@ -7,6 +7,8 @@ import {
 	pasteHandler,
 	store as blocksStore,
 	createBlock,
+	findTransform,
+	getBlockTransforms,
 } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -84,6 +86,7 @@ export function useClipboardHandler() {
 		__unstableIsSelectionCollapsed,
 		__unstableIsSelectionMergeable,
 		__unstableGetSelectedBlocksWithPartialSelection,
+		canInsertBlockType,
 	} = useSelect( blockEditorStore );
 	const {
 		flashBlock,
@@ -91,6 +94,7 @@ export function useClipboardHandler() {
 		replaceBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
+		insertBlocks,
 	} = useDispatch( blockEditorStore );
 	const notifyCopy = useNotifyCopy();
 
@@ -201,13 +205,55 @@ export function useClipboardHandler() {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,
 				} = getSettings();
-				const { plainText, html } = getPasteEventData( event );
-				const blocks = pasteHandler( {
-					HTML: html,
-					plainText,
-					mode: 'BLOCKS',
-					canUserUseUnfilteredHTML,
-				} );
+				const { plainText, html, files } = getPasteEventData( event );
+				let blocks = [];
+
+				if ( files.length ) {
+					const fromTransforms = getBlockTransforms( 'from' );
+					blocks = files
+						.reduce( ( accumulator, file ) => {
+							const transformation = findTransform(
+								fromTransforms,
+								( transform ) =>
+									transform.type === 'files' &&
+									transform.isMatch( [ file ] )
+							);
+							if ( transformation ) {
+								accumulator.push(
+									transformation.transform( [ file ] )
+								);
+							}
+							return accumulator;
+						}, [] )
+						.flat();
+				} else {
+					blocks = pasteHandler( {
+						HTML: html,
+						plainText,
+						mode: 'BLOCKS',
+						canUserUseUnfilteredHTML,
+					} );
+				}
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+					if (
+						blocks.every( ( block ) =>
+							canInsertBlockType(
+								block.name,
+								selectedBlockClientId
+							)
+						)
+					) {
+						insertBlocks(
+							blocks,
+							undefined,
+							selectedBlockClientId
+						);
+						return;
+					}
+				}
 
 				replaceBlocks(
 					selectedBlockClientIds,
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
index 0a00a00d5d881f..29b2ed3931a775 100644
--- a/packages/block-editor/src/components/default-block-appender/test/index.js
+++ b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js
index de8a27e3014e88..f5816e9823d7a3 100644
--- a/packages/block-editor/src/components/font-sizes/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -40,6 +40,7 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
  * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
  * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @param {?string}       args.minimumFontSizeLimit  The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -51,8 +52,13 @@ export function getComputedFluidTypographyValue( {
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
-	minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
+	minimumFontSizeLimit,
 } ) {
+	// Validate incoming settings and set defaults.
+	minimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit )
+		? minimumFontSizeLimit
+		: DEFAULT_MINIMUM_FONT_SIZE_LIMIT;
+
 	/*
 	 * Calculates missing minimumFontSize and maximumFontSize from
 	 * defaultFontSize if provided.
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index 1237a13efd7db6..0948ab918f156c 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -20,7 +20,9 @@ export const getFontSize = (
 	customFontSizeAttribute
 ) => {
 	if ( fontSizeAttribute ) {
-		const fontSizeObject = find( fontSizes, { slug: fontSizeAttribute } );
+		const fontSizeObject = fontSizes?.find(
+			( { slug } ) => slug === fontSizeAttribute
+		);
 		if ( fontSizeObject ) {
 			return fontSizeObject;
 		}
@@ -39,7 +41,7 @@ export const getFontSize = (
  * @return {Object} Font size object.
  */
 export function getFontSizeObjectByValue( fontSizes, value ) {
-	const fontSizeObject = find( fontSizes, { size: value } );
+	const fontSizeObject = fontSizes?.find( ( { size } ) => size === value );
 	if ( fontSizeObject ) {
 		return fontSizeObject;
 	}
diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
index e328a0b2740385..380ea5a3dc0c5c 100644
--- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js
+++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy } from 'lodash';
+import { pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -107,9 +107,9 @@ export default ( ...fontSizeNames ) => {
 						customFontSizeAttributeName
 					) {
 						return ( fontSizeValue ) => {
-							const fontSizeObject = find( this.props.fontSizes, {
-								size: Number( fontSizeValue ),
-							} );
+							const fontSizeObject = this.props.fontSizes?.find(
+								( { size } ) => size === Number( fontSizeValue )
+							);
 							this.props.setAttributes( {
 								[ fontSizeAttributeName ]:
 									fontSizeObject && fontSizeObject.slug
diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
index 4acf09fc03b522..e899f9c9197708 100644
--- a/packages/block-editor/src/components/gradients/use-gradient.js
+++ b/packages/block-editor/src/components/gradients/use-gradient.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -32,7 +27,7 @@ export function __experimentalGetGradientClass( gradientSlug ) {
  * @return {string} Gradient value.
  */
 export function getGradientValueBySlug( gradients, slug ) {
-	const gradient = find( gradients, [ 'slug', slug ] );
+	const gradient = gradients?.find( ( g ) => g.slug === slug );
 	return gradient && gradient.gradient;
 }
 
@@ -40,7 +35,7 @@ export function __experimentalGetGradientObjectByGradientValue(
 	gradients,
 	value
 ) {
-	const gradient = find( gradients, [ 'gradient', value ] );
+	const gradient = gradients?.find( ( g ) => g.gradient === value );
 	return gradient;
 }
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b7413b54a2e445..46a5c6f92bc197 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -26,97 +26,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
  */
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
-
-const BODY_CLASS_NAME = 'editor-styles-wrapper';
-const BLOCK_PREFIX = 'wp-block';
-
-/**
- * Clones stylesheets targetting the editor canvas to the given document. A
- * stylesheet is considered targetting the editor a canvas if it contains the
- * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
- *
- * Ideally, this hook should be removed in the future and styles should be added
- * explicitly as editor styles.
- */
-function useStylesCompatibility() {
-	return useRefEffect( ( node ) => {
-		// Search the document for stylesheets targetting the editor canvas.
-		Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
-			try {
-				// May fail for external styles.
-				// eslint-disable-next-line no-unused-expressions
-				styleSheet.cssRules;
-			} catch ( e ) {
-				return;
-			}
-
-			const { ownerNode, cssRules } = styleSheet;
-
-			if ( ! cssRules ) {
-				return;
-			}
-
-			// Generally, ignore inline styles. We add inline styles belonging to a
-			// stylesheet later, which may or may not match the selectors.
-			if ( ownerNode.tagName !== 'LINK' ) {
-				return;
-			}
-
-			// Don't try to add the reset styles, which were removed as a dependency
-			// from `edit-blocks` for the iframe since we don't need to reset admin
-			// styles.
-			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
-				return;
-			}
-
-			function matchFromRules( _cssRules ) {
-				return Array.from( _cssRules ).find(
-					( {
-						selectorText,
-						conditionText,
-						cssRules: __cssRules,
-					} ) => {
-						// If the rule is conditional then it will not have selector text.
-						// Recurse into child CSS ruleset to determine selector eligibility.
-						if ( conditionText ) {
-							return matchFromRules( __cssRules );
-						}
-
-						return (
-							selectorText &&
-							( selectorText.includes(
-								`.${ BODY_CLASS_NAME }`
-							) ||
-								selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-						);
-					}
-				);
-			}
-
-			const isMatch = matchFromRules( cssRules );
-
-			if (
-				isMatch &&
-				! node.ownerDocument.getElementById( ownerNode.id )
-			) {
-				// Display warning once we have a way to add style dependencies to the editor.
-				// See: https://github.com/WordPress/gutenberg/pull/37466.
-				node.appendChild( ownerNode.cloneNode( true ) );
-
-				// Add inline styles belonging to the stylesheet.
-				const inlineCssId = ownerNode.id.replace(
-					'-css',
-					'-inline-css'
-				);
-				const inlineCssElement = document.getElementById( inlineCssId );
-
-				if ( inlineCssElement ) {
-					node.appendChild( inlineCssElement.cloneNode( true ) );
-				}
-			}
-		} );
-	}, [] );
-}
+import { useCompatibilityStyles } from './use-compatibility-styles';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -205,6 +115,11 @@ function Iframe(
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const styles = useParsedAssets( assets?.styles );
+	const styleIds = styles.map( ( style ) => style.id );
+	const compatStyles = useCompatibilityStyles();
+	const neededCompatStyles = compatStyles.filter(
+		( style ) => ! styleIds.includes( style.id )
+	);
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -288,12 +203,11 @@ function Iframe(
 			} );
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-	const styleCompatibilityRef = useStylesCompatibility();
 
 	head = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ styles.map(
+			{ [ ...styles, ...neededCompatStyles ].map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();
 
@@ -342,7 +256,7 @@ function Iframe(
 								ref={ bodyRef }
 								className={ classnames(
 									'block-editor-iframe__body',
-									BODY_CLASS_NAME,
+									'editor-styles-wrapper',
 									...bodyClasses
 								) }
 								style={ {
@@ -359,15 +273,6 @@ function Iframe(
 								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
-								{ /*
-								 * This is a wrapper for the extra styles and scripts
-								 * rendered imperatively by cloning the parent,
-								 * it's important that this div's content remains uncontrolled.
-								 */ }
-								<div
-									style={ { display: 'none' } }
-									ref={ styleCompatibilityRef }
-								/>
 								<StyleProvider document={ iframeDocument }>
 									{ children }
 								</StyleProvider>
diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
new file mode 100644
index 00000000000000..5a1d7de5518654
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Returns a list of stylesheets that target the editor canvas. A stylesheet is
+ * considered targetting the editor a canvas if it contains the
+ * `editor-styles-wrapper`, `wp-block`, or `wp-block-*` class selectors.
+ *
+ * Ideally, this hook should be removed in the future and styles should be added
+ * explicitly as editor styles.
+ */
+export function useCompatibilityStyles() {
+	// Only memoize the result once on load, since these stylesheets should not
+	// change.
+	return useMemo( () => {
+		// Search the document for stylesheets targetting the editor canvas.
+		return Array.from( document.styleSheets ).reduce(
+			( accumulator, styleSheet ) => {
+				try {
+					// May fail for external styles.
+					// eslint-disable-next-line no-unused-expressions
+					styleSheet.cssRules;
+				} catch ( e ) {
+					return accumulator;
+				}
+
+				const { ownerNode, cssRules } = styleSheet;
+
+				if ( ! cssRules ) {
+					return accumulator;
+				}
+
+				// Generally, ignore inline styles. We add inline styles belonging to a
+				// stylesheet later, which may or may not match the selectors.
+				if ( ownerNode.tagName !== 'LINK' ) {
+					return accumulator;
+				}
+
+				// Don't try to add the reset styles, which were removed as a dependency
+				// from `edit-blocks` for the iframe since we don't need to reset admin
+				// styles.
+				if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+					return accumulator;
+				}
+
+				function matchFromRules( _cssRules ) {
+					return Array.from( _cssRules ).find(
+						( {
+							selectorText,
+							conditionText,
+							cssRules: __cssRules,
+						} ) => {
+							// If the rule is conditional then it will not have selector text.
+							// Recurse into child CSS ruleset to determine selector eligibility.
+							if ( conditionText ) {
+								return matchFromRules( __cssRules );
+							}
+
+							return (
+								selectorText &&
+								( selectorText.includes(
+									'.editor-styles-wrapper'
+								) ||
+									selectorText.includes( '.wp-block' ) )
+							);
+						}
+					);
+				}
+
+				if ( matchFromRules( cssRules ) ) {
+					// Display warning once we have a way to add style dependencies to the editor.
+					// See: https://github.com/WordPress/gutenberg/pull/37466.
+					accumulator.push( ownerNode.cloneNode( true ) );
+
+					// Add inline styles belonging to the stylesheet.
+					const inlineCssId = ownerNode.id.replace(
+						'-css',
+						'-inline-css'
+					);
+					const inlineCssElement =
+						document.getElementById( inlineCssId );
+
+					if ( inlineCssElement ) {
+						accumulator.push( inlineCssElement.cloneNode( true ) );
+					}
+				}
+
+				return accumulator;
+			},
+			[]
+		);
+	}, [] );
+}
diff --git a/packages/block-editor/src/components/image-size-control/test/index.js b/packages/block-editor/src/components/image-size-control/test/index.js
index e265d07eebc1c3..3033e07147e394 100644
--- a/packages/block-editor/src/components/image-size-control/test/index.js
+++ b/packages/block-editor/src/components/image-size-control/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -11,8 +12,6 @@ import ImageSizeControl from '../index';
 describe( 'ImageSizeControl', () => {
 	const mockOnChange = jest.fn();
 	const mockOnChangeImage = jest.fn();
-	const getHeightInput = () => screen.getByLabelText( 'Height' );
-	const getWidthInput = () => screen.getByLabelText( 'Width' );
 
 	afterEach( () => {
 		// Cleanup on exiting.
@@ -31,8 +30,12 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '300' );
-		expect( getWidthInput().value ).toBe( '400' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 300 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 400 );
 	} );
 
 	it( 'returns default dimensions when custom dimensions are undefined', () => {
@@ -44,15 +47,23 @@ describe( 'ImageSizeControl', () => {
 			/>
 		);
 
-		expect( getHeightInput().value ).toBe( '100' );
-		expect( getWidthInput().value ).toBe( '200' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( 100 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( 200 );
 	} );
 
-	it( 'returns empty string when custom and default dimensions are undefined', () => {
+	it( 'returns no value when custom and default dimensions are undefined', () => {
 		render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-		expect( getHeightInput().value ).toBe( '' );
-		expect( getWidthInput().value ).toBe( '' );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Height' } )
+		).toHaveValue( null );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Width' } )
+		).toHaveValue( null );
 	} );
 
 	it( 'returns default dimensions when initially undefined defaults are defined on rerender', () => {
@@ -62,12 +73,14 @@ describe( 'ImageSizeControl', () => {
 			<ImageSizeControl onChange={ mockOnChange } />
 		);
 
-		const heightInput = getHeightInput();
-		const widthInput = getWidthInput();
+		const heightInput = screen.getByRole( 'spinbutton', {
+			name: 'Height',
+		} );
+		const widthInput = screen.getByRole( 'spinbutton', { name: 'Width' } );
 
 		// The dimensions are initially set to an empty string.
-		expect( heightInput.value ).toBe( '' );
-		expect( widthInput.value ).toBe( '' );
+		expect( heightInput ).toHaveValue( null );
+		expect( widthInput ).toHaveValue( null );
 
 		// When new default dimensions are passed on a rerender (for example after they
 		// are calculated following an image upload), update values to the new defaults.
@@ -80,48 +93,66 @@ describe( 'ImageSizeControl', () => {
 		);
 
 		// The dimensions should update to the defaults.
-		expect( heightInput.value ).toBe( '300' );
-		expect( widthInput.value ).toBe( '400' );
+		expect( heightInput ).toHaveValue( 300 );
+		expect( widthInput ).toHaveValue( 400 );
 	} );
 
 	describe( 'updating dimension inputs', () => {
-		it( 'updates height and calls onChange', () => {
+		it( 'updates height and calls onChange', async () => {
+			const user = userEvent.setup();
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( heightInput, { target: { value: '500' } } );
+			const newHeight = '500';
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { height: 500 } );
+			await user.clear( heightInput );
+			await user.type( heightInput, newHeight );
 
-			expect( heightInput.value ).toBe( '500' );
-			expect( widthInput.value ).toBe( '' );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newHeight.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { height: 500 } );
+
+			expect( heightInput ).toHaveValue( 500 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 
-		it( 'updates width and calls onChange', () => {
+		it( 'updates width and calls onChange', async () => {
+			const user = userEvent.setup();
+
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( null );
 
-			fireEvent.change( widthInput, { target: { value: '500' } } );
+			const newWidth = '500';
+			await user.clear( widthInput );
+			await user.type( widthInput, newWidth );
 
-			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( { width: 500 } );
+			expect( mockOnChange ).toHaveBeenCalledTimes( newWidth.length );
+			expect( mockOnChange ).toHaveBeenLastCalledWith( { width: 500 } );
 
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '500' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 500 );
 		} );
 
-		it( 'updates height and calls onChange for empty value', () => {
+		it( 'updates height and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -130,27 +161,33 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( heightInput, { target: { value: '' } } );
+			await user.clear( heightInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 			} );
 
 			// Height is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( null );
+			expect( widthInput ).toHaveValue( 100 );
 		} );
 
-		it( 'updates width and calls onChange for empty value', () => {
+		it( 'updates width and calls onChange for empty value', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -159,29 +196,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '100' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 100 );
 
-			fireEvent.change( widthInput, { target: { value: '' } } );
+			await user.clear( widthInput );
 
 			// onChange is called and sets the dimension to undefined rather than
 			// the empty string.
 			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				width: undefined,
 			} );
 
 			// Width is updated to empty value and does not reset to default.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( null );
 		} );
 	} );
 
 	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', () => {
+		it( 'resets both height and width to default values', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -192,29 +235,35 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
 
 			// The initial dimension values display first.
-			expect( heightInput.value ).toBe( '300' );
-			expect( widthInput.value ).toBe( '400' );
+			expect( heightInput ).toHaveValue( 300 );
+			expect( widthInput ).toHaveValue( 400 );
 
-			fireEvent.click( screen.getByText( 'Reset' ) );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: undefined,
 				width: undefined,
 			} );
 
 			// The inputs display the default values once more.
-			expect( heightInput.value ).toBe( '100' );
-			expect( widthInput.value ).toBe( '200' );
+			expect( heightInput ).toHaveValue( 100 );
+			expect( widthInput ).toHaveValue( 200 );
 		} );
 	} );
 
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', () => {
+		it( 'updates height and width attributes on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -223,18 +272,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
-			expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
+			expect( button ).toHaveClass( 'is-pressed' );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
+			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
 		} );
 
-		it( 'updates height and width inputs on selection', () => {
+		it( 'updates height and width inputs on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -243,11 +299,20 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'button', {
+				name: '50%',
+				pressed: false,
+			} );
+
+			await user.click( button );
 
 			// Both attributes are set to the rounded scaled value.
-			expect( getHeightInput().value ).toBe( '50' );
-			expect( getWidthInput().value ).toBe( '101' );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Height' } )
+			).toHaveValue( 50 );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			).toHaveValue( 101 );
 		} );
 	} );
 
@@ -268,12 +333,14 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			expect( screen.getByLabelText( 'Image size' ).value ).toBe(
-				'medium'
-			);
+			expect(
+				screen.getByRole( 'combobox', { name: 'Image size' } )
+			).toHaveValue( 'medium' );
 		} );
 
-		it( 'calls onChangeImage with selected slug on selection', () => {
+		it( 'calls onChangeImage with selected slug on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageSizeOptions={ IMAGE_SIZE_OPTIONS }
@@ -283,12 +350,13 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.change( screen.getByLabelText( 'Image size' ), {
-				target: { value: 'thumbnail' },
-			} );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				'thumbnail'
+			);
 
 			// onChangeImage is called with the slug and the event.
-			expect( mockOnChangeImage ).toHaveBeenCalledWith(
+			expect( mockOnChangeImage ).toHaveBeenLastCalledWith(
 				'thumbnail',
 				expect.any( Object )
 			);
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 9d0b3f34bc7729..0512569fb3f42d 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -87,8 +87,10 @@ function UncontrolledInnerBlocks( props ) {
 
 			const blockType = getBlockType( block.name );
 
-			if ( ! blockType || ! blockType.providesContext ) {
-				return {};
+			if (
+				Object.keys( blockType?.providesContext ?? {} ).length === 0
+			) {
+				return { name: block.name };
 			}
 
 			return {
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index d2bbaa909d0a29..52c7f9ba23f83e 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -39,6 +39,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const { destinationRootClientId, destinationIndex } = useSelect(
@@ -108,7 +109,7 @@ function useInsertionPoint( {
 					blocks,
 					destinationIndex,
 					destinationRootClientId,
-					true,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +123,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 59c04e24d2bbb4..258faff2b826ab 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -143,18 +143,31 @@ class Inserter extends Component {
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
 			prioritizePatterns,
+			onSelectOrClose,
+			selectBlockOnInsert,
 		} = this.props;
 
 		if ( isQuick ) {
 			return (
 				<QuickInserter
-					onSelect={ () => {
+					onSelect={ ( blocks ) => {
+						const firstBlock =
+							Array.isArray( blocks ) && blocks?.length
+								? blocks[ 0 ]
+								: blocks;
+						if (
+							onSelectOrClose &&
+							typeof onSelectOrClose === 'function'
+						) {
+							onSelectOrClose( firstBlock );
+						}
 						onClose();
 					} }
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
 		}
@@ -380,7 +393,7 @@ export default compose( [
 
 				if ( onSelectOrClose ) {
 					onSelectOrClose( {
-						insertedBlockId: blockToInsert?.clientId,
+						clientId: blockToInsert?.clientId,
 					} );
 				}
 
diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
index f537dce68608ad..e3b68510d77d2e 100644
--- a/packages/block-editor/src/components/inserter/media-tab/hooks.js
+++ b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -66,14 +66,15 @@ export function useMediaCategories( rootClientId ) {
 				per_page: 1,
 				_fields: [ 'id' ],
 			};
-			const [ image, video, audio ] = await Promise.all( [
+			const [ image, video, audio ] = await Promise.allSettled( [
 				fetchMedia( { ...query, media_type: 'image' } ),
 				fetchMedia( { ...query, media_type: 'video' } ),
 				fetchMedia( { ...query, media_type: 'audio' } ),
 			] );
-			const showImage = canInsertImage && !! image.length;
-			const showVideo = canInsertVideo && !! video.length;
-			const showAudio = canInsertAudio && !! audio.length;
+			// The `value` property is only present if the promise's status is "fulfilled".
+			const showImage = canInsertImage && !! image.value?.length;
+			const showVideo = canInsertVideo && !! video.value?.length;
+			const showAudio = canInsertAudio && !! audio.value?.length;
 			setCategories(
 				MEDIA_CATEGORIES.filter(
 					( { mediaType } ) =>
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 39a5ac5c75b849..540b51a4757e0d 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -31,6 +31,7 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -38,6 +39,7 @@ export default function QuickInserter( {
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
@@ -121,6 +123,7 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			</div>
 
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 5451f19937b01d..35346fca09f32d 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
 import { noCase } from 'change-case';
 
 // Default search helpers.
@@ -88,7 +87,7 @@ export const searchBlockItems = (
 
 	const config = {
 		getCategory: ( item ) =>
-			find( categories, { slug: item.category } )?.title,
+			categories.find( ( { slug } ) => slug === item.category )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
 	};
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
index dfd7a3d73312d5..f55e49bd1cc80f 100644
--- a/packages/block-editor/src/components/inserter/search-results.js
+++ b/packages/block-editor/src/components/inserter/search-results.js
@@ -50,6 +50,7 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -60,6 +61,7 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 4c0a95351a666c..86eae7289f4f61 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -376,9 +376,15 @@ describe( 'Searching for a link', () => {
 		const searchResults = await screen.findByRole( 'listbox', {
 			name: /Search results for.*/,
 		} );
-		const searchResultTextHighlightElements = Array.from(
-			searchResults.querySelectorAll( 'button[role="option"] mark' )
-		);
+
+		const searchResultTextHighlightElements = within( searchResults )
+			.getAllByRole( 'option' )
+			// TODO: Change to `getByRole( 'mark' )` when officially supported by
+			// WAI-ARIA 1.3 - see https://w3c.github.io/aria/#mark
+			// eslint-disable-next-line testing-library/no-node-access
+			.map( ( searchResult ) => searchResult.querySelector( 'mark' ) )
+			.flat()
+			.filter( Boolean );
 
 		// Given we're mocking out the results we should always have 4 mark elements.
 		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
@@ -1092,6 +1098,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Check human readable error notice is perceivable.
 			expect( errorNotice ).toBeVisible();
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( errorNotice.parentElement ).toHaveClass(
 				'block-editor-link-control__search-error'
 			);
@@ -1324,7 +1331,8 @@ describe( 'Selecting links', () => {
 				} );
 
 				// Make sure focus is retained after submission.
-				expect( container ).toContainElement( document.activeElement );
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( container.firstChild ).toHaveFocus();
 
 				expect( currentLink ).toBeVisible();
 				expect(
@@ -1594,11 +1602,13 @@ describe( 'Rich link previews', () => {
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichImagePreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-image'
 		);
 
 		// Todo: refactor to use user-facing queries.
+		// eslint-disable-next-line testing-library/no-node-access
 		const hasRichDescriptionPreview = linkPreview.querySelector(
 			'.block-editor-link-control__search-item-description'
 		);
@@ -1646,11 +1656,14 @@ describe( 'Rich link previews', () => {
 
 		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const iconPreview = linkPreview.querySelector(
 			`.block-editor-link-control__search-item-icon`
 		);
 
+		// eslint-disable-next-line testing-library/no-node-access
 		const fallBackIcon = iconPreview.querySelector( 'svg' );
+		// eslint-disable-next-line testing-library/no-node-access
 		const richIcon = iconPreview.querySelector( 'img' );
 
 		expect( fallBackIcon ).toBeVisible();
@@ -1680,6 +1693,7 @@ describe( 'Rich link previews', () => {
 				expect( linkPreview ).toHaveClass( 'is-rich' )
 			);
 
+			// eslint-disable-next-line testing-library/no-node-access
 			const missingDataItem = linkPreview.querySelector(
 				`.block-editor-link-control__search-item-${ dataItem }`
 			);
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 9477eb2cda40c0..39baf78d5a7a88 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 0c271352b91552..61c6f80dab608e 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -176,9 +176,8 @@
 	}
 
 	.block-editor-block-icon {
-		align-self: flex-start;
 		margin-right: $grid-unit-10;
-		width: $icon-size;
+		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -319,11 +318,6 @@
 
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
-		width: 24px;
-		min-width: 24px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
 	}
 }
 
diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js
index 94d93a65ef8738..8b1fc612280137 100644
--- a/packages/block-editor/src/components/media-replace-flow/test/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 function TestWrapper() {
diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
index 646700143cf511..5571db2816382d 100644
--- a/packages/block-editor/src/components/off-canvas-editor/appender.js
+++ b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -10,9 +10,15 @@ import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlock, setInsertedBlock ] = useState();
+	const [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
 
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
@@ -31,40 +37,39 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const { insertedBlockAttributes } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-
-			return {
-				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
-			};
-		},
-		[ insertedBlock ]
-	);
+	const {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	} = useInsertedBlock( insertedBlockClientId );
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
+		if ( ! _insertedBlock?.clientId ) {
+			return;
+		}
 
-	const setAttributes =
-		( insertedBlockClientId ) => ( _updatedAttributes ) => {
-			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
-		};
+		setInsertedBlockClientId( _insertedBlock?.clientId );
+	};
 
 	let maybeLinkUI;
 
-	if ( insertedBlock ) {
+	if (
+		insertedBlockClientId &&
+		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
+	) {
 		maybeLinkUI = (
 			<LinkUI
-				clientId={ insertedBlock }
+				clientId={ insertedBlockClientId }
 				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlock( null ) }
+				onClose={ () => setInsertedBlockClientId( null ) }
 				hasCreateSuggestion={ false }
 				onChange={ ( updatedValue ) => {
 					updateAttributes(
 						updatedValue,
-						setAttributes( insertedBlock ),
+						setInsertedBlockAttributes,
 						insertedBlockAttributes
 					);
-					setInsertedBlock( null );
+					setInsertedBlockClientId( null );
 				} }
 			/>
 		);
@@ -77,15 +82,15 @@ export const Appender = forwardRef( ( props, ref ) => {
 	return (
 		<div className="offcanvas-editor__appender">
 			{ maybeLinkUI }
+
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ ( { insertedBlockId } ) => {
-					setInsertedBlock( insertedBlockId );
-				} }
+				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
+				__experimentalIsQuick
 				{ ...props }
 			/>
 		</div>
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
index 9477eb2cda40c0..543823ab1ada25 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
@@ -79,7 +79,11 @@ function ListViewBlockSelectButton(
 				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index af74873e1b41af..a3861ef847274f 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -42,7 +42,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -60,7 +60,6 @@ function ListViewBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId, attributes } = block;
 
 	const { isLocked, isContentLocked } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -87,24 +86,77 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { replaceBlock, toggleBlockHighlight } =
+	const { insertBlock, replaceBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
 	);
 
+	// 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( () => {
+		if ( ! isTreeGridMounted && isSelected ) {
+			cellRef.current.focus();
+		}
+	}, [] );
+
+	const onMouseEnter = useCallback( () => {
+		setIsHovered( true );
+		toggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+	const onMouseLeave = useCallback( () => {
+		setIsHovered( false );
+		toggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+
+	const selectEditorBlock = useCallback(
+		( event ) => {
+			selectBlock( event, clientId );
+			event.preventDefault();
+		},
+		[ clientId, selectBlock ]
+	);
+
+	const updateSelection = useCallback(
+		( newClientId ) => {
+			selectBlock( undefined, newClientId );
+		},
+		[ selectBlock ]
+	);
+
+	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+
+	const toggleExpanded = useCallback(
+		( event ) => {
+			// Prevent shift+click from opening link in a new window when toggling.
+			event.preventDefault();
+			event.stopPropagation();
+			if ( isExpanded === true ) {
+				collapse( clientId );
+			} else if ( isExpanded === false ) {
+				expand( clientId );
+			}
+		},
+		[ clientId, expand, collapse, isExpanded ]
+	);
+
+	const instanceId = useInstanceId( ListViewBlock );
+
+	if ( ! block ) {
+		return null;
+	}
+
 	// When a block hides its toolbar it also hides the block settings menu,
 	// since that menu is part of the toolbar in the editor canvas.
 	// List View respects this by also hiding the block settings menu.
-	const showBlockActions = hasBlockSupport(
-		blockName,
-		'__experimentalToolbar',
-		true
-	);
-	const instanceId = useInstanceId( ListViewBlock );
+	const showBlockActions =
+		!! block &&
+		hasBlockSupport( block.name, '__experimentalToolbar', true );
+
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
@@ -143,9 +195,7 @@ function ListViewBlock( {
 		  )
 		: __( 'Edit' );
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
-
-	const isEditable = block.name !== 'core/page-list-item';
+	const isEditable = !! block && block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -163,53 +213,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// 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( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
-	const onMouseEnter = useCallback( () => {
-		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-	const onMouseLeave = useCallback( () => {
-		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-
-	const selectEditorBlock = useCallback(
-		( event ) => {
-			selectBlock( event, clientId );
-			event.preventDefault();
-		},
-		[ clientId, selectBlock ]
-	);
-
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
-		},
-		[ selectBlock ]
-	);
-
-	const toggleExpanded = useCallback(
-		( event ) => {
-			// Prevent shift+click from opening link in a new window when toggling.
-			event.preventDefault();
-			event.stopPropagation();
-			if ( isExpanded === true ) {
-				collapse( clientId );
-			} else if ( isExpanded === false ) {
-				expand( clientId );
-			}
-		},
-		[ clientId, expand, collapse, isExpanded ]
-	);
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -369,24 +372,38 @@ function ListViewBlock( {
 											const newLink = createBlock(
 												'core/navigation-link'
 											);
-											const newSubmenu = createBlock(
-												'core/navigation-submenu',
-												attributes,
-												block.innerBlocks
-													? [
-															...block.innerBlocks,
-															newLink,
-													  ]
-													: [ newLink ]
-											);
-											replaceBlock(
-												clientId,
-												newSubmenu
-											);
+											if (
+												block.name ===
+												'core/navigation-submenu'
+											) {
+												const updateSelectionOnInsert = false;
+												insertBlock(
+													newLink,
+													block.innerBlocks.length,
+													clientId,
+													updateSelectionOnInsert
+												);
+											} else {
+												// Convert to a submenu if the block currently isn't one.
+												const newSubmenu = createBlock(
+													'core/navigation-submenu',
+													block.attributes,
+													block.innerBlocks
+														? [
+																...block.innerBlocks,
+																newLink,
+														  ]
+														: [ newLink ]
+												);
+												replaceBlock(
+													clientId,
+													newSubmenu
+												);
+											}
 											onClose();
 										} }
 									>
-										{ __( 'Add a submenu item' ) }
+										{ __( 'Add submenu item' ) }
 									</MenuItem>
 								) }
 							</BlockSettingsDropdown>
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
index 7d38d7c83c3350..2642d6605baac1 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -231,6 +231,15 @@ function __ExperimentalOffCanvasEditor(
 									<Appender { ...treeGridCellProps } />
 								) }
 							</TreeGridCell>
+							{ ! clientIdsTree.length && (
+								<TreeGridCell withoutGridItem>
+									<div className="offcanvas-editor-list-view-is-empty">
+										{ __(
+											'Your menu is currently empty. Add your first menu item to get started.'
+										) }
+									</div>
+								</TreeGridCell>
+							) }
 						</TreeGridRow>
 					</ListViewContext.Provider>
 				</TreeGrid>
diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
index 8fedf057b03333..e65646a318d3d6 100644
--- a/packages/block-editor/src/components/off-canvas-editor/style.scss
+++ b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -1,7 +1,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
 	background-color: #1e1e1e;
 	color: #fff;
-	margin: $grid-unit-10 0 0 28px;
+	margin: $grid-unit-10 0 0 24px;
 	border-radius: 2px;
 	height: 24px;
 	min-width: 24px;
@@ -24,3 +24,7 @@
 	// sidebar width - tab panel padding
 	max-width: $sidebar-width - (2 * $grid-unit-20);
 }
+
+.offcanvas-editor-list-view-is-empty {
+	margin-left: $grid-unit-20;
+}
diff --git a/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js b/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
new file mode 100644
index 00000000000000..f4e6746581e008
--- /dev/null
+++ b/packages/block-editor/src/components/off-canvas-editor/test/use-inserted-block.js
@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { useInsertedBlock } from '../use-inserted-block';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+describe( 'useInsertedBlock', () => {
+	const mockUpdateBlockAttributes = jest.fn();
+
+	it( 'returns undefined values when called without a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () => useInsertedBlock() );
+
+		const {
+			insertedBlockName,
+			insertedBlockAttributes,
+			setInsertedBlockAttributes,
+		} = result.current;
+
+		expect( insertedBlockName ).toBeUndefined();
+		expect( insertedBlockAttributes ).toBeUndefined();
+		expect(
+			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns name and attributes when called with a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () =>
+			useInsertedBlock( 'some-client-id-here' )
+		);
+
+		const { insertedBlockName, insertedBlockAttributes } = result.current;
+
+		expect( insertedBlockName ).toBe( 'core/navigation-link' );
+		expect( insertedBlockAttributes ).toEqual( {
+			'some-attribute': 'some-value',
+		} );
+	} );
+
+	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const clientId = '123456789';
+
+		const { result } = renderHook( () => useInsertedBlock( clientId ) );
+
+		const { setInsertedBlockAttributes } = result.current;
+
+		act( () => {
+			setInsertedBlockAttributes( {
+				'some-attribute': 'new-value',
+			} );
+		} );
+
+		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
+			'some-attribute': 'new-value',
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js b/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js
new file mode 100644
index 00000000000000..0e5a25c980a1c3
--- /dev/null
+++ b/packages/block-editor/src/components/off-canvas-editor/use-inserted-block.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useInsertedBlock = ( insertedBlockClientId ) => {
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
+			};
+		},
+		[ insertedBlockClientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setInsertedBlockAttributes = ( _updatedAttributes ) => {
+		if ( ! insertedBlockClientId ) return;
+		updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+	};
+
+	if ( ! insertedBlockClientId ) {
+		return {
+			insertedBlockAttributes: undefined,
+			insertedBlockName: undefined,
+			setInsertedBlockAttributes,
+		};
+	}
+
+	return {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	};
+};
diff --git a/packages/block-editor/src/components/responsive-block-control/label.js b/packages/block-editor/src/components/responsive-block-control/label.js
index b0bd0c180cb902..49be9ba5227ed1 100644
--- a/packages/block-editor/src/components/responsive-block-control/label.js
+++ b/packages/block-editor/src/components/responsive-block-control/label.js
@@ -4,7 +4,6 @@
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 export default function ResponsiveBlockControlLabel( {
 	property,
@@ -24,13 +23,13 @@ export default function ResponsiveBlockControlLabel( {
 			viewport.label
 		);
 	return (
-		<Fragment>
+		<>
 			<span aria-describedby={ `rbc-desc-${ instanceId }` }>
 				{ viewport.label }
 			</span>
 			<VisuallyHidden as="span" id={ `rbc-desc-${ instanceId }` }>
 				{ accessibleLabel }
 			</VisuallyHidden>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-editor/src/components/responsive-block-control/test/index.js b/packages/block-editor/src/components/responsive-block-control/test/index.js
index f0454dcc87bc76..f2d5a5a1a3b880 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -15,6 +15,8 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
+jest.useFakeTimers();
+
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -38,13 +40,13 @@ const sizeOptions = [
 
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
-		<Fragment>
+		<>
 			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
 			</p>
-		</Fragment>
+		</>
 	);
 };
 
diff --git a/packages/block-editor/src/components/rich-text/file-paste-handler.js b/packages/block-editor/src/components/rich-text/file-paste-handler.js
deleted file mode 100644
index 2aae5984389e68..00000000000000
--- a/packages/block-editor/src/components/rich-text/file-paste-handler.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlobURL } from '@wordpress/blob';
-
-export function filePasteHandler( files ) {
-	return files
-		.filter( ( { type } ) =>
-			/^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-		)
-		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
-		.join( '' );
-}
diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
index 3c6861c341cd4b..3ab3f47d226aec 100644
--- a/packages/block-editor/src/components/rich-text/format-edit.js
+++ b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -6,10 +6,6 @@ import {
 	getActiveObject,
 	isCollapsed,
 } from '@wordpress/rich-text';
-/**
- * External dependencies
- */
-import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -40,13 +36,13 @@ export default function FormatEdit( {
 		if ( name === 'core/link' && ! isCollapsed( value ) ) {
 			const formats = value.formats;
 
-			const linkFormatAtStart = find( formats[ value.start ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtStart = formats[ value.start ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
-			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
-				type: 'core/link',
-			} );
+			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
+				( { type } ) => type === 'core/link'
+			);
 
 			if (
 				! linkFormatAtStart ||
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 726f8cddfff7b7..8219272ad3043a 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -368,6 +368,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }
diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
index 5e4f4260f5001f..67c932aceddcc1 100644
--- a/packages/block-editor/src/components/rich-text/use-paste-handler.js
+++ b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -4,7 +4,11 @@
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { pasteHandler } from '@wordpress/blocks';
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+} from '@wordpress/blocks';
 import {
 	isEmpty,
 	insert,
@@ -17,7 +21,6 @@ import { isURL } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 import { shouldDismissPastedFiles } from '../../utils/pasting';
@@ -155,6 +158,12 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
+			if ( files?.length ) {
+				// Allows us to ask for this information when we get a report.
+				// eslint-disable-next-line no-console
+				window.console.log( 'Received items:\n\n', files );
+			}
+
 			// Process any attached files, unless we infer that the files in
 			// question are redundant "screenshots" of the actual HTML payload,
 			// as created by certain office-type programs.
@@ -164,23 +173,33 @@ export function usePasteHandler( props ) {
 				files?.length &&
 				! shouldDismissPastedFiles( files, html, plainText )
 			) {
-				const content = pasteHandler( {
-					HTML: filePasteHandler( files ),
-					mode: 'BLOCKS',
-					tagName,
-					preserveWhiteSpace,
-				} );
-
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
-				window.console.log( 'Received items:\n\n', files );
+				const fromTransforms = getBlockTransforms( 'from' );
+				const blocks = files
+					.reduce( ( accumulator, file ) => {
+						const transformation = findTransform(
+							fromTransforms,
+							( transform ) =>
+								transform.type === 'files' &&
+								transform.isMatch( [ file ] )
+						);
+						if ( transformation ) {
+							accumulator.push(
+								transformation.transform( [ file ] )
+							);
+						}
+						return accumulator;
+					}, [] )
+					.flat();
+				if ( ! blocks.length ) {
+					return;
+				}
 
 				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content );
+					onReplace( blocks );
 				} else {
 					splitValue( {
 						value,
-						pastedBlocks: content,
+						pastedBlocks: blocks,
 						onReplace,
 						onSplit,
 						onSplitMiddle,
diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
index fb4ce2176b759d..4ec1285db52bb9 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -78,7 +78,6 @@ export default function SpacingSizesControl( {
 
 	return (
 		<fieldset
-			role="region"
 			className={ classnames( 'component-spacing-sizes-control', {
 				'is-unlinked': ! isLinked,
 			} ) }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index ece1573ba9a943..f9be63c890ab4e 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -96,7 +96,7 @@ export function getSpacingPresetCssVar( value ) {
  *
  * @param {string} value Value to extract slug from.
  *
- * @return {number} The int value of the slug from given spacing preset.
+ * @return {string|undefined} The int value of the slug from given spacing preset.
  */
 export function getSpacingPresetSlug( value ) {
 	if ( ! value ) {
diff --git a/packages/block-editor/src/components/typewriter/index.js b/packages/block-editor/src/components/typewriter/index.js
index 8e3cbe140d9917..ac83d173a95d9d 100644
--- a/packages/block-editor/src/components/typewriter/index.js
+++ b/packages/block-editor/src/components/typewriter/index.js
@@ -105,7 +105,9 @@ export function useTypewriter() {
 					return;
 				}
 
-				const windowScroll = scrollContainer === ownerDocument.body;
+				const windowScroll =
+					scrollContainer === ownerDocument.body ||
+					scrollContainer === ownerDocument.documentElement;
 				const scrollY = windowScroll
 					? defaultView.scrollY
 					: scrollContainer.scrollTop;
diff --git a/packages/block-editor/src/components/url-input/test/button.js b/packages/block-editor/src/components/url-input/test/button.js
index b0288cd8b27664..a7860e483c52e8 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import URLInputButton from '../button';
 
+jest.useFakeTimers();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index ea3b6fbbe0a199..471fbf2044d511 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -189,7 +189,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -236,8 +236,9 @@ const ImageURLInputUI = ( {
 	const linkEditorValue = urlInput !== null ? urlInput : url;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
 	return (
diff --git a/packages/block-editor/src/components/url-popover/test/index.js b/packages/block-editor/src/components/url-popover/test/index.js
index 11eead4ea3fde9..859d21fd0305b5 100644
--- a/packages/block-editor/src/components/url-popover/test/index.js
+++ b/packages/block-editor/src/components/url-popover/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -11,6 +11,16 @@ import URLPopover from '../';
 
 jest.useRealTimers();
 
+/**
+ * Returns the first found popover element up the DOM tree.
+ *
+ * @param {HTMLElement} element Element to start with.
+ * @return {HTMLElement|null} Popover element, or `null` if not found.
+ */
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'URLPopover', () => {
 	it( 'matches the snapshot in its default state', async () => {
 		const { container } = render(
@@ -22,8 +32,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );
@@ -53,8 +66,11 @@ describe( 'URLPopover', () => {
 			</URLPopover>
 		);
 
-		// wait for `Popover` effects to finish
-		await act( () => Promise.resolve() );
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
+			).toBePositionedPopover()
+		);
 
 		expect( container ).toMatchSnapshot();
 	} );
diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index 88c9006b8ace9d..0b9b5f353baafe 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index b28f065c559c5f..e3100dc3464c65 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -44,7 +44,7 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
+					node.tabIndex = 0;
 					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 11ee3e95f4d663..74e79ecec80488 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -274,7 +274,6 @@ export function BorderPanel( props ) {
 						popoverPlacement="left-start"
 						size="__unstable-large"
 						value={ hydratedBorder }
-						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index d8b804c300eb04..6bf9ff036280d2 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -81,7 +81,6 @@ export default function ColorPanel( {
 				panelId={ clientId }
 				settings={ settings }
 				__experimentalIsItemGroup={ false }
-				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
 			/>
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 593eea881e3107..fee6f39daa8b20 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -522,8 +522,6 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index fe8693f64421bf..56335ced887074 100644
--- a/packages/block-editor/src/hooks/font-family.js
+++ b/packages/block-editor/src/hooks/font-family.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 6cb950afc45641..0c7a71fd23d683 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const isFluidTypographyEnabled =
-			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+		const fluidTypographyConfig =
+			select( blockEditorStore ).getSettings().__experimentalFeatures
 				?.typography?.fluid;
 
+		const fluidTypographySettings =
+			typeof fluidTypographyConfig === 'object'
+				? fluidTypographyConfig
+				: {};
+
 		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
+			fontSize && !! fluidTypographyConfig
+				? getComputedFluidTypographyValue( {
+						fontSize,
+						minimumFontSizeLimit:
+							fluidTypographySettings?.minFontSize,
+				  } )
 				: null;
 
 		if ( newFontSize === null ) {
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 00557881467ca8..12336eb2c44afd 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				minFontSize: '1rem',
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index d70ae08aafc593..da5869ad9aec07 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -19,23 +19,31 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}  attributes            Block attributes.
- * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
+ * @param {Object}         attributes              Block attributes.
+ * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
+ *                                                 otherwise an object containing theme fluid typography settings.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(
 	attributes,
-	isFluidFontSizeActive
+	fluidTypographySettings
 ) {
 	let typographyStyles = attributes?.style?.typography || {};
 
-	if ( isFluidFontSizeActive ) {
+	if (
+		!! fluidTypographySettings &&
+		( true === fluidTypographySettings ||
+			Object.keys( fluidTypographySettings ).length !== 0 )
+	) {
+		const newFontSize =
+			getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
+			fontSize: newFontSize,
 		};
 	}
 
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 9c99126f54ba14..a19983ce58ff46 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { omit, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -113,7 +112,10 @@ function getFlattenedClientIds( blocks ) {
  * @return {Array} Flattened block attributes object.
  */
 function getFlattenedBlocksWithoutAttributes( blocks ) {
-	return flattenBlocks( blocks, ( block ) => omit( block, 'attributes' ) );
+	return flattenBlocks( blocks, ( block ) => {
+		const { attributes, ...restBlock } = block;
+		return restBlock;
+	} );
 }
 
 /**
@@ -782,8 +784,8 @@ export const blocks = pipe(
 				}
 
 				// Do nothing if only attributes change.
-				const changes = omit( action.updates, 'attributes' );
-				if ( isEmpty( changes ) ) {
+				const { attributes, ...changes } = action.updates;
+				if ( Object.values( changes ).length === 0 ) {
 					return state;
 				}
 
@@ -1641,13 +1643,18 @@ export const blockListSettings = ( state = {}, action ) => {
 		// should correct the state.
 		case 'REPLACE_BLOCKS':
 		case 'REMOVE_BLOCKS': {
-			return omit( state, action.clientIds );
+			return Object.fromEntries(
+				Object.entries( state ).filter(
+					( [ id ] ) => ! action.clientIds.includes( id )
+				)
+			);
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const { clientId } = action;
 			if ( ! action.settings ) {
 				if ( state.hasOwnProperty( clientId ) ) {
-					return omit( state, clientId );
+					const { [ clientId ]: removedBlock, ...restBlocks } = state;
+					return restBlocks;
 				}
 
 				return state;
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 3c048a7d58a29c..f096767bf6178c 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, find } from 'lodash';
+import { map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -2469,8 +2469,7 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
  */
 export const __experimentalGetReusableBlockTitle = createSelector(
 	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
+		const reusableBlock = getReusableBlocks( state ).find(
 			( block ) => block.id === ref
 		);
 		if ( ! reusableBlock ) {
diff --git a/packages/block-editor/src/utils/pasting.js b/packages/block-editor/src/utils/pasting.js
index 366b79a3294229..e962e11050a1d9 100644
--- a/packages/block-editor/src/utils/pasting.js
+++ b/packages/block-editor/src/utils/pasting.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
 export function getPasteEventData( { clipboardData } ) {
@@ -25,21 +24,16 @@ export function getPasteEventData( { clipboardData } ) {
 		}
 	}
 
-	const files = getFilesFromDataTransfer( clipboardData ).filter(
-		( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-	);
+	const files = getFilesFromDataTransfer( clipboardData );
 
 	if (
 		files.length &&
 		! shouldDismissPastedFiles( files, html, plainText )
 	) {
-		html = files
-			.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
-			.join( '' );
-		plainText = '';
+		return { files };
 	}
 
-	return { html, plainText };
+	return { html, plainText, files: [] };
 }
 
 /**
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index db014bac0fd150..84b210d7fadac0 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -63,7 +63,7 @@ export default function CategoriesEdit( {
 		const parentId = showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return categoriesList.map( ( category ) =>
-			renderCategoryListItem( category, 0 )
+			renderCategoryListItem( category )
 		);
 	};
 
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 69044c081c74e0..a5e51cfbf4e793 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -202,7 +202,6 @@ function register_legacy_post_comments_block() {
 			'wp-block-buttons',
 			'wp-block-button',
 		),
-		'editorStyle'       => 'wp-block-post-comments-editor',
 		'render_callback'   => 'render_block_core_comments',
 		'skip_inner_blocks' => true,
 	);
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index d3f65672e09328..332f3f6f614cea 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	Button,
 	ExternalLink,
@@ -146,7 +146,7 @@ export default function CoverInspectorControls( {
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
 						{ isImageBackground && (
-							<Fragment>
+							<>
 								<ToggleControl
 									label={ __( 'Fixed background' ) }
 									checked={ hasParallax }
@@ -158,7 +158,7 @@ export default function CoverInspectorControls( {
 									checked={ isRepeated }
 									onChange={ toggleIsRepeated }
 								/>
-							</Fragment>
+							</>
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker
@@ -180,6 +180,7 @@ export default function CoverInspectorControls( {
 							isImageBackground &&
 							isImgElement && (
 								<TextareaControl
+									__nextHasNoMarginBottom
 									label={ __(
 										'Alt text (alternative text)'
 									) }
@@ -226,7 +227,6 @@ export default function CoverInspectorControls( {
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					settings={ [
 						{
diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index ab9a2257f87e4e..c41a78ca5c0422 100644
--- a/packages/block-library/src/freeform/edit.js
+++ b/packages/block-library/src/freeform/edit.js
@@ -6,10 +6,10 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { debounce } from '@wordpress/compose';
+import { debounce, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 
@@ -17,6 +17,7 @@ import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import ConvertToBlocksButton from './convert-to-blocks-button';
+import ModalEdit from './modal';
 
 const { wp } = window;
 
@@ -36,17 +37,44 @@ function isTmceEmpty( editor ) {
 	return /^\n?$/.test( body.innerText || body.textContent );
 }
 
-export default function ClassicEdit( {
+export default function FreeformEdit( props ) {
+	const { clientId } = props;
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+	const [ isIframed, setIsIframed ] = useState( false );
+	const ref = useRefEffect( ( element ) => {
+		setIsIframed( element.ownerDocument !== document );
+	}, [] );
+
+	return (
+		<>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<div { ...useBlockProps( { ref } ) }>
+				{ isIframed ? (
+					<ModalEdit { ...props } />
+				) : (
+					<ClassicEdit { ...props } />
+				) }
+			</div>
+		</>
+	);
+}
+
+function ClassicEdit( {
 	clientId,
 	attributes: { content },
 	setAttributes,
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
-		[ clientId ]
-	);
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -225,28 +253,19 @@ export default function ClassicEdit( {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<>
-			{ canRemove && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ConvertToBlocksButton clientId={ clientId } />
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-			<div { ...useBlockProps() }>
-				<div
-					key="toolbar"
-					id={ `toolbar-${ clientId }` }
-					className="block-library-classic__toolbar"
-					onClick={ focus }
-					data-placeholder={ __( 'Classic' ) }
-					onKeyDown={ onToolbarKeyDown }
-				/>
-				<div
-					key="editor"
-					id={ `editor-${ clientId }` }
-					className="wp-block-freeform block-library-rich-text__tinymce"
-				/>
-			</div>
+			<div
+				key="toolbar"
+				id={ `toolbar-${ clientId }` }
+				className="block-library-classic__toolbar"
+				onClick={ focus }
+				data-placeholder={ __( 'Classic' ) }
+				onKeyDown={ onToolbarKeyDown }
+			/>
+			<div
+				key="editor"
+				id={ `editor-${ clientId }` }
+				className="wp-block-freeform block-library-rich-text__tinymce"
+			/>
 		</>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
new file mode 100644
index 00000000000000..67338be91fa864
--- /dev/null
+++ b/packages/block-library/src/freeform/modal.js
@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls, store } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Modal,
+	Button,
+} from '@wordpress/components';
+import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+function ClassicEdit( props ) {
+	const styles = useSelect(
+		( select ) => select( store ).getSettings().styles
+	);
+	useEffect( () => {
+		const { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;
+
+		window.tinymce.EditorManager.overrideDefaults( {
+			base_url: baseURL,
+			suffix,
+		} );
+
+		window.wp.oldEditor.initialize( props.id, {
+			tinymce: {
+				...settings,
+				height: 500,
+				setup( editor ) {
+					editor.on( 'init', () => {
+						const doc = editor.getDoc();
+						styles.forEach( ( { css } ) => {
+							const styleEl = doc.createElement( 'style' );
+							styleEl.innerHTML = css;
+							doc.head.appendChild( styleEl );
+						} );
+					} );
+				},
+			},
+		} );
+
+		return () => {
+			window.wp.oldEditor.remove( props.id );
+		};
+	}, [] );
+
+	return <textarea { ...props } />;
+}
+
+export default function ModalEdit( props ) {
+	const {
+		clientId,
+		attributes: { content },
+		setAttributes,
+		onReplace,
+	} = props;
+	const [ isOpen, setOpen ] = useState( false );
+	const id = `editor-${ clientId }`;
+	const label = __( 'Classic Edit' );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton onClick={ () => setOpen( true ) }>
+						{ label }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			{ content && <RawHTML>{ content }</RawHTML> }
+			{ ( isOpen || ! content ) && (
+				<Modal title={ label } __experimentalHideHeader={ true }>
+					<h2
+						style={ {
+							display: 'flex',
+							justifyContent: 'space-between',
+						} }
+					>
+						<div>{ label }</div>
+						<div>
+							<Button
+								onClick={ () =>
+									content ? setOpen( false ) : onReplace( [] )
+								}
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								isPrimary
+								onClick={ () => {
+									setAttributes( {
+										content:
+											window.wp.oldEditor.getContent(
+												id
+											),
+									} );
+									setOpen( false );
+								} }
+							>
+								{ __( 'Save' ) }
+							</Button>
+						</div>
+					</h2>
+					<ClassicEdit id={ id } defaultValue={ content } />
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index c8d6731198c7c6..c56cf1dab84e8f 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -20,6 +20,7 @@ import {
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
@@ -63,6 +64,8 @@ const linkOptions = [
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const allowedBlocks = [ 'core/image' ];
+const LAYOUT = { type: 'default', alignments: [] };
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -483,8 +486,20 @@ function GalleryEdit( props ) {
 		className: classnames( className, 'has-nested-images' ),
 	} );
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks,
+		orientation: 'horizontal',
+		renderAppender: false,
+		__experimentalLayout: LAYOUT,
+	} );
+
 	if ( ! hasImages ) {
-		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
+		return (
+			<View { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ mediaPlaceholder }
+			</View>
+		);
 	}
 
 	const hasLinkTo = linkTo && linkTo !== 'none';
@@ -579,7 +594,7 @@ function GalleryEdit( props ) {
 						? mediaPlaceholder
 						: undefined
 				}
-				blockProps={ blockProps }
+				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</>
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index e6176cc8a7256c..957a141d51c6b7 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import {
 	RichText,
-	useInnerBlocksProps,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
@@ -16,8 +15,6 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
-const allowedBlocks = [ 'core/image' ];
-
 export const Gallery = ( props ) => {
 	const {
 		attributes,
@@ -31,16 +28,9 @@ export const Gallery = ( props ) => {
 
 	const { align, columns, caption, imageCrop } = attributes;
 
-	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
-		allowedBlocks,
-		orientation: 'horizontal',
-		renderAppender: false,
-		__experimentalLayout: { type: 'default', alignments: [] },
-	} );
-
 	return (
 		<figure
-			{ ...innerBlocksProps }
+			{ ...blockProps }
 			className={ classnames(
 				blockProps.className,
 				layoutClassNames,
@@ -53,8 +43,8 @@ export const Gallery = ( props ) => {
 				}
 			) }
 		>
-			{ children }
-			{ isSelected && ! children && (
+			{ blockProps.children }
+			{ isSelected && ! blockProps.children && (
 				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 5eb511b455864d..15f152a1ff7a45 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -413,6 +413,7 @@ export default function Image( {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
+							__nextHasNoMarginBottom
 							label={ __( 'Alt text (alternative text)' ) }
 							value={ alt }
 							onChange={ updateAlt }
diff --git a/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..dfdb88ce271d2c
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latest Posts block inserts block 1`] = `"<!-- wp:latest-posts /-->"`;
diff --git a/packages/block-library/src/latest-posts/test/edit.native.js b/packages/block-library/src/latest-posts/test/edit.native.js
new file mode 100644
index 00000000000000..aa7397cdcd404d
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/edit.native.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import apiFetch from '@wordpress/api-fetch';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Latest Posts block', () => {
+	afterEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Mock return value for categories
+		apiFetch.mockReturnValueOnce( Promise.resolve( [] ) );
+
+		// Add block
+		await addBlock( screen, 'Latest Posts' );
+
+		// Get block
+		const latestPostsBlock = await getBlock( screen, 'Latest Posts' );
+		expect( latestPostsBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 83b7074e3d1550..e4f005f7986aec 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -281,6 +281,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaType === 'image' && (
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Alt text (alternative text)' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
index 1baa57e76c9cd8..45c7706655b70d 100644
--- a/packages/block-library/src/missing/edit.native.js
+++ b/packages/block-library/src/missing/edit.native.js
@@ -151,7 +151,8 @@ export class UnsupportedBlockEdit extends Component {
 		const infoTitle = sprintf( titleFormat, blockTitle );
 		const missingBlockDetail = applyFilters(
 			'native.missing_block_detail',
-			__( 'We are working hard to add more blocks with each release.' )
+			__( 'We are working hard to add more blocks with each release.' ),
+			blockName
 		);
 		const missingBlockActionButton = applyFilters(
 			'native.missing_block_action_button',
@@ -205,11 +206,17 @@ export class UnsupportedBlockEdit extends Component {
 					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
 						{ infoTitle }
 					</Text>
-					{ isEditableInUnsupportedBlockEditor && (
-						<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-							{ missingBlockDetail }
-						</Text>
-					) }
+					{ isEditableInUnsupportedBlockEditor &&
+						missingBlockDetail && (
+							<Text
+								style={ [
+									infoTextStyle,
+									infoDescriptionStyle,
+								] }
+							>
+								{ missingBlockDetail }
+							</Text>
+						) }
 				</View>
 				{ ( isUnsupportedBlockEditorSupported ||
 					canEnableUnsupportedBlockEditor ) &&
diff --git a/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..0bc3714894afb7
--- /dev/null
+++ b/packages/block-library/src/more/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`More block inserts block 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
diff --git a/packages/block-library/src/more/test/edit.native.js b/packages/block-library/src/more/test/edit.native.js
new file mode 100644
index 00000000000000..cc84c7f3fc2b79
--- /dev/null
+++ b/packages/block-library/src/more/test/edit.native.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'More block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'More' );
+
+		// Get block
+		const moreBlock = await getBlock( screen, 'More' );
+		expect( moreBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 7e58527d947f5c..ac2b43501e9ed3 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -30,7 +30,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
@@ -48,6 +48,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { name } from './block.json';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
+import { getColors } from '../navigation/edit/utils';
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -100,61 +101,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 const useIsInvalidLink = ( kind, type, id ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
@@ -455,7 +401,7 @@ export default function NavigationLinkEdit( {
 			: __( 'This item is missing a link' );
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -495,6 +441,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( { description: descriptionValue } );
@@ -644,6 +591,6 @@ export default function NavigationLinkEdit( {
 				</a>
 				<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 8853d49f6e2cf0..36bfbf5d1fc0ae 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -376,3 +376,35 @@ function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Link block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_link_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-link' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_link_inspector' );
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 47a222bd57bb66..3255f4ac812ecc 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -27,7 +27,7 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
@@ -42,6 +42,10 @@ import { ItemSubmenuIcon } from './icons';
 import { name } from './block.json';
 import { LinkUI } from '../navigation-link/link-ui';
 import { updateAttributes } from '../navigation-link/update-attributes';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -104,61 +108,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Determine the colors for a menu.
- *
- * Order of priority is:
- * 1: Overlay custom colors (if submenu)
- * 2: Overlay theme colors (if submenu)
- * 3: Custom colors
- * 4: Theme colors
- * 5: Global styles
- *
- * @param {Object}  context
- * @param {boolean} isSubMenu
- */
-function getColors( context, isSubMenu ) {
-	const {
-		textColor,
-		customTextColor,
-		backgroundColor,
-		customBackgroundColor,
-		overlayTextColor,
-		customOverlayTextColor,
-		overlayBackgroundColor,
-		customOverlayBackgroundColor,
-		style,
-	} = context;
-
-	const colors = {};
-
-	if ( isSubMenu && !! customOverlayTextColor ) {
-		colors.customTextColor = customOverlayTextColor;
-	} else if ( isSubMenu && !! overlayTextColor ) {
-		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
-		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
-		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
-		colors.customTextColor = style.color.text;
-	}
-
-	if ( isSubMenu && !! customOverlayBackgroundColor ) {
-		colors.customBackgroundColor = customOverlayBackgroundColor;
-	} else if ( isSubMenu && !! overlayBackgroundColor ) {
-		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
-		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
-		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
-		colors.customTextColor = style.color.background;
-	}
-
-	return colors;
-}
-
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
  */
@@ -377,48 +326,27 @@ export default function NavigationSubmenuEdit( {
 		  )
 		: ALLOWED_BLOCKS;
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: classnames( 'wp-block-navigation__submenu-container', {
-				'is-parent-of-selected-block': isParentOfSelectedBlock,
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]:
-					!! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
-					!! innerBlocksColors.backgroundColor,
-			} ),
-			style: {
-				color: innerBlocksColors.customTextColor,
-				backgroundColor: innerBlocksColors.customBackgroundColor,
-			},
-		},
-		{
-			allowedBlocks,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: true,
-
-			// Ensure block toolbar is not too far removed from item
-			// being edited.
-			// see: https://github.com/WordPress/gutenberg/pull/34615.
-			__experimentalCaptureToolbars: true,
-
-			renderAppender:
-				isSelected ||
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasChildren ) ||
-				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasChildren
-					? InnerBlocks.ButtonBlockAppender
-					: false,
-		}
-	);
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
+		allowedBlocks,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: true,
+
+		// Ensure block toolbar is not too far removed from item
+		// being edited.
+		// see: https://github.com/WordPress/gutenberg/pull/34615.
+		__experimentalCaptureToolbars: true,
+
+		renderAppender:
+			isSelected ||
+			( isImmediateParentOfSelectedBlock &&
+				! selectedBlockHasChildren ) ||
+			// Show the appender while dragging to allow inserting element between item and the appender.
+			hasChildren
+				? InnerBlocks.ButtonBlockAppender
+				: false,
+	} );
 
 	const ParentElement = openSubmenusOnClick ? 'button' : 'a';
 
@@ -438,7 +366,7 @@ export default function NavigationSubmenuEdit( {
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					{ ! openSubmenusOnClick && (
@@ -481,6 +409,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( {
@@ -570,6 +499,6 @@ export default function NavigationSubmenuEdit( {
 				) }
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index 99c86493d5b31a..c1c8006039f555 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -321,3 +321,35 @@ function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );
+
+/**
+ * Enables animation of the block inspector for the Navigation Submenu block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_submenu_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation-submenu' =>
+				array(
+					'enterDirection' => 'rightToLeft',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_submenu_inspector' );
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index b414409791cbfb..3a4f09ccfd0411 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -648,7 +648,6 @@ function Navigation( {
 				{ hasColorSettings && (
 					<>
 						<ColorGradientSettingsDropdown
-							__experimentalHasMultipleOrigins
 							__experimentalIsRenderedInSidebar
 							settings={ [
 								{
@@ -717,13 +716,13 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -759,12 +758,12 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -832,13 +831,13 @@ function Navigation( {
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index cefc94a3dcce0a..d6eb607120c46b 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -4,8 +4,14 @@
 import {
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { PanelBody, VisuallyHidden } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,10 +21,11 @@ import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
 
 const MenuInspectorControls = ( {
+	clientId,
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	currentMenuId = null,
-	innerBlocks,
+	isNavigationMenuMissing,
 	isManageMenusButtonDisabled,
 	onCreateNew,
 	onSelectClassicMenu,
@@ -32,6 +39,16 @@ const MenuInspectorControls = ( {
 	/* translators: %s: The name of a menu. */
 	const actionLabel = __( "Switch to '%s'" );
 
+	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
+	// This is required else the list view will display the entire block tree.
+	const clientIdsTree = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree } = select( blockEditorStore );
+			return __unstableGetClientIdsTree( clientId );
+		},
+		[ clientId ]
+	);
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -39,37 +56,61 @@ const MenuInspectorControls = ( {
 					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
 				}
 			>
-				<>
-					{ isOffCanvasNavigationEditorEnabled && (
-						<VisuallyHidden as="h2">
-							{ __( 'Menu' ) }
-						</VisuallyHidden>
-					) }
-					<NavigationMenuSelector
-						currentMenuId={ currentMenuId }
-						onSelectClassicMenu={ onSelectClassicMenu }
-						onSelectNavigationMenu={ onSelectNavigationMenu }
-						onCreateNew={ onCreateNew }
-						createNavigationMenuIsSuccess={
-							createNavigationMenuIsSuccess
-						}
-						createNavigationMenuIsError={
-							createNavigationMenuIsError
-						}
-						actionLabel={ actionLabel }
-					/>
-					{ isOffCanvasNavigationEditorEnabled ? (
-						<OffCanvasEditor
-							blocks={ innerBlocks }
-							isExpanded={ true }
-							selectBlockInCanvas={ false }
+				{ isOffCanvasNavigationEditorEnabled ? (
+					<>
+						<HStack className="wp-block-navigation-off-canvas-editor__header">
+							<Heading
+								className="wp-block-navigation-off-canvas-editor__title"
+								level={ 2 }
+							>
+								{ __( 'Menu' ) }
+							</Heading>
+							<NavigationMenuSelector
+								currentMenuId={ currentMenuId }
+								onSelectClassicMenu={ onSelectClassicMenu }
+								onSelectNavigationMenu={
+									onSelectNavigationMenu
+								}
+								onCreateNew={ onCreateNew }
+								createNavigationMenuIsSuccess={
+									createNavigationMenuIsSuccess
+								}
+								createNavigationMenuIsError={
+									createNavigationMenuIsError
+								}
+								actionLabel={ actionLabel }
+							/>
+						</HStack>
+						{ currentMenuId && isNavigationMenuMissing ? (
+							<p>{ __( 'Select or create a menu' ) }</p>
+						) : (
+							<OffCanvasEditor
+								blocks={ clientIdsTree }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+					</>
+				) : (
+					<>
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
 						/>
-					) : (
 						<ManageMenusButton
 							disabled={ isManageMenusButtonDisabled }
 						/>
-					) }
-				</>
+					</>
+				) }
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
index 2d8594093bf105..d923d55d64b66c 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -10,7 +10,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,6 +31,8 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -140,7 +142,11 @@ function NavigationMenuSelector( {
 		},
 	};
 
-	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
+	if (
+		! hasNavigationMenus &&
+		! hasClassicMenus &&
+		! isOffCanvasNavigationEditorEnabled
+	) {
 		return (
 			<Button
 				className="wp-block-navigation__navigation-selector-button--createnew"
@@ -161,15 +167,19 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className="wp-block-navigation__navigation-selector"
+			className={
+				isOffCanvasNavigationEditorEnabled
+					? ''
+					: 'wp-block-navigation__navigation-selector'
+			}
 			label={ selectorLabel }
-			text={
-				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ selectorLabel }
-				</span>
+			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
+			toggleProps={
+				isOffCanvasNavigationEditorEnabled
+					? { isSmall: true }
+					: toggleProps
 			}
-			icon={ null }
-			toggleProps={ toggleProps }
 		>
 			{ ( { onClose } ) => (
 				<>
diff --git a/packages/block-library/src/navigation/edit/utils.js b/packages/block-library/src/navigation/edit/utils.js
index b152d9874e8e97..2c436af8c5754f 100644
--- a/packages/block-library/src/navigation/edit/utils.js
+++ b/packages/block-library/src/navigation/edit/utils.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
@@ -28,3 +33,80 @@ export function detectColors(
 
 	setBackground( backgroundColor );
 }
+
+/**
+ * Determine the colors for a menu.
+ *
+ * Order of priority is:
+ * 1: Overlay custom colors (if submenu)
+ * 2: Overlay theme colors (if submenu)
+ * 3: Custom colors
+ * 4: Theme colors
+ * 5: Global styles
+ *
+ * @param {Object}  context
+ * @param {boolean} isSubMenu
+ */
+export function getColors( context, isSubMenu ) {
+	const {
+		textColor,
+		customTextColor,
+		backgroundColor,
+		customBackgroundColor,
+		overlayTextColor,
+		customOverlayTextColor,
+		overlayBackgroundColor,
+		customOverlayBackgroundColor,
+		style,
+	} = context;
+
+	const colors = {};
+
+	if ( isSubMenu && !! customOverlayTextColor ) {
+		colors.customTextColor = customOverlayTextColor;
+	} else if ( isSubMenu && !! overlayTextColor ) {
+		colors.textColor = overlayTextColor;
+	} else if ( !! customTextColor ) {
+		colors.customTextColor = customTextColor;
+	} else if ( !! textColor ) {
+		colors.textColor = textColor;
+	} else if ( !! style?.color?.text ) {
+		colors.customTextColor = style.color.text;
+	}
+
+	if ( isSubMenu && !! customOverlayBackgroundColor ) {
+		colors.customBackgroundColor = customOverlayBackgroundColor;
+	} else if ( isSubMenu && !! overlayBackgroundColor ) {
+		colors.backgroundColor = overlayBackgroundColor;
+	} else if ( !! customBackgroundColor ) {
+		colors.customBackgroundColor = customBackgroundColor;
+	} else if ( !! backgroundColor ) {
+		colors.backgroundColor = backgroundColor;
+	} else if ( !! style?.color?.background ) {
+		colors.customTextColor = style.color.background;
+	}
+
+	return colors;
+}
+
+export function getNavigationChildBlockProps( innerBlocksColors ) {
+	return {
+		className: classnames( 'wp-block-navigation__submenu-container', {
+			'has-text-color': !! (
+				innerBlocksColors.textColor || innerBlocksColors.customTextColor
+			),
+			[ `has-${ innerBlocksColors.textColor }-color` ]:
+				!! innerBlocksColors.textColor,
+			'has-background': !! (
+				innerBlocksColors.backgroundColor ||
+				innerBlocksColors.customBackgroundColor
+			),
+			[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]:
+				!! innerBlocksColors.backgroundColor,
+		} ),
+		style: {
+			color: innerBlocksColors.customTextColor,
+			backgroundColor: innerBlocksColors.customBackgroundColor,
+		},
+	};
+}
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 8b2dd93e3010be..e22a0f152c5ea9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -32,13 +32,6 @@
  * Submenus.
  */
 
-// Ensure sub-menus stay open and visible when a nested block is selected.
-.wp-block-navigation__container.is-parent-of-selected-block {
-	visibility: visible;
-	opacity: 1;
-	overflow: visible;
-}
-
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
 .wp-block-navigation-item {
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 030cab4501eed4..971a5f500e7741 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -856,3 +856,35 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 }
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
+/**
+ * Enables animation of the block inspector for the Navigation block.
+ *
+ * See:
+ * - https://github.com/WordPress/gutenberg/pull/46342
+ * - https://github.com/WordPress/gutenberg/issues/45884
+ *
+ * @param array $settings Default editor settings.
+ * @return array Filtered editor settings.
+ */
+function gutenberg_enable_animation_for_navigation_inspector( $settings ) {
+	$current_animation_settings = _wp_array_get(
+		$settings,
+		array( '__experimentalBlockInspectorAnimation' ),
+		array()
+	);
+
+	$settings['__experimentalBlockInspectorAnimation'] = array_merge(
+		$current_animation_settings,
+		array(
+			'core/navigation' =>
+				array(
+					'enterDirection' => 'leftToRight',
+				),
+		)
+	);
+
+	return $settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_enable_animation_for_navigation_inspector' );
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 59622a7039f491..946472ef95caa4 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -533,7 +533,6 @@ button.wp-block-navigation-item__content {
 			}
 
 			// Always expand/unfold submenus inside the modal.
-			.has-child .submenu-container,
 			.has-child .wp-block-navigation__submenu-container {
 				// Unset CSS that hides dropdown menus.
 				opacity: 1;
diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
index db8e0a5c173736..aa559937de8319 100644
--- a/packages/block-library/src/page-list-item/edit.js
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -14,6 +14,10 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { ItemSubmenuIcon } from '../navigation-link/icons';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
 
 function useFrontPageId() {
 	return useSelect( ( select ) => {
@@ -34,6 +38,17 @@ export default function PageListItemEdit( { context, attributes } ) {
 	const { id, label, link, hasChildren } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const frontPageId = useFrontPageId();
+
+	const innerBlocksColors = getColors( context, true );
+
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const blockProps = useBlockProps( navigationChildBlockProps, {
+		className: 'wp-block-pages-list__item',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
+
 	return (
 		<li
 			key={ id }
@@ -79,14 +94,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 								<ItemSubmenuIcon />
 							</button>
 						) }
-					<ul
-						className={ classnames( 'submenu-container', {
-							'wp-block-navigation__submenu-container':
-								isNavigationChild,
-						} ) }
-					>
-						<InnerBlocks />
-					</ul>
+					<ul { ...innerBlocksProps }></ul>
 				</>
 			) }
 		</li>
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index 2fc6993849d6f7..4f4f45c4bb4748 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -11,6 +11,10 @@
 		"parentPageID": {
 			"type": "integer",
 			"default": 0
+		},
+		"isNested": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [
@@ -30,7 +34,20 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index b3d2db31d5e04a..219822ed87944f 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -39,6 +39,7 @@ import { convertDescription } from './constants';
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
+const NOOP = () => {};
 
 export default function PageListEdit( {
 	context,
@@ -49,8 +50,6 @@ export default function PageListEdit( {
 	const { parentPageID } = attributes;
 	const [ pages ] = useGetPages();
 	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
-	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -133,6 +132,9 @@ export default function PageListEdit( {
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 		templateLock: 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
 	} );
 
 	const getBlockContent = () => {
@@ -185,29 +187,35 @@ export default function PageListEdit( {
 		}
 	};
 
-	useEffect( () => {
-		__unstableMarkNextChangeAsNotPersistent();
-		if ( blockList ) {
-			replaceInnerBlocks( clientId, blockList );
-		}
-	}, [ clientId, blockList ] );
-
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
-
-		const _selectedBlockClientId = getSelectedBlockClientId();
+	const { parentNavBlockClientId, isNested } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				isNested:
+					getBlockParentsByBlockName(
+						clientId,
+						'core/navigation-submenu',
+						true
+					).length > 0,
+			};
+		},
+		[ clientId ]
+	);
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
-				_selectedBlockClientId,
-				'core/navigation',
-				true
-			)[ 0 ],
-		};
-	}, [] );
+	useEffect( () => {
+		setAttributes( { isNested } );
+	}, [ isNested ] );
 
 	return (
 		<>
diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
index 83a70bafd94853..4cda6018220d32 100644
--- a/packages/block-library/src/page-list/editor.scss
+++ b/packages/block-library/src/page-list/editor.scss
@@ -22,6 +22,10 @@
 	}
 }
 
+.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
+	display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned.
+}
+
 // Make links unclickable in the editor.
 .wp-block-pages-list__item__link {
 	pointer-events: none;
diff --git a/packages/block-library/src/page-list/index.js b/packages/block-library/src/page-list/index.js
index 7e13c23f229f2e..995e3a1c7f97ab 100644
--- a/packages/block-library/src/page-list/index.js
+++ b/packages/block-library/src/page-list/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { pages as icon } from '@wordpress/icons';
+import { pages, update } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return update;
+		}
+
+		return pages;
+	},
 	example: {},
 	edit,
 };
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 7944f6f3a84ad6..45681737165b80 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -139,13 +139,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
+ * @param boolean $is_nested Whether the submenu is nested or not.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
  * @param array   $colors Color information for overlay styles.
  * @param integer $depth The nesting depth.
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -173,7 +174,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
 
 		// If this is the first level of submenus, include the overlay colors.
-		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
+		if ( ( ( 0 < $depth && ! $is_nested ) || $is_nested ) && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
 			if ( '' !== $colors['overlay_inline_styles'] ) {
 				$style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) );
@@ -207,12 +208,9 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 				$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 				$markup .= '</button>';
 			}
-			$markup .= '<ul class="submenu-container';
-			// Extra classname is added when the block is a child of Navigation.
-			if ( $is_navigation_child ) {
-				$markup .= ' wp-block-navigation__submenu-container';
-			}
-			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			$markup .= '<ul class="wp-block-navigation__submenu-container">';
+			$markup .= block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 );
+			$markup .= '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -253,6 +251,7 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	++$block_id;
 
 	$parent_page_id = $attributes['parentPageID'];
+	$is_nested      = $attributes['isNested'];
 
 	$all_pages = get_pages(
 		array(
@@ -321,9 +320,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$wrapper_markup = $is_nested ? '%2$s' : '<ul %1$s>%2$s</ul>';
 
-	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index fc885741b4d05b..4b523abfb49160 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -66,7 +66,6 @@ const Overlay = ( {
 			) }
 			<InspectorControls __experimentalGroup="color">
 				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					settings={ [
 						{
diff --git a/packages/block-library/src/query/constants.js b/packages/block-library/src/query/constants.js
deleted file mode 100644
index 9f606c1c6920c3..00000000000000
--- a/packages/block-library/src/query/constants.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const MAX_FETCHED_TERMS = 100;
-export const DEFAULTS_POSTS_PER_PAGE = 3;
-
-export default {
-	MAX_FETCHED_TERMS,
-	DEFAULTS_POSTS_PER_PAGE,
-};
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index 07c841e607c216..e9b449c694b9c3 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -92,6 +92,7 @@ function PatternSelectionModal( {
 					blockName={ blockNameForPatterns }
 					clientId={ clientId }
 					onBlockPatternSelect={ onBlockPatternSelect }
+					showTitles={ true }
 				/>
 			</BlockContextProvider>
 		</Modal>
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 13cc70e9dc5428..6bd0289687ad7a 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -110,6 +110,21 @@ export default function QueryInspectorControls( {
 		showColumnsControl ||
 		showOrderControl ||
 		showStickyControl;
+	const showTaxControl =
+		!! taxonomies?.length &&
+		isControlAllowed( allowedControls, 'taxQuery' );
+	const showAuthorControl = isControlAllowed( allowedControls, 'author' );
+	const showSearchControl = isControlAllowed( allowedControls, 'search' );
+	const showParentControl =
+		isControlAllowed( allowedControls, 'parents' ) &&
+		isPostTypeHierarchical;
+
+	const showFiltersPanel =
+		showTaxControl ||
+		showAuthorControl ||
+		showSearchControl ||
+		showParentControl;
+
 	return (
 		<>
 			{ showSettingsPanel && (
@@ -179,7 +194,7 @@ export default function QueryInspectorControls( {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			{ ! inherit && (
+			{ ! inherit && showFiltersPanel && (
 				<InspectorControls>
 					<ToolsPanel
 						className="block-library-query-toolspanel__filters"
@@ -194,26 +209,25 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomies?.length &&
-							isControlAllowed( allowedControls, 'taxQuery' ) && (
-								<ToolsPanelItem
-									label={ __( 'Taxonomies' ) }
-									hasValue={ () =>
-										Object.values( taxQuery || {} ).some(
-											( terms ) => !! terms.length
-										)
-									}
-									onDeselect={ () =>
-										setQuery( { taxQuery: null } )
-									}
-								>
-									<TaxonomyControls
-										onChange={ setQuery }
-										query={ query }
-									/>
-								</ToolsPanelItem>
-							) }
-						{ isControlAllowed( allowedControls, 'author' ) && (
+						{ showTaxControl && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ showAuthorControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! authorIds }
 								label={ __( 'Authors' ) }
@@ -225,7 +239,7 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isControlAllowed( allowedControls, 'search' ) && (
+						{ showSearchControl && (
 							<ToolsPanelItem
 								hasValue={ () => !! querySearch }
 								label={ __( 'Keyword' ) }
@@ -238,22 +252,19 @@ export default function QueryInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ isPostTypeHierarchical &&
-							isControlAllowed( allowedControls, 'parents' ) && (
-								<ToolsPanelItem
-									hasValue={ () => !! parents?.length }
-									label={ __( 'Parents' ) }
-									onDeselect={ () =>
-										setQuery( { parents: [] } )
-									}
-								>
-									<ParentControl
-										parents={ parents }
-										postType={ postType }
-										onChange={ setQuery }
-									/>
-								</ToolsPanelItem>
-							) }
+						{ showParentControl && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
 					</ToolsPanel>
 				</InspectorControls>
 			) }
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
index 1cfee79a8e8001..30b983737cbe8b 100644
--- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -4,12 +4,20 @@
 import { FormTokenField } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useTaxonomies } from '../../utils';
-import { MAX_FETCHED_TERMS } from '../../constants';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+	order: 'asc',
+	_fields: 'id,name',
+	context: 'view',
+};
 
 // Helper function to get the term id based on user input in terms `FormTokenField`.
 const getTermIdByTermValue = ( terms, termValue ) => {
@@ -35,20 +43,6 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 	)?.id;
 };
 
-const useTaxonomyTerms = ( slug ) => {
-	return useSelect(
-		( select ) => {
-			const terms = select( coreStore ).getEntityRecords(
-				'taxonomy',
-				slug,
-				{ context: 'view', per_page: MAX_FETCHED_TERMS }
-			);
-			return { terms };
-		},
-		[ slug ]
-	);
-};
-
 export function TaxonomyControls( { onChange, query } ) {
 	const { postType, taxQuery } = query;
 
@@ -60,7 +54,7 @@ export function TaxonomyControls( { onChange, query } ) {
 	return (
 		<>
 			{ taxonomies.map( ( taxonomy ) => {
-				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds ) =>
 					onChange( {
 						taxQuery: {
@@ -73,7 +67,7 @@ export function TaxonomyControls( { onChange, query } ) {
 					<TaxonomyItem
 						key={ taxonomy.slug }
 						taxonomy={ taxonomy }
-						value={ value }
+						termIds={ termIds }
 						onChange={ handleChange }
 					/>
 				);
@@ -81,38 +75,108 @@ export function TaxonomyControls( { onChange, query } ) {
 		</>
 	);
 }
-function TaxonomyItem( { taxonomy, value, onChange } ) {
-	const { terms } = useTaxonomyTerms( taxonomy.slug );
-	if ( ! terms?.length ) {
-		return null;
-	}
 
+/**
+ * Renders a `FormTokenField` for a given taxonomy.
+ *
+ * @param {Object}   props          The props for the component.
+ * @param {Object}   props.taxonomy The taxonomy object.
+ * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.
+ * @param {Function} props.onChange Callback `onChange` function.
+ * @return {JSX.Element} The rendered component.
+ */
+function TaxonomyItem( { taxonomy, termIds, onChange } ) {
+	const [ search, setSearch ] = useState( '' );
+	const [ value, setValue ] = useState( EMPTY_ARRAY );
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	const debouncedSearch = useDebounce( setSearch, 250 );
+	const { searchResults, searchHasResolved } = useSelect(
+		( select ) => {
+			if ( ! search ) {
+				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+			}
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
+			const selectorArgs = [
+				'taxonomy',
+				taxonomy.slug,
+				{
+					...BASE_QUERY,
+					search,
+					orderby: 'name',
+					exclude: termIds,
+					per_page: 20,
+				},
+			];
+			return {
+				searchResults: getEntityRecords( ...selectorArgs ),
+				searchHasResolved: hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ search, termIds ]
+	);
+	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
+	// They are used to extract the terms' names to populate the `FormTokenField` properly
+	// and to sanitize the provided `termIds`, by setting only the ones that exist.
+	const existingTerms = useSelect(
+		( select ) => {
+			if ( ! termIds?.length ) return EMPTY_ARRAY;
+			const { getEntityRecords } = select( coreStore );
+			return getEntityRecords( 'taxonomy', taxonomy.slug, {
+				...BASE_QUERY,
+				include: termIds,
+				per_page: termIds.length,
+			} );
+		},
+		[ termIds ]
+	);
+	// Update the `value` state only after the selectors are resolved
+	// to avoid emptying the input when we're changing terms.
+	useEffect( () => {
+		if ( ! termIds?.length ) {
+			setValue( EMPTY_ARRAY );
+		}
+		if ( ! existingTerms?.length ) return;
+		// Returns only the existing entity ids. This prevents the component
+		// from crashing in the editor, when non existing ids are provided.
+		const sanitizedValue = termIds.reduce( ( accumulator, id ) => {
+			const entity = existingTerms.find( ( term ) => term.id === id );
+			if ( entity ) {
+				accumulator.push( {
+					id,
+					value: entity.name,
+				} );
+			}
+			return accumulator;
+		}, [] );
+		setValue( sanitizedValue );
+	}, [ termIds, existingTerms ] );
+	// Update suggestions only when the query has resolved.
+	useEffect( () => {
+		if ( ! searchHasResolved ) return;
+		setSuggestions( searchResults.map( ( result ) => result.name ) );
+	}, [ searchResults, searchHasResolved ] );
 	const onTermsChange = ( newTermValues ) => {
-		const termIds = new Set();
+		const newTermIds = new Set();
 		for ( const termValue of newTermValues ) {
-			const termId = getTermIdByTermValue( terms, termValue );
+			const termId = getTermIdByTermValue( searchResults, termValue );
 			if ( termId ) {
-				termIds.add( termId );
+				newTermIds.add( termId );
 			}
 		}
-
-		onChange( Array.from( termIds ) );
+		setSuggestions( EMPTY_ARRAY );
+		onChange( Array.from( newTermIds ) );
 	};
-
-	// Selects only the existing term ids in proper format to be
-	// used in `FormTokenField`. This prevents the component from
-	// crashing in the editor, when non existing term ids were provided.
-	const taxQueryValue = value
-		.map( ( termId ) => terms.find( ( t ) => t.id === termId ) )
-		.filter( Boolean )
-		.map( ( term ) => ( { id: term.id, value: term.name } ) );
-
 	return (
 		<div className="block-library-query-inspector__taxonomy-control">
 			<FormTokenField
 				label={ taxonomy.name }
-				value={ taxQueryValue }
-				suggestions={ terms.map( ( t ) => t.name ) }
+				value={ value }
+				onInputChange={ debouncedSearch }
+				suggestions={ suggestions }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
 			/>
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index bdb4dc3e734337..9cb8d8775a2bf3 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -20,7 +20,8 @@ import { __ } from '@wordpress/i18n';
  */
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
-import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
+
+const DEFAULTS_POSTS_PER_PAGE = 3;
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export default function QueryContent( {
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index fa1ef818e2f1f7..5766328808a3ca 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -16,6 +16,11 @@ import {
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useScopedBlockVariations } from '../utils';
+
 export default function QueryPlaceholder( {
 	attributes,
 	clientId,
@@ -57,7 +62,6 @@ export default function QueryPlaceholder( {
 		return (
 			<QueryVariationPicker
 				clientId={ clientId }
-				name={ name }
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 				icon={ icon }
@@ -98,16 +102,12 @@ export default function QueryPlaceholder( {
 
 function QueryVariationPicker( {
 	clientId,
-	name,
 	attributes,
 	setAttributes,
 	icon,
 	label,
 } ) {
-	const variations = useSelect(
-		( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),
-		[ name ]
-	);
+	const scopeVariations = useScopedBlockVariations( attributes );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
 	return (
@@ -115,24 +115,25 @@ function QueryVariationPicker( {
 			<__experimentalBlockVariationPicker
 				icon={ icon }
 				label={ label }
-				variations={ variations }
-				onSelect={ ( nextVariation ) => {
-					if ( nextVariation.attributes ) {
+				variations={ scopeVariations }
+				onSelect={ ( variation ) => {
+					if ( variation.attributes ) {
 						setAttributes( {
-							...nextVariation.attributes,
+							...variation.attributes,
 							query: {
-								...nextVariation.attributes.query,
+								...variation.attributes.query,
 								postType:
 									attributes.query.postType ||
-									nextVariation.attributes.query.postType,
+									variation.attributes.query.postType,
 							},
+							namespace: attributes.namespace,
 						} );
 					}
-					if ( nextVariation.innerBlocks ) {
+					if ( variation.innerBlocks ) {
 						replaceInnerBlocks(
 							clientId,
 							createBlocksFromInnerBlocksTemplate(
-								nextVariation.innerBlocks
+								variation.innerBlocks
 							),
 							false
 						);
diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
index 276d7b21638173..9bffcfd988fd09 100644
--- a/packages/block-library/src/query/utils.js
+++ b/packages/block-library/src/query/utils.js
@@ -18,6 +18,8 @@ import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
  */
 import { name as queryLoopName } from './block.json';
 
+/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -237,7 +239,6 @@ export function useBlockNameForPatterns( clientId, attributes ) {
 				queryLoopName,
 				attributes
 			)?.name,
-
 		[ attributes ]
 	);
 	const blockName = `${ queryLoopName }/${ activeVariationName }`;
@@ -260,3 +261,60 @@ export function useBlockNameForPatterns( clientId, attributes ) {
 	);
 	return activeVariationPatterns?.length ? blockName : queryLoopName;
 }
+
+/**
+ * Helper hook that determines if there is an active variation of the block
+ * and if there are available specific scoped `block` variations connected with
+ * this variation.
+ *
+ * If there are, these variations are going to be the only ones suggested
+ * to the user in setup flow when clicking to `start blank`, without including
+ * the default ones for Query Loop.
+ *
+ * If there are no such scoped `block` variations, the default ones for Query
+ * Loop are going to be suggested.
+ *
+ * The way we determine such variations is with the convention that they have the `namespace`
+ * attribute defined as an array. This array should contain the names(`name` property) of any
+ * variations they want to be connected to.
+ * For example, if we have a `Query Loop` scoped `inserter` variation with the name `products`,
+ * we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`.
+ * If the user selects this variation, the `namespace` attribute will be overridden by the
+ * main `inserter` variation.
+ *
+ * @param {Object} attributes The block's attributes.
+ * @return {WPBlockVariation[]} The block variations to be suggested in setup flow, when clicking to `start blank`.
+ */
+export function useScopedBlockVariations( attributes ) {
+	const { activeVariationName, blockVariations } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+			return {
+				activeVariationName: getActiveBlockVariation(
+					queryLoopName,
+					attributes
+				)?.name,
+				blockVariations: getBlockVariations( queryLoopName, 'block' ),
+			};
+		},
+		[ attributes ]
+	);
+	const variations = useMemo( () => {
+		// Filter out the variations that have defined a `namespace` attribute,
+		// which means they are 'connected' to specific variations of the block.
+		const isNotConnected = ( variation ) =>
+			! variation.attributes?.namespace;
+		if ( ! activeVariationName ) {
+			return blockVariations.filter( isNotConnected );
+		}
+		const connectedVariations = blockVariations.filter( ( variation ) =>
+			variation.attributes?.namespace?.includes( activeVariationName )
+		);
+		if ( !! connectedVariations.length ) {
+			return connectedVariations;
+		}
+		return blockVariations.filter( isNotConnected );
+	}, [ activeVariationName, blockVariations ] );
+	return variations;
+}
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index a3db69287f8f73..78ff685ff01fe1 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -114,10 +114,10 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const fluidTypographyEnabled = useSetting( 'typography.fluid' );
+	const fluidTypographySettings = useSetting( 'typography.fluid' );
 	const typographyProps = useTypographyProps(
 		attributes,
-		fluidTypographyEnabled
+		fluidTypographySettings
 	);
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
diff --git a/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..5ab1ac00a0481f
--- /dev/null
+++ b/packages/block-library/src/separator/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator block inserts block 1`] = `
+"<!-- wp:separator -->
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<!-- /wp:separator -->"
+`;
diff --git a/packages/block-library/src/separator/test/edit.native.js b/packages/block-library/src/separator/test/edit.native.js
new file mode 100644
index 00000000000000..0346cb3b2e6bfc
--- /dev/null
+++ b/packages/block-library/src/separator/test/edit.native.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Separator block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Separator' );
+
+		// Get block
+		const separatorBlock = await getBlock( screen, 'Separator' );
+		expect( separatorBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index fab49838afa2e4..71ec7faee6406b 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -12,7 +12,7 @@ import {
 	URLInput,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -89,7 +89,7 @@ const SocialLinkEdit = ( {
 	} );
 
 	return (
-		<Fragment>
+		<>
 			<InspectorControls>
 				<PanelBody
 					title={ sprintf(
@@ -144,7 +144,7 @@ const SocialLinkEdit = ( {
 					) }
 				</Button>
 			</li>
-		</Fragment>
+		</>
 	);
 };
 
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index eb1f83180e6e7f..91d688d50d8ec2 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -229,7 +229,6 @@ export function SocialLinksEdit( props ) {
 					( { onChange, label, value, resetAllFilter } ) => (
 						<ColorGradientSettingsDropdown
 							key={ `social-links-color-${ label }` }
-							__experimentalHasMultipleOrigins
 							__experimentalIsRenderedInSidebar
 							settings={ [
 								{
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
index dab35fdd0ce3d9..38e93e06d7830b 100644
--- a/packages/block-library/src/table-of-contents/edit.js
+++ b/packages/block-library/src/table-of-contents/edit.js
@@ -279,7 +279,7 @@ export default function TableOfContentsEdit( {
 				<div { ...blockProps }>
 					<Placeholder
 						icon={ <BlockIcon icon={ icon } /> }
-						label="Table of Contents"
+						label={ __( 'Table of Contents' ) }
 						instructions={ __(
 							'Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.'
 						) }
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 9721513a53eee0..4f4271650f50e1 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -11,6 +11,14 @@
 		width: 100%;
 	}
 
+	thead {
+		border-bottom: 3px solid;
+	}
+
+	tfoot {
+		border-top: 3px solid;
+	}
+
 	// Match default border style to default style in editor
 	td,
 	th {
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 3adc4d3e452ba7..d42e79b02b4965 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,14 +1,6 @@
 .wp-block-table {
 	margin: 0 0 1em 0;
 
-	thead {
-		border-bottom: 3px solid;
-	}
-
-	tfoot {
-		border-top: 3px solid;
-	}
-
 	td,
 	th {
 		word-break: normal;
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index d57d6b2f631807..ca42726b5655fa 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -7,12 +7,18 @@ import { sprintf, __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { TemplatePartImportControls } from './import-controls';
+
 export function TemplatePartAdvancedControls( {
 	tagName,
 	setAttributes,
 	isEntityAvailable,
 	templatePartId,
 	defaultWrapper,
+	hasInnerBlocks,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -87,6 +93,12 @@ export function TemplatePartAdvancedControls( {
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
 			/>
+			{ ! hasInnerBlocks && (
+				<TemplatePartImportControls
+					area={ area }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</InspectorControls>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/import-controls.js b/packages/block-library/src/template-part/edit/import-controls.js
new file mode 100644
index 00000000000000..1512cd936f02cb
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/import-controls.js
@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import {
+	Button,
+	FlexBlock,
+	FlexItem,
+	SelectControl,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import {
+	switchToBlockType,
+	getPossibleBlockTransformations,
+} from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { useCreateTemplatePartFromBlocks } from './utils/hooks';
+import { transformWidgetToBlock } from './utils/transformers';
+
+export function TemplatePartImportControls( { area, setAttributes } ) {
+	const [ selectedSidebar, setSelectedSidebar ] = useState( '' );
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const registry = useRegistry();
+	const sidebars = useSelect( ( select ) => {
+		return select( coreStore ).getSidebars( {
+			per_page: -1,
+			_fields: 'id,name,description,status,widgets',
+		} );
+	}, [] );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const createFromBlocks = useCreateTemplatePartFromBlocks(
+		area,
+		setAttributes
+	);
+
+	const options = useMemo( () => {
+		const sidebarOptions = ( sidebars ?? [] )
+			.filter(
+				( widgetArea ) =>
+					widgetArea.id !== 'wp_inactive_widgets' &&
+					widgetArea.widgets.length > 0
+			)
+			.map( ( widgetArea ) => {
+				return {
+					value: widgetArea.id,
+					label: widgetArea.name,
+				};
+			} );
+
+		if ( ! sidebarOptions.length ) {
+			return [];
+		}
+
+		return [
+			{ value: '', label: __( 'Select widget area' ) },
+			...sidebarOptions,
+		];
+	}, [ sidebars ] );
+
+	async function createFromWidgets( event ) {
+		event.preventDefault();
+
+		if ( isBusy || ! selectedSidebar ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const sidebar = options.find(
+			( { value } ) => value === selectedSidebar
+		);
+		const { getWidgets } = registry.resolveSelect( coreStore );
+
+		// The widgets API always returns a successful response.
+		const widgets = await getWidgets( {
+			sidebar: sidebar.value,
+			_embed: 'about',
+		} );
+
+		const skippedWidgets = new Set();
+		const blocks = widgets.flatMap( ( widget ) => {
+			const block = transformWidgetToBlock( widget );
+
+			if ( block.name !== 'core/legacy-widget' ) {
+				return block;
+			}
+
+			const transforms = getPossibleBlockTransformations( [
+				block,
+			] ).filter( ( item ) => {
+				// The block without any transformations can't be a wildcard.
+				if ( ! item.transforms ) {
+					return true;
+				}
+
+				const hasWildCardFrom = item.transforms?.from?.find(
+					( from ) => from.blocks && from.blocks.includes( '*' )
+				);
+				const hasWildCardTo = item.transforms?.to?.find(
+					( to ) => to.blocks && to.blocks.includes( '*' )
+				);
+
+				return ! hasWildCardFrom && ! hasWildCardTo;
+			} );
+
+			// Skip the block if we have no matching transformations.
+			if ( ! transforms.length ) {
+				skippedWidgets.add( widget.id_base );
+				return [];
+			}
+
+			// Try transforming the Legacy Widget into a first matching block.
+			return switchToBlockType( block, transforms[ 0 ].name );
+		} );
+
+		await createFromBlocks(
+			blocks,
+			/* translators: %s: name of the widget area */
+			sprintf( __( 'Widget area: %s' ), sidebar.label )
+		);
+
+		if ( skippedWidgets.size ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: the list of widgets */
+					__( 'Unable to import the following widgets: %s.' ),
+					Array.from( skippedWidgets ).join( ', ' )
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+
+		setIsBusy( false );
+	}
+
+	return (
+		<Spacer marginBottom="4">
+			<HStack as="form" onSubmit={ createFromWidgets }>
+				<FlexBlock>
+					<SelectControl
+						label={ __( 'Import widget area' ) }
+						value={ selectedSidebar }
+						options={ options }
+						onChange={ ( value ) => setSelectedSidebar( value ) }
+						disabled={ ! options.length }
+						__next36pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+				<FlexItem
+					style={ {
+						marginBottom: '8px',
+						marginTop: 'auto',
+					} }
+				>
+					<Button
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy || ! selectedSidebar }
+					>
+						{ __( 'Import' ) }
+					</Button>
+				</FlexItem>
+			</HStack>
+		</Spacer>
+	);
+}
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 83b1a8d450b6ca..502bd3d00feef6 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -141,6 +141,7 @@ export default function TemplatePartEdit( {
 					isEntityAvailable={ isEntityAvailable }
 					templatePartId={ templatePartId }
 					defaultWrapper={ areaObject.tagName }
+					hasInnerBlocks={ innerBlocks.length > 0 }
 				/>
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
diff --git a/packages/block-library/src/template-part/edit/utils/transformers.js b/packages/block-library/src/template-part/edit/utils/transformers.js
new file mode 100644
index 00000000000000..fdef84d785b909
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/utils/transformers.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, parse } from '@wordpress/blocks';
+
+/**
+ * Converts a widget entity record into a block.
+ *
+ * @param {Object} widget The widget entity record.
+ * @return {Object} a block (converted from the entity record).
+ */
+export function transformWidgetToBlock( widget ) {
+	if ( widget.id_base === 'block' ) {
+		const parsedBlocks = parse( widget.instance.raw.content, {
+			__unstableSkipAutop: true,
+		} );
+		if ( ! parsedBlocks.length ) {
+			return createBlock( 'core/paragraph', {}, [] );
+		}
+
+		return parsedBlocks[ 0 ];
+	}
+
+	let attributes;
+	if ( widget._embedded.about[ 0 ].is_multi ) {
+		attributes = {
+			idBase: widget.id_base,
+			instance: widget.instance,
+		};
+	} else {
+		attributes = {
+			id: widget.id,
+		};
+	}
+
+	return createBlock( 'core/legacy-widget', attributes, [] );
+}
diff --git a/packages/block-library/src/verse/style.scss b/packages/block-library/src/verse/style.scss
index 954e6abaa517d4..2b3247f0b40cdc 100644
--- a/packages/block-library/src/verse/style.scss
+++ b/packages/block-library/src/verse/style.scss
@@ -1,5 +1,8 @@
 pre.wp-block-verse {
-	font-family: inherit;
 	overflow: auto;
 	white-space: pre-wrap;
 }
+
+:where(pre.wp-block-verse) {
+	font-family: inherit;
+}
diff --git a/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..b28fe2ddf67a53
--- /dev/null
+++ b/packages/block-library/src/verse/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verse block inserts block 1`] = `
+"<!-- wp:verse -->
+<pre class=\\"wp-block-verse\\"></pre>
+<!-- /wp:verse -->"
+`;
+
+exports[`Verse block renders block text set as initial content 1`] = `
+"<!-- wp:verse -->
+<pre class=\\"wp-block-verse\\">Sample text</pre>
+<!-- /wp:verse -->"
+`;
diff --git a/packages/block-library/src/verse/test/edit.native.js b/packages/block-library/src/verse/test/edit.native.js
index 99cc10bc44abec..96bc431be4bbd7 100644
--- a/packages/block-library/src/verse/test/edit.native.js
+++ b/packages/block-library/src/verse/test/edit.native.js
@@ -1,47 +1,54 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-const Verse = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
-
-describe( 'Verse Block', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
-	} );
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
 
-	afterAll( () => {
-		unregisterBlockType( name );
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
 	} );
+} );
+
+describe( 'Verse block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
 
-	it( 'renders without crashing', () => {
-		const component = render( <Verse attributes={ { content: '' } } /> );
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+		// Add block
+		await addBlock( screen, 'Verse' );
+
+		// Get block
+		const verseBlock = await getBlock( screen, 'Verse' );
+		expect( verseBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = render(
-			<Verse attributes={ { content: 'sample text' } } />
-		);
-		expect(
-			component.getByDisplayValue( '<pre>sample text</pre>' )
-		).toBeTruthy();
+	it( 'renders block text set as initial content', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:verse -->
+			<pre class="wp-block-verse">Sample text</pre>
+			<!-- /wp:verse -->`,
+		} );
+
+		// Get block
+		const verseBlock = await getBlock( screen, 'Verse' );
+		expect( verseBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 8522a716cc83e6..65b3e455f5c1b9 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -39,7 +39,7 @@
 
 ### Deprecations
 
--   `withBlockContentContext` is no longer used by the block editor and therefore got deprecated ([#41395](https://github.com/WordPress/gutenberg/pull/3204139530)).
+-   `withBlockContentContext` is no longer used by the block editor and therefore got deprecated ([#41395](https://github.com/WordPress/gutenberg/pull/41395)).
 
 ### New API
 
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index af61f7447993cb..5c70fdcfd6a71f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -19,6 +19,8 @@
 -   `InputControl`: Fix internal `Flex` wrapper usage that could add an unintended `height: 100%` ([#46213](https://github.com/WordPress/gutenberg/pull/46213)).
 -   `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
 -   `Modal`: Fix unexpected modal closing in IME Composition ([#46453](https://github.com/WordPress/gutenberg/pull/46453)).
+-   `Toolbar`: Fix duplicate focus style on anchor link button ([#46759](https://github.com/WordPress/gutenberg/pull/46759)).
+-   `useNavigateRegions`: Ensure region navigation picks the next region based on where the current user focus is located instead of starting at the beginning ([#44883](https://github.com/WordPress/gutenberg/pull/44883)).
 
 ### Enhancements
 
@@ -47,6 +49,12 @@
 -   `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
 -   `PaletteEdit`: add follow up changelog for #45681 and tests [#46095](https://github.com/WordPress/gutenberg/pull/46095).
 -   `AlignmentMatrixControl`: Convert to TypeScript ([#46162](https://github.com/WordPress/gutenberg/pull/46162)).
+-   `Theme`: Remove public export ([#46427](https://github.com/WordPress/gutenberg/pull/46427)).
+-   `Autocomplete`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `TabPanel`: Refactor away from `_.find()` ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `BottomSheetPickerCell`: Refactor away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   Refactor global styles context away from `_.find()` for mobile ([#46537](https://github.com/WordPress/gutenberg/pull/46537)).
+-   `Dropdown`: Convert to TypeScript ([#45787](https://github.com/WordPress/gutenberg/pull/45787)).
 
 ### Documentation
 
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 1b96d604738cfa..eda32b881472ca 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -185,27 +185,6 @@ All new component should be styled using [Emotion](https://emotion.sh/docs/intro
 
 Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
 
-### Themeing
-
-_Note: Themeing is an experimental feature and still being actively developed. Its APIs are an early implementation subject to drastic and breaking changes_
-
-The [`Theme` component](/packages/components/src/theme/README.md) can be used to tweak the visual appearance of the components from the `@wordpress/components` package.
-
-```jsx
-import { __experimentalTheme as Theme } from '@wordpress/components';
-
-const Example = () => {
-	return (
-		<Theme accent="red">
-			<Button variant="primary">I'm red</Button>
-			<Theme accent="blue">
-				<Button variant="primary">I'm blue</Button>
-			</Theme>
-		</Theme>
-	);
-};
-```
-
 ### Deprecating styles
 
 Changing the styles of a non-experimental component must be done with care. To prevent serious breakage in third-party usage, in some cases we may want a grace period before fully removing the old styles. This can be done by temporarily placing the new styles behind a feature flag prop prefixed by `__next`, accompanied by a `deprecate()` warning in the console. The feature flag should be opt-in (false by default), and have a reasonably descriptive name (**not** `__nextHasNewStyles`). A descriptive name allows for multiple deprecations to proceed in parallel, separated by concerns or by deprecation version.
diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
index 45f5415e55de00..13c27d49b81b15 100644
--- a/packages/components/src/autocomplete/index.js
+++ b/packages/components/src/autocomplete/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -290,8 +289,7 @@ function useAutocomplete( {
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);
-		const completer = find(
-			completers,
+		const completer = completers?.find(
 			( { triggerPrefix, allowContext } ) => {
 				const index = text.lastIndexOf( triggerPrefix );
 
diff --git a/packages/components/src/autocomplete/test/index.js b/packages/components/src/autocomplete/test/index.js
index b33f585ea9d5f6..0972f35c38b55f 100644
--- a/packages/components/src/autocomplete/test/index.js
+++ b/packages/components/src/autocomplete/test/index.js
@@ -14,6 +14,8 @@ import { useRef } from '@wordpress/element';
  */
 import { getAutoCompleterUI } from '../autocompleter-ui';
 
+jest.useFakeTimers();
+
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {
diff --git a/packages/components/src/base-control/test/index.tsx b/packages/components/src/base-control/test/index.tsx
index 2ca8f4e92e1c43..949ad83cd83ebc 100644
--- a/packages/components/src/base-control/test/index.tsx
+++ b/packages/components/src/base-control/test/index.tsx
@@ -46,6 +46,7 @@ describe( 'BaseControl', () => {
 
 		expect( textarea ).toHaveAttribute( 'aria-details' );
 		expect(
+			// eslint-disable-next-line testing-library/no-node-access
 			help.closest( `#${ textarea.getAttribute( 'aria-details' ) }` )
 		).toBeVisible();
 	} );
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index b5b80c0aa6b500..d8da0112bb7cea 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -33,7 +33,6 @@ const BorderBoxControlSplitControls = (
 		rightAlignedClassName,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
@@ -65,7 +64,6 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		isCompact: true,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		size,
 	};
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
index 46e9f7b78ff956..a32b116843dcdb 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
@@ -21,7 +21,6 @@ export function useBorderBoxControlSplitControls(
 		enableAlpha = false,
 		enableStyle = true,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
@@ -49,7 +48,6 @@ export function useBorderBoxControlSplitControls(
 		enableStyle,
 		rightAlignedClassName,
 		size,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index bbb2b1e05afc08..c66855aa2f5e17 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -62,7 +62,6 @@ const UnconnectedBorderBoxControl = (
 		splitValue,
 		toggleLinked,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControl( props );
@@ -116,9 +115,6 @@ const UnconnectedBorderBoxControl = (
 						width={
 							size === '__unstable-large' ? '116px' : '110px'
 						}
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
@@ -134,9 +130,6 @@ const UnconnectedBorderBoxControl = (
 						popoverPlacement={ popoverPlacement }
 						popoverOffset={ popoverOffset }
 						value={ splitValue }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index fc3214efbcd569..1c2f8291de50d8 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -33,7 +33,6 @@ export function useBorderBoxControl(
 		enableStyle = true,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
@@ -136,7 +135,6 @@ export function useBorderBoxControl(
 		size,
 		splitValue,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
index db9327a4971fa1..9a96cab33746a2 100644
--- a/packages/components/src/border-box-control/test/index.js
+++ b/packages/components/src/border-box-control/test/index.js
@@ -10,6 +10,8 @@ import { act } from 'react-test-renderer';
  */
 import { BorderBoxControl } from '../';
 
+jest.useFakeTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index 20fe8d41f8142e..1f5bef1a54c1cd 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -25,19 +25,18 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type { ColorObject, PaletteObject } from '../../color-palette/types';
+import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
-const noop = () => undefined;
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colors: ColorProps[ 'colors' ] | undefined,
-	hasMultipleColorOrigins: boolean
+	colors: ColorProps[ 'colors' ] | undefined
 ) => {
-	if ( ! colorValue || ! colors ) {
+	if ( ! colorValue || ! colors || colors.length === 0 ) {
 		return;
 	}
 
-	if ( hasMultipleColorOrigins ) {
+	if ( ( colors as PaletteObject[] )[ 0 ].colors !== undefined ) {
 		let matchedColor;
 
 		( colors as PaletteObject[] ).some( ( origin ) =>
@@ -126,7 +125,6 @@ const BorderControlDropdown = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		border,
 		colors,
@@ -147,11 +145,7 @@ const BorderControlDropdown = (
 	} = useBorderControlDropdown( props );
 
 	const { color, style } = border || {};
-	const colorObject = getColorObject(
-		color,
-		colors,
-		!! __experimentalHasMultipleOrigins
-	);
+	const colorObject = getColorObject( color, colors );
 
 	const toggleAriaLabel = getToggleAriaLabel(
 		color,
@@ -165,7 +159,9 @@ const BorderControlDropdown = (
 		? 'bottom left'
 		: undefined;
 
-	const renderToggle = ( { onToggle = noop } ) => (
+	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
+		onToggle,
+	} ) => (
 		<Button
 			onClick={ onToggle }
 			variant="tertiary"
@@ -183,8 +179,9 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	// TODO: update types once Dropdown component is refactored to TypeScript.
-	const renderContent = ( { onClose }: { onClose: () => void } ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
+		onClose,
+	} ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
@@ -204,9 +201,6 @@ const BorderControlDropdown = (
 						value={ color }
 						onChange={ onColorChange }
 						{ ...{ colors, disableCustomColors } }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index d7fef513a74eb0..a3a789b5d55ee3 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -25,7 +25,6 @@ export function useBorderControlDropdown(
 		onChange,
 		previousStyleSelection,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -95,7 +94,6 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 0350ceaff6e7b2..4f291bda44d24e 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -59,7 +59,6 @@ const UnconnectedBorderControl = (
 		widthUnit,
 		widthValue,
 		withSlider,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderControl( props );
@@ -83,9 +82,6 @@ const UnconnectedBorderControl = (
 							onChange={ onBorderChange }
 							previousStyleSelection={ previousStyleSelection }
 							showDropdownHeader={ showDropdownHeader }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 72b8ca0ec93c8a..77e2ede942406a 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/packages/components/src/border-control/border-control/hook.ts
@@ -39,7 +39,6 @@ export function useBorderControl(
 		size = 'default',
 		value: border,
 		width,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
@@ -156,7 +155,6 @@ export function useBorderControl(
 		widthUnit,
 		widthValue,
 		size,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx
index 2735e3ea2717b1..ce50d017ac51e6 100644
--- a/packages/components/src/border-control/stories/index.tsx
+++ b/packages/components/src/border-control/stories/index.tsx
@@ -138,7 +138,6 @@ export const WithMultipleOrigins = Template.bind( {} );
 WithMultipleOrigins.args = {
 	...Default.args,
 	colors: multipleOriginColors,
-	__experimentalHasMultipleOrigins: true,
 };
 
 /**
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 922abba8f9c83c..2d599d0c9f8c18 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -1,13 +1,21 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { BorderControl } from '../';
 
+jest.useRealTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -37,29 +45,24 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const renderBorderControl = async ( props ) => {
-	const view = render( <BorderControl { ...props } /> );
-	// When the `Popover` component is rendered or updated, the `useFloating`
-	// hook from the `floating-ui` package will schedule a state update in a
-	// promise handler. We need to wait for this promise handler to execute
-	// before checking results. That's what this async `act()` call achieves.
-	// See also: https://floating-ui.com/docs/react-dom#testing
-	await act( () => Promise.resolve() );
-	return view;
-};
-
-const rerenderBorderControl = async ( rerender, props ) => {
-	const view = rerender( <BorderControl { ...props } /> );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
-	return view;
-};
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
 
 const openPopover = async () => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	fireEvent.click( toggleButton );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
+
+	// Wait for color picker popover to fully appear
+	const pickerButton = screen.getByRole( 'button', {
+		name: /^Custom color picker/,
+	} );
+
+	await waitFor( () =>
+		expect(
+			getWrappingPopoverElement( pickerButton )
+		).toBePositionedPopover()
+	);
 };
 
 const getButton = ( name ) => {
@@ -93,9 +96,9 @@ const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
-		it( 'should render standard border control', async () => {
+		it( 'should render standard border control', () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -114,9 +117,9 @@ describe( 'BorderControl', () => {
 			expect( slider ).not.toBeInTheDocument();
 		} );
 
-		it( 'should hide label', async () => {
+		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -128,17 +131,17 @@ describe( 'BorderControl', () => {
 			);
 		} );
 
-		it( 'should render with slider', async () => {
+		it( 'should render with slider', () => {
 			const props = createProps( { withSlider: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should render placeholder in UnitControl', async () => {
+		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
@@ -146,7 +149,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const customColorPicker = getButton( /Custom color picker/ );
@@ -170,7 +173,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover header', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const headerLabel = screen.getByText( 'Border color' );
@@ -182,7 +185,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should not render style options when opted out of', async () => {
 			const props = createProps( { enableStyle: false } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const styleLabel = screen.queryByText( 'Style' );
@@ -199,18 +202,18 @@ describe( 'BorderControl', () => {
 
 	describe( 'color and style picker aria labels', () => {
 		describe( 'with style selection enabled', () => {
-			it( 'should include both color and style in label', async () => {
+			it( 'should include both color and style in label', () => {
 				const props = createProps( { value: undefined } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( { value: { color: '#72aee6' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -219,9 +222,9 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( { value: { color: '#4b1d80' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -230,11 +233,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color and style selections', async () => {
+			it( 'should correctly describe named color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -243,11 +246,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color and style selections', async () => {
+			it( 'should correctly describe custom color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -258,24 +261,24 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'with style selection disabled', () => {
-			it( 'should only include color in the label', async () => {
+			it( 'should only include color in the label', () => {
 				const props = createProps( {
 					value: undefined,
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -284,12 +287,12 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -301,9 +304,9 @@ describe( 'BorderControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		it( 'should update width with slider value', async () => {
+		it( 'should update width with slider value', () => {
 			const props = createProps( { withSlider: true } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
@@ -313,7 +316,7 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
@@ -321,7 +324,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update color selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 
@@ -333,7 +336,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color selection when toggling swatch off', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -345,7 +348,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update style selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -357,7 +360,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should take no action when color and style popover is closed', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Close border color' );
 
@@ -366,7 +369,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Reset to default' );
 
@@ -379,9 +382,9 @@ describe( 'BorderControl', () => {
 
 		it( 'should sanitize border when width and color are undefined', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -392,9 +395,9 @@ describe( 'BorderControl', () => {
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -407,7 +410,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 			clickButton( 'Dotted' );
@@ -422,12 +425,12 @@ describe( 'BorderControl', () => {
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			setWidthInput( '0' );
 			setWidthInput( '5' );
 
@@ -440,7 +443,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
 			const props = createProps( { value: undefined } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Yellow' );
 
@@ -451,7 +454,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -466,7 +469,7 @@ describe( 'BorderControl', () => {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -477,7 +480,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 290618fbff8cf9..470b75df7c1829 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -17,10 +17,7 @@ export type Border = {
 
 export type ColorProps = Pick<
 	ColorPaletteProps,
-	| 'colors'
-	| 'enableAlpha'
-	| '__experimentalHasMultipleOrigins'
-	| '__experimentalIsRenderedInSidebar'
+	'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'
 > & {
 	/**
 	 * This toggles the ability to choose custom colors.
diff --git a/packages/components/src/box-control/test/index.js b/packages/components/src/box-control/test/index.js
index 5da4994cf46122..2d6a51bd8abf73 100644
--- a/packages/components/src/box-control/test/index.js
+++ b/packages/components/src/box-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
+jest.useFakeTimers();
+
 const Example = ( extraProps ) => {
 	const [ state, setState ] = useState();
 
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 2c603105dbb70c..5972adf6f695fa 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 5146e3c8581988..13b791144a07c4 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -32,6 +32,7 @@ import type {
 	SinglePaletteProps,
 } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { DropdownProps } from '../dropdown/types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -134,7 +135,7 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 }: CustomColorPickerDropdownProps ) {
-	const popoverProps = useMemo(
+	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
 			...( isRenderedInSidebar
@@ -166,7 +167,7 @@ export function CustomColorPickerDropdown( {
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
 	colors: ColorPaletteProps[ 'colors' ] = [],
-	showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
+	showMultiplePalettes: boolean = false
 ) => {
 	if ( ! currentValue ) {
 		return '';
@@ -224,33 +225,32 @@ function UnforwardedColorPalette(
 		enableAlpha = false,
 		onChange,
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = props;
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
+	const hasMultipleColorOrigins =
+		colors.length > 0 &&
+		( colors as PaletteObject[] )[ 0 ].colors !== undefined;
 	const buttonLabelName = useMemo(
 		() =>
 			extractColorNameFromCurrentValue(
 				value,
 				colors,
-				__experimentalHasMultipleOrigins
+				hasMultipleColorOrigins
 			),
-		[ value, colors, __experimentalHasMultipleOrigins ]
+		[ value, colors, hasMultipleColorOrigins ]
 	);
 
-	// Make sure that the `colors` array has a format (single/multiple) that is
-	// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
-	// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
-	// either both `true` or both `false`.
+	// Make sure that the `colors` array has a valid format.
 	if (
 		colors.length > 0 &&
-		__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
+		hasMultipleColorOrigins !== areColorsMultiplePalette( colors )
 	) {
 		// eslint-disable-next-line no-console
 		console.warn(
-			'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
+			'wp.components.ColorPalette: please specify a valid format for the `colors` prop. '
 		);
 		return null;
 	}
@@ -340,7 +340,7 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			{ __experimentalHasMultipleOrigins ? (
+			{ hasMultipleColorOrigins ? (
 				<MultiplePalettes
 					{ ...paletteCommonProps }
 					colors={ colors as PaletteObject[] }
diff --git a/packages/components/src/color-palette/stories/index.tsx b/packages/components/src/color-palette/stories/index.tsx
index 61508620009d3d..2399b7e9220c0e 100644
--- a/packages/components/src/color-palette/stories/index.tsx
+++ b/packages/components/src/color-palette/stories/index.tsx
@@ -20,13 +20,6 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
-		// Removing the control because setting this prop without changing the
-		// format of the `colors` prop can break the component.
-		__experimentalHasMultipleOrigins: {
-			control: {
-				type: null,
-			},
-		},
 		as: { control: { type: null } },
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -69,14 +62,8 @@ Default.args = {
 	],
 };
 
-/**
- * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
- * the `colors` prop is expected to be an array of color palettes, rather
- * than an array of color objects.
- */
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
-	__experimentalHasMultipleOrigins: true,
 	colors: [
 		{
 			name: 'Primary colors',
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 83d7bc4d3c0eae..136cecec02192a 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+jest.useFakeTimers();
+
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
index 2b1be5a35bb678..1f9c66c0fb604d 100644
--- a/packages/components/src/color-palette/types.ts
+++ b/packages/components/src/color-palette/types.ts
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
-import type { PopoverProps } from '../popover/types';
+import type { DropdownProps } from '../dropdown/types';
 
 export type ColorObject = {
 	name: string;
@@ -37,15 +37,8 @@ export type MultiplePalettesProps = PaletteProps & {
 	colors: PaletteObject[];
 };
 
-// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
-export type CustomColorPickerDropdownProps = {
+export type CustomColorPickerDropdownProps = DropdownProps & {
 	isRenderedInSidebar: boolean;
-	renderContent: () => ReactNode;
-	popoverProps?: Omit< PopoverProps, 'children' >;
-	renderToggle: ( props: {
-		isOpen: boolean;
-		onToggle: MouseEventHandler< HTMLButtonElement >;
-	} ) => ReactNode;
 };
 
 export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
@@ -81,13 +74,6 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * Currently active value.
 	 */
 	value?: string;
-	/**
-	 * Whether the colors prop is an array of color palettes,
-	 * rather than an array of color objects.
-	 *
-	 * @default false
-	 */
-	__experimentalHasMultipleOrigins?: boolean;
 	/**
 	 * Whether this is rendered in the sidebar.
 	 *
diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.js
index 3613302bbdc2a0..caf17afd320ff9 100644
--- a/packages/components/src/color-picker/test/index.js
+++ b/packages/components/src/color-picker/test/index.js
@@ -8,6 +8,8 @@ import { render, fireEvent } from '@testing-library/react';
  */
 import { ColorPicker } from '..';
 
+jest.useFakeTimers();
+
 /**
  * Ordinarily we'd try to select the compnoent by role but the silder role appears
  * on several elements and we'd end up encoding assumptions about order when
diff --git a/packages/components/src/combobox-control/test/index.js b/packages/components/src/combobox-control/test/index.js
index 8fcb6f423b4346..8c01eaa40464b3 100644
--- a/packages/components/src/combobox-control/test/index.js
+++ b/packages/components/src/combobox-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
+jest.useFakeTimers();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },
diff --git a/packages/components/src/confirm-dialog/test/index.js b/packages/components/src/confirm-dialog/test/index.js
index 0959f0e95b989f..487c025d2153d1 100644
--- a/packages/components/src/confirm-dialog/test/index.js
+++ b/packages/components/src/confirm-dialog/test/index.js
@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 describe( 'Confirm', () => {
diff --git a/packages/components/src/date-time/date/test/index.tsx b/packages/components/src/date-time/date/test/index.tsx
index 7a1a52ee929a9e..2a62fab3405030 100644
--- a/packages/components/src/date-time/date/test/index.tsx
+++ b/packages/components/src/date-time/date/test/index.tsx
@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
  */
 import DatePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );
diff --git a/packages/components/src/date-time/time/test/index.tsx b/packages/components/src/date-time/time/test/index.tsx
index 4b22cd232baf0e..bcffe041a100ba 100644
--- a/packages/components/src/date-time/time/test/index.tsx
+++ b/packages/components/src/date-time/time/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TimePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/components/src/dimension-control/index.js b/packages/components/src/dimension-control/index.js
index 3e782e748a90d4..a6893b165fbf0a 100644
--- a/packages/components/src/dimension-control/index.js
+++ b/packages/components/src/dimension-control/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,10 +49,10 @@ export function DimensionControl( props ) {
 	};
 
 	const selectLabel = (
-		<Fragment>
+		<>
 			{ icon && <Icon icon={ icon } /> }
 			{ label }
-		</Fragment>
+		</>
 	);
 
 	return (
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index b1e92add6fd00b..2864578e6ff833 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -14,6 +14,8 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;
diff --git a/packages/components/src/disabled/stories/index.tsx b/packages/components/src/disabled/stories/index.tsx
index 06246adde633f1..81f2bf4c079233 100644
--- a/packages/components/src/disabled/stories/index.tsx
+++ b/packages/components/src/disabled/stories/index.tsx
@@ -15,6 +15,7 @@ import Disabled from '../';
 import SelectControl from '../../select-control/';
 import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
+import { VStack } from '../../v-stack/';
 
 const meta: ComponentMeta< typeof Disabled > = {
 	title: 'Components/Disabled',
@@ -37,18 +38,21 @@ const Form = () => {
 	const [ textControlValue, setTextControlValue ] = useState( '' );
 	const [ textAreaValue, setTextAreaValue ] = useState( '' );
 	return (
-		<div>
+		<VStack>
 			<TextControl
+				__nextHasNoMarginBottom
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }
 			/>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label="TextArea Control"
 				value={ textAreaValue }
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [
@@ -58,7 +62,7 @@ const Form = () => {
 					{ value: 'c', label: 'Option C' },
 				] }
 			/>
-		</div>
+		</VStack>
 	);
 };
 
diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx
index fddbd1159637bb..b4dadc21662a63 100644
--- a/packages/components/src/disabled/test/index.tsx
+++ b/packages/components/src/disabled/test/index.tsx
@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
+jest.useFakeTimers();
+
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">
diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md
index f85d2813fb1c9a..aa930f22edcf18 100644
--- a/packages/components/src/dropdown-menu/README.md
+++ b/packages/components/src/dropdown-menu/README.md
@@ -101,14 +101,13 @@ const MyDropdownMenu = () => (
 Alternatively, specify a `children` function which returns elements valid for use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
 
 ```jsx
-import { Fragment } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
 
 const MyDropdownMenu = () => (
 	<DropdownMenu icon={ more } label="Select a direction">
 		{ ( { onClose } ) => (
-			<Fragment>
+			<>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
@@ -122,7 +121,7 @@ const MyDropdownMenu = () => (
 						Remove
 					</MenuItem>
 				</MenuGroup>
-			</Fragment>
+			</>
 		) }
 	</DropdownMenu>
 );
diff --git a/packages/components/src/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js
index dcb268b7cad9b2..1fc52175862c0d 100644
--- a/packages/components/src/dropdown-menu/test/index.js
+++ b/packages/components/src/dropdown-menu/test/index.js
@@ -15,6 +15,8 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
+jest.useFakeTimers();
+
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );
diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md
index c3ce8f42818fbe..62482f398e26ca 100644
--- a/packages/components/src/dropdown/README.md
+++ b/packages/components/src/dropdown/README.md
@@ -32,96 +32,91 @@ const MyDropdown = () => (
 
 The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
 
-### className
+### `className`: `string`
 
 className of the global container
 
--   Type: `String`
 -   Required: No
 
-### contentClassName
+### `contentClassName`: `string`
 
 If you want to target the dropdown menu for styling purposes, you need to provide a contentClassName because it's not being rendered as a child of the container node.
 
--   Type: `String`
 -   Required: No
 
-### position
+### `expandOnMobile`: `boolean`
 
-The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
+Opt-in prop to show popovers fullscreen on mobile.
 
--   Type: `String`
 -   Required: No
--   Default: `"top center"`
-
-### renderToggle
-
-A callback invoked to render the Dropdown Toggle Button.
-
--   Type: `Function`
--   Required: Yes
+-   Default: `false`
 
-The first argument of the callback is an object containing the following properties:
+### `focusOnMount`: `'firstElement' | boolean`
 
--   `isOpen`: whether the dropdown menu is opened or not
--   `onToggle`: A function switching the dropdown menu's state from open to closed and vice versa
--   `onClose`: A function that closes the menu if invoked
+By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting this prop to `"firstElement"`.
 
-### renderContent
+Specifying a `true` value will focus the container instead.
 
-A callback invoked to render the content of the dropdown menu. Its first argument is the same as the `renderToggle` prop.
+Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
 
--   Type: `Function`
--   Required: Yes
+-   Required: No
+-   Default: `"firstElement"`
 
-### expandOnMobile
+### `headerTitle`: `string`
 
-Opt-in prop to show popovers fullscreen on mobile.
+Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
-### headerTitle
+### `onClose`: `() => void`
 
-Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
+A callback invoked when the popover should be closed.
 
--   Type: `String`
 -   Required: No
 
-### focusOnMount
-
-By default, the _first tabbable element_ in the popover will receive focus when it mounts. This is the same as setting this prop to `"firstElement"`.
+### `onToggle`: `( willOpen: boolean ) => void`
 
-Specifying a `true` value will focus the container instead.
+A callback invoked when the state of the popover changes from open to closed and vice versa.
 
-Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
+The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
 
--   Type: `'firstElement' | boolean`
 -   Required: No
--   Default: `"firstElement"`
 
-### popoverProps
+### `popoverProps`: `WordPressComponentProps< Omit< PopoverProps, 'children' > 'div', false	>`
 
 Properties of popoverProps object will be passed as props to the `Popover` component.
 
 Use this object to access properties/features of the `Popover` component that are not already exposed in the `Dropdown` component, e.g.: the ability to have the popover without an arrow.
 
--   Type: `Object`
 -   Required: No
 
-### onClose
+### `position`: `PopoverProps[ 'position' ]`
 
-A callback invoked when the popover should be closed.
+The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
 
--   Type: `Function`
 -   Required: No
+-   Default: `"top center"`
 
-### onToggle
+### `renderContent`: `( props: CallbackProps ) => ReactNode`
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+A callback invoked to render the content of the dropdown menu.
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+- `isOpen`: whether the dropdown menu is opened or not
+- `onToggle`: A function switching the dropdown menu's state from open to closed and vice versa
+- `onClose`: A function that closes the menu if invoked
+
+-   Required: Yes
+
+### `renderToggle`: `( props: CallbackProps ) => ReactNode`
+
+A callback invoked to render the Dropdown Toggle Button.
+
+Its props are the same as the `renderContent` props.
+
+-   Required: Yes
+
+### `style`: `React.CSSProperties`
+
+The style of the global container
 
--   Type: `Function`
 -   Required: No
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.tsx
similarity index 66%
rename from packages/components/src/dropdown/index.js
rename to packages/components/src/dropdown/index.tsx
index 0092256a61225c..f048c6dfcad052 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.tsx
@@ -1,35 +1,39 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Popover from '../popover';
+import type { DropdownProps } from './types';
 
-function useObservableState( initialState, onStateChange ) {
+function useObservableState(
+	initialState: boolean,
+	onStateChange?: ( newState: boolean ) => void
+) {
 	const [ state, setState ] = useState( initialState );
 	return [
 		state,
-		( value ) => {
+		( value: boolean ) => {
 			setState( value );
 			if ( onStateChange ) {
 				onStateChange( value );
 			}
 		},
-	];
+	] as const;
 }
 
-export default function Dropdown( props ) {
-	const {
+function UnforwardedDropdown(
+	{
 		renderContent,
 		renderToggle,
 		className,
@@ -42,12 +46,14 @@ export default function Dropdown( props ) {
 		onClose,
 		onToggle,
 		style,
-	} = props;
+	}: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
-		useState( null );
-	const containerRef = useRef();
+		useState< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 
 	useEffect(
@@ -70,8 +76,13 @@ export default function Dropdown( props ) {
 	 * case a dialog has opened, allowing focus to return when it's dismissed.
 	 */
 	function closeIfFocusOutside() {
+		if ( ! containerRef.current ) {
+			return;
+		}
+
 		const { ownerDocument } = containerRef.current;
-		const dialog = ownerDocument.activeElement.closest( '[role="dialog"]' );
+		const dialog =
+			ownerDocument?.activeElement?.closest( '[role="dialog"]' );
 		if (
 			! containerRef.current.contains( ownerDocument.activeElement ) &&
 			( ! dialog || dialog.contains( containerRef.current ) )
@@ -99,11 +110,15 @@ export default function Dropdown( props ) {
 	return (
 		<div
 			className={ classnames( 'components-dropdown', className ) }
-			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
+			ref={ useMergeRefs( [
+				containerRef,
+				forwardedRef,
+				setFallbackPopoverAnchor,
+			] ) }
 			// Some UAs focus the closest focusable parent when the toggle is
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
-			tabIndex="-1"
+			tabIndex={ -1 }
 			style={ style }
 		>
 			{ renderToggle( args ) }
@@ -136,3 +151,32 @@ export default function Dropdown( props ) {
 		</div>
 	);
 }
+
+/**
+ * Renders a button that opens a floating content modal when clicked.
+ *
+ * ```jsx
+ * import { Button, Dropdown } from '@wordpress/components';
+ *
+ * const MyDropdown = () => (
+ *   <Dropdown
+ *     className="my-container-class-name"
+ *     contentClassName="my-popover-content-classname"
+ *     position="bottom right"
+ *     renderToggle={ ( { isOpen, onToggle } ) => (
+ *       <Button
+ *         variant="primary"
+ *         onClick={ onToggle }
+ *         aria-expanded={ isOpen }
+ *       >
+ *         Toggle Popover!
+ *       </Button>
+ *     ) }
+ *     renderContent={ () => <div>This is the content of the popover.</div> }
+ *   />
+ * );
+ * ```
+ */
+export const Dropdown = forwardRef( UnforwardedDropdown );
+
+export default Dropdown;
diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.tsx
similarity index 75%
rename from packages/components/src/dropdown/stories/index.js
rename to packages/components/src/dropdown/stories/index.tsx
index 191b03bb07d8be..ff155b6c42b5b9 100644
--- a/packages/components/src/dropdown/stories/index.js
+++ b/packages/components/src/dropdown/stories/index.tsx
@@ -1,29 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import Dropdown from '../';
+import Dropdown from '..';
 import Button from '../../button';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
-export default {
+const meta: ComponentMeta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
 	subcomponents: { DropdownContentWrapper },
 	argTypes: {
-		expandOnMobile: { control: { type: 'boolean' } },
 		focusOnMount: {
 			control: {
 				type: 'radio',
 				options: [ 'firstElement', true, false ],
 			},
 		},
-		headerTitle: { control: { type: 'text' } },
 		renderContent: { control: { type: null } },
 		renderToggle: { control: { type: null } },
 	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+	},
 };
+export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -31,7 +40,7 @@ const Template = ( args ) => {
 	);
 };
 
-export const Default = Template.bind( {} );
+export const Default: ComponentStory< typeof Dropdown > = Template.bind( {} );
 Default.args = {
 	position: 'bottom right',
 	renderToggle: ( { isOpen, onToggle } ) => (
@@ -46,7 +55,9 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding = Template.bind( {} );
+export const WithMorePadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -61,7 +72,9 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding = Template.bind( {} );
+export const WithNoPadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (
diff --git a/packages/components/src/dropdown/test/index.js b/packages/components/src/dropdown/test/index.tsx
similarity index 77%
rename from packages/components/src/dropdown/test/index.js
rename to packages/components/src/dropdown/test/index.tsx
index b4d4f81fde8d1a..ecf32c4500e3e8 100644
--- a/packages/components/src/dropdown/test/index.js
+++ b/packages/components/src/dropdown/test/index.tsx
@@ -7,7 +7,9 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import Dropdown from '../';
+import Dropdown from '..';
+
+jest.useFakeTimers();
 
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {
@@ -24,14 +26,13 @@ describe( 'Dropdown', () => {
 					</button>
 				) }
 				renderContent={ () => <span>test</span> }
-				popoverProps={ { 'data-testid': 'popover' } }
 			/>
 		);
 
 		const button = screen.getByRole( 'button', { expanded: false } );
 
 		expect( button ).toBeVisible();
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 
 		await user.click( button );
 
@@ -40,7 +41,7 @@ describe( 'Dropdown', () => {
 		).toBeVisible();
 
 		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+			expect( screen.queryByText( 'test' ) ).toBeVisible()
 		);
 
 		// Cleanup remaining effects, like the delayed popover positioning
@@ -68,21 +69,20 @@ describe( 'Dropdown', () => {
 						close
 					</button>,
 				] }
-				renderContent={ () => null }
-				popoverProps={ { 'data-testid': 'popover' } }
+				renderContent={ () => <span>test</span> }
 			/>
 		);
 
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 
 		await user.click( screen.getByRole( 'button', { name: 'Toggle' } ) );
 
 		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
+			expect( screen.getByText( 'test' ) ).toBeVisible()
 		);
 
 		await user.click( screen.getByRole( 'button', { name: 'close' } ) );
 
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
 	} );
 } );
diff --git a/packages/components/src/dropdown/types.ts b/packages/components/src/dropdown/types.ts
index 573e0b5ee7e017..822c9d4f2bc436 100644
--- a/packages/components/src/dropdown/types.ts
+++ b/packages/components/src/dropdown/types.ts
@@ -1,3 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type Popover from '../popover';
+import type { PopoverProps } from '../popover/types';
+
+type CallbackProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
 export type DropdownContentWrapperProps = {
 	/**
 	 * Amount of padding to apply on the dropdown content.
@@ -6,3 +23,93 @@ export type DropdownContentWrapperProps = {
 	 */
 	paddingSize?: 'none' | 'small' | 'medium';
 };
+
+export type DropdownProps = {
+	/**
+	 * The className of the global container.
+	 */
+	className?: string;
+	/**
+	 * If you want to target the dropdown menu for styling purposes,
+	 * you need to provide a contentClassName because it's not being rendered
+	 * as a child of the container node.
+	 */
+	contentClassName?: string;
+	/**
+	 * Opt-in prop to show popovers fullscreen on mobile.
+	 *
+	 * @default false
+	 */
+	expandOnMobile?: boolean;
+	/**
+	 * By default, the first tabbable element in the popover will receive focus
+	 * when it mounts. This is the same as setting this prop to "firstElement".
+	 * Specifying a true value will focus the container instead.
+	 * Specifying a false value disables the focus handling entirely
+	 * (this should only be done when an appropriately accessible
+	 * substitute behavior exists).
+	 *
+	 * @default 'firstElement'
+	 */
+	focusOnMount?: 'firstElement' | boolean;
+	/**
+	 * Set this to customize the text that is shown in the dropdown's header
+	 * when it is fullscreen on mobile.
+	 */
+	headerTitle?: string;
+	/**
+	 * A callback invoked when the popover should be closed.
+	 */
+	onClose?: () => void;
+	/**
+	 * A callback invoked when the state of the popover changes
+	 * from open to closed and vice versa.
+	 * The callback receives a boolean as a parameter.
+	 * If true, the popover will open.
+	 * If false, the popover will close.
+	 */
+	onToggle?: ( willOpen: boolean ) => void;
+	/**
+	 * Properties of popoverProps object will be passed as props
+	 * to the Popover component.
+	 * Use this object to access properties/features
+	 * of the Popover component that are not already exposed
+	 * in the Dropdown component,
+	 * e.g.: the ability to have the popover without an arrow.
+	 */
+	popoverProps?: Omit<
+		ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
+	/**
+	 * The direction in which the popover should open
+	 * relative to its parent node.
+	 * Specify a y- and an x-axis as a space-separated string.
+	 * Supports "top", "bottom" y-axis,
+	 * and "left", "center", "right" x-axis.
+	 *
+	 * @default 'top center'
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * A callback invoked to render the content of the dropdown menu.
+	 * Its first argument is the same as the renderToggle prop.
+	 */
+	renderContent: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * A callback invoked to render the Dropdown Toggle Button.
+	 *
+	 * The first argument of the callback is an object
+	 * containing the following properties:
+	 *
+	 * - isOpen: whether the dropdown menu is opened or not
+	 * - onToggle: A function switching the dropdown menu's state
+	 * from open to closed and vice versa
+	 * - onClose: A function that closes the menu if invoked
+	 */
+	renderToggle: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * The style of the global container.
+	 */
+	style?: CSSProperties;
+};
diff --git a/packages/components/src/external-link/test/index.tsx b/packages/components/src/external-link/test/index.tsx
index bb001961ae33e8..c641c5d799a63b 100644
--- a/packages/components/src/external-link/test/index.tsx
+++ b/packages/components/src/external-link/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.js
index b49985931050d1..4e7645b01cbf68 100644
--- a/packages/components/src/focal-point-picker/test/index.js
+++ b/packages/components/src/focal-point-picker/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
+jest.useFakeTimers();
+
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 3ac59bc2df1cb1..c51416a18cbddd 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+jest.useFakeTimers();
+
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.
diff --git a/packages/components/src/form-file-upload/test/index.tsx b/packages/components/src/form-file-upload/test/index.tsx
index cad69766aa8c2b..a1492e7e988d3c 100644
--- a/packages/components/src/form-file-upload/test/index.tsx
+++ b/packages/components/src/form-file-upload/test/index.tsx
@@ -14,6 +14,8 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
+jest.useFakeTimers();
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {
diff --git a/packages/components/src/form-toggle/test/index.tsx b/packages/components/src/form-toggle/test/index.tsx
index 57c603dc4143ad..4ed799567b4075 100644
--- a/packages/components/src/form-toggle/test/index.tsx
+++ b/packages/components/src/form-toggle/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index ddae1f8c06b894..020e4e650006b6 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -21,6 +21,8 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
+jest.useFakeTimers();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -486,6 +488,7 @@ describe( 'FormTokenField', () => {
 
 			// This is testing implementation details, but I'm not sure there's
 			// a better way.
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( input.parentElement?.parentElement ).toHaveClass(
 				'test-classname'
 			);
diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
index ab2fe98966bea5..8a16f0d79e640f 100644
--- a/packages/components/src/gradient-picker/index.js
+++ b/packages/components/src/gradient-picker/index.js
@@ -99,7 +99,6 @@ export default function GradientPicker( {
 	value,
 	clearable = true,
 	disableCustomGradients = false,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback(
@@ -107,7 +106,7 @@ export default function GradientPicker( {
 		[ onChange ]
 	);
 	const Component =
-		__experimentalHasMultipleOrigins && gradients?.length
+		gradients?.length && gradients[ 0 ].gradients
 			? MultipleOrigin
 			: SingleOrigin;
 
diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.js
index c083bf0d42ee6b..c365e4741b6cdc 100644
--- a/packages/components/src/gradient-picker/stories/index.js
+++ b/packages/components/src/gradient-picker/stories/index.js
@@ -87,7 +87,6 @@ WithNoExistingGradients.args = {
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
 	...Default.args,
-	__experimentalHasMultipleOrigins: true,
 	gradients: [
 		{ name: 'Origin 1', gradients: GRADIENTS },
 		{ name: 'Origin 2', gradients: GRADIENTS },
diff --git a/packages/components/src/guide/test/index.js b/packages/components/src/guide/test/index.js
index 852c09ed280887..fcea9d15d31675 100644
--- a/packages/components/src/guide/test/index.js
+++ b/packages/components/src/guide/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
+jest.useFakeTimers();
+
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );
diff --git a/packages/components/src/higher-order/navigate-regions/index.js b/packages/components/src/higher-order/navigate-regions/index.js
index 0e76349cf3c0af..5b5a7737897313 100644
--- a/packages/components/src/higher-order/navigate-regions/index.js
+++ b/packages/components/src/higher-order/navigate-regions/index.js
@@ -42,14 +42,17 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {
 
 	function focusRegion( offset ) {
 		const regions = Array.from(
-			ref.current.querySelectorAll( '[role="region"]' )
+			ref.current.querySelectorAll( '[role="region"][tabindex="-1"]' )
 		);
 		if ( ! regions.length ) {
 			return;
 		}
 		let nextRegion = regions[ 0 ];
+		// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
 		const selectedIndex = regions.indexOf(
-			ref.current.ownerDocument.activeElement
+			ref.current.ownerDocument.activeElement.closest(
+				'[role="region"][tabindex="-1"]'
+			)
 		);
 		if ( selectedIndex !== -1 ) {
 			let nextIndex = selectedIndex + offset;
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 807dd0e5dcae5f..6e66c854dd70ee 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -4,14 +4,17 @@
 }
 
 .is-focusing-regions {
-	[role="region"]:focus {
+	[role="region"]:focus::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		pointer-events: none;
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
-
-		.interface-navigable-region__stacker {
-			position: relative;
-			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
-		}
+		z-index: z-index(".is-focusing-regions {region} :focus::after");
 	}
 
 	// Fixes for edge cases.
@@ -25,40 +28,11 @@
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
-	&.is-distraction-free .interface-interface-skeleton__header {
-		.interface-navigable-region__stacker,
-		.edit-post-header {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__sidebar {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-sidebar-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__actions {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-publish-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar.
-	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
 }
-
-.interface-navigable-region__stacker {
-	height: 100%;
-	width: 100%;
-}
diff --git a/packages/components/src/higher-order/with-filters/test/index.js b/packages/components/src/higher-order/with-filters/test/index.js
index f933a547f58ad6..839640dcf7c595 100644
--- a/packages/components/src/higher-order/with-filters/test/index.js
+++ b/packages/components/src/higher-order/with-filters/test/index.js
@@ -13,6 +13,8 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
  */
 import withFilters from '..';
 
+jest.useFakeTimers();
+
 describe( 'withFilters', () => {
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
@@ -79,14 +81,13 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', async () => {
+	it( 'should re-render component once when new filter added after component was mounted', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -94,25 +95,24 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when two filters added in the same animation frame', async () => {
+	it( 'should re-render component once when two filters added in the same animation frame', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -120,65 +120,62 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-2',
-				( FilteredComponent ) => () =>
-					(
-						<section>
-							<FilteredComponent />
-						</section>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-2',
+			( FilteredComponent ) => () =>
+				(
+					<section>
+						<FilteredComponent />
+					</section>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
+	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy',
-				( FilteredComponent ) => () =>
-					(
-						<div>
-							<FilteredComponent />
-						</div>
-					)
-			);
-			jest.runAllTimers();
-		} );
-
-		await act( () => {
-			removeFilter( hookName, 'test/enhanced-component-spy' );
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy',
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+					</div>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
+
+		removeFilter( hookName, 'test/enhanced-component-spy' );
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', async () => {
+	it( 'should re-render both components once each when one filter added', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -192,19 +189,18 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
diff --git a/packages/components/src/higher-order/with-focus-outside/test/index.js b/packages/components/src/higher-order/with-focus-outside/test/index.js
index feea9e8f2ff029..8223679279738c 100644
--- a/packages/components/src/higher-order/with-focus-outside/test/index.js
+++ b/packages/components/src/higher-order/with-focus-outside/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
+jest.useFakeTimers();
+
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {
diff --git a/packages/components/src/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js
index b88e3cfd0bad08..a8abaa56d69628 100644
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ b/packages/components/src/higher-order/with-focus-return/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
+jest.useFakeTimers();
+
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;
diff --git a/packages/components/src/higher-order/with-notices/test/index.js b/packages/components/src/higher-order/with-notices/test/index.js
index fc529927b2a6f9..a403f3c3a80942 100644
--- a/packages/components/src/higher-order/with-notices/test/index.js
+++ b/packages/components/src/higher-order/with-notices/test/index.js
@@ -101,6 +101,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createErrorNotice( message );
 		} );
+		// eslint-disable-next-line testing-library/no-node-access
 		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
 	} );
 
diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
deleted file mode 100644
index 824b091c2e0cdb..00000000000000
--- a/packages/components/src/icon/stories/index.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../';
-import { VStack } from '../../v-stack';
-
-export default {
-	title: 'Components/Icon',
-	component: Icon,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const IconSizeLabel = ( { size } ) => (
-	<div style={ { fontSize: 12 } }>{ size }px</div>
-);
-
-export const _default = () => {
-	const size = number( 'Size', '24' );
-
-	return (
-		<div>
-			<Icon icon={ wordpress } size={ size } />
-			<IconSizeLabel size={ size } />
-		</div>
-	);
-};
-
-export const sizes = () => {
-	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];
-
-	return (
-		<>
-			{ iconSizes.map( ( size ) => (
-				<div
-					key={ size }
-					style={ { padding: 20, display: 'inline-block' } }
-				>
-					<Icon icon={ wordpress } size={ size } />
-					<IconSizeLabel size={ size } />
-				</div>
-			) ) }
-		</>
-	);
-};
-
-export const colors = () => {
-	const iconColors = [ 'blue', 'purple', 'green' ];
-
-	return (
-		<>
-			{ iconColors.map( ( color ) => (
-				<div
-					key={ color }
-					style={ {
-						padding: 20,
-						display: 'inline-block',
-						fill: color,
-					} }
-				>
-					<Icon icon={ wordpress } />
-					<IconSizeLabel size={ 24 } />
-				</div>
-			) ) }
-		</>
-	);
-};
-
-export const withAFunction = () => (
-	<Icon
-		icon={ () => (
-			<SVG>
-				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-			</SVG>
-		) }
-	/>
-);
-
-export const withAComponent = () => {
-	const MyIconComponent = () => (
-		<SVG>
-			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-		</SVG>
-	);
-
-	return <Icon icon={ MyIconComponent } />;
-};
-
-export const withAnSVG = () => {
-	return (
-		<Icon
-			icon={
-				<SVG>
-					<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-				</SVG>
-			}
-		/>
-	);
-};
-
-/**
- * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
- * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
- * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
- */
-export const withADashicon = () => {
-	return (
-		<VStack>
-			<Icon icon="wordpress" />
-			<small>
-				This won’t show an icon if the Dashicons stylesheet isn’t
-				loaded.
-			</small>
-		</VStack>
-	);
-};
diff --git a/packages/components/src/icon/stories/index.tsx b/packages/components/src/icon/stories/index.tsx
new file mode 100644
index 00000000000000..8c26d2d2d56138
--- /dev/null
+++ b/packages/components/src/icon/stories/index.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '..';
+import { VStack } from '../../v-stack';
+
+const meta: ComponentMeta< typeof Icon > = {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Icon > = ( args ) => (
+	<Icon { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: () => (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+const MyIconComponent = () => (
+	<SVG>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: MyIconComponent,
+};
+
+export const WithAnSVG = Template.bind( {} );
+WithAnSVG.args = {
+	...Default.args,
+	icon: (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const WithADashicon: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<VStack>
+			<Icon { ...args } />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};
+WithADashicon.args = {
+	...Default.args,
+	icon: 'wordpress',
+};
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 149021e8569eb6..96b2caf328f088 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -148,7 +148,6 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
-export { default as __experimentalTheme } from './theme';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export {
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index dd3e8dddb957e1..82e936aa1b5e98 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
@@ -65,6 +67,7 @@ describe( 'InputControl', () => {
 			const help = screen.getByRole( 'link', { name: 'My help text' } );
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
 			).toBeVisible();
 		} );
diff --git a/packages/components/src/isolated-event-container/test/index.js b/packages/components/src/isolated-event-container/test/index.js
index 1667d69b4df0dd..2f81f50e66c3b5 100644
--- a/packages/components/src/isolated-event-container/test/index.js
+++ b/packages/components/src/isolated-event-container/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import IsolatedEventContainer from '../';
 
+jest.useFakeTimers();
+
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/components/src/mobile/bottom-sheet/picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
index 42c59cd025adf0..2dbbdd08d4609e 100644
--- a/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -23,7 +18,7 @@ export default function BottomSheetPickerCell( props ) {
 		onChangeValue( newValue );
 	};
 
-	const option = find( options, { value } );
+	const option = options.find( ( opt ) => opt.value === value );
 	const label = option ? option.label : value;
 
 	return (
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 7d985a9cccb6f6..38536ec3f107f9 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -113,9 +113,9 @@ export function getBlockColors(
 		}
 
 		if ( ! isCustomColor ) {
-			const mappedColor = find( defaultColors, {
-				slug: value,
-			} );
+			const mappedColor = Object.values( defaultColors ?? {} ).find(
+				( { slug } ) => slug === value
+			);
 
 			if ( mappedColor ) {
 				blockStyles[ styleKey ] = mappedColor.color;
@@ -143,6 +143,7 @@ export function getBlockTypography(
 	const typographyStyles = {};
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+	const parsedFontSizes = Object.values( fontSizes ?? {} );
 
 	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
@@ -153,9 +154,9 @@ export function getBlockTypography(
 			if ( parseInt( fontSize, 10 ) ) {
 				typographyStyles.fontSize = fontSize;
 			} else {
-				const mappedFontSize = find( fontSizes, {
-					slug: fontSize,
-				} );
+				const mappedFontSize = parsedFontSizes.find(
+					( { slug } ) => slug === fontSize
+				);
 
 				if ( mappedFontSize ) {
 					typographyStyles.fontSize = mappedFontSize?.size;
@@ -169,9 +170,9 @@ export function getBlockTypography(
 	}
 
 	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
-		const mappedFontSize = find( fontSizes, {
-			slug: blockStyleAttributes?.fontSize,
-		} );
+		const mappedFontSize = parsedFontSizes.find(
+			( { slug } ) => slug === blockStyleAttributes?.fontSize
+		);
 
 		if ( mappedFontSize ) {
 			typographyStyles.fontSize = mappedFontSize?.size;
@@ -212,9 +213,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				const path = $2.split( '--' );
 				const mappedPresetValue = mappedValues[ path[ 0 ] ];
 				if ( mappedPresetValue && mappedPresetValue.slug ) {
-					const matchedValue = find( mappedPresetValue.values, {
-						slug: path[ 1 ],
-					} );
+					const matchedValue = Object.values(
+						mappedPresetValue.values ?? {}
+					).find( ( { slug } ) => slug === path[ 1 ] );
 					return matchedValue?.[ mappedPresetValue.slug ];
 				}
 				return UNKNOWN_VALUE;
@@ -244,9 +245,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		if ( variable === 'var' ) {
 			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
 				if ( mappedValues?.color ) {
-					const matchedValue = find( mappedValues.color?.values, {
-						slug: $2,
-					} );
+					const matchedValue = mappedValues.color?.values?.find(
+						( { slug } ) => slug === $2
+					);
 					return `"${ matchedValue?.color }"`;
 				}
 				return UNKNOWN_VALUE;
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index 310dc3d6e63a9f..63ff485c35458e 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -72,9 +72,7 @@ describe( 'Modal', () => {
 	} );
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
diff --git a/packages/components/src/navigable-container/test/navigable-menu.js b/packages/components/src/navigable-container/test/navigable-menu.js
index e50925a73c1d3b..461c1efd454805 100644
--- a/packages/components/src/navigable-container/test/navigable-menu.js
+++ b/packages/components/src/navigable-container/test/navigable-menu.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { NavigableMenu } from '../menu';
 
+jest.useFakeTimers();
+
 const NavigableMenuTestCase = ( props ) => (
 	<NavigableMenu { ...props }>
 		<button>Item 1</button>
diff --git a/packages/components/src/navigable-container/test/tababble-container.js b/packages/components/src/navigable-container/test/tababble-container.js
index 593238578792f1..55db6aa24c7410 100644
--- a/packages/components/src/navigable-container/test/tababble-container.js
+++ b/packages/components/src/navigable-container/test/tababble-container.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { TabbableContainer } from '../tabbable';
 
+jest.useFakeTimers();
+
 const TabbableContainerTestCase = ( props ) => (
 	<TabbableContainer { ...props }>
 		<button>Item 1</button>
diff --git a/packages/components/src/navigation/test/index.js b/packages/components/src/navigation/test/index.js
index 83ada8291709bc..1c26bb461930ca 100644
--- a/packages/components/src/navigation/test/index.js
+++ b/packages/components/src/navigation/test/index.js
@@ -16,6 +16,8 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
+jest.useFakeTimers();
+
 const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index be836f0152fc20..4a6b7d85e360ca 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -20,6 +20,8 @@ import {
 	NavigatorBackButton,
 } from '..';
 
+jest.useFakeTimers();
+
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
 	return {
diff --git a/packages/components/src/notice/test/index.js b/packages/components/src/notice/test/index.js
index a52fcbf3080944..fd823edcf33902 100644
--- a/packages/components/src/notice/test/index.js
+++ b/packages/components/src/notice/test/index.js
@@ -15,6 +15,10 @@ import Notice from '../index';
 
 jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 
+function getNoticeWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'Notice', () => {
 	beforeEach( () => {
 		speak.mockReset();
@@ -39,15 +43,16 @@ describe( 'Notice', () => {
 
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
 		const { container } = render( <Notice isDismissible={ false } /> );
+		const wrapper = getNoticeWrapper( container );
 
-		expect( container.firstChild ).toHaveClass( 'components-notice' );
-		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
+		expect( wrapper ).toHaveClass( 'components-notice' );
+		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
 	} );
 
 	it( 'should default to info status', () => {
 		const { container } = render( <Notice /> );
 
-		expect( container.firstChild ).toHaveClass( 'is-info' );
+		expect( getNoticeWrapper( container ) ).toHaveClass( 'is-info' );
 	} );
 
 	describe( 'useSpokenMessage', () => {
diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx
index ce794d3a227ff9..f4f5556982c953 100644
--- a/packages/components/src/number-control/test/index.tsx
+++ b/packages/components/src/number-control/test/index.tsx
@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+jest.useFakeTimers();
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );
diff --git a/packages/components/src/panel/test/__snapshots__/body.js.snap b/packages/components/src/panel/test/__snapshots__/body.js.snap
new file mode 100644
index 00000000000000..245b1a85bf5c82
--- /dev/null
+++ b/packages/components/src/panel/test/__snapshots__/body.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
index 3b8bb3e553a62a..bd8cc0d567d0f2 100644
--- a/packages/components/src/panel/test/body.js
+++ b/packages/components/src/panel/test/body.js
@@ -1,154 +1,163 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { PanelBody } from '../body';
 
-const getPanelBody = ( container ) =>
-	container.querySelector( '.components-panel__body' );
-const getPanelBodyContent = ( container ) =>
-	container.querySelector( '.components-panel__body > div' );
-const getPanelToggle = ( container ) =>
-	container.querySelector( '.components-panel__body-toggle' );
+jest.useFakeTimers();
 
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
 			const { container } = render( <PanelBody /> );
-			const panelBody = getPanelBody( container );
 
-			expect( panelBody ).toBeTruthy();
-			expect( panelBody.tagName ).toBe( 'DIV' );
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render inner content, if opened', () => {
-			const { container } = render(
-				<PanelBody opened={ true }>
-					<div className="inner-content">Content</div>
+			render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should be opened by default', () => {
-			const { container } = render(
+			render(
 				<PanelBody>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should render as initially opened, if specified', () => {
-			const { container } = render(
-				<PanelBody initialOpen={ true }>
-					<div>Content</div>
+			render(
+				<PanelBody initialOpen>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			const panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
 		} );
 
 		it( 'should call the children function, if specified', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+			const { rerender } = render(
+				<PanelBody opened>
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeInTheDocument();
+			expect( panelContent ).not.toBeVisible();
 			expect( panelContent ).toHaveAttribute( 'hidden', '' );
 
 			rerender(
 				<PanelBody opened={ false }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
 				</PanelBody>
 			);
-			panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 			expect( panelContent ).not.toHaveAttribute( 'hidden' );
 		} );
 	} );
 
 	describe( 'toggling', () => {
 		it( 'should toggle collapse with opened prop', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+			const { rerender } = render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
 
-			expect( panelContent ).toBeTruthy();
+			let panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
 
 			rerender(
 				<PanelBody opened={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 
 			rerender(
-				<PanelBody opened={ true }>
-					<div>Content</div>
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 		} );
 
-		it( 'should toggle when clicking header', () => {
-			const { container } = render(
+		it( 'should toggle when clicking header', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
 				<PanelBody title="Panel" initialOpen={ false }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
-			let panelContent = getPanelBodyContent( container );
-			const panelToggle = getPanelToggle( container );
 
-			expect( panelContent ).toBeFalsy();
+			let panelContent = screen.queryByTestId( 'inner-content' );
+			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
+
+			expect( panelContent ).not.toBeInTheDocument();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.getByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeTruthy();
+			expect( panelContent ).toBeVisible();
 
-			fireEvent.click( panelToggle );
+			await user.click( panelToggle );
 
-			panelContent = getPanelBodyContent( container );
+			panelContent = screen.queryByTestId( 'inner-content' );
 
-			expect( panelContent ).toBeFalsy();
+			expect( panelContent ).not.toBeInTheDocument();
 		} );
 
-		it( 'should pass button props to panel title', () => {
+		it( 'should pass button props to panel title', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const mock = jest.fn();
 
-			const { container } = render(
+			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
-					<div>Content</div>
+					<div data-testid="inner-content">Content</div>
 				</PanelBody>
 			);
 
-			const panelToggle = getPanelToggle( container );
-
-			fireEvent.click( panelToggle );
+			await user.click( screen.getByRole( 'button', { name: 'Panel' } ) );
 
 			expect( mock ).toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/placeholder/test/index.tsx b/packages/components/src/placeholder/test/index.tsx
index 9e47d4d016a7fc..e0ebc8ccae563d 100644
--- a/packages/components/src/placeholder/test/index.tsx
+++ b/packages/components/src/placeholder/test/index.tsx
@@ -59,6 +59,7 @@ describe( 'Placeholder', () => {
 
 			// Test for empty label. When the label is empty, the only way to
 			// query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const label = placeholder.querySelector(
 				'.components-placeholder__label'
 			);
@@ -67,6 +68,7 @@ describe( 'Placeholder', () => {
 
 			// Test for non existent instructions. When the instructions is
 			// empty, the only way to query the div is with `querySelector`.
+			// eslint-disable-next-line testing-library/no-node-access
 			const placeholderInstructions = placeholder.querySelector(
 				'.components-placeholder__instructions'
 			);
@@ -84,6 +86,7 @@ describe( 'Placeholder', () => {
 
 			const placeholder = getPlaceholder();
 			const icon = within( placeholder ).getByTestId( 'icon' );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( icon.parentNode ).toHaveClass(
 				'components-placeholder__label'
 			);
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 3e0dd45d62b586..11d9eedc60407f 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import SelectControl from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index fce688089a55c0..2504f7f214fa62 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -102,7 +101,7 @@ export function TabPanel( {
 	) => {
 		child.click();
 	};
-	const selectedTab = find( tabs, { name: selected } );
+	const selectedTab = tabs.find( ( { name } ) => name === selected );
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 0d3a30e991ea3f..1ea23c16b602e0 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TabPanel from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/components/src/text-highlight/test/index.tsx b/packages/components/src/text-highlight/test/index.tsx
index df07d8adcea68e..2d71f3e98b1358 100644
--- a/packages/components/src/text-highlight/test/index.tsx
+++ b/packages/components/src/text-highlight/test/index.tsx
@@ -11,6 +11,7 @@ import TextHighlight from '..';
 const getMarks = ( container: Element ) =>
 	// Use querySelectorAll because the `mark` role is not officially supported
 	// yet. This should be changed to `getByRole` when it is.
+	// eslint-disable-next-line testing-library/no-node-access
 	Array.from( container.querySelectorAll( 'mark' ) );
 
 const defaultText =
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 841ca8fd6bcafb..511b362f1a2d59 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -18,6 +18,8 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar-group/test/index.js
index 4f0fbf632080d8..4e521f6f8c4950 100644
--- a/packages/components/src/toolbar-group/test/index.js
+++ b/packages/components/src/toolbar-group/test/index.js
@@ -81,9 +81,11 @@ describe( 'ToolbarGroup', () => {
 			const buttons = screen.getAllByRole( 'button' );
 
 			expect( buttons ).toHaveLength( 2 );
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 0 ].parentElement ).not.toHaveClass(
 				'has-left-divider'
 			);
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( buttons[ 1 ].parentElement ).toHaveClass(
 				'has-left-divider'
 			);
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
index d24a3317328d64..53b6d8a65286b7 100644
--- a/packages/components/src/toolbar/style.scss
+++ b/packages/components/src/toolbar/style.scss
@@ -21,7 +21,7 @@
 		padding-right: $grid-unit-20;
 
 		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
+		&:focus:not(:disabled) {
 			box-shadow: none;
 			outline: none;
 		}
diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
index a76b69731b41a6..dc573a189bf930 100644
--- a/packages/components/src/tooltip/stories/index.js
+++ b/packages/components/src/tooltip/stories/index.js
@@ -1,14 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { text, select, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -17,79 +6,80 @@ import Tooltip from '../';
 export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
+	argTypes: {
+		delay: { control: 'number' },
+		position: {
+			control: {
+				type: 'select',
+				options: [
+					'top left',
+					'top center',
+					'top right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				],
+			},
+		},
+		text: { control: 'text' },
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const positionOptions = {
-		'top left': 'top left',
-		'top center ': 'top center',
-		'top right': 'top right',
-		'bottom left': 'bottom left',
-		'bottom center ': 'bottom center',
-		'bottom right': 'bottom right',
-	};
-	const tooltipText = text( 'Text', 'More information' );
-	const position = select( 'Position', positionOptions, 'top center' );
-	const delay = number( 'Delay', 700 );
-	return (
-		<>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: '200px',
-						padding: '20px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Hover for more information
-				</div>
-			</Tooltip>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: 'min-content',
-						padding: '4px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Small target
-				</div>
-			</Tooltip>
-		</>
-	);
+const Template = ( args ) => {
+	return <Tooltip { ...args } />;
 };
 
-const Button = styled.button`
-	margin: 0 10px;
-`;
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'More information',
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: '200px',
+				padding: '20px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Hover for more information
+		</div>
+	),
+};
 
-export const DisabledElement = () => {
-	const [ showMessage, toggleMessage ] = useState( false );
+export const SmallTarget = Template.bind( {} );
+SmallTarget.args = {
+	...Default.args,
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: 'min-content',
+				padding: '4px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Small target
+		</div>
+	),
+};
 
-	return (
-		<>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button onClick={ () => toggleMessage( ! showMessage ) }>
-					Hover me!
-				</Button>
-			</Tooltip>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button
-					disabled
-					onClick={ () => toggleMessage( ! showMessage ) }
-				>
-					Hover me, but I am disabled
-				</Button>
-			</Tooltip>
-			<br />
-			{ showMessage ? <p>Hello World!</p> : null }
-		</>
-	);
+export const DisabledChild = Template.bind( {} );
+DisabledChild.args = {
+	...Default.args,
+	children: (
+		<button
+			disabled
+			onClick={ () =>
+				// eslint-disable-next-line no-alert
+				window.alert( 'This alert should not be triggered' )
+			}
+		>
+			Hover me, but I am disabled
+		</button>
+	),
 };
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index 21892dea6a0da5..69e160823456e4 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -13,6 +13,8 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+jest.useFakeTimers();
+
 function getWrappingPopoverElement( element ) {
 	return element.closest( '.components-popover' );
 }
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index 1703b3ad34db4e..d0d232a54e6704 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -16,6 +16,8 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -112,6 +114,7 @@ describe( 'UnitControl', () => {
 			);
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
diff --git a/packages/components/src/utils/hooks/test/use-latest-ref.js b/packages/components/src/utils/hooks/test/use-latest-ref.js
index b90b349f25a453..3e2969a1000c9a 100644
--- a/packages/components/src/utils/hooks/test/use-latest-ref.js
+++ b/packages/components/src/utils/hooks/test/use-latest-ref.js
@@ -13,6 +13,8 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
+jest.useFakeTimers();
+
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {
diff --git a/packages/compose/src/higher-order/pure/test/index.js b/packages/compose/src/higher-order/pure/test/index.js
index 640b250df98422..84fcc26181b95c 100644
--- a/packages/compose/src/higher-order/pure/test/index.js
+++ b/packages/compose/src/higher-order/pure/test/index.js
@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import pure from '../';
 
+jest.useFakeTimers();
+
 describe( 'pure', () => {
 	it( 'functional component should rerender only when props change', () => {
 		let i = 0;
diff --git a/packages/compose/src/higher-order/with-safe-timeout/index.tsx b/packages/compose/src/higher-order/with-safe-timeout/index.tsx
index 4056e64ba65e53..d15b8a72d41eab 100644
--- a/packages/compose/src/higher-order/with-safe-timeout/index.tsx
+++ b/packages/compose/src/higher-order/with-safe-timeout/index.tsx
@@ -59,7 +59,9 @@ const withSafeTimeout = createHigherOrderComponent(
 
 			clearTimeout( id: number ) {
 				clearTimeout( id );
-				this.timeouts.filter( ( timeoutId ) => timeoutId !== id );
+				this.timeouts = this.timeouts.filter(
+					( timeoutId ) => timeoutId !== id
+				);
 			}
 
 			render() {
diff --git a/packages/compose/src/higher-order/with-state/test/index.js b/packages/compose/src/higher-order/with-state/test/index.js
index b6b401eb668204..75457d49f89c66 100644
--- a/packages/compose/src/higher-order/with-state/test/index.js
+++ b/packages/compose/src/higher-order/with-state/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import withState from '../';
 
+jest.useFakeTimers();
+
 describe( 'withState', () => {
 	it( 'should pass initial state and allow updates', async () => {
 		const user = userEvent.setup( {
diff --git a/packages/compose/src/hooks/use-focus-outside/test/index.js b/packages/compose/src/hooks/use-focus-outside/test/index.js
index 2f7c983bb0a62d..04f99e486444c8 100644
--- a/packages/compose/src/hooks/use-focus-outside/test/index.js
+++ b/packages/compose/src/hooks/use-focus-outside/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import useFocusOutside from '../';
 
+jest.useFakeTimers();
+
 const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 	<div>
 		{ /* Wrapper */ }
diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js
index e47f0220156a75..6a0c74a4503669 100644
--- a/packages/core-data/src/queried-data/reducer.js
+++ b/packages/core-data/src/queried-data/reducer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, omit, mapValues } from 'lodash';
+import { map, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -73,6 +73,29 @@ export function getMergedItemIds( itemIds, nextItemIds, page, perPage ) {
 	return mergedItemIds;
 }
 
+/**
+ * Helper function to filter out entities with certain IDs.
+ * Entities are keyed by their ID.
+ *
+ * @param {Object} entities Entity objects, keyed by entity ID.
+ * @param {Array}  ids      Entity IDs to filter out.
+ *
+ * @return {Object} Filtered entities.
+ */
+function removeEntitiesById( entities, ids ) {
+	return Object.fromEntries(
+		Object.entries( entities ).filter(
+			( [ id ] ) =>
+				! ids.some( ( itemId ) => {
+					if ( Number.isInteger( itemId ) ) {
+						return itemId === +id;
+					}
+					return itemId === id;
+				} )
+		)
+	);
+}
+
 /**
  * Reducer tracking items state, keyed by ID. Items are assumed to be normal,
  * where identifiers are common across all queries.
@@ -104,7 +127,7 @@ export function items( state = {}, action ) {
 		}
 		case 'REMOVE_ITEMS':
 			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+				removeEntitiesById( contextState, action.itemIds )
 			);
 	}
 	return state;
@@ -157,7 +180,7 @@ export function itemIsComplete( state = {}, action ) {
 		}
 		case 'REMOVE_ITEMS':
 			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+				removeEntitiesById( contextState, action.itemIds )
 			);
 	}
 
diff --git a/packages/core-data/src/queried-data/test/reducer.js b/packages/core-data/src/queried-data/test/reducer.js
index 63a4f4bd259ceb..76657fca61da1b 100644
--- a/packages/core-data/src/queried-data/test/reducer.js
+++ b/packages/core-data/src/queried-data/test/reducer.js
@@ -224,4 +224,44 @@ describe( 'reducer', () => {
 			},
 		} );
 	} );
+
+	it( 'deletes an item with string ID', () => {
+		const kind = 'postType';
+		const name = 'wp_template';
+		const original = deepFreeze( {
+			items: {
+				default: {
+					'foo//bar1': { id: 'foo//bar1', name: 'Foo Bar 1' },
+					'foo//bar2': { id: 'foo//bar2', name: 'Foo Bar 2' },
+					'foo//bar3': { id: 'foo//bar3', name: 'Foo Bar 3' },
+				},
+			},
+			queries: {
+				default: {
+					'': [ 'foo//bar1', 'foo//bar2', 'foo//bar3' ],
+					's=2': [ 'foo//bar2' ],
+				},
+			},
+		} );
+		const state = reducer(
+			original,
+			removeItems( kind, name, 'foo//bar2' )
+		);
+
+		expect( state ).toEqual( {
+			itemIsComplete: {},
+			items: {
+				default: {
+					'foo//bar1': { id: 'foo//bar1', name: 'Foo Bar 1' },
+					'foo//bar3': { id: 'foo//bar3', name: 'Foo Bar 3' },
+				},
+			},
+			queries: {
+				default: {
+					'': [ 'foo//bar1', 'foo//bar3' ],
+					's=2': [],
+				},
+			},
+		} );
+	} );
 } );
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 2764f55c052f59..d29860702b052a 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -44,8 +44,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
-		"fast-deep-equal": "^3.1.3",
-		"lodash": "^4.17.21"
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js
index f2f254b5ae6af6..9c3622a3ea8a5c 100644
--- a/packages/customize-widgets/src/utils.js
+++ b/packages/customize-widgets/src/utils.js
@@ -103,7 +103,7 @@ export function widgetToBlock( { id, idBase, number, instance } ) {
 	} = instance;
 
 	if ( idBase === 'block' ) {
-		const parsedBlocks = parse( raw.content, {
+		const parsedBlocks = parse( raw.content ?? '', {
 			__unstableSkipAutop: true,
 		} );
 		block = parsedBlocks.length
diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js
index 6dccfd74b741fc..4b7babcedeaac7 100644
--- a/packages/data/src/components/use-select/test/index.js
+++ b/packages/data/src/components/use-select/test/index.js
@@ -1146,4 +1146,38 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 		} );
 	} );
+
+	describe( 'static store selection mode', () => {
+		it( 'can read the current value from store', () => {
+			registry.registerStore( 'testStore', {
+				reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ),
+				actions: { inc: () => ( { type: 'INC' } ) },
+				selectors: { get: ( s ) => s },
+			} );
+
+			const record = jest.fn();
+
+			function TestComponent() {
+				const { get } = useSelect( 'testStore' );
+				return (
+					<button onClick={ () => record( get() ) }>record</button>
+				);
+			}
+
+			render(
+				<RegistryProvider value={ registry }>
+					<TestComponent />
+				</RegistryProvider>
+			);
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			expect( record ).toHaveBeenLastCalledWith( 0 );
+
+			// no need to act() as the component doesn't react to the updates
+			registry.dispatch( 'testStore' ).inc();
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			expect( record ).toHaveBeenLastCalledWith( 1 );
+		} );
+	} );
 } );
diff --git a/packages/data/src/components/use-select/test/suspense.js b/packages/data/src/components/use-select/test/suspense.js
index 032db07bdd1bdb..9fbbabaeb1bb09 100644
--- a/packages/data/src/components/use-select/test/suspense.js
+++ b/packages/data/src/components/use-select/test/suspense.js
@@ -139,10 +139,11 @@ describe( 'useSuspenseSelect', () => {
 			}
 
 			render() {
+				const { children } = this.props;
 				if ( this.state.error ) {
 					return <div aria-label="error">{ this.state.error }</div>;
 				}
-				return this.props.children;
+				return children;
 			}
 		}
 
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index 89286f689294a5..df46227257f363 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -60,7 +60,7 @@ function getStoreName( storeNameOrDescriptor ) {
 export function createRegistry( storeConfigs = {}, parent = null ) {
 	const stores = {};
 	const emitter = createEmitter();
-	const listeningStores = new Set();
+	let listeningStores = null;
 
 	/**
 	 * Global listener called for each store's update.
@@ -112,7 +112,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function select( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSelectors();
@@ -122,11 +122,12 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	}
 
 	function __unstableMarkListeningStores( callback, ref ) {
-		listeningStores.clear();
+		listeningStores = new Set();
 		try {
 			return callback.call( this );
 		} finally {
 			ref.current = Array.from( listeningStores );
+			listeningStores = null;
 		}
 	}
 
@@ -143,7 +144,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function resolveSelect( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getResolveSelectors();
@@ -165,7 +166,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 */
 	function suspendSelect( storeNameOrDescriptor ) {
 		const storeName = getStoreName( storeNameOrDescriptor );
-		listeningStores.add( storeName );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSuspendSelectors();
diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js
index 66ae1ee7d4fd46..25bc81f2154582 100644
--- a/packages/dom/src/tabbable.js
+++ b/packages/dom/src/tabbable.js
@@ -159,18 +159,15 @@ export function find( context ) {
  * @return {Element|undefined} Preceding tabbable element.
  */
 export function findPrevious( element ) {
-	const focusables = findFocusable( element.ownerDocument.body );
-	const index = focusables.indexOf( element );
-
-	if ( index === -1 ) {
-		return undefined;
-	}
-
-	// Remove all focusables after and including `element`.
-	focusables.length = index;
-
-	const tabbable = filterTabbable( focusables );
-	return tabbable[ tabbable.length - 1 ];
+	return filterTabbable( findFocusable( element.ownerDocument.body ) )
+		.reverse()
+		.find( ( focusable ) => {
+			return (
+				// eslint-disable-next-line no-bitwise
+				element.compareDocumentPosition( focusable ) &
+				element.DOCUMENT_POSITION_PRECEDING
+			);
+		} );
 }
 
 /**
@@ -182,11 +179,13 @@ export function findPrevious( element ) {
  * @return {Element|undefined} Next tabbable element.
  */
 export function findNext( element ) {
-	const focusables = findFocusable( element.ownerDocument.body );
-	const index = focusables.indexOf( element );
-
-	// Remove all focusables before and including `element`.
-	const remaining = focusables.slice( index + 1 );
-
-	return filterTabbable( remaining )[ 0 ];
+	return filterTabbable( findFocusable( element.ownerDocument.body ) ).find(
+		( focusable ) => {
+			return (
+				// eslint-disable-next-line no-bitwise
+				element.compareDocumentPosition( focusable ) &
+				element.DOCUMENT_POSITION_FOLLOWING
+			);
+		}
+	);
 }
diff --git a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
index c30a7b09ded992..01340eb085d889 100644
--- a/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
+++ b/packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
@@ -4,5 +4,5 @@
  * @this {import('.').SiteEditor}
  */
 export async function enterEditMode() {
-	await this.page.click( '.edit-site-layout__edit-button' );
+	await this.page.click( '.edit-site-site-hub__edit-button' );
 }
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index 3872ce5b9fafb4..6f8046f2dde7ea 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -153,7 +153,7 @@ const test = base.extend<
 
 			await use( requestUtils );
 		},
-		{ scope: 'worker' },
+		{ scope: 'worker', auto: true },
 	],
 	// An automatic fixture to configure snapshot settings globally.
 	snapshotConfig: [
diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index 8d1ae7c47b1dfa..96ed7f3dcb1ea4 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -111,7 +111,7 @@ _Parameters_
 
 ### closeGlobalBlockInserter
 
-Undocumented declaration.
+Closes the global inserter.
 
 ### closeListView
 
@@ -455,41 +455,37 @@ _Returns_
 
 ### insertBlock
 
-Opens the inserter, searches for the given term, then selects the first
-result that appears. It then waits briefly for the block list to update.
+Inserts a block matching a given search term via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the block to insert.
 
 ### insertBlockDirectoryBlock
 
-Opens the inserter, searches for the given block, then selects the
-first result that appears from the block directory. It then waits briefly for the block list to
-update.
+Inserts a Block Directory block matching a given search term via the global
+inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the Block Directory block to insert.
 
 ### insertPattern
 
-Opens the inserter, searches for the given pattern, then selects the first
-result that appears. It then waits briefly for the block list to update.
+Inserts a pattern matching a given search term via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the pattern to insert.
 
 ### insertReusableBlock
 
-Opens the inserter, searches for the given reusable block, then selects the
-first result that appears. It then waits briefly for the block list to
-update.
+Inserts a reusable block matching a given search term via the global
+inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term by which to find the reusable block to insert.
 
 ### installPlugin
 
@@ -577,7 +573,7 @@ Clicks on the button in the header which opens Document Settings sidebar when it
 
 ### openGlobalBlockInserter
 
-Opens the global block inserter.
+Opens the global inserter.
 
 ### openGlobalStylesPanel
 
@@ -667,27 +663,51 @@ _Returns_
 
 ### searchForBlock
 
-Search for block in the global inserter
+Searches for a block via the global inserter.
+
+_Parameters_
+
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of block to be inserted or null if nothing was found.
+
+### searchForBlockDirectoryBlock
+
+Searches for a Block Directory block via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the Block Directory block to be inserted or null if nothing was found.
 
 ### searchForPattern
 
-Search for pattern in the global inserter
+Searches for a pattern via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the pattern to be inserted or null if nothing was found.
 
 ### searchForReusableBlock
 
-Search for reusable block in the global inserter.
+Searches for a reusable block via the global inserter.
 
 _Parameters_
 
--   _searchTerm_ `string`: The text to search the inserter for.
+-   _searchTerm_ `string`: The term to search the inserter for.
+
+_Returns_
+
+-   `Promise<ElementHandle|null>`: The handle of the reusable block to be inserted or null if nothing was found.
 
 ### selectBlockByClientId
 
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index 3bf2e33aeb34f3..ec35e073908477 100644
--- a/packages/e2e-test-utils/src/create-reusable-block.js
+++ b/packages/e2e-test-utils/src/create-reusable-block.js
@@ -4,6 +4,7 @@
 import { insertBlock } from './inserter';
 import { clickMenuItem } from './click-menu-item';
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
+import { canvas } from './canvas';
 
 /**
  * Creates a simple reusable block with a paragraph block.
@@ -33,7 +34,7 @@ export const createReusableBlock = async ( content, title ) => {
 	);
 
 	// Check that we have a reusable block on the page
-	const block = await page.waitForSelector(
+	const block = await canvas().waitForSelector(
 		'.block-editor-block-list__block[data-type="core/block"]'
 	);
 	expect( block ).not.toBeNull();
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index fda35292174b00..6b217d52c44074 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -42,16 +42,17 @@ export { hasBlockSwitcher } from './has-block-switcher';
 export { getPageError } from './get-page-error';
 export { getOption } from './get-option';
 export {
-	insertBlock,
-	insertPattern,
-	insertReusableBlock,
+	openGlobalBlockInserter,
+	closeGlobalBlockInserter,
+	toggleGlobalBlockInserter,
 	searchForBlock,
 	searchForPattern,
 	searchForReusableBlock,
+	searchForBlockDirectoryBlock,
+	insertBlock,
+	insertPattern,
+	insertReusableBlock,
 	insertBlockDirectoryBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	toggleGlobalBlockInserter,
 } from './inserter';
 export { installPlugin } from './install-plugin';
 export { installTheme } from './install-theme';
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index e69282c9dd2bf5..84521728160bee 100644
--- a/packages/e2e-test-utils/src/inserter.js
+++ b/packages/e2e-test-utils/src/inserter.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { ElementHandle } from 'puppeteer-core';
+
 /**
  * Internal dependencies
  */
@@ -10,38 +15,37 @@ const INSERTER_SEARCH_SELECTOR =
 	'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 
 /**
- * Opens the global block inserter.
+ * Opens the global inserter.
  */
 export async function openGlobalBlockInserter() {
-	if ( await isGlobalInserterOpen() ) {
-		// If global inserter is already opened, reset to an initial state where
-		// the default (first) tab is selected.
-		const tab = await page.$(
-			'.block-editor-inserter__tabs .components-tab-panel__tabs-item:nth-of-type(1):not(.is-active)'
-		);
-
-		if ( tab ) {
-			await tab.click();
-		}
-	} else {
+	if ( ! ( await isGlobalInserterOpen() ) ) {
 		await toggleGlobalBlockInserter();
 
-		// Waiting here is necessary because sometimes the inserter takes more time to
-		// render than Puppeteer takes to complete the 'click' action.
+		// Waiting here is necessary because sometimes the inserter takes more
+		// time to render than Puppeteer takes to complete the 'click' action.
 		await page.waitForSelector( '.block-editor-inserter__menu' );
 	}
 }
 
+/**
+ * Closes the global inserter.
+ */
 export async function closeGlobalBlockInserter() {
 	if ( await isGlobalInserterOpen() ) {
 		await toggleGlobalBlockInserter();
 	}
 }
 
+/**
+ * Checks if the global inserter is open.
+ *
+ * @return {Promise<boolean>} Whether the inserter is open or not.
+ */
 async function isGlobalInserterOpen() {
 	return await page.evaluate( () => {
 		// "Add block" selector is required to make sure performance comparison
-		// doesn't fail on older branches where we still had "Add block" as label.
+		// doesn't fail on older branches where we still had "Add block" as
+		// label.
 		return !! document.querySelector(
 			'.edit-post-header [aria-label="Add block"].is-pressed,' +
 				'.edit-site-header-edit-mode [aria-label="Add block"].is-pressed,' +
@@ -70,11 +74,56 @@ export async function toggleGlobalBlockInserter() {
 	);
 }
 
+/**
+ * Selects the global inserter tab/category, unless it's already selected.
+ *
+ * @param {string} label The label of the tab to select.
+ */
+export async function selectGlobalInserterTab( label ) {
+	const tabs = await page.$( '.block-editor-inserter__tabs' );
+	if ( ! tabs ) {
+		return; // Do nothing if tabs are unavailable (e.g. for inner blocks).
+	}
+
+	const activeTab = await page.waitForSelector(
+		'.block-editor-inserter__tabs button.is-active'
+	);
+
+	const activeTabLabel = await page.evaluate(
+		( el ) => el.innerText,
+		activeTab
+	);
+
+	if ( activeTabLabel === label ) {
+		return; // Do nothing if the target tab is already active.
+	}
+
+	let labelSelector;
+
+	switch ( label ) {
+		case 'Blocks':
+		case 'Patterns':
+		case 'Media':
+			labelSelector = `. = "${ label }"`;
+			break;
+		case 'Reusable':
+			// Reusable tab label is an icon, hence the different selector.
+			labelSelector = `@aria-label = "${ label }"`;
+			break;
+	}
+
+	const targetTab = await page.waitForXPath(
+		`//div[contains(@class, "block-editor-inserter__tabs")]//button[${ labelSelector }]`
+	);
+
+	await targetTab.click();
+}
+
 /**
  * Moves focus to the selected block.
  */
 async function focusSelectedBlock() {
-	// Ideally there shouuld be a UI way to do this. (Focus the selected block)
+	// Ideally, there should be a UI way to focus the selected block.
 	await page.evaluate( () => {
 		wp.data
 			.dispatch( 'core/block-editor' )
@@ -88,7 +137,8 @@ async function focusSelectedBlock() {
 }
 
 /**
- * Retrieves the document container by css class and checks to make sure the document's active element is within it
+ * Retrieves the document container by css class and checks to make sure the
+ * document's active element is within it.
  */
 async function waitForInserterCloseAndContentFocus() {
 	await canvas().waitForFunction(
@@ -100,157 +150,213 @@ async function waitForInserterCloseAndContentFocus() {
 }
 
 /**
- * Wait for the inserter search to yield results because that input is debounced.
+ * Searches for an entity matching given category and term via the global
+ * inserter. If nothing is found, null will be returned.
+ *
+ * Available categories: Blocks, Patterns, Reusable and Block Directory.
+ *
+ * @param {string} category   The category to search within.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the element to be
+ * inserted or null if nothing was found.
+ */
+export async function searchGlobalInserter( category, searchTerm ) {
+	await openGlobalBlockInserter();
+	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
+	await page.focus( INSERTER_SEARCH_SELECTOR );
+	await pressKeyWithModifier( 'primary', 'a' );
+	await page.keyboard.type( searchTerm );
+
+	// Wait for the default block list to disappear to prevent its items from
+	// being considered as search results. This is needed since we're debouncing
+	// search request.
+	await page.waitForSelector( '.block-editor-inserter__block-list', {
+		hidden: true,
+	} );
+
+	let waitForInsertElement;
+	let waitForNoResults;
+
+	switch ( category ) {
+		case 'Blocks':
+		case 'Patterns':
+		case 'Reusable': {
+			waitForInsertElement = async () => {
+				return await page.waitForXPath(
+					`//*[@role='option' and contains(., '${ searchTerm }')]`
+				);
+			};
+			waitForNoResults = async () => {
+				await page.waitForSelector(
+					'.block-editor-inserter__no-results'
+				);
+				return null;
+			};
+			break;
+		}
+		case 'Block Directory': {
+			waitForInsertElement = async () => {
+				// Return the first item from the Block Directory search results.
+				return await page.waitForSelector(
+					'.block-directory-downloadable-blocks-list button:first-child'
+				);
+			};
+			waitForNoResults = async () => {
+				// Use a soft timeout if Block Directory doesn't return anything
+				// within 5 seconds, as there's no "empty results" element being
+				// rendered when nothing is found.
+				return await new Promise( ( resolve ) =>
+					setTimeout( () => resolve( null ), 5000 )
+				);
+			};
+		}
+	}
+
+	return await Promise.race( [ waitForInsertElement(), waitForNoResults() ] );
+}
+
+/**
+ * Inserts an entity matching given category and term via the global inserter.
+ * If the entity is not instantly available in the open inserter, a search will
+ * be performed. If the search returns no results, an error will be thrown.
+ *
+ * Available categories: Blocks, Patterns, Reusable and Block Directory.
+ *
+ * @param {string} category   The category to insert from.
+ * @param {string} searchTerm The term by which to find the entity to insert.
  */
-async function waitForInserterSearch() {
-	try {
+export async function insertFromGlobalInserter( category, searchTerm ) {
+	await openGlobalBlockInserter();
+	await selectGlobalInserterTab( category );
+
+	let insertButton;
+
+	if ( [ 'Blocks', 'Reusable' ].includes( category ) ) {
+		// If it's a block, see it it's insertable without searching...
+		try {
+			insertButton = (
+				await page.$x(
+					`//*[@role='option' and contains(., '${ searchTerm }')]`
+				)
+			 )[ 0 ];
+		} catch ( error ) {
+			// noop
+		}
+	}
+
+	// ...and if not, perform a global search.
+	if ( ! insertButton ) {
+		insertButton = await searchGlobalInserter( category, searchTerm );
+	}
+
+	// Throw an error if nothing was found.
+	if ( ! insertButton ) {
+		throw new Error(
+			`Couldn't find "${ searchTerm }" in the ${ category } category.`
+		);
+	}
+
+	// Insert found entity.
+	await insertButton.click();
+
+	// Extra wait for the reusable block to be ready.
+	if ( category === 'Reusable' ) {
 		await page.waitForSelector(
-			'.block-editor-inserter__no-tab-container',
-			{ timeout: 2000 }
+			'.block-library-block__reusable-block-container'
 		);
-	} catch ( e ) {
-		// This selector doesn't exist in older versions, so let's just continue.
 	}
+
+	// Extra wait for the Block Directory block to be ready.
+	if ( category === 'Block Directory' ) {
+		await page.waitForSelector(
+			'.block-directory-downloadable-blocks-list button:first-child:not(.is-busy)'
+		);
+	}
+
+	await focusSelectedBlock();
+	await waitForInserterCloseAndContentFocus();
 }
 
 /**
- * Search for block in the global inserter
+ * Searches for a block via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of block to be
+ * inserted or null if nothing was found.
  */
 export async function searchForBlock( searchTerm ) {
-	await openGlobalBlockInserter();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+	return await searchGlobalInserter( 'Blocks', searchTerm );
 }
 
 /**
- * Search for pattern in the global inserter
+ * Searches for a pattern via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the pattern to be
+ * inserted or null if nothing was found.
  */
 export async function searchForPattern( searchTerm ) {
-	await openGlobalBlockInserter();
-	// Select the patterns tab.
-	const tab = await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[.="Patterns"]'
-	);
-	await tab.click();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+	return await searchGlobalInserter( 'Patterns', searchTerm );
 }
 
 /**
- * Search for reusable block in the global inserter.
+ * Searches for a reusable block via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the reusable block to be
+ * inserted or null if nothing was found.
  */
 export async function searchForReusableBlock( searchTerm ) {
-	await openGlobalBlockInserter();
-
-	// The reusable blocks tab won't appear until the reusable blocks have been
-	// fetched. They aren't fetched until an inserter is used or the post
-	// already contains reusable blocks, so wait for the tab to appear.
-	await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[@aria-label="Reusable"]'
-	);
+	return await searchGlobalInserter( 'Reusable', searchTerm );
+}
 
-	// Select the reusable blocks tab.
-	const tab = await page.waitForXPath(
-		'//div[contains(@class, "block-editor-inserter__tabs")]//button[@aria-label="Reusable"]'
-	);
-	await tab.click();
-	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-	await page.focus( INSERTER_SEARCH_SELECTOR );
-	await pressKeyWithModifier( 'primary', 'a' );
-	await page.keyboard.type( searchTerm );
-	await waitForInserterSearch();
+/**
+ * Searches for a Block Directory block via the global inserter.
+ *
+ * @param {string} searchTerm The term to search the inserter for.
+ * @return {Promise<ElementHandle|null>} The handle of the Block Directory block
+ * to be inserted or null if nothing was found.
+ */
+export async function searchForBlockDirectoryBlock( searchTerm ) {
+	return await searchGlobalInserter( 'Block Directory', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given term, then selects the first
- * result that appears. It then waits briefly for the block list to update.
+ * Inserts a block matching a given search term via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the block to insert.
  */
 export async function insertBlock( searchTerm ) {
-	await searchForBlock( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//button//span[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	await insertFromGlobalInserter( 'Blocks', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given pattern, then selects the first
- * result that appears. It then waits briefly for the block list to update.
+ * Inserts a pattern matching a given search term via the global inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the pattern to insert.
  */
 export async function insertPattern( searchTerm ) {
-	await searchForPattern( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//div[@role = 'option']//div[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	await insertFromGlobalInserter( 'Patterns', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given reusable block, then selects the
- * first result that appears. It then waits briefly for the block list to
- * update.
+ * Inserts a reusable block matching a given search term via the global
+ * inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the reusable block to
+ *                            insert.
  */
 export async function insertReusableBlock( searchTerm ) {
-	await searchForReusableBlock( searchTerm );
-	const insertButton = await page.waitForXPath(
-		`//button//span[contains(text(), '${ searchTerm }')]`
-	);
-	await insertButton.click();
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
-	// We should wait until the block is loaded.
-	await page.waitForXPath(
-		'//*[contains(@class,"block-library-block__reusable-block-container")]'
-	);
+	await insertFromGlobalInserter( 'Reusable', searchTerm );
 }
 
 /**
- * Opens the inserter, searches for the given block, then selects the
- * first result that appears from the block directory. It then waits briefly for the block list to
- * update.
+ * Inserts a Block Directory block matching a given search term via the global
+ * inserter.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} searchTerm The term by which to find the Block Directory
+ *                            block to insert.
  */
 export async function insertBlockDirectoryBlock( searchTerm ) {
-	await searchForBlock( searchTerm );
-
-	// Grab the first block in the list.
-	const insertButton = await page.waitForSelector(
-		'.block-directory-downloadable-blocks-list button:first-child'
-	);
-	await insertButton.click();
-	await page.waitForFunction(
-		() =>
-			! document.body.querySelector(
-				'.block-directory-downloadable-blocks-list button:first-child.is-busy'
-			)
-	);
-	await focusSelectedBlock();
-	// We should wait until the inserter closes and the focus moves to the content.
-	await waitForInserterCloseAndContentFocus();
+	return await insertFromGlobalInserter( 'Block Directory', searchTerm );
 }
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 674152746fa9bf..425931ccf9cbca 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -166,11 +166,11 @@ export async function openPreviousGlobalStylesPanel() {
  * Enters edit mode.
  */
 export async function enterEditMode() {
-	const editSiteToggle = await page.$( '.edit-site-layout__edit-button' );
+	const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' );
 	// This check is necessary for the performance tests in old branches
 	// where the site editor toggle was not implemented yet.
 	if ( ! editSiteToggle ) {
 		return;
 	}
-	await page.click( '.edit-site-layout__edit-button' );
+	await page.click( '.edit-site-site-hub__edit-button' );
 }
diff --git a/packages/e2e-tests/assets/small-post-with-containers.html b/packages/e2e-tests/assets/small-post-with-containers.html
new file mode 100644
index 00000000000000..f5d32011602dcd
--- /dev/null
+++ b/packages/e2e-tests/assets/small-post-with-containers.html
@@ -0,0 +1,77 @@
+<!-- wp:columns {"align":"full"} -->
+<div class="wp-block-columns alignfull"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>three</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js
index 549855bf297135..e9928008dd6e3b 100644
--- a/packages/e2e-tests/config/performance-reporter.js
+++ b/packages/e2e-tests/config/performance-reporter.js
@@ -36,6 +36,7 @@ class PerformanceReporter {
 			firstContentfulPaint,
 			firstBlock,
 			type,
+			typeContainer,
 			focus,
 			listViewOpen,
 			inserterOpen,
@@ -68,7 +69,7 @@ Average time to first block: ${ success(
 		if ( type && type.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Typing Performance:' ) }
+${ title( 'Typing:' ) }
 Average time to type character: ${ success( round( average( type ) ) + 'ms' ) }
 Slowest time to type character: ${ success(
 				round( Math.max( ...type ) ) + 'ms'
@@ -78,10 +79,25 @@ Fastest time to type character: ${ success(
 			) }` );
 		}
 
+		if ( typeContainer && typeContainer.length ) {
+			// eslint-disable-next-line no-console
+			console.log( `
+${ title( 'Typing within a container:' ) }
+Average time to type within a container: ${ success(
+				round( average( typeContainer ) ) + 'ms'
+			) }
+Slowest time to type within a container: ${ success(
+				round( Math.max( ...typeContainer ) ) + 'ms'
+			) }
+Fastest time to type within a container: ${ success(
+				round( Math.min( ...typeContainer ) ) + 'ms'
+			) }` );
+		}
+
 		if ( focus && focus.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Block Selection Performance:' ) }
+${ title( 'Block Selection:' ) }
 Average time to select a block: ${ success( round( average( focus ) ) + 'ms' ) }
 Slowest time to select a block: ${ success(
 				round( Math.max( ...focus ) ) + 'ms'
@@ -94,7 +110,7 @@ Fastest time to select a block: ${ success(
 		if ( listViewOpen && listViewOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening List View Performance:' ) }
+${ title( 'Opening List View:' ) }
 Average time to open list view: ${ success(
 				round( average( listViewOpen ) ) + 'ms'
 			) }
@@ -109,7 +125,7 @@ Fastest time to open list view: ${ success(
 		if ( inserterOpen && inserterOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Opening Global Inserter Performance:' ) }
+${ title( 'Opening Global Inserter:' ) }
 Average time to open global inserter: ${ success(
 				round( average( inserterOpen ) ) + 'ms'
 			) }
@@ -124,7 +140,7 @@ Fastest time to open global inserter: ${ success(
 		if ( inserterSearch && inserterSearch.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Search Performance:' ) }
+${ title( 'Inserter Search:' ) }
 Average time to type the inserter search input: ${ success(
 				round( average( inserterSearch ) ) + 'ms'
 			) }
@@ -139,7 +155,7 @@ Fastest time to type the inserter search input: ${ success(
 		if ( inserterHover && inserterHover.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `
-${ title( 'Inserter Block Item Hover Performance:' ) }
+${ title( 'Inserter Block Item Hover:' ) }
 Average time to move mouse between two block item in the inserter: ${ success(
 				round( average( inserterHover ) ) + 'ms'
 			) }
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
deleted file mode 100644
index 9a3924de6d1dab..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/quote.test.js.snap
+++ /dev/null
@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Quote can be converted to a pullquote 1`] = `
-"<!-- wp:pullquote -->
-<figure class=\\"wp-block-pullquote\\"><blockquote><p>one<br>two</p><cite>cite</cite></blockquote></figure>
-<!-- /wp:pullquote -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a paragraph for the cite, if it exists 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders a void paragraph if both the cite and quote are void 1`] = `""`;
-
-exports[`Quote can be converted to paragraphs and renders one paragraph block per <p> within quote 1`] = `
-"<!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be converted to paragraphs and renders only one paragraph for the cite, if the quote is void 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>cite</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be created by converting a heading 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\">test</h2>
-<!-- /wp:heading --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting a paragraph 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by converting multiple paragraphs 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>one</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>two</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing "/quote" 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>I’m a quote</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by typing > in front of text of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>test</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be created by using > at the start of a paragraph block 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>A quote</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Another paragraph</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Quote can be split at the end 1`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Quote can be split at the end 2`] = `
-"<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/quote.test.js b/packages/e2e-tests/specs/editor/blocks/quote.test.js
deleted file mode 100644
index 9b0a4bac546dd3..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/quote.test.js
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyTimes,
-	transformBlockTo,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Quote', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by using > at the start of a paragraph block', async () => {
-		// Create a block with some text that will trigger a list creation.
-		await clickBlockAppender();
-		await page.keyboard.type( '> A quote' );
-
-		// Create a second list item.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Another paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by typing > in front of text of a paragraph block', async () => {
-		// Create a list with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await pressKeyTimes( 'ArrowLeft', 4 );
-		await page.keyboard.type( '> ' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by typing "/quote"', async () => {
-		// Create a list with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/quote' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Quote')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'I’m a quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by converting a paragraph', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by converting multiple paragraphs', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'one' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'two' );
-		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"]' );
-		await page.keyboard.up( 'Shift' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	describe( 'can be converted to paragraphs', () => {
-		it( 'and renders one paragraph block per <p> within quote', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.type( 'one' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'two' );
-			// Navigate to the citation to select the block.
-			await page.keyboard.press( 'ArrowRight' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders a paragraph for the cite, if it exists', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.type( 'one' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'two' );
-			await page.keyboard.press( 'ArrowRight' );
-			await page.keyboard.type( 'cite' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders only one paragraph for the cite, if the quote is void', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.press( 'ArrowRight' );
-			await page.keyboard.type( 'cite' );
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'and renders a void paragraph if both the cite and quote are void', async () => {
-			await insertBlock( 'Quote' );
-			await page.keyboard.press( 'ArrowRight' ); // Select the quote
-			await transformBlockTo( 'Unwrap' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	it( 'can be created by converting a heading', async () => {
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'test' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be converted to a pullquote', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( 'one' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'two' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( 'cite' );
-		await transformBlockTo( 'Pullquote' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be split at the end', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-
-		// Expect empty paragraph outside quote block.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-		// Allow time for selection to update.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		await page.keyboard.type( '2' );
-
-		// Expect the paragraph to be merged into the quote block.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be unwrapped on Backspace', async () => {
-		await insertBlock( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p></p>
-		<!-- /wp:paragraph --></blockquote>
-		<!-- /wp:quote -->"
-	` );
-
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `""` );
-	} );
-
-	it( 'can be unwrapped with content on Backspace', async () => {
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( '2' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p>1</p>
-		<!-- /wp:paragraph --><cite>2</cite></blockquote>
-		<!-- /wp:quote -->"
-	` );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>1</p>
-		<!-- /wp:paragraph -->
-
-		<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><cite>2</cite></blockquote>
-		<!-- /wp:quote -->"
-	` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js b/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
index d1537263968192..2e969d17915924 100644
--- a/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
@@ -166,7 +166,7 @@ const matchUrl = ( reqUrl, urls ) => {
 };
 
 describe( 'adding blocks from block directory', () => {
-	beforeEach( async () => {
+	beforeAll( async () => {
 		await createNewPost();
 	} );
 
diff --git a/packages/e2e-tests/specs/editor/various/a11y.test.js b/packages/e2e-tests/specs/editor/various/a11y.test.js
index cb9b62dbcdf634..1f87cea42fa3c8 100644
--- a/packages/e2e-tests/specs/editor/various/a11y.test.js
+++ b/packages/e2e-tests/specs/editor/various/a11y.test.js
@@ -16,7 +16,9 @@ describe( 'a11y', () => {
 
 	it( 'tabs header bar', async () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
-
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
 		await page.keyboard.press( 'Tab' );
 
 		const isFocusedToggle = await page.$eval(
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 6adcfa2d878bc3..c067ead926a5b7 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
@@ -111,16 +111,14 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Move focus to the sidebar area.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 		await tabToColumnsControl();
 
 		// Tweak the columns count by increasing it by one.
 		await page.keyboard.press( 'ArrowRight' );
 
 		// Navigate to the third column in the columns block.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
 		await pressKeyTimes( 'Tab', 4 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.waitForSelector(
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
index 801919aa9d69bb..de328b87f736d0 100644
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -22,9 +22,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 	it( 'should switch between visual and HTML modes', async () => {
 		// This block should be in "visual" mode by default.
-		let visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		let visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 
 		// Change editing mode from "Visual" to "HTML".
@@ -33,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 		// Wait for the block to be converted to HTML editing mode.
 		const htmlBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
+			'[data-block] .block-editor-block-list__block-html-textarea'
 		);
 		expect( htmlBlock ).toHaveLength( 1 );
 
@@ -42,9 +40,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit visually' );
 
 		// This block should be in "visual" mode by default.
-		visualBlock = await page.$$(
-			'.block-editor-block-list__layout .block-editor-block-list__block.rich-text'
-		);
+		visualBlock = await page.$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 	} );
 
diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
deleted file mode 100644
index f7351450dabd51..00000000000000
--- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-const openFontSizeSelectControl = async () => {
-	const selectControlSelector =
-		"//div[contains(@class, 'components-font-size-picker__controls')]//button[contains(@class, 'components-custom-select-control__button')]";
-	const selectControl = await page.waitForXPath( selectControlSelector );
-	return selectControl.click();
-};
-
-const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
-	"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";
-
-// Click a button by its label - applies when ToggleGroupControl is used.
-const clickFontSizeButtonByLabel = async ( label ) => {
-	const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-label='${ label }']`;
-	const button = await page.waitForXPath( buttonSelector );
-	return button.click();
-};
-
-// Clicks the button to toggle between custom size input and the control for the presets.
-const toggleCustomInput = async ( showCustomInput ) => {
-	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
-	const toggleButton = await page.waitForXPath(
-		`//button[@aria-label='${ label }']`
-	);
-	return toggleButton.click();
-};
-
-const clickCustomInput = async () => {
-	const customInput = await page.waitForXPath( "//input[@type='number']" );
-	return customInput.click();
-};
-
-describe( 'Font Size Picker', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-	describe( 'Common', () => {
-		it( 'should apply a named font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			// This should be the "small" font-size of the editor defaults.
-			await page.keyboard.type( '13' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should apply a custom font size using the font size input', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "small"' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph to be made \\"small\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a custom font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph reset - custom size' );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await page.keyboard.type( '23' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"style\\":{\\"typography\\":{\\"fontSize\\":\\"23px\\"}}} -->
-			<p style=\\"font-size:23px\\">Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await pressKeyTimes( 'Backspace', 2 );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph reset - custom size</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-
-	// A different control is rendered based on the available font sizes number.
-	describe( 'More font sizes', () => {
-		beforeEach( async () => {
-			await page.evaluate( () => {
-				// set a deep `path[]` property in object `obj` to `value`, immutably
-				function setDeep( obj, path, value ) {
-					function doSet( o, i ) {
-						if ( i < path.length ) {
-							const key = path[ i ];
-							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
-						}
-						return value;
-					}
-					return doSet( obj, 0 );
-				}
-
-				wp.data.dispatch( 'core/block-editor' ).updateSettings(
-					setDeep(
-						wp.data.select( 'core/block-editor' ).getSettings(),
-						[
-							'__experimentalFeatures',
-							'typography',
-							'fontSizes',
-							'default',
-						],
-						[
-							{
-								name: 'Tiny',
-								slug: 'tiny',
-								size: '11px',
-							},
-							{
-								name: 'Small',
-								slug: 'small',
-								size: '13px',
-							},
-							{
-								name: 'Medium',
-								slug: 'medium',
-								size: '20px',
-							},
-							{
-								name: 'Large',
-								slug: 'large',
-								size: '36px',
-							},
-							{
-								name: 'Extra Large',
-								slug: 'x-large',
-								size: '42px',
-							},
-							{
-								name: 'Huge',
-								slug: 'huge',
-								size: '48px',
-							},
-						]
-					)
-				);
-			} );
-		} );
-
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 4 );
-			await page.keyboard.press( 'Enter' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 3 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"medium\\"} -->
-			<p class=\\"has-medium-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await openFontSizeSelectControl();
-			await pressKeyTimes( 'ArrowDown', 2 );
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-	describe( 'Few font sizes', () => {
-		it( 'should apply a named font size using the font size buttons', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type( 'Paragraph to be made "large"' );
-
-			await clickFontSizeButtonByLabel( 'Large' );
-			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
-			const [ activeButton ] = await page.$x( buttonSelector );
-			const activeLabel = await page.evaluate(
-				( element ) => element?.getAttribute( 'aria-label' ),
-				activeButton
-			);
-			expect( activeLabel ).toEqual( 'Large' );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-			<p class=\\"has-large-font-size\\">Paragraph to be made \\"large\\"</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using the tools panel menu', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using tools panel menu'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			// Open Typography ToolsPanel, font size will be first in menu and gain focus.
-			await openTypographyToolsPanelMenu();
-
-			await page.keyboard.press( 'Enter' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using tools panel menu</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-
-		it( 'should reset a named font size using input field', async () => {
-			// Create a paragraph block with some content.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				'Paragraph with font size reset using input field'
-			);
-
-			await clickFontSizeButtonByLabel( 'Small' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
-			<p class=\\"has-small-font-size\\">Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-
-			await toggleCustomInput( true );
-			await clickCustomInput();
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-
-			// Disable reason: Wait for changes to apply.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Paragraph with font size reset using input field</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 9a6a432d465a6f..eb64afd1847100 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -23,6 +23,9 @@ const navigateToContentEditorTop = async () => {
 	// Use 'Ctrl+`' to return to the top of the editor.
 	await pressKeyWithModifier( 'ctrl', '`' );
 	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
@@ -36,6 +39,10 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Open document settings' );
+
+	// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
+	await pressKeyWithModifier( 'shift', 'Tab' );
+	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
 };
 
 const tabThroughBlockToolbar = async () => {
diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js
index 39409b0fbeb7bc..2e5d46eec2f7a2 100644
--- a/packages/e2e-tests/specs/editor/various/sidebar.test.js
+++ b/packages/e2e-tests/specs/editor/various/sidebar.test.js
@@ -96,8 +96,6 @@ describe( 'Sidebar', () => {
 
 		// Region navigate to Sidebar.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 
 		// Tab lands at first (presumed selected) option "Post".
 		await page.keyboard.press( 'Tab' );
diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
deleted file mode 100644
index d131ddbbe07425..00000000000000
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	pressKeyWithModifier,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-async function focusBlockToolbar() {
-	await pressKeyWithModifier( 'alt', 'F10' );
-}
-
-async function expectLabelToHaveFocus( label ) {
-	let ariaLabel = await page.evaluate( () =>
-		document.activeElement.getAttribute( 'aria-label' )
-	);
-	// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
-	if ( ariaLabel !== label ) {
-		await page.keyboard.press( 'ArrowUp' );
-		ariaLabel = await page.evaluate( () =>
-			document.activeElement.getAttribute( 'aria-label' )
-		);
-	}
-	await expect( ariaLabel ).toBe( label );
-}
-
-async function testBlockToolbarKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await focusBlockToolbar();
-	await expectLabelToHaveFocus( currentBlockTitle );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( 'Move up' );
-	await page.keyboard.press( 'Tab' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Move up' );
-}
-
-async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
-	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.click( '.editor-block-list-item-group' );
-}
-
-async function testGroupKeyboardNavigation(
-	currentBlockLabel,
-	currentBlockTitle
-) {
-	await expectLabelToHaveFocus( 'Block: Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockLabel );
-	await pressKeyWithModifier( 'shift', 'Tab' );
-	await expectLabelToHaveFocus( 'Select Group' );
-	await page.keyboard.press( 'ArrowRight' );
-	await expectLabelToHaveFocus( currentBlockTitle );
-}
-
-describe( 'Toolbar roving tabindex', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First block' );
-	} );
-
-	it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await testBlockToolbarKeyboardNavigation(
-			'Paragraph block',
-			'Paragraph'
-		);
-		await wrapCurrentBlockWithGroup( 'Paragraph' );
-		await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' );
-	} );
-
-	it( 'ensures heading block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'Heading' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' );
-		await wrapCurrentBlockWithGroup( 'Heading' );
-		await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' );
-	} );
-
-	it( 'ensures list block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List' );
-		await testBlockToolbarKeyboardNavigation( 'List text', 'Select List' );
-		await page.click( `[aria-label="Select List"]` );
-		await wrapCurrentBlockWithGroup( 'List' );
-		await testGroupKeyboardNavigation( 'Block: List', 'List' );
-	} );
-
-	it( 'ensures image block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Image' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' );
-		await wrapCurrentBlockWithGroup( 'Image' );
-		await testGroupKeyboardNavigation( 'Block: Image', 'Image' );
-	} );
-
-	it( 'ensures table block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Table' );
-		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
-		// Move focus to the first toolbar item.
-		await page.keyboard.press( 'Home' );
-		await expectLabelToHaveFocus( 'Table' );
-		await page.click( '.blocks-table__placeholder-button' );
-		await page.keyboard.press( 'Tab' );
-		await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' );
-		await wrapCurrentBlockWithGroup( 'Table' );
-		await testGroupKeyboardNavigation( 'Block: Table', 'Table' );
-	} );
-
-	it( 'ensures custom html block toolbar uses roving tabindex', async () => {
-		await insertBlock( 'Custom HTML' );
-		await testBlockToolbarKeyboardNavigation( 'HTML', 'Custom HTML' );
-		await wrapCurrentBlockWithGroup( 'Custom HTML' );
-		await testGroupKeyboardNavigation(
-			'Block: Custom HTML',
-			'Custom HTML'
-		);
-	} );
-
-	it( 'ensures block toolbar remembers the last focused item', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph' );
-		await focusBlockToolbar();
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Move up' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expectLabelToHaveFocus( 'Move up' );
-	} );
-
-	it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {
-		await pressKeyWithModifier( 'alt', 'F10' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
-		await expectLabelToHaveFocus( 'Bold' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 933b4973fb055e..10699f921be510 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -15,6 +15,7 @@ import {
 	closeGlobalBlockInserter,
 	openListView,
 	closeListView,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -32,6 +33,34 @@ import {
 
 jest.setTimeout( 1000000 );
 
+async function loadHtmlIntoTheBlockEditor( html ) {
+	await page.evaluate( ( _html ) => {
+		const { parse } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = parse( _html );
+
+		blocks.forEach( ( block ) => {
+			if ( block.name === 'core/image' ) {
+				delete block.attributes.id;
+				delete block.attributes.url;
+			}
+		} );
+
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	}, html );
+}
+
+async function load1000Paragraphs() {
+	await page.evaluate( () => {
+		const { createBlock } = window.wp.blocks;
+		const { dispatch } = window.wp.data;
+		const blocks = Array.from( { length: 1000 } ).map( () =>
+			createBlock( 'core/paragraph' )
+		);
+		dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	} );
+}
+
 describe( 'Post Editor Performance', () => {
 	const results = {
 		serverResponse: [],
@@ -41,6 +70,7 @@ describe( 'Post Editor Performance', () => {
 		firstContentfulPaint: [],
 		firstBlock: [],
 		type: [],
+		typeContainer: [],
 		focus: [],
 		listViewOpen: [],
 		inserterOpen: [],
@@ -50,29 +80,6 @@ describe( 'Post Editor Performance', () => {
 	const traceFile = __dirname + '/trace.json';
 	let traceResults;
 
-	beforeAll( async () => {
-		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
-		);
-
-		await createNewPost();
-		await page.evaluate( ( _html ) => {
-			const { parse } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = parse( _html );
-
-			blocks.forEach( ( block ) => {
-				if ( block.name === 'core/image' ) {
-					delete block.attributes.id;
-					delete block.attributes.url;
-				}
-			} );
-
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
-		}, html );
-		await saveDraft();
-	} );
-
 	afterAll( async () => {
 		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
 		writeFileSync(
@@ -83,6 +90,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	beforeEach( async () => {
+		await createNewPost();
 		// Disable auto-save to avoid impacting the metrics.
 		await page.evaluate( () => {
 			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
@@ -93,11 +101,17 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Loading', async () => {
-		// Measuring loading time.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
+		await saveDraft();
 		let i = 5;
 		while ( i-- ) {
 			await page.reload();
-			await page.waitForSelector( '.wp-block' );
+			await page.waitForSelector( '.edit-post-layout', {
+				timeout: 120000,
+			} );
+			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 			const {
 				serverResponse,
 				firstPaint,
@@ -117,7 +131,9 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Typing', async () => {
-		// Measuring typing performance.
+		await loadHtmlIntoTheBlockEditor(
+			readFile( join( __dirname, '../../assets/large-post.html' ) )
+		);
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
@@ -151,18 +167,59 @@ describe( 'Post Editor Performance', () => {
 		}
 	} );
 
-	it( 'Selecting blocks', async () => {
-		// Measuring block selection performance.
-		await createNewPost();
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			const blocks = Array.from( { length: 1000 } ).map( () =>
-				createBlock( 'core/paragraph' )
-			);
-			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+	it( 'Typing within containers', async () => {
+		await loadHtmlIntoTheBlockEditor(
+			readFile(
+				join(
+					__dirname,
+					'../../assets/small-post-with-containers.html'
+				)
+			)
+		);
+		// Select the block where we type in
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().click( 'p[aria-label="Paragraph block"]' );
+		// Ignore firsted typed character because it's different
+		// It probably deserves a dedicated metric.
+		// (isTyping triggers so it's slower)
+		await page.keyboard.type( 'x' );
+
+		let i = 10;
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
 		} );
-		const paragraphs = await page.$$( '.wp-block' );
+
+		while ( i-- ) {
+			// Wait for the browser to be idle before starting the monitoring.
+			// eslint-disable-next-line no-restricted-syntax
+			await page.waitForTimeout( 500 );
+			await page.keyboard.type( 'x' );
+		}
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitForTimeout( 500 );
+		await page.tracing.stop();
+		traceResults = JSON.parse( readFile( traceFile ) );
+		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+			getTypingEventDurations( traceResults );
+		if (
+			keyDownEvents.length === keyPressEvents.length &&
+			keyPressEvents.length === keyUpEvents.length
+		) {
+			// The first character typed triggers a longer time (isTyping change)
+			// It can impact the stability of the metric, so we exclude it.
+			for ( let j = 1; j < keyDownEvents.length; j++ ) {
+				results.typeContainer.push(
+					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				);
+			}
+		}
+	} );
+
+	it( 'Selecting blocks', async () => {
+		await load1000Paragraphs();
+		const paragraphs = await canvas().$$( '.wp-block' );
 		await page.tracing.start( {
 			path: traceFile,
 			screenshots: false,
@@ -182,8 +239,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening persistent list view', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -202,8 +258,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening the inserter', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
+		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
 				path: traceFile,
@@ -225,8 +280,7 @@ describe( 'Post Editor Performance', () => {
 		function sum( arr ) {
 			return arr.reduce( ( a, b ) => a + b, 0 );
 		}
-
-		// Measure time to search the inserter and get results.
+		await load1000Paragraphs();
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
@@ -258,7 +312,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Hovering Inserter Items', async () => {
-		// Measure inserter hover performance.
+		await load1000Paragraphs();
 		const paragraphBlockItem =
 			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
 		const headingBlockItem =
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
index eaa3323b7b16c8..e3a2ef86c69328 100644
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -51,6 +51,7 @@ describe( 'Site Editor Performance', () => {
 			firstContentfulPaint: [],
 			firstBlock: [],
 			type: [],
+			typeContainer: [],
 			focus: [],
 			inserterOpen: [],
 			inserterHover: [],
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
index 592d7781856a4b..2d4d1a396b7250 100644
--- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
@@ -15,6 +15,7 @@ import {
 	visitSiteEditor,
 	enterEditMode,
 	deleteAllTemplates,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Multi-entity save flow', () => {
@@ -94,8 +95,8 @@ describe( 'Multi-entity save flow', () => {
 		it( 'Save flow should work as expected.', async () => {
 			await createNewPost();
 			// Edit the page some.
-			await page.waitForSelector( '.editor-post-title' );
-			await page.click( '.editor-post-title' );
+			await canvas().waitForSelector( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
 
@@ -110,8 +111,8 @@ describe( 'Multi-entity save flow', () => {
 
 			// Add a reusable block and edit it.
 			await createReusableBlock( 'Hi!', 'Test' );
-			await page.waitForSelector( 'p[data-type="core/paragraph"]' );
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().waitForSelector( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'Oh!' );
 
 			// Should trigger multi-entity save button once template part edited.
@@ -169,7 +170,7 @@ describe( 'Multi-entity save flow', () => {
 			} );
 
 			// Update the post.
-			await page.click( '.editor-post-title' );
+			await canvas().click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
@@ -182,9 +183,9 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistence( saveA11ySelector, false );
 
 			// Update reusable block again.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			// We need to click again due to the clickthrough overlays in reusable blocks.
-			await page.click( 'p[data-type="core/paragraph"]' );
+			await canvas().click( 'p[data-type="core/paragraph"]' );
 			await page.keyboard.type( 'R!' );
 
 			// Multi-entity saving should be enabled.
@@ -203,19 +204,19 @@ describe( 'Multi-entity save flow', () => {
 			);
 			const editableSiteTitleSelector =
 				'.wp-block-site-title a[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTitleSelector );
-			await page.focus( editableSiteTitleSelector );
+			await canvas().waitForSelector( editableSiteTitleSelector );
+			await canvas().focus( editableSiteTitleSelector );
 			await page.keyboard.type( '...' );
 
 			await insertBlock( 'Site Tagline' );
 			// Wait for the placeholder.
-			await page.waitForXPath(
+			await canvas().waitForXPath(
 				'//span[@data-rich-text-placeholder="Write site tagline…"]'
 			);
 			const editableSiteTagLineSelector =
 				'.wp-block-site-tagline[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTagLineSelector );
-			await page.focus( editableSiteTagLineSelector );
+			await canvas().waitForSelector( editableSiteTagLineSelector );
+			await canvas().focus( editableSiteTagLineSelector );
 			await page.keyboard.type( 'Just another WordPress site' );
 
 			await clickButton( 'Publish' );
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 993063d2c1e853..43597fb08acd36 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -52,6 +52,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
diff --git a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
index d00361662f1850..c263d993982978 100644
--- a/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
+++ b/packages/edit-post/src/components/editor-initialization/test/listener-hooks.js
@@ -152,6 +152,7 @@ describe( 'listener hook tests', () => {
 		const setAttribute = jest.fn();
 		const mockSelector = jest.fn();
 		beforeEach( () => {
+			// eslint-disable-next-line testing-library/no-node-access
 			document.querySelector = mockSelector.mockReturnValue( {
 				setAttribute,
 			} );
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 31289443436923..911445344febcd 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -35,7 +35,7 @@
 			position: absolute;
 			top: 9px;
 			right: 9px;
-			bottom: 9px;
+			bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
 			left: 9px;
 			border-radius: $radius-block-ui + $border-width + $border-width;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
index d1bb19cf8dd5dc..5a5591704e9ee9 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
+++ b/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
@@ -12,6 +12,8 @@ import {
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
+jest.useFakeTimers();
+
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
 		const { container } = render(
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
index ed15a7eaa5e596..6d27767bdfd0bd 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
@@ -65,18 +65,6 @@ export default function ListViewOutline() {
 	}, [] );
 	return (
 		<>
-			{ headingCount > 0 ? (
-				<DocumentOutline />
-			) : (
-				<div className="edit-post-editor__list-view-empty-headings">
-					<EmptyOutlineIllustration />
-					<p>
-						{ __(
-							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
-						) }
-					</p>
-				</div>
-			) }
 			<div className="edit-post-editor__list-view-overview">
 				<div>
 					<Text>{ __( 'Characters:' ) }</Text>
@@ -93,6 +81,18 @@ export default function ListViewOutline() {
 					<TimeToRead />
 				</div>
 			</div>
+			{ headingCount > 0 ? (
+				<DocumentOutline />
+			) : (
+				<div className="edit-post-editor__list-view-empty-headings">
+					<EmptyOutlineIllustration />
+					<p>
+						{ __(
+							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+						) }
+					</p>
+				</div>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
index 01b17beb4c8b82..50661aa50c30ee 100644
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -76,24 +76,23 @@
 }
 
 .edit-post-editor__list-view-overview {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
+	padding: $grid-unit-20;
+
 	& > div > span:first-child {
 		// Width of the text information fields.
 		width: 90px;
 		display: inline-block;
 	}
-	border-top: $border-width solid $gray-300;
-	width: calc(100% - #{ $grid-unit-40 });
-	padding: $grid-unit-20;
-	& > div {
-		padding: 0 0 $grid-unit-10;
-		& > span {
-			font-size: $helptext-font-size;
-			line-height: $default-line-height;
-			color: $gray-700;
-		}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
 	}
-	// Height of the overview container.
-	height: 72px;
 }
 
 .edit-post-editor__list-view-container {
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 8062e9d51dada3..05ec36b06a1143 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -119,6 +119,7 @@ export default function VisualEditor( { styles } ) {
 		editedPostTemplate = {},
 		wrapperBlockName,
 		wrapperUniqueId,
+		isBlockBasedTheme,
 	} = useSelect( ( select ) => {
 		const {
 			isFeatureActive,
@@ -137,7 +138,8 @@ export default function VisualEditor( { styles } ) {
 			_wrapperBlockName = 'core/post-content';
 		}
 
-		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
+		const editorSettings = getEditorSettings();
+		const supportsTemplateMode = editorSettings.supportsTemplateMode;
 		const canEditTemplate = select( coreStore ).canUser(
 			'create',
 			'templates'
@@ -155,6 +157,7 @@ export default function VisualEditor( { styles } ) {
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
+			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -302,6 +305,21 @@ export default function VisualEditor( { styles } ) {
 		titleRef?.current?.focus();
 	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
 
+	styles = useMemo(
+		() => [
+			...styles,
+			{
+				// We should move this in to future to the body.
+				css:
+					`.edit-post-visual-editor__post-title-wrapper{margin-top:4rem}` +
+					( paddingBottom
+						? `body{padding-bottom:${ paddingBottom }}`
+						: '' ),
+			},
+		],
+		[ styles ]
+	);
+
 	return (
 		<BlockTools
 			__unstableContentRef={ ref }
@@ -336,6 +354,7 @@ export default function VisualEditor( { styles } ) {
 				>
 					<MaybeIframe
 						shouldIframe={
+							( isBlockBasedTheme && ! hasMetaBoxes ) ||
 							isTemplateMode ||
 							deviceType === 'Tablet' ||
 							deviceType === 'Mobile'
@@ -343,7 +362,6 @@ export default function VisualEditor( { styles } ) {
 						contentRef={ contentRef }
 						styles={ styles }
 						assets={ assets }
-						style={ { paddingBottom } }
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&
@@ -370,10 +388,15 @@ export default function VisualEditor( { styles } ) {
 						{ ! isTemplateMode && (
 							<div
 								className={ classnames(
+									// This wrapper div should have the same
+									// classes as the block list beneath.
+									'is-root-container',
+									'block-editor-block-list__layout',
 									'edit-post-visual-editor__post-title-wrapper',
 									{
 										'is-focus-mode': isFocusMode,
-									}
+									},
+									blockListLayoutClass
 								) }
 								contentEditable={ false }
 							>
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 5b7c4e01ead7b1..2ee4dcdab17049 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -10,6 +10,7 @@ import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -115,6 +116,7 @@ export function initializeEditor(
 	}
 
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 900fe4da658db6..0ee6c6c9d938e9 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -6,7 +6,16 @@
 
 ### Breaking Changes
 
--   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235)).
+
+### Enhancements
+
+-   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
+
+### Bug Fix
+
+-   Don't show block inserter when the canvas is view mode ([#46763](https://github.com/WordPress/gutenberg/pull/46763)).
+
 
 ## 4.19.0 (2022-11-16)
 
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 3113654cce02a6..79404053b4471c 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -54,6 +54,7 @@
 		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
+		"@wordpress/widgets": "file:../widgets",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 0f39f771a5d360..5ef1702734aba4 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -153,6 +153,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport;
 	const isViewMode = canvasMode === 'view';
+	const showBlockAppender =
+		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
 	// eslint-disable-next-line @wordpress/data-no-store-string-literals
 	const { enableComplementaryArea } = useDispatch( 'core/interface' );
@@ -243,11 +245,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 									<BlockList
 										className="edit-site-block-editor__block-list wp-site-blocks"
 										__experimentalLayout={ LAYOUT }
-										renderAppender={
-											isTemplatePart && hasBlocks
-												? false
-												: undefined
-										}
+										renderAppender={ showBlockAppender }
 									/>
 								</EditorCanvas>
 							</ResizableEditor>
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 2f2f6264f2e8d8..fe733f49a19590 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -22,7 +22,6 @@ import {
 	EntitiesSavedStates,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -64,8 +63,6 @@ export default function Editor() {
 		isInserterOpen,
 		isListViewOpen,
 		isSaveViewOpen,
-		previousShortcut,
-		nextShortcut,
 		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
@@ -80,9 +77,6 @@ export default function Editor() {
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { getAllShortcutKeyCombinations } = select(
-			keyboardShortcutsStore
-		);
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
@@ -112,12 +106,6 @@ export default function Editor() {
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			previousShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/previous-region'
-			),
-			nextShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/next-region'
-			),
 			showIconLabels: select( preferencesStore ).get(
 				'core/edit-site',
 				'showIconLabels'
@@ -178,6 +166,7 @@ export default function Editor() {
 						<BlockContextProvider value={ blockContext }>
 							<SidebarComplementaryAreaFills />
 							<InterfaceSkeleton
+								enableRegionNavigation={ false }
 								className={
 									showIconLabels && 'show-icon-labels'
 								}
@@ -258,10 +247,6 @@ export default function Editor() {
 										/>
 									)
 								}
-								shortcuts={ {
-									previous: previousShortcut,
-									next: nextShortcut,
-								} }
 								labels={ {
 									...interfaceLabels,
 									secondarySidebar: secondarySidebarLabel,
diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 296a39a5d065d1..5e0ada27ece2db 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -4,25 +4,40 @@
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 const BlockPreviewPanel = ( { name } ) => {
-	const blockExample = getBlockType( name )?.example;
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
+	const blockExample = getBlockType( name )?.example;
+	const blocks = blockExample && getBlockFromExample( name, blockExample );
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
+	const minHeight = containerHeight;
 
 	return ! blockExample ? null : (
-		<div className="edit-site-global-styles__block-preview-panel">
-			{ containerResizeListener }
+		<Spacer marginX={ 4 } marginBottom={ 4 }>
+			<div className="edit-site-global-styles__block-preview-panel">
+				{ containerResizeListener }
 
-			<BlockPreview
-				viewportWidth={ viewportWidth }
-				__experimentalMinHeight={ containerHeight }
-				blocks={ getBlockFromExample( name, blockExample ) }
-			/>
-		</div>
+				<BlockPreview
+					blocks={ blocks }
+					viewportWidth={ viewportWidth }
+					__experimentalMinHeight={ minHeight }
+					__experimentalStyles={ [
+						{
+							css: `
+								body{
+									min-height:${ minHeight }px;
+									display:flex;align-items:center;justify-content:center;
+								}
+							`,
+						},
+					] }
+				/>
+			</div>
+		</Spacer>
 	);
 };
 
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index 420561207b872d..95b746a4c57dcd 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -184,7 +184,6 @@ export default function BorderPanel( { name } ) {
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
 						value={ border }
-						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 						size={ '__unstable-large' }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
index 6c7d3de1cf06e5..61aad940cd372f 100644
--- a/packages/edit-site/src/components/global-styles/custom-css.js
+++ b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -42,6 +42,7 @@ function CustomCSSControl() {
 	return (
 		<>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				value={
 					customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
 					themeCustomCSS
diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
index 0ae154c11b91af..0813dc63b2cb86 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -94,7 +94,7 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles ] );
 
 	const setConfig = useCallback(
-		( callback ) => {
+		( callback, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -105,10 +105,16 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
-			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
-				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings: cleanEmptyObject( updatedConfig.settings ) || {},
-			} );
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+				},
+				options
+			);
 		},
 		[ globalStylesId ]
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index b35b64d03b124e..5693ea97eafd5b 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -96,7 +96,6 @@ function ScreenBackgroundColor( { name } ) {
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				disableCustomGradients={ ! areCustomGradientsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 57860a8623c6ae..9e9d585e88d31d 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,9 +16,7 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<Spacer paddingX={ 4 }>
-				<BlockPreviewPanel name={ name } />
-			</Spacer>
+			<BlockPreviewPanel name={ name } />
 			<ContextMenu
 				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
 				name={ name }
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
index 04a92653f4e102..d2d3707271dede 100644
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBorder( { name } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
@@ -15,6 +16,7 @@ function ScreenBorder( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
index 22ff1ef1307bed..6f6f6288315ef5 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -70,7 +70,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
@@ -87,7 +86,6 @@ function ScreenButtonColor( { name } ) {
 				className="edit-site-screen-button-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index c713cb5ee5818f..ec5cb308b20271 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -20,6 +20,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import BlockPreviewPanel from './block-preview-panel';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -186,6 +187,8 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
index 4a40ebc4d4d80a..425c461700c95c 100644
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js
@@ -132,7 +132,7 @@ function ScreenHeadingColor( { name } ) {
 				>
 					<ToggleGroupControlOption
 						value="heading"
-						/* translators: 'All' refers to selecting all heading levels 
+						/* translators: 'All' refers to selecting all heading levels
 						and applying the same style to h1-h6. */
 						label={ __( 'All' ) }
 					/>
@@ -159,7 +159,6 @@ function ScreenHeadingColor( { name } ) {
 						className="edit-site-screen-heading-text-color__control"
 						colors={ colorsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
@@ -186,7 +185,6 @@ function ScreenHeadingColor( { name } ) {
 						gradients={ gradientsPerOrigin }
 						disableCustomColors={ ! areCustomSolidsEnabled }
 						disableCustomGradients={ ! areCustomGradientsEnabled }
-						__experimentalHasMultipleOrigins
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 3fbc911f5fde79..2909cc34273b21 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenLayout( { name } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
@@ -15,6 +16,7 @@ function ScreenLayout( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
+			<BlockPreviewPanel name={ name } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 2ceb6eee2e5cb8..3b7bcc6e5fe716 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -90,7 +90,6 @@ function ScreenLinkColor( { name } ) {
 								className="edit-site-screen-link-color__control"
 								colors={ colorsPerOrigin }
 								disableCustomColors={ ! areCustomSolidsEnabled }
-								__experimentalHasMultipleOrigins
 								showTitle={ false }
 								enableAlpha
 								__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index ecb68d27b7f4d7..0d7959f59fe95b 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 4c212adfe33475..9439e5ef0c9d8a 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -47,7 +47,6 @@ function ScreenTextColor( { name } ) {
 				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 3f7a5eb3eb8670..49282b73318127 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -17,6 +17,7 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
+import BlockPreviewPanel from './block-preview-panel';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -87,6 +88,8 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
+			<BlockPreviewPanel name={ name } />
+
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>
diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js
index 647b02cb4be1fb..9d0213cb53e554 100644
--- a/packages/edit-site/src/components/global-styles/test/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js
@@ -7,7 +7,8 @@ describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
 		[
 			{
-				message: 'returns value when fluid typography is deactivated',
+				message:
+					'should return value when fluid typography is not active',
 				preset: {
 					size: '28px',
 				},
@@ -16,7 +17,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where font size is 0',
+				message: 'should return value where font size is 0',
 				preset: {
 					size: 0,
 				},
@@ -25,7 +26,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: "returns value where font size is '0'",
+				message: "should return value where font size is '0'",
 				preset: {
 					size: '0',
 				},
@@ -34,7 +35,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value where `size` is `null`.',
+				message: 'should return value where `size` is `null`.',
 				preset: {
 					size: null,
 				},
@@ -43,7 +44,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value when fluid is `false`',
+				message: 'should return value when fluid is `false`',
 				preset: {
 					size: '28px',
 					fluid: false,
@@ -55,7 +56,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns already clamped value',
+				message: 'should return already clamped value',
 				preset: {
 					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 					fluid: false,
@@ -68,7 +69,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with unsupported unit',
+				message: 'should return value with unsupported unit',
 				preset: {
 					size: '1000%',
 					fluid: false,
@@ -80,7 +81,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with rem min and max units',
+				message: 'should return clamp value with rem min and max units',
 				preset: {
 					size: '1.75rem',
 				},
@@ -92,7 +93,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with eem min and max units',
+				message: 'should return clamp value with eem min and max units',
 				preset: {
 					size: '1.75em',
 				},
@@ -104,7 +105,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value for floats',
+				message: 'should return clamp value for floats',
 				preset: {
 					size: '100.175px',
 				},
@@ -116,7 +117,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces integer to `px` and returns clamp value',
+				message:
+					'should coerce integer to `px` and returns clamp value',
 				preset: {
 					size: 33,
 					fluid: true,
@@ -129,7 +131,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'coerces float to `px` and returns clamp value',
+				message: 'should coerce float to `px` and returns clamp value',
 				preset: {
 					size: 100.23,
 					fluid: true,
@@ -142,7 +144,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is empty array',
+				message:
+					'should return clamp value when `fluid` is empty array',
 				preset: {
 					size: '28px',
 					fluid: [],
@@ -155,7 +158,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value when `fluid` is `null`',
+				message: 'should return clamp value when `fluid` is `null`',
 				preset: {
 					size: '28px',
 					fluid: null,
@@ -169,7 +172,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value if min font size is greater than max',
+					'should return clamp value if min font size is greater than max',
 				preset: {
 					size: '3rem',
 					fluid: {
@@ -185,7 +188,7 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns value with invalid min/max fluid units',
+				message: 'should return value with invalid min/max fluid units',
 				preset: {
 					size: '10em',
 					fluid: {
@@ -201,7 +204,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is < lower bounds and no fluid min/max set',
+					'should return value when size is < lower bounds and no fluid min/max set',
 				preset: {
 					size: '3px',
 				},
@@ -213,7 +216,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns value when size is equal to lower bounds and no fluid min/max set',
+					'should return value when size is equal to lower bounds and no fluid min/max set',
 				preset: {
 					size: '14px',
 				},
@@ -224,7 +227,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value with different min max units',
+				message:
+					'should return clamp value with different min max units',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -240,7 +244,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid max size is set',
+				message:
+					'should return clamp value where no fluid max size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -255,7 +260,8 @@ describe( 'typography utils', () => {
 			},
 
 			{
-				message: 'returns clamp value where no fluid min size is set',
+				message:
+					'should return clamp value where no fluid min size is set',
 				preset: {
 					size: '28px',
 					fluid: {
@@ -320,7 +326,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'returns clamp value when min and max font sizes are equal',
+					'should return clamp value when min and max font sizes are equal',
 				preset: {
 					size: '4rem',
 					fluid: {
@@ -333,8 +339,51 @@ describe( 'typography utils', () => {
 				},
 				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
 			},
+
+			{
+				message:
+					'should use default min font size value where min font size unit in fluid config is not supported',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16%',
+					},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+			},
+
+			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
+			{
+				message: 'should return clamp value using custom fluid config',
+				preset: {
+					size: '17px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)',
+			},
+
+			{
+				message:
+					'should return value when font size <= custom min font size bound',
+				preset: {
+					size: '15px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+					},
+				},
+				expected: '15px',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
-			it( `should ${ message }`, () => {
+			it( `${ message }`, () => {
 				expect(
 					getTypographyFontSizeValue( preset, typographySettings )
 				).toBe( expected );
diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js
index a792d1875005c2..5720fdeb6ce91e 100644
--- a/packages/edit-site/src/components/global-styles/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/typography-utils.js
@@ -23,13 +23,23 @@ import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
  * @property {boolean|FluidPreset|undefined} fluid A font size slug
  */
 
+/**
+ * @typedef {Object} TypographySettings
+ * @property {?string|?number} size              A default font size.
+ * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ */
+
 /**
  * Returns a font-size value based on a given font-size preset.
  * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
  *
- * @param {Preset}  preset
- * @param {Object}  typographySettings
- * @param {boolean} typographySettings.fluid Whether fluid typography is enabled.
+ * @param {Preset}                     preset
+ * @param {Object}                     typographySettings
+ * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */
@@ -44,7 +54,11 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
-	if ( true !== typographySettings?.fluid ) {
+	if (
+		! typographySettings?.fluid ||
+		( typeof typographySettings?.fluid === 'object' &&
+			Object.keys( typographySettings.fluid ).length === 0 )
+	) {
 		return defaultSize;
 	}
 
@@ -53,10 +67,16 @@ export function getTypographyFontSizeValue( preset, typographySettings ) {
 		return defaultSize;
 	}
 
+	const fluidTypographySettings =
+		typeof typographySettings?.fluid === 'object'
+			? typographySettings?.fluid
+			: {};
+
 	const fluidFontSizeValue = getComputedFluidTypographyValue( {
 		minimumFontSize: preset?.fluid?.min,
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 06940becaf7ec1..14f3b868294172 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -86,7 +86,7 @@ export const PRESET_METADATA = [
 	},
 ];
 
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
@@ -100,6 +100,15 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'typography.fontFamily': 'font-family',
 };
 
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
 function findInPresetsBy(
 	features,
 	blockName,
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index b829e19f01342a..30acc5fe04d443 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -25,16 +25,13 @@ import {
 	useBlockDisplayInformation,
 	BlockIcon,
 } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import TemplateDetails from '../../template-details';
-import { store as editSiteStore } from '../../../store';
+import useEditedEntityRecord from '../../use-edited-entity-record';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -70,36 +67,15 @@ function useSecondaryText() {
 }
 
 export default function DocumentActions() {
-	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-			const postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const record = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
-			const _isLoaded = !! postId;
-
-			return {
-				showIconLabels: select( preferencesStore ).get(
-					'core/edit-site',
-					'showIconLabels'
-				),
-				entityTitle: getTemplateInfo( record ).title,
-				isLoaded: _isLoaded,
-				template: record,
-				templateType: postType,
-			};
-		}, [] );
-
-	const entityLabel =
-		templateType === 'wp_template_part' ? 'template part' : 'template';
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
+		[]
+	);
+	const { isLoaded, record, getTitle } = useEditedEntityRecord();
 	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,7 +102,7 @@ export default function DocumentActions() {
 	}
 
 	// Return feedback that the template does not seem to exist.
-	if ( ! entityTitle ) {
+	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Template not found' ) }
@@ -134,6 +110,11 @@ export default function DocumentActions() {
 		);
 	}
 
+	const entityLabel =
+		record.type === 'wp_template_part'
+			? __( 'template part' )
+			: __( 'template' );
+
 	return (
 		<div
 			className={ classnames( 'edit-site-document-actions', {
@@ -156,7 +137,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
+					{ getTitle() }
 				</Text>
 				<div className="edit-site-document-actions__secondary-item">
 					<BlockIcon icon={ icon } showColors />
@@ -186,7 +167,7 @@ export default function DocumentActions() {
 					contentClassName="edit-site-document-actions__info-dropdown"
 					renderContent={ ( { onClose } ) => (
 						<TemplateDetails
-							template={ template }
+							template={ record }
 							onClose={ onClose }
 						/>
 					) }
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 32b3e17912ee97..d26bad43e356da 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -10,6 +10,7 @@ $header-toolbar-min-width: 335px;
 	width: 100%;
 	justify-content: space-between;
 	border-bottom: $border-width solid $gray-200;
+	padding-left: $header-height;
 
 	.edit-site-header-edit-mode__start {
 		display: flex;
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 150f2d9cce882d..0868e08bae289c 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -6,12 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
-	Button,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
+	__unstableUseNavigateRegions as useNavigateRegions,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -19,14 +18,14 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
  */
-import { Sidebar } from '../sidebar';
+import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
@@ -34,9 +33,8 @@ import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
-import SiteIcon from '../site-icon';
-import SiteTitle from '../site-title';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import SiteHub from '../site-hub';
 
 const ANIMATION_DURATION = 0.5;
 
@@ -47,17 +45,28 @@ export default function Layout( { onError } ) {
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, dashboardLink } = useSelect(
-		( select ) => ( {
-			canvasMode: select( editSiteStore ).__unstableGetCanvasMode(),
-			dashboardLink:
-				select( editSiteStore ).getSettings()
-					.__experimentalDashboardLink,
-		} ),
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { __unstableGetCanvasMode } = select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/edit-site/next-region'
+				),
+			};
+		},
 		[]
 	);
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const navigateRegionsProps = useNavigateRegions( {
+		previous: previousShortcut,
+		next: nextShortcut,
+	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
@@ -70,14 +79,10 @@ export default function Layout( { onError } ) {
 		( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
 	const showFrame =
 		! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
-	const showEditButton =
-		isEditorPage &&
-		isMobileViewport &&
-		canvasMode === 'view' &&
+
+	const isFullCanvas =
+		( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
 		isMobileCanvasVisible;
-	const isBackToDashboardButton =
-		( ! isMobileViewport && canvasMode === 'view' ) ||
-		( isMobileViewport && ! isMobileCanvasVisible );
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
@@ -90,94 +95,44 @@ export default function Layout( { onError } ) {
 			setIsMobileCanvasVisible( true );
 		}
 	}, [ canvasMode, isMobileViewport ] );
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setIsMobileCanvasVisible( false );
-					__unstableSetCanvasMode( 'view' );
-				},
-		  };
 
 	return (
 		<>
 			{ fullResizer }
 			<div
-				className={ classnames( 'edit-site-layout', {
-					'is-full-canvas':
-						( isEditorPage &&
-							canvasMode === 'edit' &&
-							! isMobileViewport ) ||
-						isMobileCanvasVisible,
-				} ) }
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
+				className={ classnames(
+					'edit-site-layout',
+					navigateRegionsProps.className,
+					{
+						'is-full-canvas': isFullCanvas,
+						'is-edit-mode': canvasMode === 'edit',
+					}
+				) }
 			>
-				<div className="edit-site-layout__header">
-					<div className="edit-site-layout__logo">
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-						<AnimatePresence initial={ false }>
-							{ ( isBackToDashboardButton || showEditButton ) && (
-								<motion.div
-									initial={ { opacity: 0 } }
-									exit={ { opacity: 0 } }
-									animate={ { opacity: 1 } }
-									style={ {
-										position: 'absolute',
-										left: 60,
-									} }
-								>
-									<HStack>
-										{ isBackToDashboardButton && (
-											<SiteTitle />
-										) }
+				<SiteHub
+					className="edit-site-layout__hub"
+					isMobileCanvasVisible={ isMobileCanvasVisible }
+					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
+				/>
 
-										{ showEditButton && (
-											<Button
-												className="edit-site-layout__edit-button"
-												label={ __(
-													'Open the editor'
-												) }
-												onClick={ () => {
-													__unstableSetCanvasMode(
-														'edit'
-													);
-												} }
-											>
-												{ __( 'Edit' ) }
-											</Button>
-										) }
-									</HStack>
-								</motion.div>
-							) }
-						</AnimatePresence>
-
-						{ isMobileViewport && ! isMobileCanvasVisible && (
-							<Button
-								onClick={ () =>
-									setIsMobileCanvasVisible( true )
-								}
-								style={ { position: 'fixed', right: 0 } }
-							>
-								{ __( 'View Editor' ) }
-							</Button>
-						) }
-					</div>
-					<AnimatePresence>
-						{ isEditorPage && canvasMode === 'edit' && (
+				<AnimatePresence initial={ false }>
+					{ isEditorPage &&
+						( canvasMode === 'edit' || isMobileCanvasVisible ) && (
 							<NavigableRegion
+								className="edit-site-layout__header"
+								ariaLabel={ __( 'Editor top bar' ) }
 								as={ motion.div }
-								initial={ { y: -60 } }
-								animate={ { y: 0 } }
-								exit={ { y: -60 } }
+								animate={ {
+									y: 0,
+								} }
+								initial={ {
+									y: '-100%',
+								} }
+								exit={ {
+									y: '-100%',
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
@@ -185,55 +140,26 @@ export default function Layout( { onError } ) {
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
-								className="edit-site-layout__editor-header"
-								ariaLabel={ __( 'Editor top bar' ) }
 							>
-								<Header />
+								{ canvasMode === 'edit' && <Header /> }
 							</NavigableRegion>
 						) }
-					</AnimatePresence>
-				</div>
-
-				<AnimatePresence initial={ false }>
-					{ showSidebar && (
-						<motion.div
-							initial={ {
-								opacity: 0,
-							} }
-							animate={ {
-								opacity: 1,
-							} }
-							exit={ {
-								opacity: 0,
-							} }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-							className="edit-site-layout__sidebar"
-						>
-							<Sidebar />
-						</motion.div>
-					) }
 				</AnimatePresence>
 
-				{ showCanvas && (
-					<div
-						className="edit-site-layout__canvas-container"
-						style={ {
-							paddingTop: showFrame ? canvasPadding : 0,
-							paddingBottom: showFrame ? canvasPadding : 0,
-						} }
-					>
-						{ canvasResizer }
-						{ !! canvasSize.width && (
-							<motion.div
-								initial={ false }
-								layout="position"
-								className="edit-site-layout__canvas"
+				<div className="edit-site-layout__content">
+					<AnimatePresence initial={ false }>
+						{ showSidebar && (
+							<NavigableRegion
+								as={ motion.div }
+								initial={ {
+									opacity: 0,
+								} }
+								animate={ {
+									opacity: 1,
+								} }
+								exit={ {
+									opacity: 0,
+								} }
 								transition={ {
 									type: 'tween',
 									duration: disableMotion
@@ -241,20 +167,28 @@ export default function Layout( { onError } ) {
 										: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
+								className="edit-site-layout__sidebar"
+								ariaLabel={ __( 'Navigation sidebar' ) }
 							>
+								<Sidebar />
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
+
+					{ showCanvas && (
+						<div
+							className="edit-site-layout__canvas-container"
+							style={ {
+								paddingTop: showFrame ? canvasPadding : 0,
+								paddingBottom: showFrame ? canvasPadding : 0,
+							} }
+						>
+							{ canvasResizer }
+							{ !! canvasSize.width && (
 								<motion.div
-									style={ {
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										bottom: 0,
-									} }
 									initial={ false }
-									animate={ {
-										width: showFrame
-											? canvasSize.width - canvasPadding
-											: fullSize.width,
-									} }
+									layout="position"
+									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
 										duration: disableMotion
@@ -263,15 +197,38 @@ export default function Layout( { onError } ) {
 										ease: 'easeOut',
 									} }
 								>
-									<ErrorBoundary onError={ onError }>
-										{ isEditorPage && <Editor /> }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
+									<motion.div
+										style={ {
+											position: 'absolute',
+											top: 0,
+											left: 0,
+											bottom: 0,
+										} }
+										initial={ false }
+										animate={ {
+											width: showFrame
+												? canvasSize.width -
+												  canvasPadding
+												: fullSize.width,
+										} }
+										transition={ {
+											type: 'tween',
+											duration: disableMotion
+												? 0
+												: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+									>
+										<ErrorBoundary onError={ onError }>
+											{ isEditorPage && <Editor /> }
+											{ isListPage && <ListPage /> }
+										</ErrorBoundary>
+									</motion.div>
 								</motion.div>
-							</motion.div>
-						) }
-					</div>
-				) }
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</>
 	);
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 4e92e6c0a57fb8..24bb0b77688e71 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -1,83 +1,96 @@
+$hub-height: $grid-unit-20 * 2 + $button-size;
+
 .edit-site-layout {
-	min-height: 100%;
+	height: 100%;
 	background: $gray-900;
 	color: $white;
 	display: flex;
 	flex-direction: column;
-	@include break-small {
-		display: grid;
-		grid-template-columns: 320px 1fr;
-		grid-template-rows: auto 1fr;
-		grid-template-areas:
-			"header canvas"
-			"sidebar canvas";
-
-		&.is-full-canvas {
-			grid-template-areas:
-				"header header"
-				"canvas canvas";
+}
+
+.edit-site-layout__hub {
+	position: fixed;
+	top: $canvas-padding;
+	left: $canvas-padding;
+	width: calc(100vw - #{$canvas-padding * 2});
+	height: $hub-height;
+	z-index: z-index(".edit-site-layout__hub");
+
+	background: $black;
+	padding: $grid-unit-20;
+	padding-left: 0;
+	border-radius: $radius-block-ui * 4;
+	box-shadow: $shadow-modal;
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		left: 0;
+		padding: 0;
+		padding-right: $grid-unit-20;
+		height: $header-height;
+		border-radius: 0;
+		width: 100vw;
+		box-shadow: none;
+
+		@include break-medium {
+			width: auto;
+			padding-right: 0;
 		}
 	}
-}
 
-.edit-site-layout__header {
-	grid-area: header;
-	height: $header-height;
-	display: flex;
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		width: auto;
+		padding-right: 0;
+	}
+
+	@include break-medium {
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+	}
 }
 
-.edit-site-layout__logo {
-	align-items: center;
+.edit-site-layout__header {
 	height: $header-height;
 	display: flex;
-	justify-content: space-between;
+	z-index: z-index(".edit-site-layout__header");
 
-	.components-button {
-		color: currentColor;
+	// This is only necessary for the exit animation
+	.edit-site-layout:not(.is-full-canvas) & {
+		position: fixed;
+		width: 100vw;
 	}
 }
 
-.edit-site-layout__edit-button {
-	background: $gray-800;
-	/* Overrides the color for all states of the button */
-	color: inherit !important;
+.edit-site-layout__content {
+	flex-grow: 1;
+	display: flex;
+
+	// Hide scrollbars during the edit/view animation.
+	overflow: hidden;
 }
 
 .edit-site-layout__sidebar {
-	grid-area: sidebar;
-	z-index: 1;
+	z-index: z-index(".edit-site-layout__sidebar");
 	overflow-y: auto;
-	max-height: calc(100vh - #{$header-height});
+	width: 100vw;
 	@include custom-scrollbars-on-hover;
 
-	// This is only necessary for the exit animation
-	.edit-site-layout.is-full-canvas & {
-		display: none;
-		@include break-small {
-			display: block;
-			grid-area: header;
-			position: absolute;
-			top: 60px;
-		}
+	@include break-medium {
+		width: $nav-sidebar-width;
 	}
-}
-
-.edit-site-layout__editor-header {
-	flex-grow: 1;
 
 	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
+	.edit-site-layout.is-full-canvas & {
 		position: fixed;
-		left: 60px;
-		right: 0;
+		height: 100vh;
+		left: 0;
+		top: 0;
 	}
 }
 
 .edit-site-layout__canvas-container {
-	grid-area: canvas;
 	position: relative;
 	flex-grow: 1;
-	z-index: 2;
+	z-index: z-index(".edit-site-layout__canvas-container");
 }
 
 .edit-site-layout__canvas {
@@ -92,7 +105,7 @@
 		color: $gray-900;
 		background: $white;
 	}
-	@include break-small {
+	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
 		width: calc(100% - #{$canvas-padding});
@@ -124,11 +137,14 @@
 
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
-	background: $gray-900;
 	color: $white;
-	height: calc(100% + #{$border-width});
-	border-radius: 0;
-	margin-bottom: -$border-width;
+	height: 100%;
+	width: 100%;
+	border-radius: $radius-block-ui;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	&:hover,
 	&:active {
@@ -150,15 +166,6 @@
 		bottom: 9px;
 		left: 9px;
 		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-	}
-
-	// Hover color.
-	&:hover::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-	}
-
-	&.has-icon:hover::before {
 		box-shadow: none;
 	}
 
@@ -170,7 +177,7 @@
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {
+		display: flex;
 		border-radius: $radius-block-ui;
-		object-fit: cover;
 	}
 }
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index b8c8f2be27db1a..c3359b752fc053 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -44,18 +44,11 @@
 		.interface-interface-skeleton__content {
 			background: $white;
 			padding: $grid-unit-20;
-
-			.interface-navigable-region__stacker {
-				align-items: center;
-			}
+			align-items: center;
 
 			@include break-medium() {
 				padding: $grid-unit * 9;
 			}
-
-			& > .interface-navigable-region__stacker {
-				height: auto;
-			}
 		}
 	}
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index 12073a77b56e03..54a1901c83b8da 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -69,7 +69,7 @@ export function SidebarComplementaryAreaFills() {
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
 	let MaybeNavigationMenuSidebar = Fragment;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
 	}
 
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
index 86e7d334318cc3..89a66bd6c73592 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
@@ -3,6 +3,7 @@
  */
 import {
 	__experimentalListView as ListView,
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -48,5 +49,14 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
+
+	if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
+		return (
+			<OffCanvasEditor
+				blocks={ innerBlocks }
+				selectBlockInCanvas={ false }
+			/>
+		);
+	}
 	return <ListView id={ id } />;
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 622eb70a951aa0..e7faaa2eca4df1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -3,50 +3,22 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
 	__experimentalNavigatorButton as NavigatorButton,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { layout, symbolFilled } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 
 export default function SidebarNavigationScreenMain() {
-	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	return (
 		<SidebarNavigationScreen
 			path="/"
-			title={
-				<HStack justify="space-between" style={ { minHeight: 36 } }>
-					<div>{ __( 'Design' ) }</div>
-					{ ! isMobileViewport && isEditorPage && (
-						<Button
-							className="edit-site-layout__edit-button"
-							label={ __( 'Open the editor' ) }
-							onClick={ () => {
-								__unstableSetCanvasMode( 'edit' );
-							} }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					) }
-				</HStack>
-			}
+			title={ __( 'Design' ) }
 			content={
 				<ItemGroup>
 					<NavigatorButton
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 5360b3c7447ac7..d1b818bf380df7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -4,10 +4,9 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
-	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
@@ -20,7 +19,6 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 import AddNewTemplate from '../add-new-template';
 
 function omit( object, keys ) {
@@ -62,10 +60,7 @@ export default function SidebarNavigationScreenTemplates( {
 	postType = 'wp_template',
 } ) {
 	const { params } = useLocation();
-	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params );
-	const isEditorPage = ! isListPage;
 
 	// Ideally the URL params would be enough.
 	// Loading the editor should ideally redirect to the home page
@@ -125,31 +120,18 @@ export default function SidebarNavigationScreenTemplates( {
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
 			title={
-				<HStack style={ { minHeight: 36 } } justify="space-between">
+				<HStack justify="space-between">
 					<div style={ { flexShrink: 0 } }>
 						{ config[ postType ].labels.title }
 					</div>
 					{ ! isMobileViewport && (
-						<HStack spacing={ 2 } justify="right">
-							<AddNewTemplate
-								templateType={ postType }
-								toggleProps={ {
-									className:
-										'edit-site-sidebar-navigation-screen-templates__add-button',
-								} }
-							/>
-							{ isEditorPage && (
-								<Button
-									className="edit-site-layout__edit-button"
-									label={ __( 'Open the editor' ) }
-									onClick={ () => {
-										__unstableSetCanvasMode( 'edit' );
-									} }
-								>
-									{ __( 'Edit' ) }
-								</Button>
-							) }
-						</HStack>
+						<AddNewTemplate
+							templateType={ postType }
+							toggleProps={ {
+								className:
+									'edit-site-sidebar-navigation-screen-templates__add-button',
+							} }
+						/>
 					) }
 				</HStack>
 			}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 91c64bbd4c3ad2..0b5e056b7bebeb 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -6,16 +6,14 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	margin: 0 $grid-unit-20 0 $button-size;
-	flex-grow: 1;
-	overflow-y: auto;
+	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
 }
 
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-80;
+	padding-top: $grid-unit-60 + $hub-height + $canvas-padding * 2;
 	box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 06abec6f024cac..1a0f2bcfb6f2b8 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
 
 /**
@@ -22,7 +23,7 @@ function SidebarScreens() {
 	);
 }
 
-export function Sidebar() {
+function Sidebar() {
 	return (
 		<NavigatorProvider
 			className="edit-site-sidebar__content"
@@ -32,3 +33,5 @@ export function Sidebar() {
 		</NavigatorProvider>
 	);
 }
+
+export default memo( Sidebar );
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
new file mode 100644
index 00000000000000..6f6112985d598b
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__unstableMotion as motion,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
+import getIsListPage from '../../utils/get-is-list-page';
+import SiteIcon from '../site-icon';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const HUB_ANIMATION_DURATION = 0.3;
+
+function SiteHub( {
+	className,
+	isMobileCanvasVisible,
+	setIsMobileCanvasVisible,
+} ) {
+	const { params } = useLocation();
+	const isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { canvasMode, dashboardLink, entityConfig } = useSelect(
+		( select ) => {
+			select( editSiteStore ).getEditedPostType();
+			const { __unstableGetCanvasMode, getSettings, getEditedPostType } =
+				select( editSiteStore );
+			return {
+				canvasMode: __unstableGetCanvasMode(),
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				entityConfig: select( coreStore ).getEntityConfig(
+					'postType',
+					getEditedPostType()
+				),
+			};
+		},
+		[]
+	);
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const showEditButton =
+		( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
+		( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
+	const isBackToDashboardButton =
+		( ! isMobileViewport && canvasMode === 'view' ) ||
+		( isMobileViewport && ! isMobileCanvasVisible );
+	const showLabels = canvasMode !== 'edit';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink || 'index.php',
+				'aria-label': __( 'Go back to the dashboard' ),
+		  }
+		: {
+				label: __( 'Open Navigation Sidebar' ),
+				onClick: () => {
+					clearSelectedBlock();
+					setIsMobileCanvasVisible( false );
+					__unstableSetCanvasMode( 'view' );
+				},
+		  };
+	const { getTitle } = useEditedEntityRecord();
+
+	return (
+		<motion.div
+			className={ classnames( 'edit-site-site-hub', className ) }
+			layout
+			transition={ {
+				type: 'tween',
+				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+				ease: 'easeOut',
+			} }
+		>
+			<HStack
+				justify="flex-start"
+				className="edit-site-site-hub__text-content"
+			>
+				<motion.div
+					className="edit-site-site-hub__view-mode-toggle-container"
+					layout
+					transition={ {
+						type: 'tween',
+						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+						ease: 'easeOut',
+					} }
+				>
+					<Button
+						{ ...siteIconButtonProps }
+						className="edit-site-layout__view-mode-toggle"
+					>
+						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+					</Button>
+				</motion.div>
+
+				{ showLabels && (
+					<VStack spacing={ 0 }>
+						<div className="edit-site-site-hub__title">
+							{ getTitle() }
+						</div>
+						<div className="edit-site-site-hub__post-type">
+							{ entityConfig?.label }
+						</div>
+					</VStack>
+				) }
+			</HStack>
+
+			{ showEditButton && (
+				<Button
+					className="edit-site-site-hub__edit-button"
+					label={ __( 'Open the editor' ) }
+					onClick={ () => {
+						__unstableSetCanvasMode( 'edit' );
+					} }
+					variant="primary"
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			) }
+
+			{ isMobileViewport && ! isMobileCanvasVisible && (
+				<Button
+					onClick={ () => setIsMobileCanvasVisible( true ) }
+					variant="primary"
+				>
+					{ __( 'View Editor' ) }
+				</Button>
+			) }
+		</motion.div>
+	);
+}
+
+export default SiteHub;
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
new file mode 100644
index 00000000000000..51bb78a75a1d3f
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -0,0 +1,31 @@
+.edit-site-site-hub {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+}
+
+.edit-site-site-hub__edit-button {
+	height: $grid-unit-40;
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
+}
+
+.edit-site-site-hub__title {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
diff --git a/packages/edit-site/src/components/site-title/index.js b/packages/edit-site/src/components/site-title/index.js
deleted file mode 100644
index 5af253ab916742..00000000000000
--- a/packages/edit-site/src/components/site-title/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
-
-function SiteTitle( { className } ) {
-	const { isRequestingSite, siteTitle } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteTitle: siteData.name,
-		};
-	}, [] );
-
-	if ( isRequestingSite && ! siteTitle ) {
-		return null;
-	}
-
-	return (
-		<div className={ classnames( className, 'edit-site-site-title' ) }>
-			{ siteTitle }
-		</div>
-	);
-}
-
-export default SiteTitle;
diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js
new file mode 100644
index 00000000000000..5d72877095782e
--- /dev/null
+++ b/packages/edit-site/src/components/use-edited-entity-record/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function useEditedEntityRecord() {
+	const { record, title, isLoaded } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
+		const postType = getEditedPostType();
+		const postId = getEditedPostId();
+		const _record = getEditedEntityRecord( 'postType', postType, postId );
+		const _isLoaded = !! postId;
+
+		return {
+			record: _record,
+			title: getTemplateInfo( _record ).title,
+			isLoaded: _isLoaded,
+		};
+	}, [] );
+
+	return {
+		isLoaded,
+		record,
+		getTitle: () => ( title ? decodeEntities( title ) : null ),
+	};
+}
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 1f7196dd2256c8..513634c55b8f01 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -2,4 +2,5 @@
  * Internal dependencies
  */
 import './components';
+import './push-changes-to-global-styles';
 import './template-part-edit';
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
new file mode 100644
index 00000000000000..70b9fa1b02f8ea
--- /dev/null
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { GlobalStylesContext } from '../../components/global-styles/context';
+import {
+	STYLE_PATH_TO_CSS_VAR_INFIX,
+	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+} from '../../components/global-styles/utils';
+
+function getChangesToPush( name, attributes ) {
+	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
+		if ( ! STYLE_PROPERTY[ key ] ) {
+			return [];
+		}
+		const { value: path } = STYLE_PROPERTY[ key ];
+		const presetAttributeKey = path.join( '.' );
+		const presetAttributeValue =
+			attributes[
+				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+			];
+		const value = presetAttributeValue
+			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+			: get( attributes.style, path );
+		return value ? [ { path, value } ] : [];
+	} );
+}
+
+function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const changes = useMemo(
+		() => getChangesToPush( name, attributes ),
+		[ name, attributes ]
+	);
+
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		const { style: blockStyles } = attributes;
+
+		const newBlockStyles = cloneDeep( blockStyles );
+		const newUserConfig = cloneDeep( userConfig );
+
+		for ( const { path, value } of changes ) {
+			set( newBlockStyles, path, undefined );
+			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+		}
+
+		// @wordpress/core-data doesn't support editing multiple entity types in
+		// a single undo level. So for now, we disable @wordpress/core-data undo
+		// tracking and implement our own Undo button in the snackbar
+		// notification.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { style: newBlockStyles } );
+		setUserConfig( () => newUserConfig, { undoIgnore: true } );
+
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( 'Pushed styles to all %s blocks.' ),
+				getBlockType( name ).title
+			),
+			{
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Undo' ),
+						onClick() {
+							__unstableMarkNextChangeAsNotPersistent();
+							setAttributes( { style: blockStyles } );
+							setUserConfig( () => userConfig, {
+								undoIgnore: true,
+							} );
+						},
+					},
+				],
+			}
+		);
+	}, [ changes, attributes, userConfig, name ] );
+
+	return (
+		<BaseControl
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				variant="primary"
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Push changes to Global Styles' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) =>
+		(
+			<>
+				<BlockEdit { ...props } />
+				<InspectorAdvancedControls>
+					<PushChangesToGlobalStylesControl { ...props } />
+				</InspectorAdvancedControls>
+			</>
+		)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);
diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss b/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
new file mode 100644
index 00000000000000..33767f4879a401
--- /dev/null
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss
@@ -0,0 +1,4 @@
+.edit-site-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 4b619f7aac9a97..d2cbb2f4aa04d2 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -16,6 +16,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { addFilter } from '@wordpress/hooks';
+import { registerLegacyWidgetBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -109,6 +110,7 @@ export function initializeEditor( id, settings ) {
 
 	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
 	registerCoreBlocks();
+	registerLegacyWidgetBlock( { inserter: false } );
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index be5b51e16ea084..b98f6b817e368c 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -22,8 +22,10 @@
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/site-hub/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {
 	display: none;
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index f2de9ed80a0201..50b988b666d0af 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/packages/editor/src/components/editor-help/index.native.js
@@ -57,7 +57,7 @@ const HELP_TOPICS = [
 	},
 ];
 
-function EditorHelpTopics( { close, isVisible, onClose } ) {
+function EditorHelpTopics( { close, isVisible, onClose, showSupport } ) {
 	const { postType } = useSelect( ( select ) => ( {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
@@ -67,6 +67,20 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			? __( 'How to edit your page' )
 			: __( 'How to edit your post' );
 
+	const supportSection = (
+		<>
+			<HelpSectionTitle>{ __( 'Get support' ) }</HelpSectionTitle>
+			<HelpGetSupportButton
+				title={ __( 'Contact support' ) }
+				onPress={ requestContactCustomerSupport }
+			/>
+			<HelpGetSupportButton
+				title={ __( 'More support options' ) }
+				onPress={ requestGotoCustomerSupportOptions }
+			/>
+		</>
+	);
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -153,31 +167,8 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 														);
 													}
 												) }
-												{
-													<HelpSectionTitle>
-														{ __( 'Get support' ) }
-													</HelpSectionTitle>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'Contact support'
-														) }
-														onPress={
-															requestContactCustomerSupport
-														}
-													/>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'More support options'
-														) }
-														onPress={
-															requestGotoCustomerSupportOptions
-														}
-													/>
-												}
+												{ showSupport &&
+													supportSection }
 											</PanelBody>
 										</ScrollView>
 									);
diff --git a/packages/editor/src/components/page-attributes/test/order.js b/packages/editor/src/components/page-attributes/test/order.js
index e4cdcc59f722a3..31921df9b2a3e8 100644
--- a/packages/editor/src/components/page-attributes/test/order.js
+++ b/packages/editor/src/components/page-attributes/test/order.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PageAttributesOrder } from '../order';
 
+jest.useFakeTimers();
+
 describe( 'PageAttributesOrder', () => {
 	/**
 	 * When starting to type inside the spinbutton, select the current value
diff --git a/packages/editor/src/components/post-excerpt/index.js b/packages/editor/src/components/post-excerpt/index.js
index fcba84ec03754a..dc0220f861abff 100644
--- a/packages/editor/src/components/post-excerpt/index.js
+++ b/packages/editor/src/components/post-excerpt/index.js
@@ -15,6 +15,7 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label={ __( 'Write an excerpt (optional)' ) }
 				className="editor-post-excerpt__textarea"
 				onChange={ ( value ) => onUpdateExcerpt( value ) }
diff --git a/packages/editor/src/components/post-preview-button/test/index.js b/packages/editor/src/components/post-preview-button/test/index.js
index 9183debdf2e3d2..6589da6b41a823 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPreviewButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
 	const documentTitle = jest.fn();
diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js
index 299b6b0568699a..c4ada555bb117c 100644
--- a/packages/editor/src/components/post-publish-button/test/index.js
+++ b/packages/editor/src/components/post-publish-button/test/index.js
@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { PostPublishButton } from '../';
 
+jest.useFakeTimers();
+
 describe( 'PostPublishButton', () => {
 	describe( 'aria-disabled', () => {
 		it( 'should be true if post is currently saving', () => {
diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
index c684f0011acedd..e0c27b213bca83 100644
--- a/packages/editor/src/components/post-saved-state/test/index.js
+++ b/packages/editor/src/components/post-saved-state/test/index.js
@@ -15,6 +15,8 @@ import { useSelect } from '@wordpress/data';
  */
 import PostSavedState from '../';
 
+jest.useFakeTimers();
+
 const mockSavePost = jest.fn();
 
 jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js
index 771f6c2f60bab6..74011209dd151a 100644
--- a/packages/editor/src/components/post-slug/test/index.js
+++ b/packages/editor/src/components/post-slug/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -11,9 +11,7 @@ import { PostSlug } from '../';
 
 describe( 'PostSlug', () => {
 	it( 'should update slug with sanitized input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onUpdateSlug = jest.fn();
 
 		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
@@ -21,7 +19,7 @@ describe( 'PostSlug', () => {
 		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
 		await user.clear( input );
 		await user.type( input, 'Foo Bar-Baz 9!' );
-		input.blur();
+		act( () => input.blur() );
 
 		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
 	} );
diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
index 3b853bcf5e6c68..7679901bf37d2c 100644
--- a/packages/editor/src/components/provider/index.native.js
+++ b/packages/editor/src/components/provider/index.native.js
@@ -338,6 +338,7 @@ class NativeEditorProvider extends Component {
 					isVisible={ this.state.isHelpVisible }
 					onClose={ () => this.setState( { isHelpVisible: false } ) }
 					close={ () => this.setState( { isHelpVisible: false } ) }
+					showSupport={ capabilities?.supportSection === true }
 				/>
 			</>
 		);
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index 4efd412b43c121..f4e53170b8e1b7 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -8,6 +8,10 @@
 
 -   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
 
+### New Features
+
+-   Started exporting new React 18 APIs ([46610](https://github.com/WordPress/gutenberg/pull/46610))
+
 ## 4.20.0 (2022-11-16)
 
 ## 4.19.0 (2022-11-02)
diff --git a/packages/element/README.md b/packages/element/README.md
index 8a3e39dc50a1ff..60a64113bca7ef 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -198,6 +198,14 @@ _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Creates a new React root for the target DOM node.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#createroot>
+
 ### findDOMNode
 
 Finds the dom node of a React component.
@@ -234,6 +242,14 @@ _Parameters_
 -   _element_ `import('./react').WPElement`: Element to hydrate.
 -   _target_ `HTMLElement`: DOM node into which element should be hydrated.
 
+### hydrateRoot
+
+Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#hydrateroot>
+
 ### isEmptyElement
 
 Checks if the provided WP element is empty.
@@ -332,6 +348,12 @@ _Returns_
 
 -   `string`: Serialized element.
 
+### startTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/react-api.html#starttransition>
+
 ### StrictMode
 
 Component that activates additional checks and warnings for its descendants.
@@ -381,18 +403,36 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usedebugvalue>
 
+### useDeferredValue
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usedeferredvalue>
+
 ### useEffect
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useeffect>
 
+### useId
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useid>
+
 ### useImperativeHandle
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useimperativehandle>
 
+### useInsertionEffect
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useinsertioneffect>
+
 ### useLayoutEffect
 
 _Related_
@@ -423,6 +463,18 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usestate>
 
+### useSyncExternalStore
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore>
+
+### useTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usetransition>
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Contributing to this package
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index 7b35ea8d2a2d53..c819565b79553d 100644
--- a/packages/element/src/react-platform.js
+++ b/packages/element/src/react-platform.js
@@ -8,6 +8,7 @@ import {
 	hydrate,
 	unmountComponentAtNode,
 } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Creates a portal into which a component can be rendered.
@@ -43,6 +44,20 @@ export { render };
  */
 export { hydrate };
 
+/**
+ * Creates a new React root for the target DOM node.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#createroot
+ */
+export { createRoot };
+
+/**
+ * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+export { hydrateRoot };
+
 /**
  * Removes any mounted element from the target DOM node.
  *
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index 292f18cc92c627..4f2b8e150303ee 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -14,16 +14,22 @@ import {
 	isValidElement,
 	memo,
 	StrictMode,
-	useState,
-	useEffect,
-	useContext,
-	useReducer,
 	useCallback,
+	useContext,
+	useDebugValue,
+	useDeferredValue,
+	useEffect,
+	useId,
 	useMemo,
-	useRef,
 	useImperativeHandle,
+	useInsertionEffect,
 	useLayoutEffect,
-	useDebugValue,
+	useReducer,
+	useRef,
+	useState,
+	useSyncExternalStore,
+	useTransition,
+	startTransition,
 	lazy,
 	Suspense,
 } from 'react';
@@ -150,16 +156,31 @@ export { useContext };
  */
 export { useDebugValue };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue
+ */
+export { useDeferredValue };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useeffect
  */
 export { useEffect };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useid
+ */
+export { useId };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
  */
 export { useImperativeHandle };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect
+ */
+export { useInsertionEffect };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */
@@ -185,6 +206,21 @@ export { useRef };
  */
 export { useState };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
+ */
+export { useSyncExternalStore };
+
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usetransition
+ */
+export { useTransition };
+
+/**
+ * @see https://reactjs.org/docs/react-api.html#starttransition
+ */
+export { startTransition };
+
 /**
  * @see https://reactjs.org/docs/react-api.html#reactlazy
  */
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 92bc48c185cc99..77c974fc61211f 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -129,6 +129,7 @@ export { default as listItem } from './library/list-item';
 export { default as listView } from './library/list-view';
 export { default as lock } from './library/lock';
 export { default as lockOutline } from './library/lock-outline';
+export { default as lockSmall } from './library/lock-small';
 export { default as login } from './library/login';
 export { default as loop } from './library/loop';
 export { default as mapMarker } from './library/map-marker';
diff --git a/packages/icons/src/library/lock-small.js b/packages/icons/src/library/lock-small.js
new file mode 100644
index 00000000000000..9ed94cc264b003
--- /dev/null
+++ b/packages/icons/src/library/lock-small.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lockSmall = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15 11h-.2V9c0-1.5-1.2-2.8-2.8-2.8S9.2 7.5 9.2 9v2H9c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1zm-1.8 0h-2.5V9c0-.7.6-1.2 1.2-1.2s1.2.6 1.2 1.2v2z"
+		/>
+	</SVG>
+);
+
+export default lockSmall;
diff --git a/packages/icons/src/library/update.js b/packages/icons/src/library/update.js
index d751fb970ea551..09a291c7e97566 100644
--- a/packages/icons/src/library/update.js
+++ b/packages/icons/src/library/update.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const update = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M10.2 3.28c3.53 0 6.43 2.61 6.92 6h2.08l-3.5 4-3.5-4h2.32c-.45-1.97-2.21-3.45-4.32-3.45-1.45 0-2.73.71-3.54 1.78L4.95 5.66C6.23 4.2 8.11 3.28 10.2 3.28zm-.4 13.44c-3.52 0-6.43-2.61-6.92-6H.8l3.5-4c1.17 1.33 2.33 2.67 3.5 4H5.48c.45 1.97 2.21 3.45 4.32 3.45 1.45 0 2.73-.71 3.54-1.78l1.71 1.95c-1.28 1.46-3.15 2.38-5.25 2.38z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m11.3 17.2-5-5c-.1-.1-.1-.3 0-.4l2.3-2.3-1.1-1-2.3 2.3c-.7.7-.7 1.8 0 2.5l5 5H7.5v1.5h5.3v-5.2h-1.5v2.6zm7.5-6.4-5-5h2.7V4.2h-5.2v5.2h1.5V6.8l5 5c.1.1.1.3 0 .4l-2.3 2.3 1.1 1.1 2.3-2.3c.6-.7.6-1.9-.1-2.5z" />
 	</SVG>
 );
 
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index e8a7a45ede3fa4..fe329a75d43e07 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -46,6 +46,7 @@ function InterfaceSkeleton(
 		actions,
 		labels,
 		className,
+		enableRegionNavigation = true,
 		// Todo: does this need to be a prop.
 		// Can we use a dependency to keyboard-shortcuts directly?
 		shortcuts,
@@ -83,8 +84,11 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			{ ...navigateRegionsProps }
-			ref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }
+			{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
+			ref={ useMergeRefs( [
+				ref,
+				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
+			] ) }
 			className={ classnames(
 				className,
 				'interface-interface-skeleton',
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 51374fd2b56870..05752e9ff32164 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -72,16 +72,6 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__content {
-	.interface-navigable-region__stacker {
-		// It's a flex item within a flex container with flex-direction column.
-		// Make sure it takes all the available height.
-		flex-grow: 1;
-		// Allow its flex items (the visual editor area) to take all the available
-		// height by making it also a flex container.
-		display: flex;
-		flex-direction: column;
-	}
-
 	flex-grow: 1;
 
 	// Treat as flex container to allow children to grow to occupy full
@@ -135,10 +125,6 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__secondary-sidebar {
-	.interface-navigable-region__stacker {
-		height: 100%;
-	}
-
 	@include break-medium() {
 		border-right: $border-width solid $gray-200;
 	}
diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js
index 31037ffd333546..23ff532f22fd35 100644
--- a/packages/interface/src/components/navigable-region/index.js
+++ b/packages/interface/src/components/navigable-region/index.js
@@ -18,9 +18,7 @@ export default function NavigableRegion( {
 			tabIndex="-1"
 			{ ...props }
 		>
-			<div className="interface-navigable-region__stacker">
-				{ children }
-			</div>
+			{ children }
 		</Tag>
 	);
 }
diff --git a/packages/jest-preset-default/jest-preset.js b/packages/jest-preset-default/jest-preset.js
index c6a491e9ed1d98..fc80efd5c62641 100644
--- a/packages/jest-preset-default/jest-preset.js
+++ b/packages/jest-preset-default/jest-preset.js
@@ -24,7 +24,7 @@ module.exports = {
 		'**/?(*.)test.[jt]s?(x)',
 	],
 	testPathIgnorePatterns: [ '/node_modules/', '<rootDir>/vendor/' ],
-	timers: 'fake',
+	timers: 'real',
 	transform: {
 		'\\.[jt]sx?$': require.resolve( 'babel-jest' ),
 	},
diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js
index 5bb776127d95e7..fe21171c0c7a96 100644
--- a/packages/keycodes/src/index.js
+++ b/packages/keycodes/src/index.js
@@ -233,11 +233,11 @@ export const displayShortcutList = mapValues( modifiers, ( modifier ) => {
 			/** @type {string[]} */ ( [] )
 		);
 
-		// Symbols (`,.) are removed by the default regular expression,
+		// Symbols (~`,.) are removed by the default regular expression,
 		// so override the rule to allow symbols used for shortcuts.
 		// see: https://github.com/blakeembrey/change-case#options
 		const capitalizedCharacter = capitalCase( character, {
-			stripRegexp: /[^A-Z0-9`,\.\\\-]/gi,
+			stripRegexp: /[^A-Z0-9~`,\.\\\-]/gi,
 		} );
 
 		return [ ...modifierKeys, capitalizedCharacter ];
@@ -298,6 +298,8 @@ export const shortcutAriaLabel = mapValues( modifiers, ( modifier ) => {
 			'.': __( 'Period' ),
 			/* translators: backtick as in the character '`' */
 			'`': __( 'Backtick' ),
+			/* translators: tilde as in the character '~' */
+			'~': __( 'Tilde' ),
 		};
 
 		return [ ...modifier( _isApple ), character ]
diff --git a/packages/nux/.npmrc b/packages/nux/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/nux/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
deleted file mode 100644
index 835641906ad7eb..00000000000000
--- a/packages/nux/CHANGELOG.md
+++ /dev/null
@@ -1,126 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-## 6.0.0 (2022-12-14)
-
-### Breaking Changes
-
--   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
-
-## 5.20.0 (2022-11-16)
-
-## 5.19.0 (2022-11-02)
-
-## 5.18.0 (2022-10-19)
-
-## 5.17.0 (2022-10-05)
-
-## 5.16.0 (2022-09-21)
-
-## 5.15.0 (2022-09-13)
-
-## 5.14.0 (2022-08-24)
-
-## 5.13.0 (2022-08-10)
-
-## 5.12.0 (2022-07-27)
-
-## 5.11.0 (2022-07-13)
-
-## 5.10.0 (2022-06-29)
-
-## 5.9.0 (2022-06-15)
-
-## 5.8.0 (2022-06-01)
-
-## 5.7.0 (2022-05-18)
-
-## 5.6.0 (2022-05-04)
-
-## 5.5.0 (2022-04-21)
-
-## 5.4.0 (2022-04-08)
-
-## 5.3.0 (2022-03-23)
-
-## 5.2.0 (2022-03-11)
-
-## 5.1.0 (2022-01-27)
-
-## 5.0.0 (2021-07-29)
-
-### Breaking Change
-
--   Upgraded React components to work with v17.0 ([#29118](https://github.com/WordPress/gutenberg/pull/29118)). There are no new features in React v17.0 as explained in the [blog post](https://reactjs.org/blog/2020/10/20/react-v17.html).
-
-## 4.2.0 (2021-07-21)
-
-## 4.1.0 (2021-05-20)
-
-## 4.0.0 (2021-05-14)
-
-### Breaking Changes
-
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
-
-## 3.25.0 (2021-03-17)
-
-## 3.24.0 (2020-12-17)
-
-### New Feature
-
--   Added a store definition `store` for the core data namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
-
-# 3.1.0 (2019-06-03)
-
--   The `@wordpress/nux` package has been deprecated. Please use the `Guide` component in `@wordpress/components` to show a user guide.
-
-## 3.0.6 (2019-01-03)
-
-## 3.0.5 (2018-12-12)
-
-## 3.0.4 (2018-11-30)
-
-## 3.0.3 (2018-11-22)
-
-## 3.0.2 (2018-11-21)
-
-## 3.0.1 (2018-11-20)
-
-## 3.0.0 (2018-11-15)
-
-### Breaking Changes
-
--   The id prop of DotTip has been removed. Please use the tipId prop instead.
-
-## 2.0.13 (2018-11-12)
-
-## 2.0.12 (2018-11-12)
-
-## 2.0.11 (2018-11-09)
-
-## 2.0.10 (2018-11-09)
-
-## 2.0.9 (2018-11-03)
-
-## 2.0.8 (2018-10-30)
-
-## 2.0.7 (2018-10-29)
-
-### Deprecations
-
--   The id prop of DotTip has been deprecated. Please use the tipId prop instead.
-
-## 2.0.6 (2018-10-22)
-
-## 2.0.5 (2018-10-19)
-
-## 2.0.4 (2018-10-18)
-
-## 2.0.0 (2018-09-05)
-
-### Breaking Change
-
--   Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
diff --git a/packages/nux/README.md b/packages/nux/README.md
deleted file mode 100644
index c0941ddd0c5f2a..00000000000000
--- a/packages/nux/README.md
+++ /dev/null
@@ -1,114 +0,0 @@
-# New User eXperience (NUX)
-
-The NUX module exposes components, and `wp.data` methods useful for onboarding a new user to the WordPress admin interface. Specifically, it exposes _tips_ and _guides_.
-
-A _tip_ is a component that points to an element in the UI and contains text that explains the element's functionality. The user can dismiss a tip, in which case it never shows again. The user can also disable tips entirely. Information about tips is persisted between sessions using `localStorage`.
-
-A _guide_ allows a series of tips to be presented to the user one by one. When a user dismisses a tip that is in a guide, the next tip in the guide is shown.
-
-## Installation
-
-Install the module
-
-```bash
-npm install @wordpress/nux --save
-```
-
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
-
-## DotTip
-
-`DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `tipId`.
-
-See [the component's README][dot-tip-readme] for more information.
-
-[dot-tip-readme]: https://github.com/WordPress/gutenberg/tree/HEAD/packages/nux/src/components/dot-tip/README.md
-
-```jsx
-<button onClick={ ... }>
-	Add to Cart
-	<DotTip tipId="acme/add-to-cart">
-		Click here to add the product to your shopping cart.
-	</DotTip>
-</button>
-}
-```
-
-## Determining if a tip is visible
-
-You can programmatically determine if a tip is visible using the `isTipVisible` select method.
-
-```jsx
-const isVisible = select( 'core/nux' ).isTipVisible( 'acme/add-to-cart' );
-console.log( isVisible ); // true or false
-```
-
-## Manually dismissing a tip
-
-`dismissTip` is a dispatch method that allows you to programmatically dismiss a tip.
-
-```jsx
-<button
-	onClick={ () => {
-		dispatch( 'core/nux' ).dismissTip( 'acme/add-to-cart' );
-	} }
->
-	Dismiss tip
-</button>
-```
-
-## Disabling and enabling tips
-
-Tips can be programatically disabled or enabled using the `disableTips` and `enableTips` dispatch methods. You can query the current setting by using the `areTipsEnabled` select method.
-
-Calling `enableTips` will also un-dismiss all previously dismissed tips.
-
-```jsx
-const areTipsEnabled = select( 'core/nux' ).areTipsEnabled();
-return (
-	<button
-		onClick={ () => {
-			if ( areTipsEnabled ) {
-				dispatch( 'core/nux' ).disableTips();
-			} else {
-				dispatch( 'core/nux' ).enableTips();
-			}
-		} }
-	>
-		{ areTipsEnabled ? 'Disable tips' : 'Enable tips' }
-	</button>
-);
-```
-
-## Triggering a guide
-
-You can group a series of tips into a guide by calling the `triggerGuide` dispatch method. The given tips will then appear one by one.
-
-A tip cannot be added to more than one guide.
-
-```jsx
-dispatch( 'core/nux' ).triggerGuide( [
-	'acme/product-info',
-	'acme/add-to-cart',
-	'acme/checkout',
-] );
-```
-
-## Getting information about a guide
-
-`getAssociatedGuide` is a select method that returns useful information about the state of the guide that a tip is associated with.
-
-```jsx
-const guide = select( 'core/nux' ).getAssociatedGuide( 'acme/add-to-cart' );
-console.log( 'Tips in this guide:', guide.tipIds );
-console.log( 'Currently showing:', guide.currentTipId );
-console.log( 'Next to show:', guide.nextTipId );
-```
-
-## Contributing to this package
-
-This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
-
-To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
-
-<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/nux/package.json b/packages/nux/package.json
deleted file mode 100644
index e6a84baa429d3a..00000000000000
--- a/packages/nux/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-	"name": "@wordpress/nux",
-	"version": "6.0.0",
-	"description": "NUX (New User eXperience) module for WordPress.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"nux"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/nux/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/nux"
-	},
-	"bugs": {
-		"url": "https://github.com/WordPress/gutenberg/issues"
-	},
-	"engines": {
-		"node": ">=12"
-	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
-	"react-native": "src/index",
-	"sideEffects": [
-		"build-style/**",
-		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js}"
-	],
-	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"rememo": "^4.0.0"
-	},
-	"peerDependencies": {
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/nux/src/components/dot-tip/README.md b/packages/nux/src/components/dot-tip/README.md
deleted file mode 100644
index f143a22a222588..00000000000000
--- a/packages/nux/src/components/dot-tip/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# DotTip
-
-`DotTip` is a React component that renders a single _tip_ on the screen. The tip will point to the React element that `DotTip` is nested within. Each tip is uniquely identified by a string passed to `tipId`.
-
-## Usage
-
-```jsx
-<button onClick={ ... }>
-	Add to Cart
-	<DotTip tipId="acme/add-to-cart">
-		Click here to add the product to your shopping cart.
-	</DotTip>
-</button>
-}
-```
-
-## Props
-
-The component accepts the following props:
-
-### tipId
-
-A string that uniquely identifies the tip. Identifiers should be prefixed with the name of the plugin, followed by a `/`. For example, `acme/add-to-cart`.
-
--   Type: `string`
--   Required: Yes
-
-### position
-
-The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"middle"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
-
--   Type: `String`
--   Required: No
--   Default: `"middle right"`
-
-### children
-
-Any React element or elements can be passed as children. They will be rendered within the tip bubble.
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
deleted file mode 100644
index 50de7ddb3be9df..00000000000000
--- a/packages/nux/src/components/dot-tip/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { Popover, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
-import { close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as nuxStore } from '../../store';
-
-function onClick( event ) {
-	// Tips are often nested within buttons. We stop propagation so that clicking
-	// on a tip doesn't result in the button being clicked.
-	event.stopPropagation();
-}
-
-export function DotTip( {
-	position = 'middle right',
-	children,
-	isVisible,
-	hasNextTip,
-	onDismiss,
-	onDisable,
-} ) {
-	const anchorParent = useRef( null );
-	const onFocusOutsideCallback = useCallback(
-		( event ) => {
-			if ( ! anchorParent.current ) {
-				return;
-			}
-			if ( anchorParent.current.contains( event.relatedTarget ) ) {
-				return;
-			}
-			onDisable();
-		},
-		[ onDisable, anchorParent ]
-	);
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			className="nux-dot-tip"
-			position={ position }
-			focusOnMount
-			role="dialog"
-			aria-label={ __( 'Editor tips' ) }
-			onClick={ onClick }
-			onFocusOutside={ onFocusOutsideCallback }
-		>
-			<p>{ children }</p>
-			<p>
-				<Button variant="link" onClick={ onDismiss }>
-					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
-				</Button>
-			</p>
-			<Button
-				className="nux-dot-tip__disable"
-				icon={ close }
-				label={ __( 'Disable tips' ) }
-				onClick={ onDisable }
-			/>
-		</Popover>
-	);
-}
-
-export default compose(
-	withSelect( ( select, { tipId } ) => {
-		const { isTipVisible, getAssociatedGuide } = select( nuxStore );
-		const associatedGuide = getAssociatedGuide( tipId );
-		return {
-			isVisible: isTipVisible( tipId ),
-			hasNextTip: !! ( associatedGuide && associatedGuide.nextTipId ),
-		};
-	} ),
-	withDispatch( ( dispatch, { tipId } ) => {
-		const { dismissTip, disableTips } = dispatch( nuxStore );
-		return {
-			onDismiss() {
-				dismissTip( tipId );
-			},
-			onDisable() {
-				disableTips();
-			},
-		};
-	} )
-)( DotTip );
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
deleted file mode 100644
index 3ab0c1a540fd5a..00000000000000
--- a/packages/nux/src/components/dot-tip/style.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-
-$dot-size: 8px; // Size of the indicator dot
-$dot-scale: 3;  // How much the pulse animation should scale up by in size
-
-.nux-dot-tip {
-	&::before,
-	&::after {
-		border-radius: 100%;
-		content: " ";
-		pointer-events: none;
-		position: absolute;
-	}
-
-	&::before {
-		animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
-		background: rgba(#00739c, 0.9);
-		opacity: 0.9;
-		height: $dot-size * $dot-scale;
-		left: -($dot-size * $dot-scale) * 0.5;
-		top: -($dot-size * $dot-scale) * 0.5;
-		transform: scale(math.div(1, $dot-scale));
-		width: $dot-size * $dot-scale;
-	}
-
-	&::after {
-		background: #00739c;
-		height: $dot-size;
-		left: -$dot-size * 0.5;
-		top: -$dot-size * 0.5;
-		width: $dot-size;
-	}
-
-	@keyframes nux-pulse {
-		100% {
-			background: rgba(#00739c, 0);
-			transform: scale(1);
-		}
-	}
-
-	.components-popover__content {
-		width: 350px;
-		padding: 20px 18px;
-
-		@include break-small {
-			width: 450px;
-		}
-
-		.nux-dot-tip__disable {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
-
-	// Position the dot right next to the edge of the button
-	&[data-y-axis="top"] {
-		margin-top: -$dot-size * 0.5;
-	}
-	&[data-y-axis="bottom"] {
-		margin-top: $dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] {
-		margin-left: -$dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] {
-		margin-left: $dot-size * 0.5;
-	}
-
-	// Position the tip content away from the dot
-	&[data-y-axis="top"] .components-popover__content {
-		margin-bottom: 20px;
-	}
-	&[data-y-axis="bottom"] .components-popover__content {
-		margin-top: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] .components-popover__content {
-		margin-right: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] .components-popover__content {
-		margin-left: 20px;
-	}
-
-	// Extra specificity so that we can override the styles in .component-popover
-	&[data-y-axis="left"],
-	&[data-y-axis="center"],
-	&[data-y-axis="right"] {
-		// Position tips above popovers
-		z-index: z-index(".nux-dot-tip");
-
-		// On mobile, always position the tip below the dot and fill the width of the viewport
-		@media (max-width: $break-small) {
-			.components-popover__content {
-				align-self: end;
-				left: 5px;
-				margin: 20px 0 0 0;
-				max-width: none !important; // Override the inline style set by <Popover>
-				position: fixed;
-				right: 5px;
-				width: auto;
-			}
-		}
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: 0;
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: 0;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: -12px;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: -12px;
-	}
-}
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
deleted file mode 100644
index a453da0254b487..00000000000000
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DotTip should render correctly 1`] = `
-<div
-  aria-label="Editor tips"
-  class="components-popover nux-dot-tip is-positioned"
-  role="dialog"
-  style="position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
-  tabindex="-1"
->
-  <div
-    class="components-popover__content"
-    style="max-height: 0px; overflow: auto;"
-  >
-    <p>
-      It looks like you’re writing a letter. Would you like help?
-    </p>
-    <p>
-      <button
-        class="components-button is-link"
-        type="button"
-      >
-        Got it
-      </button>
-    </p>
-    <button
-      aria-label="Disable tips"
-      class="components-button nux-dot-tip__disable has-icon"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="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"
-        />
-      </svg>
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/nux/src/components/dot-tip/test/index.js b/packages/nux/src/components/dot-tip/test/index.js
deleted file mode 100644
index 7917b044fc3e2d..00000000000000
--- a/packages/nux/src/components/dot-tip/test/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { DotTip } from '..';
-
-const noop = () => {};
-
-describe( 'DotTip', () => {
-	it( 'should not render anything if invisible', async () => {
-		render(
-			<DotTip>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should render correctly', async () => {
-		render(
-			<DotTip isVisible setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
-	} );
-
-	it( 'should call onDismiss when the dismiss button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onDismiss = jest.fn();
-
-		render(
-			<DotTip isVisible onDismiss={ onDismiss } setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		await user.click( screen.getByRole( 'button', { name: 'Got it' } ) );
-
-		expect( onDismiss ).toHaveBeenCalled();
-	} );
-
-	it( 'should call onDisable when the X button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onDisable = jest.fn();
-
-		render(
-			<DotTip isVisible onDisable={ onDisable } setTimeout={ noop }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await act( () => Promise.resolve() );
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Disable tips' } )
-		);
-
-		expect( onDisable ).toHaveBeenCalled();
-	} );
-} );
diff --git a/packages/nux/src/index.js b/packages/nux/src/index.js
deleted file mode 100644
index a0b3e073503750..00000000000000
--- a/packages/nux/src/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-export { store } from './store';
-export { default as DotTip } from './components/dot-tip';
-
-deprecated( 'wp.nux', {
-	since: '5.4',
-	hint: 'wp.components.Guide can be used to show a user guide.',
-	version: '6.2',
-} );
diff --git a/packages/nux/src/store/actions.js b/packages/nux/src/store/actions.js
deleted file mode 100644
index ad8adb79c5530d..00000000000000
--- a/packages/nux/src/store/actions.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Returns an action object that, when dispatched, presents a guide that takes
- * the user through a series of tips step by step.
- *
- * @param {string[]} tipIds Which tips to show in the guide.
- *
- * @return {Object} Action object.
- */
-export function triggerGuide( tipIds ) {
-	return {
-		type: 'TRIGGER_GUIDE',
-		tipIds,
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, dismisses the given tip. A
- * dismissed tip will not show again.
- *
- * @param {string} id The tip to dismiss.
- *
- * @return {Object} Action object.
- */
-export function dismissTip( id ) {
-	return {
-		type: 'DISMISS_TIP',
-		id,
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, prevents all tips from
- * showing again.
- *
- * @return {Object} Action object.
- */
-export function disableTips() {
-	return {
-		type: 'DISABLE_TIPS',
-	};
-}
-
-/**
- * Returns an action object that, when dispatched, makes all tips show again.
- *
- * @return {Object} Action object.
- */
-export function enableTips() {
-	return {
-		type: 'ENABLE_TIPS',
-	};
-}
diff --git a/packages/nux/src/store/index.js b/packages/nux/src/store/index.js
deleted file mode 100644
index 39fef6c78c7911..00000000000000
--- a/packages/nux/src/store/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createReduxStore, registerStore } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import reducer from './reducer';
-import * as actions from './actions';
-import * as selectors from './selectors';
-
-const STORE_NAME = 'core/nux';
-
-/**
- * Store definition for the nux namespace.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
- */
-export const store = createReduxStore( STORE_NAME, {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'preferences' ],
-} );
-
-// Once we build a more generic persistence plugin that works across types of stores
-// we'd be able to replace this with a register call.
-registerStore( STORE_NAME, {
-	reducer,
-	actions,
-	selectors,
-	persist: [ 'preferences' ],
-} );
diff --git a/packages/nux/src/store/reducer.js b/packages/nux/src/store/reducer.js
deleted file mode 100644
index 373e4781f52353..00000000000000
--- a/packages/nux/src/store/reducer.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { combineReducers } from '@wordpress/data';
-
-/**
- * Reducer that tracks which tips are in a guide. Each guide is represented by
- * an array which contains the tip identifiers contained within that guide.
- *
- * @param {Array}  state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Array} Updated state.
- */
-export function guides( state = [], action ) {
-	switch ( action.type ) {
-		case 'TRIGGER_GUIDE':
-			return [ ...state, action.tipIds ];
-	}
-
-	return state;
-}
-
-/**
- * Reducer that tracks whether or not tips are globally enabled.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function areTipsEnabled( state = true, action ) {
-	switch ( action.type ) {
-		case 'DISABLE_TIPS':
-			return false;
-
-		case 'ENABLE_TIPS':
-			return true;
-	}
-
-	return state;
-}
-
-/**
- * Reducer that tracks which tips have been dismissed. If the state object
- * contains a tip identifier, then that tip is dismissed.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function dismissedTips( state = {}, action ) {
-	switch ( action.type ) {
-		case 'DISMISS_TIP':
-			return {
-				...state,
-				[ action.id ]: true,
-			};
-
-		case 'ENABLE_TIPS':
-			return {};
-	}
-
-	return state;
-}
-
-const preferences = combineReducers( { areTipsEnabled, dismissedTips } );
-
-export default combineReducers( { guides, preferences } );
diff --git a/packages/nux/src/store/selectors.js b/packages/nux/src/store/selectors.js
deleted file mode 100644
index e87cf688a1ba32..00000000000000
--- a/packages/nux/src/store/selectors.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
-/**
- * An object containing information about a guide.
- *
- * @typedef {Object} NUXGuideInfo
- * @property {string[]} tipIds       Which tips the guide contains.
- * @property {?string}  currentTipId The guide's currently showing tip.
- * @property {?string}  nextTipId    The guide's next tip to show.
- */
-
-/**
- * Returns an object describing the guide, if any, that the given tip is a part
- * of.
- *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
- *
- * @return {?NUXGuideInfo} Information about the associated guide.
- */
-export const getAssociatedGuide = createSelector(
-	( state, tipId ) => {
-		for ( const tipIds of state.guides ) {
-			if ( tipIds.includes( tipId ) ) {
-				const nonDismissedTips = tipIds.filter(
-					( tId ) =>
-						! Object.keys(
-							state.preferences.dismissedTips
-						).includes( tId )
-				);
-				const [ currentTipId = null, nextTipId = null ] =
-					nonDismissedTips;
-				return { tipIds, currentTipId, nextTipId };
-			}
-		}
-
-		return null;
-	},
-	( state ) => [ state.guides, state.preferences.dismissedTips ]
-);
-
-/**
- * Determines whether or not the given tip is showing. Tips are hidden if they
- * are disabled, have been dismissed, or are not the current tip in any
- * guide that they have been added to.
- *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
- *
- * @return {boolean} Whether or not the given tip is showing.
- */
-export function isTipVisible( state, tipId ) {
-	if ( ! state.preferences.areTipsEnabled ) {
-		return false;
-	}
-
-	if ( state.preferences.dismissedTips?.hasOwnProperty( tipId ) ) {
-		return false;
-	}
-
-	const associatedGuide = getAssociatedGuide( state, tipId );
-	if ( associatedGuide && associatedGuide.currentTipId !== tipId ) {
-		return false;
-	}
-
-	return true;
-}
-
-/**
- * Returns whether or not tips are globally enabled.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether tips are globally enabled.
- */
-export function areTipsEnabled( state ) {
-	return state.preferences.areTipsEnabled;
-}
diff --git a/packages/nux/src/store/test/actions.js b/packages/nux/src/store/test/actions.js
deleted file mode 100644
index 4e22afe03c8b82..00000000000000
--- a/packages/nux/src/store/test/actions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Internal dependencies
- */
-import { triggerGuide, dismissTip, disableTips, enableTips } from '../actions';
-
-describe( 'actions', () => {
-	describe( 'triggerGuide', () => {
-		it( 'should return a TRIGGER_GUIDE action', () => {
-			expect( triggerGuide( [ 'test/tip-1', 'test/tip-2' ] ) ).toEqual( {
-				type: 'TRIGGER_GUIDE',
-				tipIds: [ 'test/tip-1', 'test/tip-2' ],
-			} );
-		} );
-	} );
-
-	describe( 'dismissTip', () => {
-		it( 'should return an DISMISS_TIP action', () => {
-			expect( dismissTip( 'test/tip' ) ).toEqual( {
-				type: 'DISMISS_TIP',
-				id: 'test/tip',
-			} );
-		} );
-	} );
-
-	describe( 'disableTips', () => {
-		it( 'should return an DISABLE_TIPS action', () => {
-			expect( disableTips() ).toEqual( {
-				type: 'DISABLE_TIPS',
-			} );
-		} );
-	} );
-
-	describe( 'enableTips', () => {
-		it( 'should return an ENABLE_TIPS action', () => {
-			expect( enableTips() ).toEqual( {
-				type: 'ENABLE_TIPS',
-			} );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/store/test/reducer.js b/packages/nux/src/store/test/reducer.js
deleted file mode 100644
index 49172442d8f379..00000000000000
--- a/packages/nux/src/store/test/reducer.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Internal dependencies
- */
-import { guides, areTipsEnabled, dismissedTips } from '../reducer';
-
-describe( 'reducer', () => {
-	describe( 'guides', () => {
-		it( 'should start out empty', () => {
-			expect( guides( undefined, {} ) ).toEqual( [] );
-		} );
-
-		it( 'should add a guide when it is triggered', () => {
-			const state = guides( [], {
-				type: 'TRIGGER_GUIDE',
-				tipIds: [ 'test/tip-1', 'test/tip-2' ],
-			} );
-			expect( state ).toEqual( [ [ 'test/tip-1', 'test/tip-2' ] ] );
-		} );
-	} );
-
-	describe( 'areTipsEnabled', () => {
-		it( 'should default to true', () => {
-			expect( areTipsEnabled( undefined, {} ) ).toBe( true );
-		} );
-
-		it( 'should flip when tips are disabled', () => {
-			const state = areTipsEnabled( true, {
-				type: 'DISABLE_TIPS',
-			} );
-			expect( state ).toBe( false );
-		} );
-
-		it( 'should flip when tips are enabled', () => {
-			const state = areTipsEnabled( false, {
-				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toBe( true );
-		} );
-	} );
-
-	describe( 'dismissedTips', () => {
-		it( 'should start out empty', () => {
-			expect( dismissedTips( undefined, {} ) ).toEqual( {} );
-		} );
-
-		it( 'should mark tips as dismissed', () => {
-			const state = dismissedTips(
-				{},
-				{
-					type: 'DISMISS_TIP',
-					id: 'test/tip',
-				}
-			);
-			expect( state ).toEqual( {
-				'test/tip': true,
-			} );
-		} );
-
-		it( 'should reset if tips are enabled', () => {
-			const initialState = {
-				'test/tip': true,
-			};
-			const state = dismissedTips( initialState, {
-				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toEqual( {} );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/store/test/selectors.js b/packages/nux/src/store/test/selectors.js
deleted file mode 100644
index e2a06c74e08b68..00000000000000
--- a/packages/nux/src/store/test/selectors.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getAssociatedGuide, isTipVisible, areTipsEnabled } from '../selectors';
-
-describe( 'selectors', () => {
-	describe( 'getAssociatedGuide', () => {
-		const state = {
-			guides: [
-				[ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				[ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				[ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-			],
-			preferences: {
-				dismissedTips: {
-					'test/tip-1': true,
-					'test/tip-a': true,
-					'test/tip-b': true,
-					'test/tip-α': true,
-					'test/tip-β': true,
-					'test/tip-γ': true,
-				},
-			},
-		};
-
-		it( 'should return null when there is no associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/unknown' ) ).toBeNull();
-		} );
-
-		it( 'should return the associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/tip-2' ) ).toEqual( {
-				tipIds: [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				currentTipId: 'test/tip-2',
-				nextTipId: 'test/tip-3',
-			} );
-		} );
-
-		it( 'should indicate when there is no next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-b' ) ).toEqual( {
-				tipIds: [ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				currentTipId: 'test/tip-c',
-				nextTipId: null,
-			} );
-		} );
-
-		it( 'should indicate when there is no current or next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-β' ) ).toEqual( {
-				tipIds: [ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-				currentTipId: null,
-				nextTipId: null,
-			} );
-		} );
-	} );
-
-	describe( 'isTipVisible', () => {
-		it( 'is tolerant to individual preferences being undefined', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'is tolerant to undefined dismissedTips', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return true by default', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is dismissed', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {
-						'test/tip': true,
-					},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is in a guide and it is not the current tip', () => {
-			const state = {
-				guides: [ [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ] ],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip-2' ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'areTipsEnabled', () => {
-		it( 'should return true if tips are enabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( false );
-		} );
-	} );
-} );
diff --git a/packages/nux/src/style.scss b/packages/nux/src/style.scss
deleted file mode 100644
index 0df73ff851e9f9..00000000000000
--- a/packages/nux/src/style.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./components/dot-tip/style.scss";
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index ba382a39b52aa5..7c3a0f31eed780 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.86.0",
+	"version": "1.86.1",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 7185ce82c07979..3e880011cd31f7 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -16,6 +16,8 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableMentions: Boolean,
     val enableXPosts: Boolean,
     val enableUnsupportedBlockEditor: Boolean,
+    val enableSupportSection: Boolean,
+    val enableOnlyCoreBlocks: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
     val isAudioBlockMediaUploadEnabled: Boolean,
     val shouldUseFastImage: Boolean,
@@ -76,6 +78,8 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK, enableInstagramEmbed)
         putBoolean(PROP_CAPABILITIES_LOOM_EMBED_BLOCK, enableLoomEmbed)
         putBoolean(PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK, enableSmartframeEmbed)
+        putBoolean(PROP_CAPABILITIES_SUPPORT_SECTION, enableSupportSection)
+        putBoolean(PROP_CAPABILITIES_ONLY_CORE_BLOCKS, enableOnlyCoreBlocks)
     }
 
     companion object {
@@ -119,6 +123,8 @@ data class GutenbergProps @JvmOverloads constructor(
         const val PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED = "isAudioBlockMediaUploadEnabled"
         const val PROP_CAPABILITIES_SHOULD_USE_FASTIMAGE = "shouldUseFastImage"
         const val PROP_CAPABILITIES_REUSABLE_BLOCK = "reusableBlock"
+        const val PROP_CAPABILITIES_SUPPORT_SECTION = "supportSection"
+        const val PROP_CAPABILITIES_ONLY_CORE_BLOCKS = "onlyCoreBlocks"
 
         /**
          * Android converts some new language codes to older, deprecated ones, to preserve
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json b/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
index f9cee4142d11ac..28c0c1b17b4adc 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json
@@ -13,11 +13,5 @@
 			"hiddenBlockTypes": [],
 			"preferredStyleVariations": {}
 		}
-	},
-	"core/nux": {
-		"preferences": {
-			"areTipsEnabled": false,
-			"dismissedTips": {}
-		}
 	}
 }
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
index b756f057755286..cf41c34ec2c6a9 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -33,6 +33,8 @@ public enum Capabilities: String {
     case loomEmbed
     case smartframeEmbed
     case shouldUseFastImage
+    case supportSection
+    case onlyCoreBlocks
 }
 
 /// Wrapper for single block data
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 4458cfeb3a3051..b497edb86f0409 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-bridge",
-	"version": "1.86.0",
+	"version": "1.86.1",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 5551a5344dab96..c260e479728aa5 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,14 +10,15 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Add capabilities to force only Core blocks and control Support section [#46215]
+
+## 1.86.1
+-   [*] Block Actions Menu - Fix block title regression and adds integration tests [#46699]
 
 ## 1.86.0
 -   [**] Upgrade React Native to 0.69.4 [#43485]
 -   [**] Prevent error message from unneccesarily firing when uploading to Gallery block [#46175]
 
-## 1.85.0
--   [*] [iOS] Fixed iOS Voice Control support within Image block captions. [#44850]
-
 ## 1.85.1
 -   [**] Prevent error message from unneccesarily firing when uploading to Gallery block [#46175]
 
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
index 2ab5bdda7f6ca7..44cc767ec5bfc3 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
@@ -10,12 +10,24 @@ import {
 	paragraphBlockEmpty,
 	separatorBlockEmpty,
 } from './helpers/test-data';
+import { waitForMediaLibrary } from './helpers/utils';
 
 describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'adds new block at the end of post', async () => {
 		await editorPage.addNewBlock( blockNames.heading );
+
+		const headingBlock = await editorPage.getBlockAtPosition(
+			blockNames.heading
+		);
+		expect( headingBlock ).toBeTruthy();
+
 		await editorPage.addNewBlock( blockNames.list );
 
+		const listItemBlock = await editorPage.getBlockAtPosition(
+			blockNames.listItem
+		);
+		expect( listItemBlock ).toBeTruthy();
+
 		const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
 			'\n\n'
 		);
@@ -29,6 +41,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 
 		await editorPage.addNewBlock( blockNames.separator );
 
+		const separatorBlock = await editorPage.getBlockAtPosition(
+			blockNames.separator,
+			2
+		);
+		expect( separatorBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			separatorBlockEmpty,
@@ -47,8 +65,16 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 		await separatorBlockElement.click();
 
 		await editorPage.addNewBlock( blockNames.image, 'before' );
+
+		await waitForMediaLibrary( editorPage.driver );
 		await editorPage.closePicker();
 
+		const imageBlock = await editorPage.getBlockAtPosition(
+			blockNames.image,
+			2
+		);
+		expect( imageBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
@@ -63,6 +89,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'inserts block at the end of post when no block is selected', async () => {
 		await editorPage.addNewBlock( blockNames.more );
 
+		const moreBlock = await editorPage.getBlockAtPosition(
+			blockNames.more,
+			5
+		);
+		expect( moreBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
@@ -78,6 +110,12 @@ describe( 'Gutenberg Editor tests for Block insertion 2', () => {
 	it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
 		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
 
+		const paragraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			6
+		);
+		expect( paragraphBlock ).toBeTruthy();
+
 		const expectedHtml = [
 			headerBlockEmpty,
 			imageBlockEmpty,
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
index abebfc7486962c..447e1a997ecc88 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
@@ -81,7 +81,7 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 
 	it( 'should be able to insert block at the beginning of post from the title', async () => {
 		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
 			blockNames.paragraph
 		);
 		if ( isAndroid() ) {
@@ -98,15 +98,19 @@ describe( 'Gutenberg Editor tests for Block insertion', () => {
 		const titleElement = await editorPage.getTitleElement( {
 			autoscroll: true,
 		} );
+		expect( titleElement ).toBeTruthy();
 		await titleElement.click();
 
 		await editorPage.addNewBlock( blockNames.paragraph );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+		const emptyParagraphBlock = await editorPage.getBlockAtPosition(
 			blockNames.paragraph
 		);
-		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
+		expect( emptyParagraphBlock ).toBeTruthy();
+		const emptyParagraphBlockElement =
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph );
+		expect( emptyParagraphBlockElement ).toBeTruthy();
+
 		await editorPage.sendTextToParagraphBlock( 1, testData.mediumText );
-		await paragraphBlockElement.click();
 		const html = await editorPage.getHtmlContent();
 		expect( html.toLowerCase() ).toBe(
 			testData.blockInsertionHtmlFromTitle.toLowerCase()
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
deleted file mode 100644
index b57ea2588d7ee6..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-columns.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Columns Block test', () => {
-	it( 'should be able to handle a columns width unit from web', async () => {
-		await editorPage.setHtmlContent(
-			testData.columnsWithDifferentUnitsHtml
-		);
-
-		const columnsBlock = await editorPage.getFirstBlockVisible();
-		await columnsBlock.click();
-
-		expect( columnsBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.columns );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
deleted file mode 100644
index a5b8ec8d1a9eda..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-latest-posts.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Latest Post Block tests', () => {
-	it( 'should be able to add a Latests-Posts block', async () => {
-		await editorPage.addNewBlock( blockNames.latestPosts );
-		const latestPostsBlock = await editorPage.getBlockAtPosition(
-			blockNames.latestPosts
-		);
-
-		expect( latestPostsBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.latestPosts );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
deleted file mode 100644
index d65fa3e6227d22..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-@canary.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for List block', () => {
-	it.skip( 'should be able to add a new List block', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		let listBlockElement = await editorPage.getListBlockAtPosition( 1, {
-			isEmptyBlock: true,
-		} );
-
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem1,
-			false
-		);
-
-		listBlockElement = await editorPage.getListBlockAtPosition();
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
-
-		// Send the second list item text.
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem2,
-			false
-		);
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( testData.listHtml.toLowerCase() );
-	} );
-
-	// This test depends on being run immediately after 'should be able to add a new List block'
-	it.skip( 'should update format to ordered list, using toolbar button', async () => {
-		let listBlockElement = await editorPage.getListBlockAtPosition();
-
-		if ( isAndroid() ) {
-			await listBlockElement.click();
-		}
-
-		// Send a click on the order list format button.
-		await editorPage.clickOrderedListToolBarButton();
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe(
-			testData.listHtmlOrdered.toLowerCase()
-		);
-		// Remove list block to return editor to empty state.
-		listBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.list
-		);
-		await listBlockElement.click();
-		await editorPage.removeBlockAtPosition( blockNames.list );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
deleted file mode 100644
index dcca24cf6badf1..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists-end.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for List block (end)', () => {
-	it.skip( 'should be able to end a List block', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		const listBlockElement = await editorPage.getListBlockAtPosition();
-
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			testData.listItem1,
-			false
-		);
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n\n', false );
-
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			testData.listEndedHtml.toLowerCase()
-		);
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
deleted file mode 100644
index 7c666ae40596e3..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { waitIfAndroid, backspace } from './helpers/utils';
-
-describe( 'Gutenberg Editor tests for List block', () => {
-	// Prevent regression of https://github.com/wordpress-mobile/gutenberg-mobile/issues/871
-	it.skip( 'should handle spaces in a list', async () => {
-		await editorPage.addNewBlock( blockNames.list );
-		let listBlockElement = await editorPage.getListBlockAtPosition();
-
-		// Send the list item text.
-		await editorPage.typeTextToTextBlock( listBlockElement, '  a', false );
-
-		// Send an Enter.
-		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
-
-		// Instead of introducing separate conditions for local and CI environment, add this wait for Android to accommodate both environments
-		await waitIfAndroid();
-
-		// Send a backspace.
-		await editorPage.typeTextToTextBlock(
-			listBlockElement,
-			backspace,
-			false
-		);
-
-		// There is a delay in Sauce Labs when a key is sent
-		// There isn't an element to check as it's being typed into an element that already exists, workaround is to add this wait until there's a better solution
-		await waitIfAndroid();
-
-		// Switch to html and verify html.
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			`<!-- wp:list -->
-<ul><li>  a</li></ul>
-<!-- /wp:list -->`
-		);
-
-		// Remove list block to reset editor to clean state.
-		listBlockElement = await editorPage.getListBlockAtPosition();
-		await listBlockElement.click();
-		await editorPage.removeBlockAtPosition( blockNames.list );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
deleted file mode 100644
index a98627aa5c801c..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-more.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor More Block test', () => {
-	it( 'should be able to add a more block', async () => {
-		await editorPage.addNewBlock( blockNames.more );
-		const moreBlock = await editorPage.getBlockAtPosition(
-			blockNames.more
-		);
-
-		expect( moreBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.more );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
deleted file mode 100644
index 08b2b5b4709d3e..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-separator.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Separator Block test', () => {
-	it( 'should be able to add a separator block', async () => {
-		await editorPage.addNewBlock( blockNames.separator );
-		const separatorBlock = await editorPage.getBlockAtPosition(
-			blockNames.separator
-		);
-
-		expect( separatorBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.separator );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
deleted file mode 100644
index 721ae86ea7eee4..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-spacer.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Spacer Block test', () => {
-	it( 'should be able to add a spacer block', async () => {
-		await editorPage.addNewBlock( blockNames.spacer );
-		const spacerBlock = await editorPage.getBlockAtPosition(
-			blockNames.spacer
-		);
-
-		expect( spacerBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.spacer );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js
deleted file mode 100644
index 93068088f84896..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-verse.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Verse Block Tests', () => {
-	it( 'should be able to add a verse block', async () => {
-		await editorPage.addNewBlock( blockNames.verse );
-		const verseBlock = await editorPage.getBlockAtPosition(
-			blockNames.verse
-		);
-
-		expect( verseBlock ).toBeTruthy();
-		await editorPage.removeBlockAtPosition( blockNames.verse );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/helpers/caps.js b/packages/react-native-editor/__device-tests__/helpers/caps.js
index fd2e8adbcb4bfa..bc776eb8aba20e 100644
--- a/packages/react-native-editor/__device-tests__/helpers/caps.js
+++ b/packages/react-native-editor/__device-tests__/helpers/caps.js
@@ -36,4 +36,5 @@ exports.android = {
 	deviceOrientation: 'portrait',
 	appiumVersion: '1.22.1',
 	app: undefined,
+	disableWindowAnimation: true,
 };
diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
index 64d802f30dbec8..90d8a9be05f4b5 100644
--- a/packages/react-native-editor/__device-tests__/helpers/utils.js
+++ b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -313,15 +313,21 @@ const clickElementOutsideOfTextInput = async ( driver, element ) => {
 };
 
 // Long press to activate context menu.
-const longPressMiddleOfElement = async ( driver, element ) => {
+const longPressMiddleOfElement = async (
+	driver,
+	element,
+	waitTime = 5000, // Setting to wait a bit longer because this is failing more frequently on the CI
+	customElementSize
+) => {
 	const location = await element.getLocation();
-	const size = await element.getSize();
+	const size = customElementSize || ( await element.getSize() );
 
 	const x = location.x + size.width / 2;
 	const y = location.y + size.height / 2;
+
 	const action = new wd.TouchAction( driver )
 		.longPress( { x, y } )
-		.wait( 5000 ) // Setting to wait a bit longer because this is failing more frequently on the CI
+		.wait( waitTime )
 		.release();
 	await action.perform();
 };
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 248999dcb5d657..dc1c8318da35cf 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -305,7 +305,18 @@ class EditorPage {
 		);
 
 		if ( relativePosition === 'before' ) {
-			await longPressMiddleOfElement( this.driver, addButton );
+			// On Android it doesn't get the right size of the button
+			const customElementSize = {
+				width: 43,
+				height: 43,
+			};
+
+			await longPressMiddleOfElement(
+				this.driver,
+				addButton,
+				8000,
+				customElementSize
+			);
 			const addBlockBeforeButtonLocator = isAndroid()
 				? '//android.widget.Button[@content-desc="Add Block Before"]'
 				: '//XCUIElementTypeButton[@name="Add Block Before"]';
@@ -801,6 +812,7 @@ const blockNames = {
 	image: 'Image',
 	latestPosts: 'Latest Posts',
 	list: 'List',
+	listItem: 'List item',
 	more: 'More',
 	paragraph: 'Paragraph',
 	search: 'Search',
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index f06be2f5b92202..8d5268e298df15 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -328,6 +328,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .instagramEmbed: true,
             .loomEmbed: true,
             .smartframeEmbed: true,
+            .supportSection: true
         ]
     }
 
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index e376938d797c9b..a9dd6d174a27e8 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.69.4)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.86.0):
+  - Gutenberg (1.86.1):
     - React-Core (= 0.69.4)
     - React-CoreModules (= 0.69.4)
     - React-RCTImage (= 0.69.4)
@@ -362,7 +362,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6):
     - React-Core
-  - RNTAztecView (1.86.0):
+  - RNTAztecView (1.86.1):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.8)
   - SDWebImage (5.11.1):
@@ -540,14 +540,14 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BVLinearGradient: ace34fab72158c068ae989a0ebdbf86cb4ef0e49
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: c71b8c429a8af2aff1013934a7152e9d9d0c937d
   FBReactNativeSpec: 2ff441cbe6e58c1778d8a5cf3311831a6a8c0809
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
-  Gutenberg: 943a12eae51ca3dcda2ef86b4efe4f4a23854763
+  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
+  Gutenberg: d5a7f8a1047c0076a75a3e0a6400d22c324eef83
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
+  RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
   RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4
   RCTTypeSafety: e44e139bf6ec8042db396201834fc2372f6a21cd
   React: 482cd1ba23c471be1aed3800180be2427418d7be
@@ -588,7 +588,7 @@ SPEC CHECKSUMS:
   RNReanimated: 8b189a09da0345d84b33b8cde57a57f8ed847352
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 634d437faf2908196c7d1237c210936466d6a37d
+  RNTAztecView: 24db190c1b8b792a8b56f51835483547a8790d78
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 0a4f901c8f1c49..263486c9a0eb04 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.86.0",
+	"version": "1.86.1",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -108,7 +108,7 @@
 		"test": "cross-env NODE_ENV=test jest --verbose --config ../../test/native/jest.config.js",
 		"test:debug": "cross-env NODE_ENV=test node --inspect-brk ../../node_modules/.bin/jest --runInBand --verbose --config ../../test/native/jest.config.js",
 		"test:update": "npm run test -- --updateSnapshot",
-		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --verbose --config ./jest_ui.config.js",
+		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --testPathIgnorePatterns=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --verbose --forceExit --config ./jest_ui.config.js",
 		"device-tests:debug": "cross-env NODE_ENV=test node $NODE_DEBUG_OPTION --inspect-brk node_modules/jest/bin/jest --runInBand --detectOpenHandles --verbose --config ./jest_ui.config.js",
diff --git a/packages/report-flaky-tests/action.yml b/packages/report-flaky-tests/action.yml
index 7cea6a50c23a3f..5dfcbeb0d9fc60 100644
--- a/packages/report-flaky-tests/action.yml
+++ b/packages/report-flaky-tests/action.yml
@@ -8,10 +8,10 @@ inputs:
         description: 'The flaky-test label name'
         required: true
         default: 'flaky-test'
-    artifact-name-prefix:
-        description: 'The prefix name of the uploaded artifact'
+    artifact-path:
+        description: 'The path of the downloaded artifact'
         required: true
-        default: 'flaky-tests-report'
+        default: 'flaky-tests'
 runs:
     using: 'node16'
     main: 'build/index.js'
diff --git a/packages/report-flaky-tests/package.json b/packages/report-flaky-tests/package.json
index 0bb58464d33238..76528ceb8a3dbb 100644
--- a/packages/report-flaky-tests/package.json
+++ b/packages/report-flaky-tests/package.json
@@ -28,8 +28,7 @@
 	"dependencies": {
 		"@actions/core": "^1.8.0",
 		"@actions/github": "^5.0.1",
-		"jest-message-util": "^28.0.2",
-		"unzipper": "^0.10.11"
+		"jest-message-util": "^28.0.2"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap b/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
index a0a6c8a67011b9..b0ea1a4c054aa4 100644
--- a/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
+++ b/packages/report-flaky-tests/src/__tests__/__snapshots__/run.test.ts.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Report flaky tests should report flaky tests to issue: Created new flaky issue 1`] = `
+exports[`Report flaky tests should report flaky tests to issue on pull request: Created new flaky issue 1`] = `
 "<!-- __META_DATA__:{} -->
 **Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
@@ -14,7 +14,7 @@ Should insert new template part on creation
 <!-- __TEST_RESULTS_LIST__ -->
 <!-- __TEST_RESULT__ --><details>
 <summary>
-	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"runURL\\"><code>headBranch</code></a>.
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>headBranch</code></a>.
 </summary>
 
 \`\`\`
@@ -62,7 +62,7 @@ Should insert new template part on creation
 "
 `;
 
-exports[`Report flaky tests should report flaky tests to issue: Updated existing flaky issue 1`] = `
+exports[`Report flaky tests should report flaky tests to issue on pull request: Updated existing flaky issue 1`] = `
 "<!-- __META_DATA__:{\\"failedTimes\\":58,\\"totalCommits\\":134,\\"baseCommit\\":\\"32bb60d08b75486341d8a63b9e786152889aa02d\\"} -->
 **Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
@@ -148,7 +148,190 @@ should copy only partial selection of text blocks
 <br/>
 <!-- __TEST_RESULT__ --><details>
 <summary>
-	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"runURL\\"><code>headBranch</code></a>.
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>headBranch</code></a>.
+</summary>
+
+\`\`\`
+Error: Snapshot comparison failed:
+
+  <!-- wp:paragraph -->
+  <p>block</p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>B </p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>A block</p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p></p>
+  <!-- /wp:paragraph -->
+
+  <!-- wp:paragraph -->
+  <p>B block</p>
+  <!-- /wp:paragraph -->
+
+Expected: /home/runner/work/gutenberg/gutenberg/artifacts/test-results/editor-various-copy-cut-paste-Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-chromium/Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-2-expected.txt
+Received: /home/runner/work/gutenberg/gutenberg/artifacts/test-results/editor-various-copy-cut-paste-Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-chromium/Copy-cut-paste-should-copy-only-partial-selection-of-text-blocks-2-actual.txt
+    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:253:52
+\`\`\`
+</details><!-- /__TEST_RESULT__ -->
+<!-- /__TEST_RESULTS_LIST__ -->
+"
+`;
+
+exports[`Report flaky tests should report flaky tests to issue on push: Created new flaky issue 1`] = `
+"<!-- __META_DATA__:{} -->
+**Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
+
+## Test title
+Should insert new template part on creation
+
+## Test path
+\`specs/site-editor/template-part.test.js\`
+
+## Errors
+<!-- __TEST_RESULTS_LIST__ -->
+<!-- __TEST_RESULT__ --><details>
+<summary>
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 2 failed attempts on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>trunk</code></a>.
+</summary>
+
+\`\`\`
+  ● Template Part › Template part block › Template part placeholder › Should insert new template part on creation
+
+    expect(jest.fn()).not.toHaveErrored(expected)
+
+    Expected mock function not to be called but it was called with:
+    [\\"TypeError: Cannot read properties of null (reading 'frameElement')
+
+      at Vo (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=dfd3a79ce1dc54c31b6ed591bcb0d55a:3:21925)
+      at ft (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:43451)
+      at Wt (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:50270)
+      at ts (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:112276)
+      at Fr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77758)
+      at Dr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77686)
+      at Rr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77549)
+      at Nr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:74544)
+      at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:30170
+      at unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)\\"]
+          at runMicrotasks (<anonymous>)
+
+  ● Template Part › Template part block › Template part placeholder › Should insert new template part on creation
+
+    expect(jest.fn()).not.toHaveErrored(expected)
+
+    Expected mock function not to be called but it was called with:
+    [\\"TypeError: Cannot read properties of null (reading 'frameElement')
+
+      at Vo (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=dfd3a79ce1dc54c31b6ed591bcb0d55a:3:21925)
+      at ft (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:43451)
+      at Wt (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:50270)
+      at ts (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:112276)
+      at Fr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77758)
+      at Dr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77686)
+      at Rr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:77549)
+      at Nr (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:74544)
+      at ../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react-dom.min.js?ver=6.1-alpha-53362:1:30170
+      at unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)\\"]
+          at runMicrotasks (<anonymous>)
+
+\`\`\`
+</details><!-- /__TEST_RESULT__ -->
+<!-- /__TEST_RESULTS_LIST__ -->
+"
+`;
+
+exports[`Report flaky tests should report flaky tests to issue on push: Updated existing flaky issue 1`] = `
+"<!-- __META_DATA__:{\\"failedTimes\\":58,\\"totalCommits\\":134,\\"baseCommit\\":\\"32bb60d08b75486341d8a63b9e786152889aa02d\\"} -->
+**Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
+
+## Test title
+should copy only partial selection of text blocks
+
+## Test path
+\`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+
+## Errors
+<!-- __TEST_RESULTS_LIST__ -->
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-13T10:32:59.201Z\\"><code>[2022-04-13T10:32:59.201Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2160552635\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T09:51:38.785Z\\"><code>[2022-04-18T09:51:38.785Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183265588\\"><code>update/post-featured-image-component</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T10:53:30.411Z\\"><code>[2022-04-18T10:53:30.411Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183485173\\"><code>add/wp-env/wp-env-core-env</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T12:20:51.800Z\\"><code>[2022-04-18T12:20:51.800Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2183790777\\"><code>fix/e2e-test</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T13:47:15.612Z\\"><code>[2022-04-18T13:47:15.612Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184126130\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T13:48:06.669Z\\"><code>[2022-04-18T13:48:06.669Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184130029\\"><code>fix/duotone-site-editor</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:01:10.151Z\\"><code>[2022-04-18T14:01:10.151Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184182012\\"><code>fix/playwright-snapshots</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:12:20.129Z\\"><code>[2022-04-18T14:12:20.129Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184226509\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:48:36.649Z\\"><code>[2022-04-18T14:48:36.649Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184377565\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T14:56:37.960Z\\"><code>[2022-04-18T14:56:37.960Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184418035\\"><code>rnmobile/feature/drag-and-drop</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:02:27.183Z\\"><code>[2022-04-18T15:02:27.183Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184449849\\"><code>rnmobile/feature/drag-and-drop-prevent-text-focus-on-long-press</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:34:59.990Z\\"><code>[2022-04-18T15:34:59.990Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184593633\\"><code>add/section-concept</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:38:30.538Z\\"><code>[2022-04-18T15:38:30.538Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184609574\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:48:40.494Z\\"><code>[2022-04-18T15:48:40.494Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184652286\\"><code>rnmobile/feature/drag-and-drop-refactor-draggable</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:50:50.420Z\\"><code>[2022-04-18T15:50:50.420Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184658598\\"><code>rnmobile/feature/drag-and-drop-update-chip-animation</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:52:48.948Z\\"><code>[2022-04-18T15:52:48.948Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184662247\\"><code>fix/comment-reply-link-alignment</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T15:55:31.386Z\\"><code>[2022-04-18T15:55:31.386Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184668485\\"><code>rnmobile/feature/drag-and-drop-haptic-feedback</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T16:09:33.323Z\\"><code>[2022-04-18T16:09:33.323Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184728812\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T16:17:20.282Z\\"><code>[2022-04-18T16:17:20.282Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2184756693\\"><code>fix/embed-block-preview-cut-off</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T17:30:31.287Z\\"><code>[2022-04-18T17:30:31.287Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185065551\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T17:51:21.537Z\\"><code>[2022-04-18T17:51:21.537Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185158655\\"><code>fix/copy-from-non-text-inputs</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T19:54:17.115Z\\"><code>[2022-04-18T19:54:17.115Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2185732975\\"><code>remove/block-styles-remove-role</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T21:02:44.582Z\\"><code>[2022-04-18T21:02:44.582Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2186019382\\"><code>docgen/replace-fixtures-with-code</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-18T22:38:25.644Z\\"><code>[2022-04-18T22:38:25.644Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2186398254\\"><code>try/use-css-var-for-user-presets</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-04-23T16:41:35.814Z\\"><code>[2022-04-23T16:41:35.814Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2212870284\\"><code>fix/flaky-test-reporter</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:20:09.628Z\\"><code>[2022-05-10T13:20:09.628Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300794825\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:33:14.282Z\\"><code>[2022-05-10T13:33:14.282Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300911722\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T13:40:06.465Z\\"><code>[2022-05-10T13:40:06.465Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2300960655\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T15:45:55.917Z\\"><code>[2022-05-10T15:45:55.917Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2301711710\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T15:54:10.994Z\\"><code>[2022-05-10T15:54:10.994Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2301740850\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-10T18:58:47.148Z\\"><code>[2022-05-10T18:58:47.148Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2302689513\\"><code>fix/input-field-reset-behavior-moar</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T07:23:49.752Z\\"><code>[2022-05-16T07:23:49.752Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2330295878\\"><code>refactor/range-control-to-typescript</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T07:50:53.486Z\\"><code>[2022-05-16T07:50:53.486Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2330425165\\"><code>refactor/range-control-to-typescript</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T09:51:42.310Z\\"><code>[2022-05-16T09:51:42.310Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2331036710\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-16T10:08:17.403Z\\"><code>[2022-05-16T10:08:17.403Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2331126515\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><time datetime=\\"2022-05-17T12:57:57.490Z\\"><code>[2022-05-17T12:57:57.490Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2338696807\\"><code>wp/6.0</code></a>.<!-- /__TEST_RESULT__ -->
+<br/>
+<!-- __TEST_RESULT__ --><details>
+<summary>
+	<time datetime=\\"2020-05-10T00:00:00.000Z\\"><code>[2020-05-10T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/100\\"><code>trunk</code></a>.
 </summary>
 
 \`\`\`
diff --git a/packages/report-flaky-tests/src/__tests__/markdown.test.ts b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
index 5d7b7dd62bc873..e8a5b4f25da5d3 100644
--- a/packages/report-flaky-tests/src/__tests__/markdown.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
@@ -12,7 +12,10 @@ import {
 	renderIssueBody,
 	parseFormattedTestResults,
 	parseIssueBody,
+	renderCommitComment,
+	isReportComment,
 } from '../markdown';
+import { ReportedIssue } from '../types';
 
 jest.useFakeTimers( 'modern' ).setSystemTime( new Date( '2020-05-10' ) );
 
@@ -226,6 +229,55 @@ describe( 'parseIssueBody', () => {
 	} );
 } );
 
+describe( 'renderCommitComment', () => {
+	it( 'render the commit comment', () => {
+		const runURL = 'runURL';
+		const reportedIssues: ReportedIssue[] = [
+			{
+				testTitle: 'title1',
+				testPath: 'path1',
+				issueNumber: 1,
+				issueUrl: 'url1',
+			},
+			{
+				testTitle: 'title2',
+				testPath: 'path2',
+				issueNumber: 2,
+				issueUrl: 'url2',
+			},
+		];
+
+		const commentBody = renderCommitComment( {
+			reportedIssues,
+			runURL,
+		} );
+
+		expect( commentBody ).toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: runURL
+		📝  Reported issues:
+		- #1 in \`path1\`
+		- #2 in \`path2\`"
+	` );
+	} );
+} );
+
+describe( 'isReportComment', () => {
+	it( 'matches the report comment', () => {
+		const commentBody = renderCommitComment( {
+			reportedIssues: [],
+			runURL: '',
+		} );
+
+		expect( isReportComment( commentBody ) ).toBe( true );
+
+		expect( isReportComment( 'random string' ) ).toBe( false );
+	} );
+} );
+
 function renderToDisplayText( html: string ) {
 	const container = document.createElement( 'div' );
 	container.innerHTML = html;
diff --git a/packages/report-flaky-tests/src/__tests__/run.test.ts b/packages/report-flaky-tests/src/__tests__/run.test.ts
index 93b8c4eddf46b0..b064fae579f3e3 100644
--- a/packages/report-flaky-tests/src/__tests__/run.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/run.test.ts
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as core from '@actions/core';
+import * as github from '@actions/github';
 
 /**
  * Internal dependencies
@@ -10,22 +11,42 @@ import { run } from '../run';
 
 jest.useFakeTimers( 'modern' ).setSystemTime( new Date( '2020-05-10' ) );
 
-jest.mock( '@actions/github', () => ( {
-	context: {
-		repo: {
-			owner: 'WordPress',
-			repo: 'gutenberg',
-		},
-		eventName: 'workflow_run',
-		payload: {
-			action: 'completed',
-			workflow_run: {
-				html_url: 'runURL',
-				head_branch: 'headBranch',
-				id: 100,
+const mockPushEventContext = {
+	runId: 100,
+	repo: {
+		owner: 'WordPress',
+		repo: 'gutenberg',
+	},
+	ref: 'refs/heads/trunk',
+	sha: 'commitSHA',
+	eventName: 'push',
+};
+const mockPullRequestEventContext = {
+	runId: 100,
+	repo: {
+		owner: 'WordPress',
+		repo: 'gutenberg',
+	},
+	ref: 'refs/pull/10/merge',
+	sha: 'mergeSHA',
+	eventName: 'pull_request',
+	payload: {
+		pull_request: {
+			head: {
+				ref: 'headBranch',
+				sha: 'headSHA',
 			},
 		},
 	},
+};
+const mockGetContext = jest.fn(
+	(): typeof mockPushEventContext | typeof mockPullRequestEventContext =>
+		mockPullRequestEventContext
+);
+jest.mock( '@actions/github', () => ( {
+	get context() {
+		return mockGetContext();
+	},
 } ) );
 
 jest.mock( '@actions/core', () => ( {
@@ -35,14 +56,19 @@ jest.mock( '@actions/core', () => ( {
 } ) );
 
 const mockAPI = {
-	downloadReportFromArtifact: jest.fn(),
 	fetchAllIssuesLabeledFlaky: jest.fn(),
 	findMergeBaseCommit: jest.fn(),
 	updateIssue: jest.fn(),
 	createIssue: jest.fn(),
+	createComment: jest.fn(),
 };
 jest.mock( '../github-api', () => ( {
-	GitHubAPI: jest.fn().mockImplementation( () => mockAPI ),
+	GitHubAPI: jest.fn( () => mockAPI ),
+} ) );
+
+jest.mock( 'fs/promises', () => ( {
+	readdir: jest.fn(),
+	readFile: jest.fn(),
 } ) );
 
 describe( 'Report flaky tests', () => {
@@ -50,7 +76,7 @@ describe( 'Report flaky tests', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'should report flaky tests to issue', async () => {
+	it( 'should report flaky tests to issue on pull request', async () => {
 		const existingFlakyTest = await import(
 			'../__fixtures__/should copy only partial selection of text blocks.json'
 		).then( ( json ) => json.default );
@@ -62,8 +88,11 @@ describe( 'Report flaky tests', () => {
 		).then( ( json ) => json.default );
 
 		( core.getInput as jest.Mock )
+			// token
 			.mockReturnValueOnce( 'repo-token' )
-			.mockReturnValueOnce( 'flaky-tests-report' )
+			// artifact-path
+			.mockReturnValueOnce( 'flaky-tests' )
+			// label
 			.mockReturnValueOnce( '[Type] Flaky Test' );
 
 		// Replacing the cwd for the test for consistent snapshot results.
@@ -71,29 +100,146 @@ describe( 'Report flaky tests', () => {
 			'/home/runner/work/gutenberg/gutenberg',
 			process.cwd()
 		);
-		mockAPI.downloadReportFromArtifact.mockImplementationOnce( () => [
-			existingFlakyTest,
-			newFlakyTest,
-		] );
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [
+				`${ existingFlakyTest.title }.json`,
+				`${ newFlakyTest.title }.json`,
+			] )
+		);
+		mockedFs.readFile
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( existingFlakyTest ) )
+			)
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( newFlakyTest ) )
+			);
 
 		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
 			() => flakyIssues
 		);
 
 		mockAPI.updateIssue.mockImplementationOnce( () => ( {
+			number: 1,
 			html_url: 'html_url',
 		} ) );
 
 		mockAPI.createIssue.mockImplementationOnce( () => ( {
+			number: 2,
 			html_url: 'html_url',
 		} ) );
 
+		mockAPI.createComment.mockImplementationOnce( () => ( {
+			html_url: 'comment_html_url',
+		} ) );
+
 		await run();
 
 		const existingFlakyIssue = flakyIssues.find(
 			( issue ) =>
 				issue.title === `[Flaky Test] ${ existingFlakyTest.title }`
+		)!;
+		expect( mockAPI.updateIssue ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				issue_number: existingFlakyIssue.number,
+				state: 'open',
+			} )
+		);
+		expect( mockAPI.updateIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
+			'Updated existing flaky issue'
 		);
+
+		expect( mockAPI.createIssue ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: `[Flaky Test] ${ newFlakyTest.title }`,
+			} )
+		);
+		expect( mockAPI.createIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
+			'Created new flaky issue'
+		);
+
+		expect( mockAPI.createComment ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 0 ] ).toBe( 'headSHA' );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/100
+		📝  Reported issues:
+		- #1 in \`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+		- #2 in \`specs/site-editor/template-part.test.js\`"
+	` );
+	} );
+
+	it( 'should report flaky tests to issue on push', async () => {
+		mockGetContext.mockImplementation( () => mockPushEventContext );
+
+		const existingFlakyTest = await import(
+			'../__fixtures__/should copy only partial selection of text blocks.json'
+		).then( ( json ) => json.default );
+		const newFlakyTest = await import(
+			'../__fixtures__/Should insert new template part on creation.json'
+		).then( ( json ) => json.default );
+		const flakyIssues = await import(
+			'../__fixtures__/flaky-issues.json'
+		).then( ( json ) => json.default );
+
+		( core.getInput as jest.Mock )
+			// token
+			.mockReturnValueOnce( 'repo-token' )
+			// artifact-path
+			.mockReturnValueOnce( 'flaky-tests' )
+			// label
+			.mockReturnValueOnce( '[Type] Flaky Test' );
+
+		// Replacing the cwd for the test for consistent snapshot results.
+		existingFlakyTest.path = existingFlakyTest.path.replace(
+			'/home/runner/work/gutenberg/gutenberg',
+			process.cwd()
+		);
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [
+				`${ existingFlakyTest.title }.json`,
+				`${ newFlakyTest.title }.json`,
+			] )
+		);
+		mockedFs.readFile
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( existingFlakyTest ) )
+			)
+			.mockImplementationOnce( () =>
+				Promise.resolve( JSON.stringify( newFlakyTest ) )
+			);
+
+		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
+			() => flakyIssues
+		);
+
+		mockAPI.updateIssue.mockImplementationOnce( () => ( {
+			number: 1,
+			html_url: 'html_url',
+		} ) );
+
+		mockAPI.createIssue.mockImplementationOnce( () => ( {
+			number: 2,
+			html_url: 'html_url',
+		} ) );
+
+		mockAPI.createComment.mockImplementationOnce( () => ( {
+			html_url: 'comment_html_url',
+		} ) );
+
+		await run();
+
+		const existingFlakyIssue = flakyIssues.find(
+			( issue ) =>
+				issue.title === `[Flaky Test] ${ existingFlakyTest.title }`
+		)!;
 		expect( mockAPI.updateIssue ).toHaveBeenCalledWith(
 			expect.objectContaining( {
 				issue_number: existingFlakyIssue.number,
@@ -112,6 +258,24 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.createIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
 			'Created new flaky issue'
 		);
+
+		expect( mockAPI.createComment ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 0 ] ).toBe(
+			'commitSHA'
+		);
+		expect( mockAPI.createComment.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected.**
+		Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+		🔍  Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/100
+		📝  Reported issues:
+		- #1 in \`/test/e2e/specs/editor/various/copy-cut-paste.spec.js\`
+		- #2 in \`specs/site-editor/template-part.test.js\`"
+	` );
+
+		mockGetContext.mockImplementation( () => mockPullRequestEventContext );
 	} );
 
 	it( 'should skip for outdated branches', async () => {
@@ -132,9 +296,14 @@ describe( 'Report flaky tests', () => {
 			'/home/runner/work/gutenberg/gutenberg',
 			process.cwd()
 		);
-		mockAPI.downloadReportFromArtifact.mockImplementationOnce( () => [
-			flakyTest,
-		] );
+
+		const mockedFs = require( 'fs/promises' );
+		mockedFs.readdir.mockImplementationOnce( () =>
+			Promise.resolve( [ `${ flakyTest.title }.json` ] )
+		);
+		mockedFs.readFile.mockImplementationOnce( () =>
+			Promise.resolve( JSON.stringify( flakyTest ) )
+		);
 
 		mockAPI.fetchAllIssuesLabeledFlaky.mockImplementationOnce(
 			() => flakyIssues
@@ -151,8 +320,9 @@ describe( 'Report flaky tests', () => {
 		// indicating that the code base at this point is outdated.
 		const flakyIssue = flakyIssues.find(
 			( issue ) => issue.title === `[Flaky Test] ${ flakyTest.title }`
-		);
+		)!;
 		flakyIssue.state = 'closed';
+		// @ts-expect-error: "closed_at" hasn't been typed yet.
 		flakyIssue.closed_at = new Date( '2022-05-15' ).toISOString();
 
 		await run();
@@ -160,5 +330,7 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.findMergeBaseCommit ).toHaveBeenCalledTimes( 1 );
 
 		expect( mockAPI.updateIssue ).not.toHaveBeenCalled();
+
+		expect( mockAPI.createComment ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/report-flaky-tests/src/github-api.ts b/packages/report-flaky-tests/src/github-api.ts
index b7aa0990085683..8d5d49025f576c 100644
--- a/packages/report-flaky-tests/src/github-api.ts
+++ b/packages/report-flaky-tests/src/github-api.ts
@@ -2,14 +2,13 @@
  * External dependencies
  */
 import { getOctokit } from '@actions/github';
-import * as unzipper from 'unzipper';
 import type { GitHub } from '@actions/github/lib/utils';
 import type { Endpoints } from '@octokit/types';
 
 /**
  * Internal dependencies
  */
-import type { FlakyTestResult } from './types';
+import { isReportComment } from './markdown';
 
 type Octokit = InstanceType< typeof GitHub >;
 
@@ -27,44 +26,6 @@ class GitHubAPI {
 		this.#repo = repo;
 	}
 
-	async downloadReportFromArtifact(
-		runID: number,
-		artifactNamePrefix: string
-	): Promise< FlakyTestResult[] | undefined > {
-		const {
-			data: { artifacts },
-		} = await this.#octokit.rest.actions.listWorkflowRunArtifacts( {
-			...this.#repo,
-			run_id: runID,
-		} );
-
-		const matchArtifact = artifacts.find( ( artifact ) =>
-			artifact.name.startsWith( artifactNamePrefix )
-		);
-
-		if ( ! matchArtifact ) {
-			return undefined;
-		}
-
-		const download = await this.#octokit.rest.actions.downloadArtifact( {
-			...this.#repo,
-			artifact_id: matchArtifact.id,
-			archive_format: 'zip',
-		} );
-
-		const { files } = await unzipper.Open.buffer(
-			Buffer.from( download.data as Buffer )
-		);
-		const fileBuffers = await Promise.all(
-			files.map( ( file ) => file.buffer() )
-		);
-		const parsedFiles = fileBuffers.map(
-			( buffer ) => JSON.parse( buffer.toString() ) as FlakyTestResult
-		);
-
-		return parsedFiles;
-	}
-
 	async fetchAllIssuesLabeledFlaky( label: string ) {
 		const issues = await this.#octokit.paginate(
 			this.#octokit.rest.issues.listForRepo,
@@ -116,6 +77,37 @@ class GitHubAPI {
 
 		return data;
 	}
+
+	async createComment( sha: string, body: string ) {
+		const { data: comments } =
+			await this.#octokit.rest.repos.listCommentsForCommit( {
+				...this.#repo,
+				commit_sha: sha,
+			} );
+		const reportComment = comments.find( ( comment ) =>
+			isReportComment( comment.body )
+		);
+
+		if ( reportComment ) {
+			const { data } = await this.#octokit.rest.repos.updateCommitComment(
+				{
+					...this.#repo,
+					comment_id: reportComment.id,
+					body,
+				}
+			);
+
+			return data;
+		}
+
+		const { data } = await this.#octokit.rest.repos.createCommitComment( {
+			...this.#repo,
+			commit_sha: sha,
+			body,
+		} );
+
+		return data;
+	}
 }
 
 export { GitHubAPI };
diff --git a/packages/report-flaky-tests/src/markdown.ts b/packages/report-flaky-tests/src/markdown.ts
index 2852623115c674..15d850773ffe65 100644
--- a/packages/report-flaky-tests/src/markdown.ts
+++ b/packages/report-flaky-tests/src/markdown.ts
@@ -9,7 +9,7 @@ import * as core from '@actions/core';
  * Internal dependencies
  */
 import { stripAnsi } from './strip-ansi';
-import type { MetaData, FlakyTestResult } from './types';
+import type { MetaData, FlakyTestResult, ReportedIssue } from './types';
 
 type ParsedTestResult = {
 	date: Date;
@@ -203,10 +203,36 @@ function parseIssueBody( body: string ) {
 	};
 }
 
+const FLAKY_TESTS_REPORT_COMMENT_TOKEN = `flaky-tests-report-comment`;
+
+function renderCommitComment( {
+	reportedIssues,
+	runURL,
+}: {
+	reportedIssues: ReportedIssue[];
+	runURL: string;
+} ) {
+	return `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->
+**Flaky tests detected.**
+Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See [the documentation](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/testing-overview.md#flaky-tests) for more information.
+
+🔍  Workflow run URL: ${ runURL }
+📝  Reported issues:
+${ reportedIssues
+	.map( ( issue ) => `- #${ issue.issueNumber } in \`${ issue.testPath }\`` )
+	.join( '\n' ) }`;
+}
+
+function isReportComment( body: string ) {
+	return body.startsWith( `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->` );
+}
+
 export {
 	renderIssueBody,
 	formatTestErrorMessage,
 	formatTestResults,
 	parseFormattedTestResults,
 	parseIssueBody,
+	renderCommitComment,
+	isReportComment,
 };
diff --git a/packages/report-flaky-tests/src/run.ts b/packages/report-flaky-tests/src/run.ts
index 307a41cb100787..65323c3d87fa80 100644
--- a/packages/report-flaky-tests/src/run.ts
+++ b/packages/report-flaky-tests/src/run.ts
@@ -3,7 +3,9 @@
  */
 import * as github from '@actions/github';
 import * as core from '@actions/core';
-import type { WorkflowRunCompletedEvent } from '@octokit/webhooks-types';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import type { PullRequestEvent } from '@octokit/webhooks-types';
 
 /**
  * Internal dependencies
@@ -14,39 +16,44 @@ import {
 	formatTestErrorMessage,
 	formatTestResults,
 	parseIssueBody,
+	renderCommitComment,
 } from './markdown';
+import type { ReportedIssue } from './types';
 
 async function run() {
-	if (
-		github.context.eventName !== 'workflow_run' ||
-		github.context.payload.action !== 'completed'
-	) {
-		return;
-	}
-
 	const token = core.getInput( 'repo-token', { required: true } );
-	const artifactNamePrefix = core.getInput( 'artifact-name-prefix', {
+	const artifactPath = core.getInput( 'artifact-path', {
 		required: true,
 	} );
 
-	const api = new GitHubAPI( token, github.context.repo );
-	// Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
-	const {
-		workflow_run: { head_branch: headBranch, html_url: runURL, id: runID },
-	} = github.context.payload as WorkflowRunCompletedEvent;
-
-	const flakyTests = await api.downloadReportFromArtifact(
-		runID,
-		artifactNamePrefix
+	const { runId: runID, repo, ref } = github.context;
+	const runURL = `https://github.com/${ repo.owner }/${ repo.repo }/actions/runs/${ runID }`;
+	const api = new GitHubAPI( token, repo );
+
+	const flakyTestsDir = await fs.readdir( artifactPath );
+	const flakyTests = await Promise.all(
+		flakyTestsDir.map( ( filename ) =>
+			fs
+				.readFile( path.join( artifactPath, filename ), 'utf-8' )
+				.then( ( text ) => JSON.parse( text ) )
+		)
 	);
 
-	if ( ! flakyTests ) {
+	if ( ! flakyTests || flakyTests.length === 0 ) {
 		// No flaky tests reported in this run.
 		return;
 	}
 
+	const headBranch =
+		github.context.eventName === 'pull_request'
+			? // Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+			  ( github.context.payload as PullRequestEvent ).pull_request.head
+					.ref
+			: ref.replace( /^refs\/(heads|tag)\//, '' );
+
 	const label = core.getInput( 'label', { required: true } );
 	const issues = await api.fetchAllIssuesLabeledFlaky( label );
+	const reportedIssues: ReportedIssue[] = [];
 
 	for ( const flakyTest of flakyTests ) {
 		const { title: testTitle } = flakyTest;
@@ -143,8 +150,33 @@ async function run() {
 			} );
 		}
 
+		reportedIssues.push( {
+			testTitle,
+			testPath,
+			issueNumber: issue.number,
+			issueUrl: issue.html_url,
+		} );
 		core.info( `Reported flaky test to ${ issue.html_url }` );
 	}
+
+	if ( reportedIssues.length === 0 ) {
+		return;
+	}
+
+	const commitSHA =
+		github.context.eventName === 'pull_request'
+			? // Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+			  ( github.context.payload as PullRequestEvent ).pull_request.head
+					.sha
+			: github.context.sha;
+	const { html_url: commentUrl } = await api.createComment(
+		commitSHA,
+		renderCommitComment( {
+			runURL,
+			reportedIssues,
+		} )
+	);
+	core.info( `Reported the summary of the flaky tests to ${ commentUrl }` );
 }
 
 function getIssueTitle( testTitle: string ) {
diff --git a/packages/report-flaky-tests/src/types.ts b/packages/report-flaky-tests/src/types.ts
index e52d6dba471018..5de8770ef75418 100644
--- a/packages/report-flaky-tests/src/types.ts
+++ b/packages/report-flaky-tests/src/types.ts
@@ -29,3 +29,10 @@ export type MetaData = {
 	totalCommits?: number;
 	baseCommit?: string;
 };
+
+export type ReportedIssue = {
+	testTitle: string;
+	testPath: string;
+	issueNumber: number;
+	issueUrl: string;
+};
diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js
index b271091cbe6a0a..8ea19a97f595ff 100644
--- a/packages/rich-text/src/register-format-type.js
+++ b/packages/rich-text/src/register-format-type.js
@@ -82,7 +82,10 @@ export function registerFormatType( name, settings ) {
 			richTextStore
 		).getFormatTypeForBareElement( settings.tagName );
 
-		if ( formatTypeForBareElement ) {
+		if (
+			formatTypeForBareElement &&
+			formatTypeForBareElement.name !== 'core/unknown'
+		) {
 			window.console.error(
 				`Format "${ formatTypeForBareElement.name }" is already registered to handle bare tag name "${ settings.tagName }".`
 			);
diff --git a/packages/rich-text/src/test/register-format-type.js b/packages/rich-text/src/test/register-format-type.js
index 0d044d28facfae..0f5c16eabf2323 100644
--- a/packages/rich-text/src/test/register-format-type.js
+++ b/packages/rich-text/src/test/register-format-type.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { select } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -11,10 +11,21 @@ import { unregisterFormatType } from '../unregister-format-type';
 import { getFormatType } from '../get-format-type';
 import { store as richTextStore } from '../store';
 
+const UNKNOWN_FORMAT = {
+	name: 'core/unknown',
+	title: 'Clear Unknown Formatting',
+	tagName: '*',
+	className: null,
+	edit: () => null,
+};
+
 describe( 'registerFormatType', () => {
 	beforeAll( () => {
 		// Initialize the rich-text store.
 		require( '../store' );
+
+		// Register "core/unknown" format
+		dispatch( richTextStore ).addFormatTypes( UNKNOWN_FORMAT );
 	} );
 
 	afterEach( () => {
diff --git a/packages/scripts/config/puppeteer.config.js b/packages/scripts/config/puppeteer.config.js
index 2ca9621040a64a..dc222b0e8d1caf 100644
--- a/packages/scripts/config/puppeteer.config.js
+++ b/packages/scripts/config/puppeteer.config.js
@@ -3,6 +3,9 @@ module.exports = {
 		devtools: process.env.PUPPETEER_DEVTOOLS === 'true',
 		headless: process.env.PUPPETEER_HEADLESS !== 'false',
 		slowMo: parseInt( process.env.PUPPETEER_SLOWMO, 10 ) || 0,
-		args: [ '--enable-blink-features=ComputedAccessibilityInfo' ],
+		args: [
+			'--enable-blink-features=ComputedAccessibilityInfo',
+			'--disable-web-security',
+		],
 	},
 };
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index d5ee5bca8f1b6d..653099f7f5854b 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -36,8 +36,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/url": "file:../url",
-		"fast-deep-equal": "^3.1.3",
-		"lodash": "^4.17.21"
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f5636c150c3eeb..0fd0aeac60e7c4 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -206,6 +206,12 @@ final class WP_Style_Engine {
 				),
 				'path'          => array( 'typography', 'lineHeight' ),
 			),
+			'textColumns'    => array(
+				'property_keys' => array(
+					'default' => 'column-count',
+				),
+				'path'          => array( 'typography', 'textColumns' ),
+			),
 			'textDecoration' => array(
 				'property_keys' => array(
 					'default' => 'text-decoration',
diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts
index 48effa0b2b8a95..75e02c96430512 100644
--- a/packages/style-engine/src/styles/typography/index.ts
+++ b/packages/style-engine/src/styles/typography/index.ts
@@ -76,6 +76,18 @@ const lineHeight = {
 	},
 };
 
+const textColumns = {
+	name: 'textColumns',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textColumns' ],
+			'columnCount'
+		);
+	},
+};
+
 const textDecoration = {
 	name: 'textDecoration',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -107,6 +119,7 @@ export default [
 	fontWeight,
 	letterSpacing,
 	lineHeight,
+	textColumns,
 	textDecoration,
 	textTransform,
 ];
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index a94bd8a4256810..fac55b4000e58f 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -72,6 +72,7 @@ describe( 'generate', () => {
 						fontWeight: '800',
 						fontFamily: "'Helvetica Neue',sans-serif",
 						lineHeight: '3.3',
+						textColumns: '2',
 						textDecoration: 'line-through',
 						letterSpacing: '12px',
 						textTransform: 'uppercase',
@@ -88,7 +89,7 @@ describe( 'generate', () => {
 				}
 			)
 		).toEqual(
-			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
+			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; column-count: 2; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 
@@ -242,6 +243,7 @@ describe( 'getCSSRules', () => {
 						fontWeight: '800',
 						fontFamily: "'Helvetica Neue',sans-serif",
 						lineHeight: '3.3',
+						textColumns: '2',
 						textDecoration: 'line-through',
 						letterSpacing: '12px',
 						textTransform: 'uppercase',
@@ -349,6 +351,11 @@ describe( 'getCSSRules', () => {
 				key: 'lineHeight',
 				value: '3.3',
 			},
+			{
+				selector: '.some-selector',
+				key: 'columnCount',
+				value: '2',
+			},
 			{
 				selector: '.some-selector',
 				key: 'textDecoration',
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 0063cd56621c6c..23d3e38cc43c22 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -52,6 +52,7 @@ export interface Style {
 		fontStyle?: CSSProperties[ 'fontStyle' ];
 		letterSpacing?: CSSProperties[ 'letterSpacing' ];
 		lineHeight?: CSSProperties[ 'lineHeight' ];
+		textColumns?: CSSProperties[ 'columnCount' ];
 		textDecoration?: CSSProperties[ 'textDecoration' ];
 		textTransform?: CSSProperties[ 'textTransform' ];
 	};
diff --git a/packages/widgets/src/index.js b/packages/widgets/src/index.js
index 6c88d65556d8b0..e55b16ff12b35d 100644
--- a/packages/widgets/src/index.js
+++ b/packages/widgets/src/index.js
@@ -18,11 +18,21 @@ export * from './utils';
  * Note that for the block to be useful, any scripts required by a widget must
  * be loaded into the page.
  *
+ * @param {Object} supports Block support settings.
  * @see https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/
  */
-export function registerLegacyWidgetBlock() {
+export function registerLegacyWidgetBlock( supports = {} ) {
 	const { metadata, settings, name } = legacyWidget;
-	registerBlockType( { name, ...metadata }, settings );
+	registerBlockType(
+		{ name, ...metadata },
+		{
+			...settings,
+			supports: {
+				...settings.supports,
+				...supports,
+			},
+		}
+	);
 }
 
 /**
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 63fd98d1e524ff..1b9b6f97c63f6e 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -557,22 +557,18 @@ public function data_generate_font_size_preset_fixtures() {
 	/**
 	 * Tests that custom font sizes are converted to fluid values
 	 * in inline block supports styles,
-	 * when "settings.typography.fluid" is set to `true`.
+	 * when "settings.typography.fluid" is set to `true` or contains configured values.
 	 *
 	 * @covers ::gutenberg_register_typography_support
 	 *
 	 * @dataProvider data_generate_block_supports_font_size_fixtures
 	 *
-	 * @param string $font_size_value             The block supports custom font size value.
-	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
-	 * @param string $expected_output             Expected value of style property from gutenberg_apply_typography_support().
+	 * @param string $font_size_value The block supports custom font size value.
+	 * @param string $theme_slug      A theme slug corresponding to an available test theme.
+	 * @param string $expected_output Expected value of style property from gutenberg_apply_typography_support().
 	 */
-	public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
-		if ( $should_use_fluid_typography ) {
-			switch_theme( 'block-theme-child-with-fluid-typography' );
-		} else {
-			switch_theme( 'default' );
-		}
+	public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $theme_slug, $expected_output ) {
+		switch_theme( $theme_slug );
 
 		$this->test_block_name = 'test/font-size-fluid-value';
 		register_block_type(
@@ -614,15 +610,30 @@ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value,
 	 */
 	public function data_generate_block_supports_font_size_fixtures() {
 		return array(
-			'default_return_value'               => array(
-				'font_size_value'             => '50px',
-				'should_use_fluid_typography' => false,
-				'expected_output'             => 'font-size:50px;',
-			),
-			'return_value_with_fluid_typography' => array(
-				'font_size_value'             => '50px',
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 1.502), 50px);',
+			'returns value when fluid typography is not active' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'default',
+				'expected_output' => 'font-size:15px;',
+			),
+			'returns clamp value using default config' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography',
+				'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',
+			),
+			'returns value when font size <= default min font size bound' => array(
+				'font_size_value' => '13px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography',
+				'expected_output' => 'font-size:13px;',
+			),
+			'returns clamp value using custom fluid config' => array(
+				'font_size_value' => '17px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
+				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px);',
+			),
+			'returns value when font size <= custom min font size bound' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
+				'expected_output' => 'font-size:15px;',
 			),
 		);
 	}
diff --git a/phpunit/block-template-utils-test.php b/phpunit/block-template-utils-test.php
index ceffe180d98707..ac2e4145cd0ed2 100644
--- a/phpunit/block-template-utils-test.php
+++ b/phpunit/block-template-utils-test.php
@@ -11,24 +11,40 @@ public function set_up() {
 		switch_theme( 'emptytheme' );
 	}
 
+	public static function wpSetUpBeforeClass() {
+		register_post_type(
+			'custom_book',
+			array(
+				'public'       => true,
+				'show_in_rest' => true,
+			)
+		);
+		register_taxonomy( 'book_type', 'custom_book' );
+	}
+
+	public static function wpTearDownAfterClass() {
+		unregister_post_type( 'custom_book' );
+		unregister_taxonomy( 'book_type' );
+	}
+
 	public function test_get_template_hierarchy() {
-		$hierarchy = get_template_hierarchy( 'front-page' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'front-page' );
 		$this->assertEquals( array( 'front-page', 'home', 'index' ), $hierarchy );
 		// Custom templates.
-		$hierarchy = get_template_hierarchy( 'whatever-slug', true );
+		$hierarchy = gutenberg_get_template_hierarchy( 'whatever-slug', true );
 		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
 		// Single slug templates(ex. page, tag, author, etc..
-		$hierarchy = get_template_hierarchy( 'page' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'page' );
 		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'tag' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'tag' );
 		$this->assertEquals( array( 'tag', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'author' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'author' );
 		$this->assertEquals( array( 'author', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'date' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'date' );
 		$this->assertEquals( array( 'date', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'taxonomy' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy' );
 		$this->assertEquals( array( 'taxonomy', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'attachment' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'attachment' );
 		$this->assertEquals(
 			array(
 				'attachment',
@@ -38,20 +54,34 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'singular' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'singular' );
 		$this->assertEquals( array( 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'single' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single' );
 		$this->assertEquals( array( 'single', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'archive' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'archive' );
 		$this->assertEquals( array( 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'index' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'index' );
 		$this->assertEquals( array( 'index' ), $hierarchy );
 
 		// Taxonomies.
-		$hierarchy = get_template_hierarchy( 'taxonomy-books', false, 'taxonomy-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-book_type', false );
+		$this->assertEquals( array( 'taxonomy-book_type', 'taxonomy', 'archive', 'index' ), $hierarchy );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books', false, 'taxonomy-books' );
 		$this->assertEquals( array( 'taxonomy-books', 'taxonomy', 'archive', 'index' ), $hierarchy );
 		// Single word category.
-		$hierarchy = get_template_hierarchy( 'category-fruits', false, 'category' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits', false );
+		$this->assertEquals(
+			array(
+				'category-fruits',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits', false, 'category' );
 		$this->assertEquals(
 			array(
 				'category-fruits',
@@ -62,7 +92,18 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Multi word category.
-		$hierarchy = get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits-yellow', false );
+		$this->assertEquals(
+			array(
+				'category-fruits-yellow',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
 		$this->assertEquals(
 			array(
 				'category-fruits-yellow',
@@ -73,7 +114,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Single word taxonomy.
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-books-action',
@@ -84,7 +125,11 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-book_type-adventure', false );
+		$this->assertEquals( array( 'taxonomy-book_type-adventure', 'taxonomy-book_type', 'taxonomy', 'archive', 'index' ), $hierarchy );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-books-action-adventure',
@@ -96,7 +141,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Multi word taxonomy/terms.
-		$hierarchy = get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
 		$this->assertEquals(
 			array(
 				'taxonomy-greek-books-action-adventure',
@@ -108,7 +153,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Post types.
-		$hierarchy = get_template_hierarchy( 'single-book', false, 'single-book' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-book', false, 'single-book' );
 		$this->assertEquals(
 			array(
 				'single-book',
@@ -118,7 +163,7 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
 		$this->assertEquals(
 			array(
 				'single-art-project',
@@ -128,7 +173,7 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
 		$this->assertEquals(
 			array(
 				'single-art-project-imagine',
@@ -139,7 +184,41 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
-		$hierarchy = get_template_hierarchy( 'page-hi', false, 'page' );
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-custom_book', false );
+		$this->assertEquals(
+			array(
+				'single-custom_book',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'single-custom_book-book-1', false );
+		$this->assertEquals(
+			array(
+				'single-custom_book-book-1',
+				'single-custom_book',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+
+		$hierarchy = gutenberg_get_template_hierarchy( 'page-hi', false, 'page' );
+		$this->assertEquals(
+			array(
+				'page-hi',
+				'page',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = gutenberg_get_template_hierarchy( 'page-hi', false );
 		$this->assertEquals(
 			array(
 				'page-hi',
@@ -150,7 +229,7 @@ public function test_get_template_hierarchy() {
 			$hierarchy
 		);
 		// Authors.
-		$hierarchy = get_template_hierarchy( 'author-rigas', false, 'author' );
+		$hierarchy = gutenberg_get_template_hierarchy( 'author-rigas', false, 'author' );
 		$this->assertEquals(
 			array(
 				'author-rigas',
@@ -160,5 +239,15 @@ public function test_get_template_hierarchy() {
 			),
 			$hierarchy
 		);
+		// Archive post types.
+		$hierarchy = gutenberg_get_template_hierarchy( 'archive-book', false );
+		$this->assertEquals(
+			array(
+				'archive-book',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
 	}
 }
diff --git a/phpunit/class-block-library-navigation-link-test.php b/phpunit/class-block-library-navigation-link-test.php
index bb6cc33fb2e8ba..ba9922effcf64c 100644
--- a/phpunit/class-block-library-navigation-link-test.php
+++ b/phpunit/class-block-library-navigation-link-test.php
@@ -121,7 +121,7 @@ public function test_returns_link_when_post_is_published() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -142,7 +142,7 @@ public function test_returns_empty_when_label_is_missing() {
 		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -162,7 +162,7 @@ public function test_returns_empty_when_draft() {
 
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -182,7 +182,7 @@ public function test_returns_link_for_category() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -202,7 +202,7 @@ public function test_returns_link_for_plain_link() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
@@ -224,7 +224,7 @@ public function test_returns_empty_when_custom_post_type_draft() {
 
 		$this->assertEquals(
 			'',
-			render_block_core_navigation_link(
+			gutenberg_render_block_core_navigation_link(
 				$navigation_link_block->attributes,
 				array(),
 				$navigation_link_block
@@ -244,7 +244,7 @@ public function test_returns_link_when_custom_post_is_published() {
 		$this->assertEquals(
 			true,
 			strpos(
-				render_block_core_navigation_link(
+				gutenberg_render_block_core_navigation_link(
 					$navigation_link_block->attributes,
 					array(),
 					$navigation_link_block
diff --git a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
index 9f9cf60f0572a6..34d5f10970c6c6 100644
--- a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
+++ b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
@@ -67,24 +67,27 @@ public static function wpSetUpBeforeClass( $factory ) {
 				'categories'    => array( 'test' ),
 				'viewportWidth' => 1440,
 				'content'       => '<!-- wp:heading {"level":1} --><h1>One</h1><!-- /wp:heading -->',
+				'templateTypes' => array( 'page' ),
 			)
 		);
 
 		$test_registry->register(
 			'test/two',
 			array(
-				'title'      => 'Pattern Two',
-				'categories' => array( 'test' ),
-				'content'    => '<!-- wp:paragraph --><p>Two</p><!-- /wp:paragraph -->',
+				'title'         => 'Pattern Two',
+				'categories'    => array( 'test' ),
+				'content'       => '<!-- wp:paragraph --><p>Two</p><!-- /wp:paragraph -->',
+				'templateTypes' => array( 'single' ),
 			)
 		);
 
 		$test_registry->register(
 			'test/three',
 			array(
-				'title'      => 'Pattern Three',
-				'categories' => array( 'test', 'buttons', 'query' ),
-				'content'    => '<!-- wp:paragraph --><p>Three</p><!-- /wp:paragraph -->',
+				'title'         => 'Pattern Three',
+				'categories'    => array( 'test', 'buttons', 'query' ),
+				'content'       => '<!-- wp:paragraph --><p>Three</p><!-- /wp:paragraph -->',
+				'templateTypes' => array( '404' ),
 			)
 		);
 	}
@@ -147,7 +150,21 @@ public function test_register_routes() {
 		$this->markTestIncomplete();
 	}
 	public function test_get_items() {
-		$this->markTestIncomplete();
+		wp_set_current_user( self::$admin_id );
+
+		$expected_names  = array( 'test/one', 'test/two', 'test/three' );
+		$expected_fields = array( 'name', 'content', 'template_types' );
+
+		$request            = new WP_REST_Request( 'GET', '/wp/v2/block-patterns/patterns' );
+		$request['_fields'] = 'name,content,template_types';
+		$response           = rest_get_server()->dispatch( $request );
+		$data               = $response->get_data();
+
+		$this->assertCount( count( $expected_names ), $data );
+		foreach ( $data as $idx => $item ) {
+			$this->assertEquals( $expected_names[ $idx ], $item['name'] );
+			$this->assertEquals( $expected_fields, array_keys( $item ) );
+		}
 	}
 	public function test_context_param() {
 		$this->markTestIncomplete();
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index a5413766ca7ddd..ca27606ea2e442 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -435,6 +435,76 @@ public function test_get_stylesheet() {
 		$this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
 	}
 
+	/**
+	 * Tests generating the spacing presets array based on the spacing scale provided.
+	 *
+	 * @dataProvider data_set_spacing_sizes_when_invalid
+	 */
+	public function test_shadow_preset_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'palette' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 5px 0 black',
+							),
+							array(
+								'slug'   => 'sharp',
+								'shadow' => '5px 5px black',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$styles = 'body{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
+		$this->assertEquals( $styles, $theme_json->get_stylesheet() );
+		$this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'variables' ) ) );
+	}
+
+	public function test_get_shadow_styles_for_blocks() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'palette' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 0 0 black',
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'blocks'   => array(
+						'core/paragraph' => array(
+							'shadow' => 'var(--wp--preset--shadow--natural)',
+						),
+					),
+					'elements' => array(
+						'button' => array(
+							'shadow' => 'var:preset|shadow|natural',
+						),
+						'link'   => array(
+							'shadow' => array( 'ref' => 'styles.elements.button.shadow' ),
+						),
+					),
+				),
+			)
+		);
+
+		$global_styles  = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		$element_styles = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}.wp-element-button, .wp-block-button__link{box-shadow: var(--wp--preset--shadow--natural);}p{box-shadow: var(--wp--preset--shadow--natural);}';
+		$styles         = $global_styles . $element_styles;
+
+		$this->assertEquals( $styles, $theme_json->get_stylesheet() );
+	}
+
 	public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
@@ -754,8 +824,8 @@ public function test_get_stylesheet_with_block_support_feature_level_selectors()
 	public function test_allow_indirect_properties() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'   => array(
 					'blocks'  => array(
 						'core/social-links' => array(
 							'spacing' => array(
@@ -770,12 +840,18 @@ public function test_allow_indirect_properties() {
 						'blockGap' => '3em',
 					),
 				),
+				'settings' => array(
+					'layout' => array(
+						'contentSize' => '800px',
+						'wideSize'    => '1000px',
+					),
+				),
 			)
 		);
 
 		$expected = array(
-			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-			'styles'  => array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'   => array(
 				'blocks'  => array(
 					'core/social-links' => array(
 						'spacing' => array(
@@ -790,6 +866,12 @@ public function test_allow_indirect_properties() {
 					'blockGap' => '3em',
 				),
 			),
+			'settings' => array(
+				'layout' => array(
+					'contentSize' => '800px',
+					'wideSize'    => '1000px',
+				),
+			),
 		);
 
 		$this->assertEqualSetsWithIndex( $expected, $actual );
diff --git a/phpunit/class-wp-webfonts-test.php b/phpunit/class-wp-webfonts-test.php
deleted file mode 100644
index 45732c6a265b4c..00000000000000
--- a/phpunit/class-wp-webfonts-test.php
+++ /dev/null
@@ -1,453 +0,0 @@
-<?php
-
-/**
- * @group  webfonts
- * @covers WP_Webfonts_Test
- */
-class WP_Webfonts_Test extends WP_UnitTestCase {
-	/**
-	 * WP_Webfonts instance reference
-	 *
-	 * @var WP_Webfonts
-	 */
-	private $old_wp_webfonts;
-
-	public function set_up() {
-		parent::set_up();
-
-		global $wp_webfonts;
-		$this->old_wp_webfonts = $wp_webfonts;
-
-		$wp_webfonts = null;
-	}
-
-	public function tear_down() {
-		global $wp_webfonts;
-
-		$wp_webfonts = $this->old_wp_webfonts;
-		parent::tear_down();
-	}
-
-	/**
-	 * Test wp_register_webfonts() bulk register webfonts.
-	 *
-	 * @covers wp_register_webfonts
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfonts() {
-		$font_family_name = 'Source Serif Pro';
-
-		$fonts = array(
-			array(
-				'provider'     => 'local',
-				'font-family'  => $font_family_name,
-				'font-style'   => 'normal',
-				'font-weight'  => '200 900',
-				'font-stretch' => 'normal',
-				'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-				'font-display' => 'fallback',
-			),
-			array(
-				'provider'     => 'local',
-				'font-family'  => $font_family_name,
-				'font-style'   => 'italic',
-				'font-weight'  => '200 900',
-				'font-stretch' => 'normal',
-				'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-				'font-display' => 'fallback',
-			),
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => $fonts,
-		);
-
-		wp_register_webfonts( $fonts );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_register_webfont() register a single webfont.
-	 *
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_register_webfont() does not enqueue the webfont on registration.
-	 *
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_font
-	 * @covers WP_Webfonts::get_registered_fonts
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 */
-	public function test_wp_register_webfont_does_not_enqueue_on_registration() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		$this->assertEquals( $expected, wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_webfonts() bulk enqueue webfonts.
-	 *
-	 * @covers wp_enqueue_webfonts
-	 * @covers WP_Webfonts::enqueue_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 */
-	public function test_wp_enqueue_webfonts() {
-		$source_serif_pro = array(
-			'provider'     => 'local',
-			'font-family'  => 'Source Serif Pro',
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		wp_register_webfont( $source_serif_pro );
-
-		$roboto = array(
-			'provider'     => 'local',
-			'font-family'  => 'Roboto',
-			'font-style'   => 'normal',
-			'font-weight'  => '400',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/roboto/Roboto.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		wp_register_webfont( $roboto );
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $source_serif_pro['font-family'] ) => array( $source_serif_pro ),
-			wp_webfonts()->get_font_slug( $roboto['font-family'] ) => array( $roboto ),
-		);
-
-		wp_enqueue_webfonts(
-			array(
-				$source_serif_pro['font-family'],
-				$roboto['font-family'],
-			)
-		);
-
-		$this->assertEquals( $expected, wp_webfonts()->get_enqueued_webfonts() );
-		$this->assertEquals( array(), wp_webfonts()->get_registered_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_font() enqueues a registered webfont.
-	 *
-	 * @covers wp_enqueue_webfont
-	 * @covers WP_Webfonts::enqueued_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 */
-	public function test_wp_enqueue_webfont_enqueues_registered_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		$font = array(
-			'provider'     => 'local',
-			'font-family'  => $font_family_name,
-			'font-style'   => 'normal',
-			'font-weight'  => '200 900',
-			'font-stretch' => 'normal',
-			'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-			'font-display' => 'fallback',
-		);
-
-		$expected = array(
-			wp_webfonts()->get_font_slug( $font_family_name ) => array( $font ),
-		);
-
-		wp_register_webfont( $font );
-		wp_enqueue_webfont( $font_family_name );
-
-		$this->assertEquals( array(), wp_webfonts()->get_registered_webfonts() );
-		$this->assertEquals( $expected, wp_webfonts()->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Test wp_enqueue_font() does not enqueue a webfont that was not registered.
-	 *
-	 * @covers wp_enqueue_webfont
-	 * @covers WP_Webfonts::enqueued_font
-	 * @covers WP_Webfonts::get_enqueued_fonts
-	 * @covers WP_Webfonts::get_registered_fonts
-	 *
-	 * @expectedIncorrectUsage WP_Webfonts::enqueue_webfont
-	 */
-	public function test_wp_enqueue_webfont_does_not_enqueue_unregistered_webfont() {
-		$font_family_name = 'Source Serif Pro';
-
-		wp_enqueue_webfont( $font_family_name );
-
-		$this->assertSame( array(), wp_webfonts()->get_registered_webfonts(), 'WP_Webfonts::get_registered_webfonts should return an empty array' );
-		$this->assertSame( array(), wp_webfonts()->get_enqueued_webfonts(), 'WP_Webfonts::get_enqueued_webfonts should return an empty array' );
-	}
-
-	/**
-	 * @covers wp_register_webfont
-	 * @covers WP_Webfonts::register_provider
-	 * @covers WP_Webfonts::get_providers
-	 */
-	public function test_get_providers() {
-		wp_register_webfont_provider( 'test-provider', 'Test_Provider' );
-		$this->assertEquals(
-			array(
-				'local'         => 'WP_Webfonts_Provider_Local',
-				'test-provider' => 'Test_Provider',
-			),
-			wp_get_webfont_providers()
-		);
-	}
-
-	/**
-	 * @dataProvider data_get_font_slug_when_cannot_determine_fontfamily
-	 * @covers       WP_Webfonts::get_font_slug
-	 *
-	 * @expectedIncorrectUsage WP_Webfonts::get_font_slug
-	 */
-	public function test_get_font_slug_when_cannot_determine_fontfamily( $to_convert ) {
-		$this->assertFalse( wp_webfonts()->get_font_slug( $to_convert ) );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array[]
-	 */
-	public function data_get_font_slug_when_cannot_determine_fontfamily() {
-		return array(
-			'empty array'                     => array( array() ),
-			'array without a font-family key' => array(
-				array(
-					'provider'     => 'local',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-display' => 'fallback',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-				),
-			),
-			"array with 'font family' key"    => array(
-				array( 'font family' => 'Source Serif Pro' ),
-			),
-			"array with 'Font-Family' key"    => array(
-				array( 'Font-Family' => 'Source Serif Pro' ),
-			),
-			"array with 'FontFamily' key"     => array(
-				array( 'FontFamily' => 'Source Serif Pro' ),
-			),
-		);
-	}
-
-	/**
-	 * @dataProvider data_get_font_slug
-	 * @covers       WP_Webfonts::get_font_slug
-	 */
-	public function test_get_font_slug( $to_convert, $expected ) {
-		$this->assertSame( $expected, wp_webfonts()->get_font_slug( $to_convert ) );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array[]
-	 */
-	public function data_get_font_slug() {
-		return array(
-			"array using 'fontFamily' format"  => array(
-				'to_convert' => array( 'fontFamily' => 'Source Serif Pro' ),
-				'expected'   => 'source-serif-pro',
-			),
-			"array using 'font-family' format" => array(
-				'to_convert' => array( 'font-family' => 'Source Serif Pro' ),
-				'expected'   => 'source-serif-pro',
-			),
-			'string with font family name'     => array(
-				'to_convert' => 'Source Serif Pro',
-				'expected'   => 'source-serif-pro',
-			),
-			'empty string'                     => array(
-				'to_convert' => '',
-				'expected'   => '',
-			),
-		);
-	}
-
-	/**
-	 * @covers WP_Webfonts::validate_webfont
-	 */
-	public function test_validate_webfont() {
-		$this->expectNotice();
-
-		// Test empty array.
-		$this->assertFalse( wp_webfonts()->validate_webfont( array() ) );
-
-		$font = array(
-			'font-family' => 'Test Font 1',
-			'src'         => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-		);
-
-		// Test missing provider fallback to local.
-		$this->assertEquals( 'local', wp_webfonts()->validate_webfont( $font )['provider'] );
-
-		// Test missing font-weight fallback to 400.
-		$this->assertEquals( '400', wp_webfonts()->validate_webfont( $font )['font-weight'] );
-
-		// Test missing font-style fallback to normal.
-		$this->assertEquals( 'normal', wp_webfonts()->validate_webfont( $font )['font-style'] );
-
-		// Test missing font-display fallback to fallback.
-		$this->assertEquals( 'fallback', wp_webfonts()->validate_webfont( $font )['font-display'] );
-
-		// Test local font with missing "src".
-		$this->assertFalse( wp_webfonts()->validate_webfont( array( 'font-family' => 'Test Font 2' ) ) );
-
-		// Test valid src URL, without a protocol.
-		$font['src'] = '//example.com/SourceSerif4Variable-Roman.ttf.woff2';
-		$this->assertEquals( wp_webfonts()->validate_webfont( $font )['src'], $font['src'] );
-
-		// Test font-weight.
-		$font_weights = array( 100, '100', '100 900', 'normal' );
-		foreach ( $font_weights as $value ) {
-			$font['font-weight'] = $value;
-			$this->assertEquals( wp_webfonts()->validate_webfont( $font )['font-weight'], $value );
-		}
-
-		// Test that invalid keys get removed from the font.
-		$font['invalid-key'] = 'invalid';
-		$this->assertArrayNotHasKey( 'invalid-key', wp_webfonts()->validate_webfont( $font ) );
-	}
-
-	/**
-	 * Test generate_and_enqueue_styles outputs only enqueued webfonts.
-	 *
-	 * @covers WP_Webfonts::generate_and_enqueue_styles
-	 */
-	public function test_generate_and_enqueue_styles() {
-		wp_register_webfonts(
-			array(
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Roboto',
-					'font-style'   => 'normal',
-					'font-weight'  => '400',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/roboto/Roboto-Regular.ttf',
-					'font-display' => 'fallback',
-				),
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Source Serif Pro',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-					'font-display' => 'fallback',
-				),
-			)
-		);
-
-		wp_enqueue_webfont( 'Source Serif Pro' );
-
-		wp_webfonts()->generate_and_enqueue_styles();
-
-		$expected = <<<EOF
-@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
-EOF;
-
-		$this->assertStringContainsString(
-			$expected,
-			get_echo( 'wp_print_styles' )
-		);
-	}
-
-	/**
-	 * Test generate_and_enqueue_editor_styles outputs registered and enqueued webfonts.
-	 * Both are necessary so the editor correctly loads webfonts picked while in the editor.
-	 *
-	 * @covers WP_Webfonts::generate_and_enqueue_editor_styles
-	 */
-	public function test_generate_and_enqueue_editor_styles() {
-		wp_register_webfonts(
-			array(
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Roboto',
-					'font-style'   => 'normal',
-					'font-weight'  => '400',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/roboto/Roboto-Regular.ttf',
-					'font-display' => 'fallback',
-				),
-				array(
-					'provider'     => 'local',
-					'font-family'  => 'Source Serif Pro',
-					'font-style'   => 'normal',
-					'font-weight'  => '200 900',
-					'font-stretch' => 'normal',
-					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-					'font-display' => 'fallback',
-				),
-			)
-		);
-
-		wp_enqueue_webfont( 'Source Serif Pro' );
-
-		wp_webfonts()->generate_and_enqueue_editor_styles();
-
-		$expected = <<<EOF
-@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:fallback;font-stretch:normal;src:local(Roboto), url('https://example.com/assets/fonts/roboto/Roboto-Regular.ttf') format('truetype');}@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
-EOF;
-
-		$this->assertStringContainsString(
-			$expected,
-			get_echo( 'wp_print_styles' )
-		);
-	}
-}
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
new file mode 100644
index 00000000000000..19abbecf86f4cc
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child Theme With Fluid Typography
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-fluid-typography
+*/
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
new file mode 100644
index 00000000000000..d0ec32d9caac0a
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
@@ -0,0 +1,11 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": true,
+		"typography": {
+			"fluid": {
+				"minFontSize": "16px"
+			}
+		}
+	}
+}
diff --git a/phpunit/fixtures/mock-provider.php b/phpunit/fixtures/mock-provider.php
new file mode 100644
index 00000000000000..91475837e0e916
--- /dev/null
+++ b/phpunit/fixtures/mock-provider.php
@@ -0,0 +1,27 @@
+<?php
+
+class Mock_Provider extends WP_Webfonts_Provider {
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @var string
+	 */
+	protected $id = 'mock';
+
+	public function get_css() {
+		$handles = array_keys( $this->webfonts );
+		return implode( '; ', $handles );
+		return sprintf( $this->css, implode( '; ', $handles ) );
+	}
+
+	/**
+	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string The style element.
+	 */
+	protected function get_style_element() {
+		return '<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n';
+	}
+}
diff --git a/phpunit/html/wp-html-tag-processor-test.php b/phpunit/html/wp-html-tag-processor-test.php
index 6a850eb7a4edb2..e6b3d4d8071af5 100644
--- a/phpunit/html/wp-html-tag-processor-test.php
+++ b/phpunit/html/wp-html-tag-processor-test.php
@@ -151,6 +151,50 @@ public function test_attributes_parser_treats_slash_as_attribute_separator() {
 		$this->assertSame( 'test', $p->get_attribute( 'e' ), 'Accessing an existing e="test" did not return "test"' );
 	}
 
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers next_tag
+	 * @covers get_attribute
+	 */
+	public function test_attributes_parser_is_case_insensitive() {
+		$p = new WP_HTML_Tag_Processor( '<div DATA-enabled="true" data-VISIBLE>Test</div>' );
+		$p->next_tag();
+		$p->get_attribute( 'data-enabled' );
+		$this->assertEquals( 'true', $p->get_attribute( 'DATA-enabled' ), 'A case-insensitive get_attribute call did not return "true".' );
+		$this->assertEquals( 'true', $p->get_attribute( 'data-enabled' ), 'A case-insensitive get_attribute call did not return "true".' );
+		$this->assertEquals( 'true', $p->get_attribute( 'DATA-ENABLED' ), 'A case-insensitive get_attribute call did not return "true".' );
+		$this->assertEquals( true, $p->get_attribute( 'data-VISIBLE' ), 'A case-insensitive get_attribute call did not return true.' );
+		$this->assertEquals( true, $p->get_attribute( 'DATA-visible' ), 'A case-insensitive get_attribute call did not return true.' );
+		$this->assertEquals( true, $p->get_attribute( 'dAtA-ViSiBlE' ), 'A case-insensitive get_attribute call did not return true.' );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers next_tag
+	 * @covers remove_attribute
+	 */
+	public function test_remove_attribute_is_case_insensitive() {
+		$p = new WP_HTML_Tag_Processor( '<div DATA-enabled="true">Test</div>' );
+		$p->next_tag();
+		$p->remove_attribute( 'data-enabled' );
+		$this->assertEquals( '<div >Test</div>', $p->get_updated_html(), 'A case-insensitive remove_attribute call did not remove the attribute.' );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers next_tag
+	 * @covers set_attribute
+	 */
+	public function test_set_attribute_is_case_insensitive() {
+		$p = new WP_HTML_Tag_Processor( '<div DATA-enabled="true">Test</div>' );
+		$p->next_tag();
+		$p->set_attribute( 'data-enabled', 'abc' );
+		$this->assertEquals( '<div data-enabled="abc">Test</div>', $p->get_updated_html(), 'A case-insensitive set_attribute call did not update the existing attribute.' );
+	}
+
 	/**
 	 * @ticket 56299
 	 *
@@ -1132,7 +1176,7 @@ public function data_malformed_tag() {
 		$examples  = array();
 		$examples['Invalid entity inside attribute value'] = array(
 			'<img src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span>test</span>',
-			'<img foo="bar" class="firstTag" src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span class="secondTag">test</span>',
+			'<img class="firstTag" foo="bar" src="https://s0.wp.com/i/atat.png" title="&; First &lt;title&gt; is &notit;" TITLE="second title" title="An Imperial &imperial; AT-AT"><span class="secondTag">test</span>',
 		);
 
 		$examples['HTML tag opening inside attribute value'] = array(
@@ -1147,152 +1191,152 @@ public function data_malformed_tag() {
 
 		$examples['Single and double quotes in attribute value'] = array(
 			'<p title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span>test</span>',
-			'<p foo="bar" class="firstTag" title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span class="secondTag">test</span>',
+			'<p class="firstTag" foo="bar" title="Demonstrating how to use single quote (\') and double quote (&quot;)"><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute values'] = array(
 			'<hr a=1 a=2 a=3 a=5 /><span>test</span>',
-			'<hr foo="bar" class="firstTag" a=1 a=2 a=3 a=5 /><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" a=1 a=2 a=3 a=5 /><span class="secondTag">test</span>',
 		);
 
 		$examples['Double-quotes escaped in double-quote attribute value'] = array(
 			'<hr title="This is a &quot;double-quote&quot;"><span>test</span>',
-			'<hr foo="bar" class="firstTag" title="This is a &quot;double-quote&quot;"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" title="This is a &quot;double-quote&quot;"><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value'] = array(
 			'<hr id=code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=code><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value with tag-like value'] = array(
 			'<hr id= 	<code> ><span>test</span>',
-			'<hr foo="bar" class="firstTag" id= 	<code> ><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id= 	<code> ><span class="secondTag">test</span>',
 		);
 
 		$examples['Unquoted attribute value with tag-like value followed by tag-like data'] = array(
 			'<hr id=code>><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=code>><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=code>><span class="secondTag">test</span>',
 		);
 
 		$examples['1'] = array(
 			'<hr id=&quo;code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=&quo;code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=&quo;code><span class="secondTag">test</span>',
 		);
 
 		$examples['2'] = array(
 			'<hr id/test=5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id/test=5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id/test=5><span class="secondTag">test</span>',
 		);
 
 		$examples['4'] = array(
 			'<hr title="<hr>"><span>test</span>',
-			'<hr foo="bar" class="firstTag" title="<hr>"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" title="<hr>"><span class="secondTag">test</span>',
 		);
 
 		$examples['5'] = array(
 			'<hr id=>code><span>test</span>',
-			'<hr foo="bar" class="firstTag" id=>code><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id=>code><span class="secondTag">test</span>',
 		);
 
 		$examples['6'] = array(
 			'<hr id"quo="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" id"quo="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id"quo="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['7'] = array(
 			'<hr id' . $null_byte . 'zero="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" id' . $null_byte . 'zero="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id' . $null_byte . 'zero="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['8'] = array(
 			'<hr >id="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" >id="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" >id="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['9'] = array(
 			'<hr =id="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" =id="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =id="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['10'] = array(
 			'</><span>test</span>',
-			'</><span foo="bar" class="firstTag">test</span>',
+			'</><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['11'] = array(
 			'The applicative operator <* works well in Haskell; <data-tag> is what?<span>test</span>',
-			'The applicative operator <* works well in Haskell; <data-tag foo="bar" class="firstTag"> is what?<span class="secondTag">test</span>',
+			'The applicative operator <* works well in Haskell; <data-tag class="firstTag" foo="bar"> is what?<span class="secondTag">test</span>',
 		);
 
 		$examples['12'] = array(
 			'<3 is a heart but <t3> is a tag.<span>test</span>',
-			'<3 is a heart but <t3 foo="bar" class="firstTag"> is a tag.<span class="secondTag">test</span>',
+			'<3 is a heart but <t3 class="firstTag" foo="bar"> is a tag.<span class="secondTag">test</span>',
 		);
 
 		$examples['13'] = array(
 			'<?comment --><span>test</span>',
-			'<?comment --><span foo="bar" class="firstTag">test</span>',
+			'<?comment --><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['14'] = array(
 			'<!-- this is a comment. no <strong>tags</strong> allowed --><span>test</span>',
-			'<!-- this is a comment. no <strong>tags</strong> allowed --><span foo="bar" class="firstTag">test</span>',
+			'<!-- this is a comment. no <strong>tags</strong> allowed --><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['15'] = array(
 			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span>test</span>',
-			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span foo="bar" class="firstTag">test</span>',
+			'<![CDATA[This <is> a <strong id="yes">HTML Tag</strong>]]><span class="firstTag" foo="bar">test</span>',
 		);
 
 		$examples['16'] = array(
 			'<hr ===name="value"><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===name="value"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ===name="value"><span class="secondTag">test</span>',
 		);
 
 		$examples['17'] = array(
 			'<hr asdf="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" asdf="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" asdf="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['18'] = array(
 			'<hr =asdf="tes"><span>test</span>',
-			'<hr foo="bar" class="firstTag" =asdf="tes"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =asdf="tes"><span class="secondTag">test</span>',
 		);
 
 		$examples['19'] = array(
 			'<hr ==="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" ==="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ==="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['20'] = array(
 			'<hr =><span>test</span>',
-			'<hr foo="bar" class="firstTag" =><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =><span class="secondTag">test</span>',
 		);
 
 		$examples['21'] = array(
 			'<hr =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" =5><span class="secondTag">test</span>',
 		);
 
 		$examples['22'] = array(
 			'<hr ==><span>test</span>',
-			'<hr foo="bar" class="firstTag" ==><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ==><span class="secondTag">test</span>',
 		);
 
 		$examples['23'] = array(
 			'<hr ===><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" ===><span class="secondTag">test</span>',
 		);
 
 		$examples['24'] = array(
 			'<hr disabled><span>test</span>',
-			'<hr foo="bar" class="firstTag" disabled><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" disabled><span class="secondTag">test</span>',
 		);
 
 		$examples['25'] = array(
 			'<hr a"sdf="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" a"sdf="test"><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" a"sdf="test"><span class="secondTag">test</span>',
 		);
 
 		$examples['Multiple unclosed tags treated as a single tag'] = array(
@@ -1306,7 +1350,7 @@ public function data_malformed_tag() {
 HTML
 			,
 			<<<HTML
-			<hr foo="bar" class="firstTag" id=">"code
+			<hr class="firstTag" foo="bar" id=">"code
 			<hr id="value>"code
 			<hr id="/>"code
 			<hr id="value/>"code
@@ -1318,12 +1362,12 @@ public function data_malformed_tag() {
 
 		$examples['27'] = array(
 			'<hr id   =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id   =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id   =5><span class="secondTag">test</span>',
 		);
 
 		$examples['28'] = array(
 			'<hr id a  =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" id a  =5><span class="secondTag">test</span>',
+			'<hr class="firstTag" foo="bar" id a  =5><span class="secondTag">test</span>',
 		);
 
 		return $examples;
diff --git a/phpunit/multisite.xml b/phpunit/multisite.xml
index 494c9a4610d07b..7a6117948547d3 100644
--- a/phpunit/multisite.xml
+++ b/phpunit/multisite.xml
@@ -5,6 +5,7 @@
 		convertErrorsToExceptions="true"
 		convertNoticesToExceptions="true"
 		convertWarningsToExceptions="true"
+		convertDeprecationsToExceptions="true"
 >
 	<php>
 		<env name="WP_MULTISITE" value="1" />
diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
index 66d8dd62865272..0588f10ef4fce7 100644
--- a/phpunit/style-engine/style-engine-test.php
+++ b/phpunit/style-engine/style-engine-test.php
@@ -188,6 +188,7 @@ public function data_wp_style_engine_get_styles() {
 						'fontStyle'      => 'italic',
 						'fontWeight'     => '800',
 						'lineHeight'     => '1.3',
+						'textColumns'    => '2',
 						'textDecoration' => 'underline',
 						'textTransform'  => 'uppercase',
 						'letterSpacing'  => '2',
@@ -195,13 +196,14 @@ public function data_wp_style_engine_get_styles() {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
 						'font-style'      => 'italic',
 						'font-weight'     => '800',
 						'line-height'     => '1.3',
+						'column-count'    => '2',
 						'text-decoration' => 'underline',
 						'text-transform'  => 'uppercase',
 						'letter-spacing'  => '2',
diff --git a/phpunit/webfonts/wp-webfonts-testcase.php b/phpunit/webfonts/wp-webfonts-testcase.php
new file mode 100644
index 00000000000000..ec0e20c27bfc6d
--- /dev/null
+++ b/phpunit/webfonts/wp-webfonts-testcase.php
@@ -0,0 +1,268 @@
+<?php
+/**
+ * Test case for the WP Webfonts API tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-tests-dataset.php';
+
+/**
+ * Abstracts the common tasks for the API's tests.
+ */
+abstract class WP_Webfonts_TestCase extends WP_UnitTestCase {
+	use WP_Webfonts_Tests_Datasets;
+
+	/**
+	 * Original WP_Web_Fonts instance, before the tests.
+	 *
+	 * @var WP_Web_Fonts
+	 */
+	private $old_wp_webfonts;
+
+	/**
+	 * Current error reporting level (before a test changes it).
+	 *
+	 * @var null|int
+	 */
+	protected $error_reporting_level = null;
+
+	/**
+	 * Reflection data store for non-public property access.
+	 *
+	 * @var ReflectionProperty[]
+	 */
+	protected $property = array();
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->old_wp_webfonts  = $GLOBALS['wp_webfonts'];
+		$GLOBALS['wp_webfonts'] = null;
+	}
+
+	public function tear_down() {
+		$this->property         = array();
+		$GLOBALS['wp_webfonts'] = $this->old_wp_webfonts;
+
+		// Reset the error reporting when modified within a test.
+		if ( is_int( $this->error_reporting_level ) ) {
+			error_reporting( $this->error_reporting_level );
+			$this->error_reporting_level = null;
+		}
+
+		parent::tear_down();
+	}
+
+	protected function set_up_mock( $method ) {
+		$mock = $this->setup_object_mock( $method, WP_Web_Fonts::class );
+
+		// Set the global.
+		$GLOBALS['wp_webfonts'] = $mock;
+
+		return $mock;
+	}
+
+	protected function setup_object_mock( $method, $class ) {
+		if ( is_string( $method ) ) {
+			$method = array( $method );
+		}
+
+		return $this->getMockBuilder( $class )->setMethods( $method )->getMock();
+	}
+
+	protected function get_registered_handles() {
+		return array_keys( $this->get_registered() );
+	}
+
+	protected function get_registered() {
+		return wp_webfonts()->registered;
+	}
+
+	protected function get_variations( $font_family, $wp_webfonts = null ) {
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		return $wp_webfonts->registered[ $font_family ]->deps;
+	}
+
+	protected function get_enqueued_handles() {
+		return wp_webfonts()->queue;
+	}
+
+	protected function get_queued_before_register( $wp_webfonts = null ) {
+		return $this->get_property_value( 'queued_before_register', WP_Dependencies::class, $wp_webfonts );
+	}
+
+	protected function get_reflection_property( $property_name, $class = 'WP_Web_Fonts' ) {
+		$property = new ReflectionProperty( $class, $property_name );
+		$property->setAccessible( true );
+
+		return $property;
+	}
+
+	protected function get_property_value( $property_name, $class, $wp_webfonts = null ) {
+		$property = $this->get_reflection_property( $property_name, $class );
+
+		if ( ! $wp_webfonts ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		return $property->getValue( $wp_webfonts );
+	}
+
+	protected function setup_property( $class, $property_name ) {
+		$key = $this->get_property_key( $class, $property_name );
+
+		if ( ! isset( $this->property[ $key ] ) ) {
+			$this->property[ $key ] = new ReflectionProperty( $class, 'providers' );
+			$this->property[ $key ]->setAccessible( true );
+		}
+
+		return $this->property[ $key ];
+	}
+
+	protected function get_property_key( $class, $property_name ) {
+		return $class . '::$' . $property_name;
+	}
+
+	/**
+	 * Opens the accessibility to access the given private or protected method.
+	 *
+	 * @param string $method_name Name of the method to open.
+	 * @return ReflectionMethod Instance of the method, ie to invoke it in the test.
+	 */
+	protected function get_reflection_method( $method_name ) {
+		$method = new ReflectionMethod( WP_Web_Fonts::class, $method_name );
+		$method->setAccessible( true );
+
+		return $method;
+	}
+
+	/**
+	 * Sets up multiple font family and variation mocks.
+	 *
+	 * @param array        $inputs      Array of array( font-family => variations ) to setup.
+	 * @param WP_Web_Fonts $wp_webfonts Instance of WP_Web_Fonts.
+	 * @return stdClass[] Array of registered mocks.
+	 */
+	protected function setup_registration_mocks( array $inputs, WP_Web_Fonts $wp_webfonts ) {
+		$mocks = array();
+
+		$build_mock = function ( $font_family, $is_font_family = false ) use ( &$mocks, $wp_webfonts ) {
+			$mock        = new stdClass();
+			$mock->deps  = array();
+			$mock->extra = array( 'is_font_family' => $is_font_family );
+			if ( $is_font_family ) {
+				$mock->extra['font-family'] = $font_family;
+			}
+
+			$handle = $is_font_family ? WP_Webfonts_Utils::convert_font_family_into_handle( $font_family ) : $font_family;
+
+			// Add to each queue.
+			$mocks[ $handle ]                   = $mock;
+			$wp_webfonts->registered[ $handle ] = $mock;
+
+			return $mock;
+		};
+
+		foreach ( $inputs as $font_family => $variations ) {
+			$font_mock = $build_mock( $font_family, true );
+
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! is_string( $variation_handle ) ) {
+					$variation_handle = $variation;
+				}
+				$variation_mock                           = $build_mock( $variation_handle );
+				$variation_mock->extra['font-properties'] = $variation;
+				$font_mock->deps[]                        = $variation_handle;
+			}
+		}
+
+		return $mocks;
+	}
+
+	/**
+	 * Register one or more font-family and its variations to set up a test.
+	 *
+	 * @param string            $font_family Font family to test.
+	 * @param array             $variations  Variations.
+	 * @param WP_Web_Fonts|null $wp_webfonts Optional. Instance of the WP_Web_Fonts.
+	 */
+	protected function setup_register( $font_family, $variations, $wp_webfonts = null ) {
+		if ( ! ( $wp_webfonts instanceof WP_Web_Fonts ) ) {
+			$wp_webfonts = wp_webfonts();
+		}
+
+		$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+
+		foreach ( $variations as $variation_handle => $variation ) {
+			if ( ! is_string( $variation_handle ) ) {
+				$variation_handle = '';
+			}
+			$wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		}
+	}
+
+	/**
+	 * Sets up the WP_Web_Fonts::$provider property.
+	 *
+	 * @param WP_Web_Fonts $wp_webfonts  Instance of WP_Web_Fonts.
+	 * @param string|array $provider     Provider ID when string. Else provider definition with 'id' and 'class' keys.
+	 * @param array        $font_handles Optional. Font handles for this provider.
+	 */
+	protected function setup_provider_property_mock( WP_Web_Fonts $wp_webfonts, $provider, array $font_handles = array() ) {
+		if ( is_string( $provider ) ) {
+			$provider = $this->get_provider_definitions( $provider );
+		}
+
+		$property  = $this->setup_property( WP_Web_Fonts::class, 'providers' );
+		$providers = $property->getValue( $wp_webfonts );
+
+		if ( ! isset( $providers[ $provider['id'] ] ) ) {
+			$providers[ $provider['id'] ] = array(
+				'class' => $provider['class'],
+				'fonts' => $font_handles,
+			);
+		} else {
+			$providers[ $provider['id'] ] = array_merge( $font_handles, $providers[ $provider['id'] ]['fonts'] );
+		}
+
+		$property->setValue( $wp_webfonts, $providers );
+	}
+
+	/**
+	 * Gets the variation handles for the provider from the given fonts.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param array  $fonts       Fonts definitions keyed by font family.
+	 * @param string $provider_id Provider ID.
+	 * @return array|string[] Array of handles on success. Else empty array.
+	 */
+	protected function get_handles_for_provider( array $fonts, $provider_id ) {
+		$handles = array();
+
+		foreach ( $fonts as $variations ) {
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( $provider_id !== $variation['provider'] ) {
+					continue;
+				}
+				$handles[] = $variation_handle;
+			}
+		}
+
+		return $handles;
+	}
+
+	/**
+	 * Suppresses deprecation notices allowing a test to skip deprecations
+	 * to test notices or other specifics.
+	 */
+	protected function suppress_deprecations() {
+		$this->error_reporting_level = error_reporting();
+		error_reporting( $this->error_reporting_level & ~E_USER_DEPRECATED );
+	}
+}
diff --git a/phpunit/webfonts/wp-webfonts-tests-dataset.php b/phpunit/webfonts/wp-webfonts-tests-dataset.php
new file mode 100644
index 00000000000000..100595c75a3fc2
--- /dev/null
+++ b/phpunit/webfonts/wp-webfonts-tests-dataset.php
@@ -0,0 +1,1155 @@
+<?php
+
+trait WP_Webfonts_Tests_Datasets {
+	/**
+	 * Data provider for testing variation registration that has valid structure.
+	 *
+	 * @return array
+	 */
+	public function data_valid_variation() {
+		return array(
+			'font-weight and font-style not defined; without variation handle' => array(
+				'expected'           => 'lato-400-normal',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+			),
+
+			'font-weight and font-style not defined; with variation handle' => array(
+				'expected'           => 'my-custom-handle',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'variation_handle'   => 'my-custom-handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+			),
+
+			'font-weight defined; with variation handle' => array(
+				'expected'           => 'my_custom_handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+				'variation_handle'   => 'my_custom_handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+			),
+
+			'font-weight defined; with variation handle' => array(
+				'expected'           => 'my_custom_handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'font-family'  => 'Source Serif Pro',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+				),
+				'variation_handle'   => 'my_custom_handle',
+			),
+
+			'font-weight defined; without variation handle' => array(
+				'expected'           => 'source-serif-pro-200-900-normal',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+
+			'more variation properties; with variation handle' => array(
+				'expected'           => 'my-custom-handle',
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'variation_handle'   => 'my-custom-handle',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing registration of variations where the font family handle
+	 * is not defined.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_handle_undefined() {
+		return array(
+			'empty string font family handle' => array(
+				'font_family_handle' => '',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+			'empty string font family handle with font-family defined in variant' => array(
+				'font_family_handle' => '',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+			'non string font family handle'   => array(
+				'font_family_handle' => 10,
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message'   => 'Font family handle must be a non-empty string',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing registration of variations where the font family is not defined
+	 * in the variation.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_undefined_in_variation() {
+		$message = 'Webfont font-family must be a non-empty string.';
+		return array(
+			'font-family: undefined'    => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: null'         => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => null,
+					'font-weight' => '200',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: non string'   => array(
+				'font_family_handle' => 'source-serif-pro',
+				'variation'          => array(
+					'provider'     => 'local',
+					'font-family'  => 10,
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message'   => $message,
+			),
+			'font-family: empty string' => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => '',
+					'src'         => 'https://example.com/assets/fonts/lato/lato.ttf.woff2',
+				),
+				'expected_message'   => $message,
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing when the variation's handle can't be determine from the given input.
+	 *
+	 * @return array
+	 */
+	public function data_unable_determine_variation_handle() {
+		return array(
+			'integer values'                               => array(
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => 'Lato',
+					'font-weight' => 400,
+					'font-style'  => 0,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+				'expected_message'   => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'with empty string font-weight and font-style' => array(
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => '',
+					'font-style'  => '',
+					'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+				'expected_message'   => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'integer font-weight, empty string font-style' => array(
+				'font_family'      => 'merriweather',
+				'variation'        => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => 400,
+					'font-style'  => '',
+					'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+				'expected_message' => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+			'empty string font-weight, integer font-style' => array(
+				'font_family'      => 'lato',
+				'variation'        => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => '',
+					'font-style'  => 400,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+				'expected_message' => 'Variant handle could not be determined as font-weight and/or font-style are require',
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing an invalid variation.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_variation() {
+		return array(
+			'font-family: undefined'          => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'src' => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'font-family: null'               => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => null,
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'font-family: empty string'       => array(
+				'expected'           => 'Webfont font-family must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'font-family' => '',
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+			'src: undefined'                  => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+				),
+			),
+			'src: null'                       => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+					'src'         => null,
+				),
+			),
+			'src: empty string'               => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Some font',
+					'font-weight' => '200',
+					'src'         => '',
+				),
+			),
+			'src: empty array'                => array(
+				'expected'           => 'Webfont src must be a non-empty string or an array of strings.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(),
+				),
+			),
+			'src: array of an empty string'   => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array( '' ),
+				),
+			),
+			'src: array of a non-string'      => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array( null ),
+				),
+			),
+			'src: array with an empty string' => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(
+						'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						'',
+						'https://example.com/assets/fonts/lato.ttf.woff2',
+					),
+				),
+			),
+			'src: array with a non-string'    => array(
+				'expected'           => 'Each webfont src must be a non-empty string.',
+				'font_family_handle' => 'lato',
+				'variation'          => array(
+					'provider'    => 'local',
+					'font-family' => 'Lato',
+					'font-weight' => '200',
+					'src'         => array(
+						'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						null,
+						'https://example.com/assets/fonts/lato.ttf.woff2',
+					),
+				),
+			),
+			'provider does not exist'         => array(
+				'expected'           => 'The provider "doesnotexit" is not registered',
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'provider'    => 'doesnotexit',
+					'font-family' => 'Merriweather',
+					'font-weight' => '200 900',
+				),
+			),
+			'font-weight: null'               => array(
+				'expected'           => 'Webfont font-weight must be a properly formatted string or integer.',
+				'font_family_handle' => 'merriweather',
+				'variation'          => array(
+					'font-family' => 'Merriweather',
+					'font-weight' => null,
+					'font-style'  => 'normal',
+					'src'         => 'https://example.com/assets/fonts/lato.ttf.woff2',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing one or more font families with varying number of variations.
+	 *
+	 * @return array
+	 */
+	public function data_one_to_many_font_families_and_zero_to_many_variations() {
+		return array(
+			'one family family no variations'           => array(
+				'font_family' => 'lato',
+				'inputs'      => array(
+					'lato' => array(),
+				),
+				'handles'     => array( 'lato' ),
+				'expected'    => array(),
+			),
+			'one family family with 1 variation'        => array(
+				'font_family' => 'merriweather',
+				'inputs'      => array(
+					'merriweather' => array(
+						'merriweather-200-900-normal' => array(
+							'font-family'  => 'Merriweather',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+				'handles'     => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected'    => array(),
+			),
+			'font family with multiple variations'      => array(
+				'font_family' => 'source-serif-pro',
+				'inputs'      => array(
+					'Source Serif Pro' => array(
+						'Source Serif Pro-300-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						'Source Serif Pro-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'handles'     => array( 'source-serif-pro', 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ),
+				'expected'    => array(),
+			),
+			'multiple font families without variations' => array(
+				'font_family' => 'source-serif-pro',
+				'inputs'      => array(
+					'lato'             => array(),
+					'my-font'          => array(),
+					'Source Serif Pro' => array(),
+					'some other font'  => array(),
+				),
+				'handles'     => array( 'lato', 'my-font', 'source-serif-pro', 'some-other-font' ),
+				'expected'    => array( 'lato', 'my-font', 'some-other-font' ),
+			),
+			'multiple font families with variations'    => array(
+				'font_family' => 'my-font',
+				'inputs'      => array(
+					'merriweather'     => array(
+						'merriweather-200-900-normal' => array(
+							'font-family'  => 'Merriweather',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+					'Source Serif Pro' => array(
+						'Source Serif Pro-300-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						'Source Serif Pro-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+					'my-font'          => array(
+						'my-font-300-italic' => array(
+							'font-family' => 'My Font',
+							'font-weight' => '300',
+							'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+						),
+					),
+				),
+				'handles'     => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+					'my-font',
+					'my-font-300-italic',
+				),
+				'expected'    => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_font_family_handles() {
+		return array(
+			'single word handle'   => array( 'lato' ),
+			'multiple word handle' => array( 'source-sans-pro' ),
+			'single word name'     => array( 'Merriweather' ),
+			'multiple word name'   => array( 'My Cool Font' ),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_providers() {
+		$local = array(
+			'local' => array(
+				'class' => WP_Webfonts_Provider_Local::class,
+				'fonts' => array(),
+			),
+		);
+		$mock  = array(
+			'mock' => array(
+				'class' => Mock_Provider::class,
+				'fonts' => array(),
+			),
+		);
+
+		return array(
+			'local provider'           => array(
+				'providers' => array(
+					'local' => WP_Webfonts_Provider_Local::class,
+				),
+				'expected'  => $local,
+			),
+			'mock provider'            => array(
+				'providers' => array(
+					'mock' => Mock_Provider::class,
+				),
+				'expected'  => $mock,
+			),
+			'local and mock providers' => array(
+				'providers' => array(
+					'local' => WP_Webfonts_Provider_Local::class,
+					'mock'  => Mock_Provider::class,
+				),
+				'expected'  => array_merge( $local, $mock ),
+			),
+		);
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_remove_variations() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'      => 'merriweather',
+				'variation_handle' => 'merriweather-200-900-normal',
+				'expected'         => array(
+					'registered'       => array(
+						'merriweather',
+						'source-serif-pro',
+						'Source Serif Pro-300-normal',
+						'Source Serif Pro-900-italic',
+					),
+					'font_family_deps' => array(),
+				),
+			),
+			'Font with multiple variations' => array(
+				'font_family'      => 'source-serif-pro',
+				'variation_handle' => 'Source Serif Pro-300-normal',
+				'expected'         => array(
+					'registered'       => array(
+						'merriweather',
+						'merriweather-200-900-normal',
+						'source-serif-pro',
+						'Source Serif Pro-900-italic',
+					),
+					'font_family_deps' => array( 'Source Serif Pro-900-italic' ),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_enqueue() {
+		return array(
+			'1 font-family'   => array(
+				'handles'                         => 'lato',
+				'expected_queue'                  => array( 'lato' ),
+				'expected_queued_before_register' => array(
+					'lato' => null,
+				),
+			),
+			'2 font families' => array(
+				'handles'                         => array( 'merriweather', 'my-font' ),
+				'expected_queue'                  => array( 'merriweather', 'my-font' ),
+				'expected_queued_before_register' => array(
+					'merriweather' => null,
+					'my-font'      => null,
+				),
+			),
+			'3 font families' => array(
+				'handles'                         => array( 'merriweather', 'my-font', 'source-serif-pro' ),
+				'expected_queue'                  => array( 'merriweather', 'my-font', 'source-serif-pro' ),
+				'expected_queued_before_register' => array(
+					'merriweather'     => null,
+					'my-font'          => null,
+					'source-serif-pro' => null,
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_enqueue_variations() {
+		return array(
+			'1 variation'                               => array(
+				'handles'                         => array( 'my-font-300-normal' ),
+				'expected_queue'                  => array( 'my-font-300-normal' ),
+				'expected_queued_before_register' => array(
+					'my-font-300-normal' => null,
+				),
+			),
+			'1 variation from different font families'  => array(
+				'handles'                         => array( 'merriweather-200-900-normal', 'my-font-300-normal' ),
+				'expected_queue'                  => array( 'merriweather-200-900-normal', 'my-font-300-normal' ),
+				'expected_queued_before_register' => array(
+					'merriweather-200-900-normal' => null,
+					'my-font-300-normal'          => null,
+				),
+			),
+			'enqueue one variation and its font family' => array(
+				'handles'                         => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_queue'                  => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_queued_before_register' => array(
+					'merriweather'                => null,
+					'merriweather-200-900-normal' => null,
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_print_enqueued() {
+		$providers          = $this->get_provider_definitions();
+		$mock_fonts         = $this->get_registered_mock_fonts();
+		$mock_font_handles  = $this->get_handles_for_provider( $mock_fonts, 'mock' );
+		$local_fonts        = $this->get_registered_local_fonts();
+		$local_font_handles = $this->get_handles_for_provider( $local_fonts, 'local' );
+		$font_faces         = $this->get_registered_fonts_css();
+
+		$all_variation_handles = array_merge( $mock_font_handles, $local_font_handles );
+		$setup_all             = array(
+			'provider'         => array(
+				'local' => $providers['local'],
+				'mock'  => $providers['mock'],
+			),
+			'provider_handles' => array(
+				'local' => $local_font_handles,
+				'mock'  => $mock_font_handles,
+			),
+			'registered'       => array_merge( $mock_fonts, $local_fonts ),
+		);
+
+		return array(
+
+			// One provider registered with multiple fonts.
+
+			'print font2 for mock provider'             => array(
+				'setup'           => array(
+					'provider'         => array( 'mock' => $providers['mock'] ),
+					'provider_handles' => array( 'mock' => $mock_font_handles ),
+					'registered'       => $mock_fonts,
+					'enqueued'         => array( 'font2' ),
+				),
+				'expected_done'   => array( 'font2', 'font2-200-900-normal', 'font2-200-900-italic' ),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s</mock>\n',
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic']
+				),
+			),
+			'print all fonts for mock provider'         => array(
+				'setup'           => array(
+					'provider'         => array( 'mock' => $providers['mock'] ),
+					'provider_handles' => array( 'mock' => $mock_font_handles ),
+					'registered'       => $mock_fonts,
+					'enqueued'         => array( 'font1', 'font2', 'font3' ),
+				),
+				'expected_done'   => array(
+					'font1',
+					'font1-300-normal',
+					'font1-300-italic',
+					'font1-900-normal',
+					'font2',
+					'font2-200-900-normal',
+					'font2-200-900-italic',
+					'font3',
+					'font3-bold-normal',
+				),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal'],
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic'],
+					$font_faces['font3-bold-normal']
+				),
+			),
+			'print merriweather for local provider'     => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'merriweather' ),
+				),
+				'expected_done'   => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'print Source Serif Pro for local provider' => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'source-serif-pro' ),
+				),
+				'expected_done'   => array( 'source-serif-pro', 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s\n</style>\n",
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+			'print all fonts for local provider'        => array(
+				'setup'           => array(
+					'provider'         => array( 'local' => $providers['local'] ),
+					'provider_handles' => array( 'local' => $local_font_handles ),
+					'registered'       => $local_fonts,
+					'enqueued'         => array( 'merriweather', 'source-serif-pro' ),
+				),
+				'expected_done'   => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+
+			// All providers registered with multiple fonts.
+
+			'print font1 when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font1' ) ) ),
+				'expected_done'   => array( 'font1', 'font1-300-normal', 'font1-300-italic', 'font1-900-normal' ),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal']
+				),
+			),
+			'print all mock fonts when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font1', 'font2', 'font3' ) ) ),
+				'expected_done'   => array(
+					'font1',
+					'font1-300-normal',
+					'font1-300-italic',
+					'font1-900-normal',
+					'font2',
+					'font2-200-900-normal',
+					'font2-200-900-italic',
+					'font3',
+					'font3-bold-normal',
+				),
+				'expected_output' => sprintf(
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+					$font_faces['font1-300-normal'],
+					$font_faces['font1-300-italic'],
+					$font_faces['font1-900-normal'],
+					$font_faces['font2-200-900-normal'],
+					$font_faces['font2-200-900-italic'],
+					$font_faces['font3-bold-normal']
+				),
+			),
+			'print merriweather when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather' ) ) ),
+				'expected_done'   => array( 'merriweather', 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'print all local fonts when all providers registered' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather', 'source-serif-pro' ) ) ),
+				'expected_done'   => array(
+					'merriweather',
+					'merriweather-200-900-normal',
+					'source-serif-pro',
+					'Source Serif Pro-300-normal',
+					'Source Serif Pro-900-italic',
+				),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+
+			'print all fonts for all providers'         => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => $all_variation_handles ) ),
+				'expected_done'   => $all_variation_handles,
+				'expected_output' =>
+					sprintf(
+						"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal'],
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					) .
+					sprintf(
+						'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+						$font_faces['font1-300-normal'],
+						$font_faces['font1-300-italic'],
+						$font_faces['font1-900-normal'],
+						$font_faces['font2-200-900-normal'],
+						$font_faces['font2-200-900-italic'],
+						$font_faces['font3-bold-normal']
+					),
+			),
+
+			// Specific variations enqueued.
+			// Validates that only these specific variations print once.
+
+			'specific variation: 1 local'               => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal']
+				),
+			),
+			'specific variation: 1 local from different font families' => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s%s\n</style>\n",
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['Source Serif Pro-900-italic']
+				),
+			),
+			'specific variation: 1 local and 1 mock'    => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'merriweather-200-900-normal', 'font2-200-900-normal' ) ) ),
+				'expected_done'   => array( 'merriweather-200-900-normal', 'font2-200-900-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n" .
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n',
+					$font_faces['merriweather-200-900-normal'],
+					$font_faces['font2-200-900-normal']
+				),
+			),
+			'specific variation: 1 mock and 1 local'    => array(
+				'setup'           => array_merge( $setup_all, array( 'enqueued' => array( 'font2-200-900-normal', 'Source Serif Pro-300-normal' ) ) ),
+				'expected_done'   => array( 'font2-200-900-normal', 'Source Serif Pro-300-normal' ),
+				'expected_output' => sprintf(
+					"<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n" .
+					'<mock id="wp-webfonts-mock" attr="some-attr">%s</mock>\n',
+					$font_faces['Source Serif Pro-300-normal'],
+					$font_faces['font2-200-900-normal']
+				),
+			),
+		);
+	}
+
+	protected function get_data_registry() {
+		return array(
+			'lato'             => array(),
+			'merriweather'     => array(
+				'merriweather-200-900-normal' => array(
+					'font-family'  => 'Merriweather',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+			),
+			'Source Serif Pro' => array(
+				'Source Serif Pro-300-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '300',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'Source Serif Pro-900-italic' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'italic',
+					'font-weight'  => '900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+			'my-font'          => array(
+				'my-font-300-normal' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '300',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+				'my-font-300-italic' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '300',
+					'font-style'  => 'italic',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+				'my-font-900-normal' => array(
+					'font-family' => 'My Font',
+					'font-weight' => '900',
+					'src'         => 'https://example.com/assets/fonts/my-font.ttf.woff2',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Gets the provider definitions.
+	 *
+	 * @since X.X.X
+	 *
+	 * @param string $provider_id Optional. Provider ID to get. Default empty string.
+	 * @return array
+	 */
+	protected function get_provider_definitions( $provider_id = '' ) {
+		$providers = array(
+			'mock'  => array(
+				'id'    => 'mock',
+				'class' => Mock_Provider::class,
+			),
+			'local' => array(
+				'id'    => 'local',
+				'class' => WP_Webfonts_Provider_Local::class,
+			),
+		);
+
+		if ( '' === $provider_id ) {
+			return $providers;
+		}
+
+		if ( isset( $providers[ $provider_id ] ) ) {
+			return $providers[ $provider_id ];
+		}
+
+		return array(
+			'id'    => $provider_id,
+			'class' => '',
+		);
+	}
+
+	/**
+	 * Gets web font definitions for both local and mock providers.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return array|string[][][]
+	 */
+	protected function get_registered_fonts() {
+		return array_merge(
+			$this->get_registered_local_fonts(),
+			$this->get_registered_mock_fonts()
+		);
+	}
+
+	/**
+	 * Returns an array of font-face styles that matches the font definitions
+	 * in get_registered_local_fonts() and get_registered_mock_fonts().
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[]
+	 */
+	protected function get_registered_fonts_css() {
+		return array(
+			'merriweather-200-900-normal' => <<<CSS
+@font-face{font-family:Merriweather;font-style:normal;font-weight:200 900;font-display:fallback;font-stretch:normal;src:local(Merriweather), url('https://example.com/assets/fonts/merriweather.ttf.woff2') format('woff2');}
+CSS
+		,
+			'Source Serif Pro-300-normal' => <<<CSS
+@font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:300;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}
+CSS
+		,
+			'Source Serif Pro-900-italic' => <<<CSS
+@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:900;font-display:fallback;font-stretch:normal;src:local("Source Serif Pro"), url('https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');}
+CSS
+		,
+			'font1-300-normal'            => 'font1-300-normal',
+			'font1-300-italic'            => 'font1-300-italic',
+			'font1-900-normal'            => 'font1-900-normal',
+			'font2-200-900-normal'        => 'font2-200-900-normal',
+			'font2-200-900-italic'        => 'font2-200-900-italic',
+			'font3-bold-normal'           => 'font3-bold-normal',
+		);
+	}
+
+	/**
+	 * Gets web font definitions for local provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[][][]
+	 */
+	protected function get_registered_local_fonts() {
+		return array(
+			'lato'             => array(),
+			'merriweather'     => array(
+				'merriweather-200-900-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Merriweather',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+				),
+			),
+			'Source Serif Pro' => array(
+				'Source Serif Pro-300-normal' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '300',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'Source Serif Pro-900-italic' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'italic',
+					'font-weight'  => '900',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+		);
+	}
+
+	/**
+	 * Gets web font definitions for mock provider.
+	 *
+	 * @since X.X.X
+	 *
+	 * @return string[][][]
+	 */
+	protected function get_registered_mock_fonts() {
+		return array(
+			'font1' => array(
+				'font1-300-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '300',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+				'font1-300-italic' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '300',
+					'font-style'   => 'italic',
+					'font-display' => 'fallback',
+				),
+				'font1-900-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 1',
+					'font-weight'  => '900',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+			),
+			'font2' => array(
+				'font2-200-900-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 2',
+					'font-weight'  => '200 900',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+				),
+				'font2-200-900-italic' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 2',
+					'font-weight'  => '200 900',
+					'font-style'   => 'italic',
+					'font-display' => 'fallback',
+				),
+			),
+			'font3' => array(
+				'font3-bold-normal' => array(
+					'provider'     => 'mock',
+					'font-family'  => 'Font 3',
+					'font-weight'  => 'bold',
+					'font-style'   => 'normal',
+					'font-display' => 'fallback',
+					'font-stretch' => 'normal',
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpDeregisterFontFamily-test.php b/phpunit/webfonts/wpDeregisterFontFamily-test.php
new file mode 100644
index 00000000000000..2487053b6149c5
--- /dev/null
+++ b/phpunit/webfonts/wpDeregisterFontFamily-test.php
@@ -0,0 +1,74 @@
+<?php
+/**
+ * Unit and integration tests for wp_deregister_font_family().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @group remove_webfonts
+ * @covers ::wp_deregister_font_family
+ * @covers WP_Web_Fonts::remove_font_family
+ */
+class Tests_Webfonts_WpDeregisterFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering a font-family that mocks WP_Web_Fonts.
+	 *
+	 * @dataProvider data_font_family_handles
+	 *
+	 * @param string $font_family_handle Font family handle to test.
+	 */
+	public function test_unit_should_deregister( $font_family_handle ) {
+		$mock = $this->set_up_mock( 'remove_font_family' );
+		$mock->expects( $this->once() )
+			->method( 'remove_font_family' )
+			->with(
+				$this->identicalTo( $font_family_handle )
+			);
+
+		wp_deregister_font_family( $font_family_handle );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering a font family and all of its variations.
+	 *
+	 * @dataProvider data_font_family_handles
+	 *
+	 * @param string $font_family Font family to test.
+	 */
+	public function test_should_deregister_before_registration( $font_family ) {
+		wp_deregister_font_family( $font_family );
+
+		$this->assertIsArray( $this->get_registered(), 'Registration queue should be an array' );
+		$this->assertEmpty( $this->get_registered(), 'Registration queue should be empty after deregistering' );
+	}
+
+	/**
+	 * Integration test for deregistering a font family and all of its variations.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_deregister_after_registration( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		foreach ( $inputs as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+		// Test the before state, just to make sure.
+		$this->assertSame( $registered_handles, $this->get_registered_handles(), 'Font family and variations should be registered before deregistering' );
+
+		wp_deregister_font_family( $font_family );
+
+		// Test after deregistering.
+		$this->assertIsArray( $this->get_registered_handles(), 'Registration queue should be an array' );
+		$this->assertSame( $expected, $this->get_registered_handles(), 'Registration queue should match after deregistering' );
+	}
+}
diff --git a/phpunit/webfonts/wpDeregisterWebfontVariation-test.php b/phpunit/webfonts/wpDeregisterWebfontVariation-test.php
new file mode 100644
index 00000000000000..a6a0ab67ad4480
--- /dev/null
+++ b/phpunit/webfonts/wpDeregisterWebfontVariation-test.php
@@ -0,0 +1,298 @@
+<?php
+/**
+ * Unit and integration tests for wp_deregister_webfont_variation().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers ::wp_deregister_webfont_variation
+ * @covers WP_Webfonts::remove_variation
+ */
+class Tests_Webfonts_WpDeregisterWebfontVariation extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $fonts_to_register = array();
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts       = wp_webfonts();
+		$this->fonts_to_register = $this->get_registered_local_fonts();
+	}
+
+	/**
+	 * Sets up the unit test by mocking the WP_Dependencies object using stdClass and
+	 * registering each font family directly to the WP_Webfonts::$registered property
+	 * and its variations to the mocked $deps property.
+	 */
+	private function setup_unit_test() {
+		$this->setup_registration_mocks( $this->fonts_to_register, $this->wp_webfonts );
+	}
+
+	/**
+	 * Sets up the integration test by properly registering each font family and its variations
+	 * by using the WP_Webfonts::add() and WP_Webfonts::add_variation() methods.
+	 */
+	private function setup_integration_test() {
+		foreach ( $this->fonts_to_register as $font_family_handle => $variations ) {
+			$this->setup_register( $font_family_handle, $variations, $this->wp_webfonts );
+		}
+	}
+
+	/**
+	 * Testing the test setup to ensure it works.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_mocked_setup( $font_family_handle, $variation_handle ) {
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be in the registered queue before removal' );
+		$this->assertContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should be in its font family deps before removal' );
+	}
+
+	/**
+	 * Unit test for deregistering a font-family's variation using mock of WP_Webfonts.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family to test.
+	 * @param string $variation_handle   Variation's handle to test.
+	 */
+	public function test_should_deregister_when_mocked( $font_family_handle, $variation_handle ) {
+		$mock = $this->set_up_mock( 'remove_variation' );
+		$mock->expects( $this->once() )
+			->method( 'remove_variation' )
+			->with(
+				$this->identicalTo( $font_family_handle, $variation_handle )
+			);
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_should_do_nothing
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_unit_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_unit_test();
+		$registered_queue = $this->wp_webfonts->registered;
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSame( $registered_queue, $this->wp_webfonts->registered, 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_should_do_nothing
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_integration_test();
+		$registered_queue = $this->wp_webfonts->get_registered();
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSameSets( $registered_queue, $this->wp_webfonts->get_registered(), 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_should_do_nothing() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'        => 'merriweather',
+				'font_family_handle' => 'merriweather',
+				'variation_handle'   => 'merriweather-200-900-normal',
+			),
+			'Font with multiple variations' => array(
+				'font_family'        => 'Source Serif Pro',
+				'font_family_handle' => 'source-serif-pro',
+				'variation_handle'   => 'Source Serif Pro-300-normal',
+			),
+		);
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		wp_deregister_webfont_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Remove the variation handle from the font family's deps.
+	 *
+	 * @param string $font_family_handle Font family.
+	 * @param string $variation_handle   The variation handle to remove.
+	 */
+	private function setup_remove_from_font_family_deps( $font_family_handle, $variation_handle ) {
+		foreach ( $this->wp_webfonts->registered[ $font_family_handle ]->deps as $index => $vhandle ) {
+			if ( $variation_handle !== $vhandle ) {
+				continue;
+			}
+			unset( $this->wp_webfonts->registered[ $font_family_handle ]->deps[ $index ] );
+			break;
+		}
+	}
+
+	/**
+	 * Removes the variation from the WP_Webfonts::$registered queue.
+	 *
+	 * @param string $variation_handle The variation handle to remove.
+	 */
+	private function setup_remove_variation_from_registered( $variation_handle ) {
+		unset( $this->wp_webfonts->registered[ $variation_handle ] );
+	}
+}
diff --git a/phpunit/webfonts/wpEnqueueWebfontVariations-test.php b/phpunit/webfonts/wpEnqueueWebfontVariations-test.php
new file mode 100644
index 00000000000000..f6ce62d3f47ee0
--- /dev/null
+++ b/phpunit/webfonts/wpEnqueueWebfontVariations-test.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * Unit and integration tests for wp_enqueue_webfont_variations().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_enqueue_webfont_variations
+ * @covers WP_Webfonts::enqueue
+ */
+class Tests_Webfonts_WpEnqueueWebfontVariations extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering one or more specific variations that mocks WP_Webfonts.
+	 *
+	 * @dataProvider data_variation_handles
+	 *
+	 * @param string|string[] $handles Variation handles to test.
+	 */
+	public function test_unit_should_enqueue( $handles ) {
+		$mock = $this->set_up_mock( 'enqueue' );
+		$mock->expects( $this->once() )
+			->method( 'enqueue' )
+			->with(
+				$this->identicalTo( $handles )
+			);
+
+		wp_enqueue_webfont_variations( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_variation_handles() {
+		return array(
+			'1 variation handle'                   => array( 'merriweather-200-900-normal' ),
+			'multiple same font family handles'    => array( array( 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ) ),
+			'handles from different font families' => array( array( 'merriweather-200-900-normal', 'Source Serif Pro-900-italic' ) ),
+		);
+	}
+
+	/**
+	 * Integration test for enqueuing one or more specific variations.
+	 *
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Variation handles to test.
+	 * @param array           $expected Expected queue.
+	 */
+	public function test_should_enqueue_after_registration( $handles, array $expected ) {
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+
+		wp_enqueue_webfont_variations( $handles );
+		$this->assertEmpty( $this->get_queued_before_register(), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected, $this->get_enqueued_handles(), 'Queue should contain the given handles' );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering one or more specific variations.
+	 *
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Variation handles to test.
+	 * @param array           $not_used Not used.
+	 * @param array           $expected Expected "queued_before_register" queue.
+	 */
+	public function test_should_enqueue_before_registration( $handles, array $not_used, array $expected ) {
+		wp_enqueue_webfont_variations( $handles );
+
+		$this->assertSame( $expected, $this->get_queued_before_register(), '"queued_before_register" queue should contain the given handles' );
+		$this->assertEmpty( $this->get_enqueued_handles(), 'Queue should be empty' );
+	}
+}
diff --git a/phpunit/webfonts/wpEnqueueWebfonts-test.php b/phpunit/webfonts/wpEnqueueWebfonts-test.php
new file mode 100644
index 00000000000000..a0ee6af5c1ddad
--- /dev/null
+++ b/phpunit/webfonts/wpEnqueueWebfonts-test.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * Unit and integration tests for wp_enqueue_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_enqueue_webfonts
+ * @covers WP_Web_Fonts::enqueue
+ */
+class Tests_Webfonts_WpEnqueueWebfonts extends WP_Webfonts_TestCase {
+
+	/**
+	 * Unit test for registering a font-family that mocks WP_Web_Fonts.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_unit_should_enqueue( $font_families, $expected_handles ) {
+		$mock = $this->set_up_mock( 'enqueue' );
+		$mock->expects( $this->once() )
+			->method( 'enqueue' )
+			->with(
+				$this->identicalTo( $expected_handles )
+			);
+
+		wp_enqueue_webfonts( $font_families );
+	}
+
+	/**
+	 * Integration test for enqueuing a font family and all of its variations.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_should_enqueue_after_registration( $font_families, $expected_handles ) {
+		// Register the font-families.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations );
+		}
+
+		wp_enqueue_webfonts( $font_families );
+
+		$this->assertEmpty( $this->get_queued_before_register(), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected_handles, $this->get_enqueued_handles(), 'Queue should contain the given font family(ies)' );
+	}
+
+	/**
+	 * Integration test for enqueuing before registering a font family and all of its variations.
+	 *
+	 * @dataProvider data_should_enqueue
+	 *
+	 * @param string[] $font_families    Font families to test.
+	 * @param string[] $expected_handles Expected handles passed to WP_Web_Fonts::enqueue().
+	 */
+	public function test_should_enqueue_before_registration( $font_families, $expected_handles ) {
+		wp_enqueue_webfonts( $font_families );
+
+		// Set up what "queued_before_register" queue should be.
+		$expected = array();
+		foreach ( $expected_handles as $handle ) {
+			$expected[ $handle ] = null;
+		}
+		$this->assertSame( $expected, $this->get_queued_before_register(), '"queued_before_register" queue should contain the given font family(ies)' );
+		$this->assertEmpty( $this->get_enqueued_handles(), 'Queue should be empty' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_enqueue() {
+		return array(
+			'1: single word handle'                 => array(
+				'font_families'    => array( 'lato' ),
+				'expected_handles' => array( 'lato' ),
+			),
+			'1: multiple word handle'               => array(
+				'font_families'    => array( 'source-serif-pro' ),
+				'expected_handles' => array( 'source-serif-pro' ),
+			),
+			'1: single word name'                   => array(
+				'font_families'    => array( 'Merriweather' ),
+				'expected_handles' => array( 'merriweather' ),
+			),
+			'1: multiple word name'                 => array(
+				'font_families'    => array( 'My Font' ),
+				'expected_handles' => array( 'my-font' ),
+			),
+			'>1: single word handle'                => array(
+				'font_families'    => array( 'lato', 'merriweather' ),
+				'expected_handles' => array( 'lato', 'merriweather' ),
+			),
+			'>1: multiple word handle'              => array(
+				'font_families'    => array( 'source-serif-pro', 'my-font' ),
+				'expected_handles' => array( 'source-serif-pro', 'my-font' ),
+			),
+			'>1: single word name'                  => array(
+				'font_families'    => array( 'Lato', 'Merriweather' ),
+				'expected_handles' => array( 'lato', 'merriweather' ),
+			),
+			'>1: multiple word name'                => array(
+				'font_families'    => array( 'My Font', 'Source Serif Pro' ),
+				'expected_handles' => array( 'my-font', 'source-serif-pro' ),
+			),
+			'>1: mixture of word handles and names' => array(
+				'font_families'    => array( 'Source Serif Pro', 'Merriweather', 'my-font', 'Lato' ),
+				'expected_handles' => array( 'source-serif-pro', 'merriweather', 'my-font', 'lato' ),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpPrintWebfonts-test.php b/phpunit/webfonts/wpPrintWebfonts-test.php
new file mode 100644
index 00000000000000..3f782fec580fd7
--- /dev/null
+++ b/phpunit/webfonts/wpPrintWebfonts-test.php
@@ -0,0 +1,127 @@
+<?php
+/**
+ * Unit and integration tests for wp_print_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+require_once __DIR__ . '/../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_print_webfonts
+ */
+class Tests_Webfonts_WpPrintWebfonts extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_array_when_global_not_instance() {
+		global $wp_webfonts;
+		wp_webfonts();
+		$wp_webfonts = null;
+
+		$this->assertSame( array(), wp_print_webfonts() );
+		$this->assertNotInstanceOf( WP_Webfonts::class, $wp_webfonts );
+	}
+
+	/**
+	 * Unit test to mock WP_Webfonts::do_items().
+	 *
+	 * @dataProvider data_mocked_handles
+	 *
+	 * @param string|string[]|false $handles  Handles to test.
+	 * @param array|string[]        $expected Expected array of processed handles.
+	 */
+	public function test_should_return_mocked_handles( $handles, $expected ) {
+		$mock = $this->set_up_mock( 'do_items' );
+		$mock->expects( $this->once() )
+			->method( 'do_items' )
+			->with(
+				$this->identicalTo( $handles )
+			)
+			->will( $this->returnValue( $expected ) );
+
+		wp_print_webfonts( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_mocked_handles() {
+		return array(
+			'no handles'          => array(
+				'handles'  => false,
+				'expected' => array(),
+			),
+			'font family handles' => array(
+				'handles'  => array( 'my-custom-font' ),
+				'expected' => array( 'my-custom-font' ),
+			),
+		);
+	}
+
+	/**
+	 * Integration test that registers providers and fonts and then enqueues before
+	 * testing the printing functionality.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_enqueued( $setup, $expected_done, $expected_output ) {
+		$wp_webfonts = wp_webfonts();
+
+		$this->setup_integrated_deps( $setup, $wp_webfonts );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = wp_print_webfonts();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test to validate printing given handles. Rather than mocking internal functionality,
+	 * it registers providers and fonts but does not enqueue.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_handles_when_not_enqueued( $setup, $expected_done, $expected_output ) {
+		$wp_webfonts = wp_webfonts();
+
+		$this->setup_integrated_deps( $setup, $wp_webfonts, false );
+		// Do not enqueue. Instead, pass the handles to wp_print_webfonts().
+		$handles = $setup['enqueued'];
+		$this->assertEmpty( $wp_webfonts->queue, 'No fonts should be enqueued' );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = wp_print_webfonts( $handles );
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Sets up the dependencies for integration test.
+	 *
+	 * @param array        $setup       Dependencies to set up.
+	 * @param WP_Web_Fonts $wp_webfonts Instance of WP_Web_Fonts.
+	 * @param bool         $enqueue     Whether to enqueue. Default true.
+	 */
+	private function setup_integrated_deps( array $setup, $wp_webfonts, $enqueue = true ) {
+		foreach ( $setup['provider'] as $provider ) {
+			$wp_webfonts->register_provider( $provider['id'], $provider['class'] );
+		}
+		foreach ( $setup['registered'] as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+
+		if ( $enqueue ) {
+			$wp_webfonts->enqueue( $setup['enqueued'] );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpRegisterWebfontProvider-test.php b/phpunit/webfonts/wpRegisterWebfontProvider-test.php
new file mode 100644
index 00000000000000..8f1367d6dbb23d
--- /dev/null
+++ b/phpunit/webfonts/wpRegisterWebfontProvider-test.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * Unit tests for wp_register_webfont_provider().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+require_once __DIR__ . '/../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_register_webfont_provider
+ */
+class Tests_Webfonts_WpRegisterWebfontProvider extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_register_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_register_provider( $provider_id, $class ) {
+		$mock = $this->set_up_mock( 'register_provider' );
+		$mock->expects( $this->once() )
+			->method( 'register_provider' )
+			->with(
+				$this->identicalTo( $provider_id ),
+				$this->identicalTo( $class )
+			)
+			->will( $this->returnValue( true ) );
+
+		$this->assertTrue( wp_register_webfont_provider( $provider_id, $class ), 'wp_register_webfont_provider() should return true' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_register_providers() {
+		return array(
+			'mock'  => array(
+				'provider_id' => 'mock',
+				'class'       => Mock_Provider::class,
+			),
+			'local' => array(
+				'provider_id' => 'local',
+				'class'       => WP_Webfonts_Provider_Local::class,
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_invalid_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_not_register( $provider_id, $class ) {
+		$mock = $this->set_up_mock( 'register_provider' );
+		$mock->expects( $this->once() )
+			->method( 'register_provider' )
+			->with(
+				$this->identicalTo( $provider_id ),
+				$this->identicalTo( $class )
+			)
+			->will( $this->returnValue( false ) );
+
+		$this->assertFalse( wp_register_webfont_provider( $provider_id, $class ), 'wp_register_webfont_provider() should return false' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_providers() {
+		return array(
+			'provider_id is empty' => array(
+				'provider_id' => '',
+				'class'       => Mock_Provider::class,
+			),
+			'class is empty'       => array(
+				'provider_id' => 'local',
+				'class'       => '',
+			),
+			'class does not exist' => array(
+				'provider_id' => 'doesnotexist',
+				'class'       => 'Provider_Does_Not_Exist',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpRegisterWebfonts-test.php b/phpunit/webfonts/wpRegisterWebfonts-test.php
new file mode 100644
index 00000000000000..11dbf9d73c2ea3
--- /dev/null
+++ b/phpunit/webfonts/wpRegisterWebfonts-test.php
@@ -0,0 +1,325 @@
+<?php
+/**
+ * Integration tests for wp_register_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_register_webfonts
+ * @covers WP_Web_Fonts::add
+ * @covers WP_Web_Fonts::add_variation
+ */
+class Tests_Webfonts_WpRegisterWebfonts extends WP_Webfonts_TestCase {
+	use WP_Webfonts_Tests_Datasets;
+
+	/**
+	 * @dataProvider data_webfonts
+	 *
+	 * @param array $webfonts Array of webfonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_register( array $webfonts, array $expected ) {
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( $expected['wp_register_webfonts'], $actual, 'Font family handle(s) should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Web fonts should match registered queue' );
+	}
+
+	/**
+	 * @dataProvider data_webfonts
+	 *
+	 * @param array $webfonts Array of webfonts to test.
+	 */
+	public function test_should_not_enqueue_on_registration( array $webfonts ) {
+		wp_register_webfonts( $webfonts );
+		$this->assertEmpty( $this->get_enqueued_handles() );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_webfonts() {
+		return array(
+			'font family keyed with slug' => array(
+				'webfonts' => array(
+					'source-serif-pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-200-900-normal',
+					),
+				),
+			),
+			'font family keyed with name' => array(
+				'webfonts' => array(
+					'Source Serif Pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-200-900-normal',
+						'source-serif-pro-200-900-italic',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @param array $webfonts Webfonts to test.
+	 */
+	public function test_should_throw_deprecation_with_deprecated_structure( array $webfonts ) {
+		$this->expectDeprecation();
+		$this->expectDeprecationMessage(
+			'A deprecated web fonts array structure passed to wp_register_webfonts(). ' .
+			'Variations must be grouped and keyed by their font family.'
+		);
+
+		wp_register_webfonts( $webfonts );
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @param array $webfonts Webfonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_register_with_deprecated_structure( array $webfonts, array $expected ) {
+		$this->suppress_deprecations();
+
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( $expected['wp_register_webfonts'], $actual, 'Font family handle(s) should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Web fonts should match registered queue' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_deprecated_structure() {
+		return array(
+			'1 web font'                           => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'merriweather' ),
+					'get_registered'       => array( 'merriweather', 'merriweather-200-900-normal' ),
+				),
+			),
+			'2 web font in same font family'       => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+					),
+				),
+			),
+			'Web fonts in different font families' => array(
+				'webfonts' => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'wp_register_webfonts' => array( 'source-serif-pro', 'merriweather' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+						'merriweather',
+						'merriweather-200-900-normal',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_invalid_font_family
+	 *
+	 * @param array  $webfonts         Web fonts to test.
+	 * @param string $expected_message Expected notice message.
+	 */
+	public function test_should_not_register_with_undefined_font_family( array $webfonts, $expected_message ) {
+		$this->suppress_deprecations();
+
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$actual = wp_register_webfonts( $webfonts );
+		$this->assertSame( array(), $actual, 'Return value should be an empty array' );
+		$this->assertEmpty( $this->get_registered_handles(), 'No Web fonts should have registered' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_font_family() {
+		return array(
+			'non-string'                                  => array(
+				'webfonts'         => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => null,
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+			'empty string in deprecated structure'        => array(
+				'webfonts'         => array(
+					'0' => array(
+						'provider'     => 'local',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'incorrect parameter in deprecated structure' => array(
+				'webfonts'         => array(
+					array(
+						'provider'     => 'local',
+						'FontFamily'   => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font_family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts-test.php b/phpunit/webfonts/wpWebfonts-test.php
new file mode 100644
index 00000000000000..17ab8c60583fae
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts-test.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * Unit and integration tests for wp_webfonts().
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers ::wp_webfonts
+ */
+class Tests_Webfonts_WpWebfonts extends WP_Webfonts_TestCase {
+
+	public function test_returns_instance() {
+		$this->assertInstanceOf( WP_Web_Fonts::class, wp_webfonts() );
+	}
+
+	public function test_global_set() {
+		global $wp_webfonts;
+		$this->assertNull( $wp_webfonts );
+		$instance = wp_webfonts();
+		$this->assertInstanceOf( WP_Web_Fonts::class, $wp_webfonts );
+		$this->assertSame( $instance, $wp_webfonts );
+	}
+
+	public function test_local_provider_is_automatically_registered() {
+		$expected = array(
+			'local' => array(
+				'class' => 'WP_Webfonts_Provider_Local',
+				'fonts' => array(),
+			),
+		);
+		$this->assertSame( $expected, wp_webfonts()->get_providers() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/add-test.php b/phpunit/webfonts/wpWebfonts/add-test.php
new file mode 100644
index 00000000000000..a432c7e8572129
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/add-test.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * WP_Web_Fonts::add() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add
+ */
+class Tests_Webfonts_WpWebfonts_Add extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_handles
+	 *
+	 * @param string $handle Handle to register.
+	 */
+	public function test_add( $handle ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$this->assertTrue( $wp_webfonts->add( $handle, false ), 'Registering a handle should return true' );
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_handles() {
+		return array(
+			'name: multiple'    => array( 'Source Serif Pro' ),
+			'handle: multiple'  => array( 'source-serif-pro' ),
+			'name: single'      => array( 'Merriweather' ),
+			'handle: single'    => array( 'merriweather' ),
+			'handle: variation' => array( 'my-custom-font-200-900-normal' ),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/addFontFamily-test.php b/phpunit/webfonts/wpWebfonts/addFontFamily-test.php
new file mode 100644
index 00000000000000..4aa5e55b1ef3cb
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/addFontFamily-test.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * WP_Web_Fonts::add_font_family() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add_font_family
+ */
+class Tests_Webfonts_WpWebfonts_AddFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_handles
+	 *
+	 * @param string $font_family Font family to register.
+	 * @param string $expected    Expected handle.
+	 */
+	public function test_should_register( $font_family, $expected ) {
+		$wp_webfonts        = new WP_Web_Fonts();
+		$font_family_handle = $wp_webfonts->add_font_family( $font_family );
+
+		$this->assertSame( $expected, $font_family_handle, 'Registering a font-family should return its handle' );
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_handles() {
+		return array(
+			'name: multiple'               => array(
+				'font_family' => 'Source Serif Pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'handle: multiple'             => array(
+				'font_family' => 'source-serif-pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'name: single'                 => array(
+				'font_family' => 'Merriweather',
+				'expected'    => 'merriweather',
+			),
+			'handle: single'               => array(
+				'font_family' => 'merriweather',
+				'expected'    => 'merriweather',
+			),
+			'handle: variation'            => array(
+				'font_family' => 'my-custom-font-200-900-normal',
+				'expected'    => 'my-custom-font-200-900-normal',
+			),
+			'name: multiple font-families' => array(
+				'font_family' => 'Source Serif Pro, Merriweather',
+				'expected'    => 'source-serif-pro',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/addVariation-test.php b/phpunit/webfonts/wpWebfonts/addVariation-test.php
new file mode 100644
index 00000000000000..5f948b81fd146b
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/addVariation-test.php
@@ -0,0 +1,149 @@
+<?php
+/**
+ * WP_Web_Fonts::add_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::add_variation
+ */
+class Tests_Webfonts_WpWebfonts_AddVariation extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_register_variation_when_font_family_is_registered( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variation_handle, 'Registering a variation should return its handle' );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+		$this->assertSame( array( $expected ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should be registered to font family' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_not_reregister_font_family( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+
+		// Font family should appear only once in the registered queue.
+		$expected = array( $font_family_handle, $variation_handle );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Font family should not be re-registered after registering a variation' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_not_reregister_variation( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add( $font_family_handle, false );
+
+		// Set up the test.
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+
+		// Run the test.
+		$variant_handle_on_reregister = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variant_handle_on_reregister, 'Variation should be registered to font family' );
+		$this->assertSame( $variation_handle, $variant_handle_on_reregister, 'Variation should return the previously registered variant handle' );
+		$this->assertSame( array( $variation_handle ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should only be registered once' );
+
+		$this->assertCount( 2, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+	}
+
+	/**
+	 * @dataProvider data_valid_variation
+	 *
+	 * @param string|bool $expected           Expected results.
+	 * @param string      $font_family_handle The font family's handle for this variation.
+	 * @param array       $variation          An array of variation properties to add.
+	 * @param string      $variation_handle   Optional. The variation's handle.
+	 */
+	public function test_should_register_font_family_and_variation( $expected, $font_family_handle, array $variation, $variation_handle = '' ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$variation_handle = $wp_webfonts->add_variation( $font_family_handle, $variation, $variation_handle );
+		$this->assertSame( $expected, $variation_handle, 'Variation should return its registered handle' );
+
+		// Extra checks to ensure both are registered.
+		$this->assertCount( 2, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered, 'Font family handle should be in the registry after registration' );
+		$this->assertArrayHasKey( $variation_handle, $wp_webfonts->registered, 'Variation handle should be in the registry after registration' );
+		$this->assertSame( array( $variation_handle ), $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should be registered to the font family' );
+	}
+
+	/**
+	 * @dataProvider data_font_family_handle_undefined
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 */
+	public function test_should_not_register_font_family_or_variant( $font_family_handle, array $variation ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Font family handle must be a non-empty string.' );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add_variation( $font_family_handle, $variation );
+
+		$this->assertEmpty( $wp_webfonts->registered, 'Registered queue should be empty' );
+		$this->assertEmpty( $this->get_variations( $font_family_handle, $wp_webfonts ), 'Variation should not be registered to the font family' );
+	}
+
+	/**
+	 * @dataProvider data_font_family_undefined_in_variation
+	 * @dataProviders data_unable_determine_variation_handle
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 * @param string $expected_message   Expected notice message.
+	 */
+	public function test_should_not_register_variation_when_font_family_not_defined( $font_family_handle, array $variation, $expected_message ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertNull( $wp_webfonts->add_variation( $font_family_handle, $variation ) );
+	}
+
+	/**
+	 * @dataProvider data_unable_determine_variation_handle
+	 *
+	 * @param string $font_family_handle The font family's handle for this variation.
+	 * @param array  $variation          An array of variation properties to add.
+	 */
+	public function test_should_register_font_family_when_variant_fails_to_register( $font_family_handle, array $variation ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->add_variation( $font_family_handle, $variation );
+
+		$this->assertCount( 1, $wp_webfonts->registered );
+		$this->assertArrayHasKey( $font_family_handle, $wp_webfonts->registered );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/dequeue-test.php b/phpunit/webfonts/wpWebfonts/dequeue-test.php
new file mode 100644
index 00000000000000..c4959958a2ccf4
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/dequeue-test.php
@@ -0,0 +1,72 @@
+<?php
+/**
+ * WP_Web_Fonts::dequeue() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::dequeue
+ */
+class Tests_Webfonts_WpWebfonts_Dequeue extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_do_nothing_when_handles_not_queued( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue should be empty' );
+		$this->assertEmpty( $wp_webfonts->queue, 'Queue should be empty' );
+	}
+
+	/**
+	 * Integration test for dequeuing from queue. It first registers and then enqueues before dequeuing.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_dequeue_from_queue( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register and enqueue.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+		$wp_webfonts->enqueue( $handles );
+
+		// To make sure the handles are in the queue before dequeuing.
+		$this->assertNotEmpty( $wp_webfonts->queue, 'Queue not be empty before dequeueing' );
+
+		// Run the test.
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $wp_webfonts->queue, 'Queue should be empty after dequeueing' );
+	}
+
+	/**
+	 * Integration test for dequeuing from prequeue. It enqueues first.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles Handles to test.
+	 */
+	public function test_should_dequeue_from_prequeue( $handles ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->enqueue( $handles );
+		$this->assertNotEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue not be empty before dequeueing' );
+
+		$wp_webfonts->dequeue( $handles );
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), 'Prequeue should be empty after dequeueing' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/doItem-test.php b/phpunit/webfonts/wpWebfonts/doItem-test.php
new file mode 100644
index 00000000000000..e54b909f83429e
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/doItem-test.php
@@ -0,0 +1,336 @@
+<?php
+/**
+ * WP_Web_Fonts::do_item() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  printwebfonts
+ * @covers WP_Web_Fonts::do_item
+ */
+class Tests_Webfonts_WpWebfonts_DoItem extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts;
+	}
+
+	public function test_should_return_false_when_provider_not_registered() {
+		$this->assertFalse( $this->wp_webfonts->do_item( 'provider_not_registered' ) );
+	}
+
+	/**
+	 * @dataProvider data_provider_definitions
+	 *
+	 * @param array $provider Provider to mock.
+	 */
+	public function test_should_return_false_when_no_fonts_enqueued_for_provider( array $provider ) {
+		$this->setup_provider_property_mock( $this->wp_webfonts, $provider );
+		$this->assertFalse( $this->wp_webfonts->do_item( $provider['id'] ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_provider_definitions() {
+		$providers = $this->get_provider_definitions();
+
+		return array(
+			'mock'  => array( $providers['mock'] ),
+			'local' => array( $providers['local'] ),
+		);
+	}
+
+	/**
+	 * Test the test set up to ensure the `Tests_Webfonts_WpWebfonts_DoItem_::setup_provider_property_mock()`
+	 * method works as expected.
+	 */
+	public function test_mocking_providers_property() {
+		$font_handles = array( 'font1', 'font2', 'font3' );
+		$expected     = array(
+			'mock' => array(
+				'class' => Mock_Provider::class,
+				'fonts' => $font_handles,
+			),
+		);
+
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+		$actual = $this->property['WP_Web_Fonts::$providers']->getValue( $this->wp_webfonts );
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Test the private method WP_Web_Fonts::get_enqueued_fonts_for_provider().
+	 *
+	 * Why? This test validates the right fonts are returned for use within
+	 * WP_Web_Fonts::do_item().
+	 *
+	 * @dataProvider data_get_enqueued_fonts_for_provider
+	 *
+	 * @param array $font_handles Array of handles for the provider.
+	 * @param array $to_do        Handles to set for the WP_Web_Fonts::$to_do property.
+	 * @param array $expected     Expected result.
+	 */
+	public function test_get_enqueued_fonts_for_provider( $font_handles, $to_do, $expected ) {
+		// Set up the `to_do` property.
+		$this->wp_webfonts->to_do = $to_do;
+
+		// Open the method's visibility for testing.
+		$get_enqueued_fonts_for_provider = $this->get_reflection_method( 'get_enqueued_fonts_for_provider' );
+
+		// Mock the WP_Web_Fonts::$property to set up the test.
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+
+		$actual = $get_enqueued_fonts_for_provider->invoke( $this->wp_webfonts, 'mock' );
+		$this->assertSameSets( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_enqueued_fonts_for_provider() {
+		return array(
+			'to_do queue is empty'                   => array(
+				'font_handles ' => array( 'font1', 'font2', 'font3' ),
+				'to_do'         => array(),
+				'expected'      => array(),
+			),
+			'fonts not in to_do queue'               => array(
+				'font_handles ' => array( 'font1', 'font2', 'font3' ),
+				'to_do'         => array( 'font12', 'font13' ),
+				'expected'      => array(),
+			),
+			'2 of the provider fonts in to_do queue' => array(
+				'font_handles ' => array( 'font11', 'font12', 'font13' ),
+				'to_do'         => array( 'font11', 'font13' ),
+				'expected'      => array( 'font11', 'font13' ),
+			),
+			'do all of the provider fonts'           => array(
+				'font_handles ' => array( 'font21', 'font22', 'font23' ),
+				'to_do'         => array( 'font21', 'font22', 'font23' ),
+				'expected'      => array( 'font21', 'font22', 'font23' ),
+			),
+		);
+	}
+
+	/**
+	 * Test the private method WP_Web_Fonts::get_font_properties_for_provider().
+	 *
+	 * Why? This test validates the right font properties are returned for use within
+	 * WP_Web_Fonts::do_item().
+	 *
+	 * @dataProvider data_get_font_properties_for_provider
+	 *
+	 * @param array $font_handles Web fonts for testing.
+	 * @param array $expected     Expected result.
+	 */
+	public function test_get_font_properties_for_provider( $font_handles, $expected ) {
+		// Set up the fonts for WP_Dependencies:get_data().
+		$fonts = $this->get_registered_fonts();
+		// Set all variations to 'mock' provider.
+
+		// Mock the WP_Web_Fonts::$property to set up the test.
+		$this->setup_provider_property_mock( $this->wp_webfonts, $this->get_provider_definitions( 'mock' ), $font_handles );
+		$this->setup_registration_mocks( $fonts, $this->wp_webfonts );
+
+		// Open the method's visibility for testing.
+		$method = $this->get_reflection_method( 'get_font_properties_for_provider' );
+
+		$actual = $method->invoke( $this->wp_webfonts, $font_handles );
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_font_properties_for_provider() {
+		$fonts = $this->get_registered_fonts();
+
+		return array(
+			'handles not registered'                => array(
+				'font_handles' => array( 'font-not-registered1', 'font-not-registered2', 'font-not-registered3' ),
+				'expected'     => array(),
+			),
+			'registered and non-registered handles' => array(
+				'font_handles' => array( 'Source Serif Pro-300-normal', 'not-registered-handle', 'Source Serif Pro-900-italic' ),
+				'expected'     => array(
+					'Source Serif Pro-300-normal' => $fonts['Source Serif Pro']['Source Serif Pro-300-normal'],
+					'Source Serif Pro-900-italic' => $fonts['Source Serif Pro']['Source Serif Pro-900-italic'],
+				),
+			),
+			'font-family handles, ie no "font-properties" extra data' => array(
+				'font_handles' => array( 'font1', 'font2', 'merriweather' ),
+				'expected'     => array(),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_print_enqueued_fonts
+	 *
+	 * @param array $provider Define provider.
+	 * @param array $fonts    Fonts to register and enqueue.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_trigger_provider_when_mocked( array $provider, array $fonts, array $expected ) {
+		$this->setup_print_deps( $provider, $fonts );
+
+		$provider_mock = $this->setup_object_mock( array( 'set_webfonts', 'print_styles' ), $provider['class'] );
+
+		// Test the provider's methods are invoked.
+		$provider_mock->expects( $this->once() )->method( 'set_webfonts' )->with( $this->identicalTo( $expected['set_webfonts'] ) );
+		$provider_mock->expects( $this->once() )->method( 'print_styles' );
+
+		// Set up the WP_Web_Fonts::$provider_instances property.
+		$provider_instances = $this->get_reflection_property( 'provider_instances' );
+		$provider_instances->setValue( $this->wp_webfonts, array( $provider['id'] => $provider_mock ) );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( '' );
+		$this->assertTrue( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return true' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_print_enqueued_fonts
+	 *
+	 * @param array $provider Define provider.
+	 * @param array $fonts    Fonts to register and enqueue.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_print( array $provider, array $fonts, array $expected ) {
+		$this->setup_print_deps( $provider, $fonts );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( $expected['printed_output'] );
+		$this->assertTrue( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return true' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_print_enqueued_fonts() {
+		$mock       = $this->get_registered_mock_fonts();
+		$local      = $this->get_registered_local_fonts();
+		$font_faces = $this->get_registered_fonts_css();
+
+		return array(
+			'mock'  => array(
+				'provider' => $this->get_provider_definitions( 'mock' ),
+				'fonts'    => $mock,
+				'expected' => array(
+					'set_webfonts'   => array_merge( $mock['font1'], $mock['font2'], $mock['font3'] ),
+					'printed_output' => sprintf(
+						'<mock id="wp-webfonts-mock" attr="some-attr">%s; %s; %s; %s; %s; %s</mock>\n',
+						$font_faces['font1-300-normal'],
+						$font_faces['font1-300-italic'],
+						$font_faces['font1-900-normal'],
+						$font_faces['font2-200-900-normal'],
+						$font_faces['font2-200-900-italic'],
+						$font_faces['font3-bold-normal']
+					),
+				),
+			),
+			'local' => array(
+				'provider' => $this->get_provider_definitions( 'local' ),
+				'fonts'    => $local,
+				'expected' => array(
+					'set_webfonts'   => array_merge( $local['merriweather'], $local['Source Serif Pro'] ),
+					'printed_output' => sprintf(
+						"<style id='wp-webfonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal'],
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_not_print_enqueued_fonts
+	 *
+	 * @param array $provider    Define provider.
+	 * @param array $fonts       Fonts to register and enqueue.
+	 * @param array $expected    Not used.
+	 * @param array $to_do_queue Value to set in the WP_Web_Fonts::$to_do queue.
+	 */
+	public function test_should_not_print_when_to_do_queue_empty( array $provider, array $fonts, $expected, $to_do_queue ) {
+		$this->setup_print_deps( $provider, $fonts, $to_do_queue );
+
+		// Test the method successfully processes the provider.
+		$this->expectOutputString( '' );
+		$this->assertFalse( $this->wp_webfonts->do_item( $provider['id'] ), 'WP_Web_Fonts::do_item() should return false' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_not_print_enqueued_fonts() {
+		$mock  = $this->get_registered_mock_fonts();
+		$local = $this->get_registered_local_fonts();
+
+		return array(
+			'mock provider when to_do queue is empty'  => array(
+				'provider'    => $this->get_provider_definitions( 'mock' ),
+				'fonts'       => $mock,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+			'local provider when to_do queue is empty' => array(
+				'provider'    => $this->get_provider_definitions( 'local' ),
+				'fonts'       => $local,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+			'fonts not in to_do queue'                 => array(
+				'provider'    => $this->get_provider_definitions( 'mock' ),
+				'fonts'       => $mock,
+				'expected'    => array(),
+				'to_do_queue' => array(),
+			),
+		);
+	}
+
+	/**
+	 * Sets up the print dependencies.
+	 *
+	 * @param array      $provider    Provider id and class.
+	 * @param array      $fonts       Fonts to register and enqueue.
+	 * @param array|null $to_do_queue Set the WP_Web_Fonts:$to_do queue.
+	 */
+	private function setup_print_deps( $provider, $fonts, $to_do_queue = null ) {
+		// Set up the fonts for WP_Dependencies:get_data().
+		$mocks   = $this->setup_registration_mocks( $fonts, $this->wp_webfonts );
+		$handles = array_keys( $mocks );
+		$this->setup_provider_property_mock( $this->wp_webfonts, $provider, $handles );
+
+		// Set up the `WP_Web_Fonts::$to_do` and `WP_Web_Fonts::$to_do_keyed_handles` properties.
+		if ( null === $to_do_queue ) {
+			$to_do_queue = $handles;
+		}
+
+		$this->wp_webfonts->to_do = $to_do_queue;
+		$to_do_keyed_handles      = $this->get_reflection_property( 'to_do_keyed_handles' );
+		$to_do_keyed_handles->setValue( $this->wp_webfonts, array_flip( $to_do_queue ) );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/doItems-test.php b/phpunit/webfonts/wpWebfonts/doItems-test.php
new file mode 100644
index 00000000000000..7efb8dff67b7ec
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/doItems-test.php
@@ -0,0 +1,196 @@
+<?php
+/**
+ * WP_Web_Fonts::do_items() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @group  printwebfonts
+ * @covers WP_Web_Fonts::do_items
+ */
+class Tests_Webfonts_WpWebfonts_DoItems extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts;
+	}
+
+	public function test_should_not_process_when_no_providers_registered() {
+		$this->setup_deps( array( 'enqueued' => 'font1' ) );
+
+		$done = $this->wp_webfonts->do_items();
+
+		$this->assertSame( array(), $done, 'WP_Web_Fonts::do_items() should return an empty array' );
+		$this->assertSame( array(), $this->wp_webfonts->to_do, 'WP_Web_Fonts::$to_do should be an empty array' );
+	}
+
+	/**
+	 * @dataProvider data_invalid_handles
+	 *
+	 * @param mixed $handles Handles to test.
+	 */
+	public function test_should_throw_notice_when_invalid_handles( $handles ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Handles must be a non-empty string or array of non-empty strings' );
+
+		$this->wp_webfonts->do_items( $handles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_handles() {
+		return array(
+			'null'                         => array( null ),
+			'empty array'                  => array( array() ),
+			'empty string'                 => array( '' ),
+			'array of empty strings'       => array( array( '', '' ) ),
+			'array of mixed falsey values' => array( array( '', false, null, array() ) ),
+		);
+	}
+
+	public function test_should_throw_notice_when_provider_class_not_found() {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Class "Provider_Does_Not_Exist" not found for "doesnotexist" web font provider' );
+
+		$setup = array(
+			'provider'         => array(
+				'doesnotexist' => array(
+					'id'    => 'doesnotexist',
+					'class' => 'Provider_Does_Not_Exist',
+				),
+			),
+			'provider_handles' => array( 'doesnotexist' => array( 'font1' ) ),
+			'registered'       => array(
+				'doesnotexist' => array(
+					'font1' => array(
+						'font1-300-normal' => array(
+							'provider'     => 'doesnotexist',
+							'font-weight'  => '300',
+							'font-style'   => 'normal',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+			),
+			'enqueued'         => array( 'font1', 'font1-300-normal' ),
+		);
+		$this->setup_deps( $setup );
+
+		$this->wp_webfonts->do_items();
+	}
+
+	/**
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_mocked_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_deps( $setup );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = $this->wp_webfonts->do_items();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test that registers providers and fonts and then enqueues before
+	 * testing the printing functionality.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_integrated_deps( $setup );
+
+		$this->expectOutputString( $expected_output, 'Printed @font-face styles should match' );
+		$actual_done = $this->wp_webfonts->do_items();
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Integration test to validate printing given handles. Rather than mocking internal functionality,
+	 * it registers providers and fonts but does not enqueue.
+	 *
+	 * @dataProvider data_print_enqueued
+	 *
+	 * @param array  $setup           Test set up information for provider, fonts, and enqueued.
+	 * @param array  $expected_done   Expected array of printed handles.
+	 * @param string $expected_output Expected printed output.
+	 */
+	public function test_should_print_handles_when_not_enqueued( $setup, $expected_done, $expected_output ) {
+		$this->setup_integrated_deps( $setup, false );
+		// Do not enqueue. Instead, pass the handles to WP_Web_Fonts::do_items().
+		$handles = $setup['enqueued'];
+		$this->assertEmpty( $this->wp_webfonts->queue, 'No fonts should be enqueued' );
+
+		$this->expectOutputString( $expected_output );
+		$actual_done = $this->wp_webfonts->do_items( $handles );
+		$this->assertSameSets( $expected_done, $actual_done, 'Printed handles should match' );
+	}
+
+	/**
+	 * Sets up the dependencies for the mocked test.
+	 *
+	 * @param array $setup Dependencies to set up.
+	 */
+	private function setup_deps( array $setup ) {
+		$setup = array_merge(
+			array(
+				'provider'         => array(),
+				'provider_handles' => array(),
+				'registered'       => array(),
+				'enqueued'         => array(),
+			),
+			$setup
+		);
+
+		if ( ! empty( $setup['provider'] ) ) {
+			foreach ( $setup['provider'] as $provider_id => $provider ) {
+				$this->setup_provider_property_mock( $this->wp_webfonts, $provider, $setup['provider_handles'][ $provider_id ] );
+			}
+		}
+
+		if ( ! empty( $setup['registered'] ) ) {
+			$this->setup_registration_mocks( $setup['registered'], $this->wp_webfonts );
+		}
+
+		if ( ! empty( $setup['enqueued'] ) ) {
+			$queue = $this->get_reflection_property( 'queue' );
+			$queue->setValue( $this->wp_webfonts, $setup['enqueued'] );
+		}
+	}
+
+	/**
+	 * Sets up the dependencies for integration test.
+	 *
+	 * @param array $setup   Dependencies to set up.
+	 * @param bool  $enqueue Whether to enqueue. Default true.
+	 */
+	private function setup_integrated_deps( array $setup, $enqueue = true ) {
+		foreach ( $setup['provider'] as $provider ) {
+			$this->wp_webfonts->register_provider( $provider['id'], $provider['class'] );
+		}
+		foreach ( $setup['registered'] as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $this->wp_webfonts );
+		}
+
+		if ( $enqueue ) {
+			$this->wp_webfonts->enqueue( $setup['enqueued'] );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/enqueue-test.php b/phpunit/webfonts/wpWebfonts/enqueue-test.php
new file mode 100644
index 00000000000000..dde2d92c6df377
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/enqueue-test.php
@@ -0,0 +1,53 @@
+<?php
+/**
+ * WP_Web_Fonts::enqueue() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::enqueue
+ */
+class Tests_Webfonts_WpWebfonts_Enqueue extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_enqueue
+	 * @dataProvider data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Handles to test.
+	 * @param array           $not_used Not used.
+	 * @param array           $expected Expected "queued_before_register" queue.
+	 */
+	public function test_should_prequeue_when_not_registered( $handles, $not_used, $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$wp_webfonts->enqueue( $handles );
+
+		$this->assertSame( $expected, $this->get_queued_before_register( $wp_webfonts ), 'Handles should be added to before registered queue' );
+		$this->assertEmpty( $wp_webfonts->queue, 'Handles should not be added to the enqueue queue when not registered' );
+	}
+
+	/**
+	 * Integration test for enqueuing (a) a font family and all of its variations or (b) specific variations.
+	 *
+	 * @dataProvider data_enqueue
+	 * @dataProviders data_enqueue_variations
+	 *
+	 * @param string|string[] $handles  Handles to test.
+	 * @param array           $expected Expected queue.
+	 */
+	public function test_should_enqueue_when_registered( $handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		foreach ( $this->get_data_registry() as $font_family => $variations ) {
+			$this->setup_register( $font_family, $variations, $wp_webfonts );
+		}
+
+		$wp_webfonts->enqueue( $handles );
+
+		$this->assertEmpty( $this->get_queued_before_register( $wp_webfonts ), '"queued_before_register" queue should be empty' );
+		$this->assertSame( $expected, $wp_webfonts->queue, 'Queue should contain the given handles' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getEnqueued-test.php b/phpunit/webfonts/wpWebfonts/getEnqueued-test.php
new file mode 100644
index 00000000000000..63ea923c085f54
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getEnqueued-test.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * WP_Web_Fonts::get_enqueued() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_enqueued
+ */
+class Tests_Webfonts_WpWebfonts_GetEnqueued extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_when_non_enqueued() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertEmpty( $wp_webfonts->get_enqueued() );
+	}
+
+	/**
+	 * Unit test for when font families are enqueued.
+	 *
+	 * @dataProvider data_enqueue
+	 *
+	 * @param string|string[] $not_used Not used.
+	 * @param array           $expected    Expected queue.
+	 */
+	public function test_should_return_queue_when_property_has_font_families( $not_used, array $expected ) {
+		$wp_webfonts        = new WP_Web_Fonts();
+		$wp_webfonts->queue = $expected;
+
+		$this->assertSame( $expected, $wp_webfonts->get_enqueued() );
+	}
+
+	/**
+	 * Full integration test that registers and enqueues the queue
+	 * is properly wired for "get_enqueued()".
+	 *
+	 * @dataProvider data_enqueue
+	 *
+	 * @param string|string[] $font_family Font family to test.
+	 * @param array           $expected    Expected queue.
+	 */
+	public function test_should_return_queue_when_font_families_registered_and_enqueued( $font_family, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register and enqueue.
+		foreach ( $this->get_data_registry() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+		$wp_webfonts->enqueue( $font_family );
+
+		$this->assertSame( $expected, $wp_webfonts->get_enqueued() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getProviders-test.php b/phpunit/webfonts/wpWebfonts/getProviders-test.php
new file mode 100644
index 00000000000000..7aa758582cb7c7
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getProviders-test.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * WP_Web_Fonts::get_providers() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_providers
+ */
+class Tests_Webfonts_WpWebfonts_GetProviders extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $providers_property;
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts = new WP_Web_Fonts();
+
+		$this->providers_property = new ReflectionProperty( WP_Web_Fonts::class, 'providers' );
+		$this->providers_property->setAccessible( true );
+	}
+
+	public function test_should_be_empty() {
+		$actual = $this->wp_webfonts->get_providers();
+		$this->assertIsArray( $actual, 'Should return an empty array' );
+		$this->assertEmpty( $actual, 'Should return an empty array when no providers are registered' );
+	}
+
+	/**
+	 * @dataProvider data_get_providers
+	 *
+	 * @param array $providers Array of providers to test.
+	 * @param array $expected  Expected results.
+	 */
+	public function test_get_providers( array $providers, array $expected ) {
+		$this->setup_providers( $providers );
+		$this->assertSame( $expected, $this->wp_webfonts->get_providers() );
+	}
+
+	/**
+	 * Sets up the given providers and stores them in the `WP_Web_Fonts::providers` property.
+	 *
+	 * @param array $providers Array of providers to set up.
+	 */
+	private function setup_providers( array $providers ) {
+		$data = array();
+
+		foreach ( $providers as $provider_id => $class ) {
+			$data[ $provider_id ] = array(
+				'class' => $class,
+				'fonts' => array(),
+			);
+		}
+
+		$this->providers_property->setValue( $this->wp_webfonts, $data );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/getRegistered-test.php b/phpunit/webfonts/wpWebfonts/getRegistered-test.php
new file mode 100644
index 00000000000000..76b0ab3a5d097c
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/getRegistered-test.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * WP_Web_Fonts::get_registered() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::get_registered
+ */
+class Tests_Webfonts_WpWebfonts_GetRegistered extends WP_Webfonts_TestCase {
+
+	public function test_should_return_empty_when_none_registered() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertEmpty( $wp_webfonts->get_registered() );
+	}
+
+	/**
+	 * Unit test for when font families are enqueued.
+	 *
+	 * @dataProvider data_get_registered
+	 *
+	 * @param array $inputs Font family(ies) and variations to register.
+	 */
+	public function test_should_return_queue_when_mocking_registered_property( array $inputs ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$mocks       = $this->setup_registration_mocks( $inputs, $wp_webfonts );
+		$expected    = array_keys( $mocks );
+
+		$this->assertSame( $expected, $wp_webfonts->get_registered() );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_registered() {
+		return array(
+			'no variations'                          => array(
+				'inputs' => array(
+					'lato' => array(),
+				),
+			),
+			'with 1 variation'                       => array(
+				'inputs' => array(
+					'Source Serif Pro' => array( 'variation-1' ),
+				),
+			),
+			'with 2 variations'                      => array(
+				'inputs' => array(
+					'my-cool-font' => array( 'cool-1', 'cool-2' ),
+				),
+			),
+			'when multiple font families registered' => array(
+				'inputs' => array(
+					'font-family-1' => array( 'variation-11', 'variation-12' ),
+					'font-family-2' => array( 'variation-21', 'variation-22' ),
+					'font-family-3' => array( 'variation-31', 'variation-32' ),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Full integration test that registers varying number of font families and variations
+	 * to validate if "get_registered()" internals is property wired to the registered queue.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family Not used.
+	 * @param array  $inputs      Font family(ies) and variations to register.
+	 * @param array  $expected    Expected results.
+	 */
+	public function test_should_return_queue_when_items_are_registered( $font_family, array $inputs, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		// Register before testing.
+		foreach ( $inputs as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $wp_webfonts );
+		}
+
+		$this->assertSame( $expected, $wp_webfonts->get_registered() );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/query-test.php b/phpunit/webfonts/wpWebfonts/query-test.php
new file mode 100644
index 00000000000000..75b44b2717f2b9
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/query-test.php
@@ -0,0 +1,151 @@
+<?php
+/**
+ * WP_Web_Fonts::query() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::query
+ */
+class Tests_Webfonts_WpWebfonts_Query extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->wp_webfonts = new WP_Web_Fonts();
+	}
+
+	/**
+	 * @dataProvider data_invalid_query
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_should_fail_when_handles_not_registered( $query_handle ) {
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'registered' ) );
+	}
+
+	/**
+	 * @dataProvider data_invalid_query
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_should_fail_when_handles_not_registered_or_enqueued( $query_handle ) {
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'queue' ) );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_registered_query_should_succeed_when_registered( $query_handle ) {
+		$this->setup_registry();
+
+		$actual = $this->wp_webfonts->query( $query_handle, 'registered' );
+		$this->assertInstanceOf( '_WP_Dependency', $actual, 'Query should return an instance of _WP_Dependency' );
+		$this->assertSame( $query_handle, $actual->handle, 'Query object handle should match the given handle to query' );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_enqueued_query_should_succeed_when_registered_and_enqueued( $query_handle ) {
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		$this->assertTrue( $this->wp_webfonts->query( $query_handle, 'enqueued' ) );
+	}
+
+	/**
+	 * @dataProvider data_valid_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_enqueued_query_should_fail_when_not_registered_but_enqueued( $query_handle ) {
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		$this->assertFalse( $this->wp_webfonts->query( $query_handle, 'enqueued' ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_query() {
+		return array(
+			'DM Sans' => array( 'DM Sans' ),
+			'roboto'  => array( 'roboto' ),
+			'my-font' => array( 'my-font' ),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_valid_query() {
+		return array(
+			'lato'             => array( 'lato' ),
+			'merriweather'     => array( 'merriweather' ),
+			'Source Serif Pro' => array( 'source-serif-pro' ),
+		);
+	}
+
+	public function test_done_query_should_fail_when_no_variations() {
+		$this->wp_webfonts->register_provider( 'local', WP_Webfonts_Provider_Local::class );
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( 'lato' );
+
+		$this->wp_webfonts->do_items( 'lato' );
+
+		$this->assertFalse( $this->wp_webfonts->query( 'lato', 'done' ) );
+	}
+
+	/**
+	 * @dataProvider data_done_query
+	 *
+	 * @param string $query_handle Handle to test.
+	 */
+	public function test_done_query_should_succeed_when_registered_and_enqueued( $query_handle ) {
+		$this->wp_webfonts->register_provider( 'local', WP_Webfonts_Provider_Local::class );
+		$this->setup_registry();
+		$this->wp_webfonts->enqueue( $query_handle );
+
+		// Process the web fonts while ignoring all the printed output.
+		$this->expectOutputRegex( '`.`' );
+		$this->wp_webfonts->do_items( $query_handle );
+		$this->getActualOutput();
+
+		$this->assertTrue( $this->wp_webfonts->query( $query_handle, 'done' ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_done_query() {
+		return array(
+			'merriweather'     => array( 'merriweather' ),
+			'Source Serif Pro' => array( 'source-serif-pro' ),
+		);
+	}
+
+	private function setup_registry() {
+		foreach ( $this->get_registered_local_fonts() as $handle => $variations ) {
+			$this->setup_register( $handle, $variations, $this->wp_webfonts );
+		}
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/registerProvider-test.php b/phpunit/webfonts/wpWebfonts/registerProvider-test.php
new file mode 100644
index 00000000000000..b73623259fcf48
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/registerProvider-test.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * WP_Web_Fonts::register_provider() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+require_once __DIR__ . '/../../fixtures/mock-provider.php';
+
+/**
+ * @group  webfonts
+ * @covers WP_Web_Fonts::register_provider
+ */
+class Tests_Webfonts_WpWebfonts_RegisterProvider extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_register_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 * @param array  $expected    Expected providers queue.
+	 */
+	public function test_should_register_provider( $provider_id, $class, $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->assertTrue( $wp_webfonts->register_provider( $provider_id, $class ), 'WP_Web_Fonts::register_provider() should return true' );
+		$this->assertSame( $expected, $wp_webfonts->get_providers(), 'Provider "' . $provider_id . '" should be registered in providers queue' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_register_providers() {
+		return array(
+			'mock'  => array(
+				'provider_id' => 'mock',
+				'class'       => Mock_Provider::class,
+				'expected'    => array(
+					'mock' => array(
+						'class' => Mock_Provider::class,
+						'fonts' => array(),
+					),
+				),
+			),
+			'local' => array(
+				'provider_id' => 'local',
+				'class'       => WP_Webfonts_Provider_Local::class,
+				'expected'    => array(
+					'local' => array(
+						'class' => WP_Webfonts_Provider_Local::class,
+						'fonts' => array(),
+					),
+				),
+			),
+		);
+	}
+
+	public function test_should_register_mutliple_providers() {
+		$wp_webfonts = new WP_Web_Fonts();
+		$providers   = $this->get_provider_definitions();
+		foreach ( $providers as $provider ) {
+			$this->assertTrue( $wp_webfonts->register_provider( $provider['id'], $provider['class'] ), 'WP_Web_Fonts::register_provider() should return true for provider ' . $provider['id'] );
+		}
+
+		$expected = array(
+			'mock'  => array(
+				'class' => $providers['mock']['class'],
+				'fonts' => array(),
+			),
+			'local' => array(
+				'class' => $providers['local']['class'],
+				'fonts' => array(),
+			),
+		);
+
+		$this->assertSame( $expected, $wp_webfonts->get_providers(), 'Both local and mock providers should be registered' );
+	}
+
+	/**
+	 * @dataProvider data_invalid_providers
+	 *
+	 * @param string $provider_id Provider ID.
+	 * @param string $class       Provider class name.
+	 */
+	public function test_should_not_register( $provider_id, $class ) {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$this->assertFalse( $wp_webfonts->register_provider( $provider_id, $class ), 'WP_Web_Fonts::register_provider() should return false' );
+		$this->assertArrayNotHasKey( $provider_id, $wp_webfonts->get_providers(), 'Both local and mock providers should be registered' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_invalid_providers() {
+		return array(
+			'provider_id is empty' => array(
+				'provider_id' => '',
+				'class'       => Mock_Provider::class,
+			),
+			'class is empty'       => array(
+				'provider_id' => 'local',
+				'class'       => '',
+			),
+			'class does not exist' => array(
+				'provider_id' => 'doesnotexist',
+				'class'       => 'Provider_Does_Not_Exist',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/remove-test.php b/phpunit/webfonts/wpWebfonts/remove-test.php
new file mode 100644
index 00000000000000..86cf9fa6ad1bac
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/remove-test.php
@@ -0,0 +1,118 @@
+<?php
+/**
+ * WP_Web_Fonts::remove() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers WP_Web_Fonts::remove
+ */
+class Tests_Webfonts_WpWebfonts_Remove extends WP_Webfonts_TestCase {
+
+	public function test_should_not_remove_when_none_registered() {
+		$wp_webfonts = new WP_Web_Fonts();
+
+		$wp_webfonts->remove( array( 'handle-1', 'handle2' ) );
+
+		$this->assertEmpty( $wp_webfonts->registered );
+	}
+
+	/**
+	 * @dataProvider data_remove_when_registered
+	 *
+	 * @param array $handles  Handles to remove.
+	 * @param array $expected Expected handles are running test.
+	 */
+	public function test_should_remove_when_registered( array $handles, array $expected ) {
+		$wp_webfonts             = new WP_Web_Fonts();
+		$wp_webfonts->registered = $this->generate_registered_queue();
+
+		$wp_webfonts->remove( $handles );
+
+		$this->assertSameSets( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing handles' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_remove_when_registered() {
+		$all = array(
+			'handle-1',
+			'handle-2',
+			'handle-3',
+			'handle-4',
+			'handle-5',
+			'handle-6',
+			'handle-7',
+			'handle-8',
+			'handle-9',
+			'handle-10',
+		);
+
+		return array(
+			'remove none'                 => array(
+				'handles'  => array(),
+				'expected' => $all,
+			),
+			'remove handle-5'             => array(
+				'handles'  => array( 'handle-5' ),
+				'expected' => array(
+					'handle-1',
+					'handle-2',
+					'handle-3',
+					'handle-4',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+					'handle-9',
+					'handle-10',
+				),
+			),
+			'remove 2 from start and end' => array(
+				'handles'  => array( 'handle-1', 'handle-2', 'handle-9', 'handle-10' ),
+				'expected' => array(
+					'handle-3',
+					'handle-4',
+					'handle-5',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+				),
+			),
+			'remove all'                  => array(
+				'handles'  => $all,
+				'expected' => array(),
+			),
+			'remove only registered'      => array(
+				'handles'  => array( 'handle-1', 'handle-10', 'handle-abc', 'handle-5' ),
+				'expected' => array(
+					'handle-2',
+					'handle-3',
+					'handle-4',
+					'handle-6',
+					'handle-7',
+					'handle-8',
+					'handle-9',
+				),
+			),
+		);
+	}
+
+	private function generate_registered_queue() {
+		$queue = array();
+		for ( $num = 1; $num <= 10; $num++ ) {
+			$handle           = "handle-{$num}";
+			$queue[ $handle ] = $num;
+		}
+
+		return $queue;
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php b/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
new file mode 100644
index 00000000000000..959744e555202f
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/removeFontFamily-test.php
@@ -0,0 +1,89 @@
+<?php
+/**
+ * WP_Web_Fonts::remove_font_family() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @group remove_webfonts
+ * @covers WP_Web_Fonts::remove_font_family
+ */
+class Tests_Webfonts_WpWebfonts_RemoveFontFamily extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_dequeue_when_mocks_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		$this->setup_registration_mocks( $inputs, $wp_webfonts );
+		// Test the before state, just to make sure.
+		$this->assertArrayHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should contain the font family before remove' );
+		$this->assertSame( $registered_handles, array_keys( $wp_webfonts->registered ), 'Font family and variations should be registered before remove' );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+
+	/**
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Not used.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_bail_out_when_not_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		unset( $inputs[ $font_family ] );
+		$this->setup_registration_mocks( $inputs, $wp_webfonts );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+
+	/**
+	 * Integration test for removing a font family and all of its variation when font family is registered.
+	 *
+	 * @dataProvider data_one_to_many_font_families_and_zero_to_many_variations
+	 *
+	 * @param string $font_family        Font family to test.
+	 * @param array  $inputs             Font family(ies) and variations to pre-register.
+	 * @param array  $registered_handles Expected handles after registering.
+	 * @param array  $expected           Array of expected handles.
+	 */
+	public function test_should_deregister_when_registered( $font_family, array $inputs, array $registered_handles, array $expected ) {
+		$wp_webfonts = new WP_Web_Fonts();
+		// Register all font families and their variations.
+		foreach ( $inputs as $input_font_family => $variations ) {
+			$handle = $wp_webfonts->add_font_family( $input_font_family );
+			foreach ( $variations as $variation_handle => $variation ) {
+				if ( ! is_string( $variation_handle ) ) {
+					$variation_handle = '';
+				}
+				$wp_webfonts->add_variation( $handle, $variation, $variation_handle );
+			}
+		}
+		// Test the before state, just to make sure.
+		$this->assertArrayHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should contain the font family before remove' );
+		$this->assertSame( $registered_handles, array_keys( $wp_webfonts->registered ), 'Font family and variations should be registered before remove' );
+
+		$wp_webfonts->remove_font_family( $font_family );
+
+		$this->assertArrayNotHasKey( $font_family, $wp_webfonts->registered, 'Registered queue should not contain the font family' );
+		$this->assertSame( $expected, array_keys( $wp_webfonts->registered ), 'Registered queue should match after removing font family' );
+	}
+}
diff --git a/phpunit/webfonts/wpWebfonts/removeVariation-test.php b/phpunit/webfonts/wpWebfonts/removeVariation-test.php
new file mode 100644
index 00000000000000..dd3b21a9573eaa
--- /dev/null
+++ b/phpunit/webfonts/wpWebfonts/removeVariation-test.php
@@ -0,0 +1,278 @@
+<?php
+/**
+ * WP_Web_Fonts::remove_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group  webfonts
+ * @group  remove_webfonts
+ * @covers WP_Web_Fonts::remove_variation
+ */
+class Tests_Webfonts_WpWebfonts_RemoveVariation extends WP_Webfonts_TestCase {
+	private $wp_webfonts;
+	private $fonts_to_register = array();
+
+	public function set_up() {
+		parent::set_up();
+		$this->wp_webfonts       = new WP_Web_Fonts();
+		$this->fonts_to_register = $this->get_registered_local_fonts();
+	}
+
+	/**
+	 * Sets up the unit test by mocking the WP_Dependencies object using stdClass and
+	 * registering each font family directly to the WP_Web_Fonts::$registered property
+	 * and its variations to the mocked $deps property.
+	 */
+	private function setup_unit_test() {
+		$this->setup_registration_mocks( $this->fonts_to_register, $this->wp_webfonts );
+	}
+
+	/**
+	 * Sets up the integration test by properly registering each font family and its variations
+	 * by using the WP_Web_Fonts::add() and WP_Web_Fonts::add_variation() methods.
+	 */
+	private function setup_integration_test() {
+		foreach ( $this->fonts_to_register as $font_family_handle => $variations ) {
+			$this->setup_register( $font_family_handle, $variations, $this->wp_webfonts );
+		}
+	}
+
+	/**
+	 * Testing the test setup to ensure it works.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_mocked_setup( $font_family_handle, $variation_handle ) {
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be in the registered queue before remval' );
+		$this->assertContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should be in its font family deps before removal' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_should_do_nothing_when_variation_and_font_family_not_registered
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_unit_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_unit_test();
+		$registered_queue = $this->wp_webfonts->registered;
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSame( $registered_queue, $this->wp_webfonts->registered, 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_should_do_nothing_when_variation_and_font_family_not_registered
+	 *
+	 * @param string $font_family        Font family name.
+	 * @param string $font_family_handle Font family handle.
+	 * @param string $variation_handle   Variation handle to remove.
+	 */
+	public function test_should_do_nothing_when_variation_and_font_family_not_registered( $font_family, $font_family_handle, $variation_handle ) {
+		// Set up the test.
+		unset( $this->fonts_to_register[ $font_family ] );
+		$this->setup_integration_test();
+		$registered_queue = $this->wp_webfonts->get_registered();
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $font_family_handle, $this->wp_webfonts->registered, 'Font family should not be registered' );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertSameSets( $registered_queue, $this->wp_webfonts->get_registered(), 'Registered queue should not have changed' );
+	}
+
+	/**
+	 * Data provider for testing removal of variations.
+	 *
+	 * @return array
+	 */
+	public function data_should_do_nothing_when_variation_and_font_family_not_registered() {
+		return array(
+			'Font with 1 variation'         => array(
+				'font_family'        => 'merriweather',
+				'font_family_handle' => 'merriweather',
+				'variation_handle'   => 'merriweather-200-900-normal',
+			),
+			'Font with multiple variations' => array(
+				'font_family'        => 'Source Serif Pro',
+				'font_family_handle' => 'source-serif-pro',
+				'variation_handle'   => 'Source Serif Pro-300-normal',
+			),
+		);
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_only_remove_from_font_family_deps_when_variation_not_in_queue( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_variation_from_registered( $variation_handle );
+
+		// Run the tests.
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variant should not be registered' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_registered_queue_though_font_family_not_registered( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+		$this->setup_remove_from_font_family_deps( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should not be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Unit test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_unit_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_unit_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Integration test.
+	 *
+	 * @dataProvider data_remove_variations
+	 *
+	 * @param string $font_family_handle Font family for the variation.
+	 * @param string $variation_handle   Variation handle to remove.
+	 * @param array  $expected           Expected results.
+	 */
+	public function test_should_remove_variation_from_queue_and_font_family_deps( $font_family_handle, $variation_handle, $expected ) {
+		// Set up the test.
+		$this->setup_integration_test();
+
+		$this->assertArrayHasKey( $variation_handle, array_flip( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Variation should be in its font family deps before removal' );
+
+		$this->wp_webfonts->remove_variation( $font_family_handle, $variation_handle );
+
+		$this->assertArrayNotHasKey( $variation_handle, $this->wp_webfonts->registered, 'Variation should be not be in registered queue' );
+		$this->assertNotContains( $variation_handle, $this->wp_webfonts->registered[ $font_family_handle ]->deps, 'Variation should not be its font family deps' );
+		$this->assertSameSets( $expected['font_family_deps'], array_values( $this->wp_webfonts->registered[ $font_family_handle ]->deps ), 'Only the tested variation handle should be removed from font family deps' );
+	}
+
+	/**
+	 * Remove the variation handle from the font family's deps.
+	 *
+	 * @param string $font_family_handle Font family.
+	 * @param string $variation_handle   The variation handle to remove.
+	 */
+	private function setup_remove_from_font_family_deps( $font_family_handle, $variation_handle ) {
+		foreach ( $this->wp_webfonts->registered[ $font_family_handle ]->deps as $index => $vhandle ) {
+			if ( $variation_handle !== $vhandle ) {
+				continue;
+			}
+			unset( $this->wp_webfonts->registered[ $font_family_handle ]->deps[ $index ] );
+			break;
+		}
+	}
+
+	/**
+	 * Removes the variation from the WP_Web_Fonts::$registered queue.
+	 *
+	 * @param string $variation_handle The variation handle to remove.
+	 */
+	private function setup_remove_variation_from_registered( $variation_handle ) {
+		unset( $this->wp_webfonts->registered[ $variation_handle ] );
+	}
+}
diff --git a/phpunit/class-wp-webfonts-local-provider-test.php b/phpunit/webfonts/wpWebfontsProviderLocal-test.php
similarity index 78%
rename from phpunit/class-wp-webfonts-local-provider-test.php
rename to phpunit/webfonts/wpWebfontsProviderLocal-test.php
index 43ef4a84951c84..08f9f18c3cd6a2 100644
--- a/phpunit/class-wp-webfonts-local-provider-test.php
+++ b/phpunit/webfonts/wpWebfontsProviderLocal-test.php
@@ -1,10 +1,15 @@
 <?php
+/**
+ * WP_WebfontsLocal_Provider tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
 
 /**
- * @group  webfonts
- * @covers WP_WebfontsLocal_Provider
+ * @group webfonts
  */
-class WP_Webfonts_Provider_Local_Test extends WP_UnitTestCase {
+class Tests_Webfonts_WpWebfontsProviderLocal extends WP_UnitTestCase {
 	private $provider;
 	private $theme_root;
 	private $orig_theme_dir;
@@ -17,27 +22,6 @@ public function set_up() {
 		$this->set_up_theme();
 	}
 
-	/**
-	 * Local `src` paths to need to be relative to the theme. This method sets up the
-	 * `wp-content/themes/` directory to ensure consistency when running tests.
-	 */
-	private function set_up_theme() {
-		$this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
-		$this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
-		$GLOBALS['wp_theme_directories'] = array( $this->theme_root );
-
-		$theme_root_callback = function () {
-			return $this->theme_root;
-		};
-		add_filter( 'theme_root', $theme_root_callback );
-		add_filter( 'stylesheet_root', $theme_root_callback );
-		add_filter( 'template_root', $theme_root_callback );
-
-		// Clear caches.
-		wp_clean_themes_cache();
-		unset( $GLOBALS['wp_themes'] );
-	}
-
 	public function tear_down() {
 		// Restore the original theme directory setup.
 		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
@@ -79,7 +63,7 @@ public function test_set_webfonts() {
 	/**
 	 * @covers WP_Webfonts_Provider_Local::get_css
 	 *
-	 * @dataProvider data_get_css
+	 * @dataProvider data_get_css_print_styles
 	 *
 	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
 	 * @param string $expected Expected CSS.
@@ -88,7 +72,24 @@ public function test_get_css( array $webfonts, $expected ) {
 		$property = $this->get_webfonts_property();
 		$property->setValue( $this->provider, $webfonts );
 
-		$this->assertSame( $expected, $this->provider->get_css() );
+		$this->assertSame( $expected['font-face-css'], $this->provider->get_css() );
+	}
+
+	/**
+	 * @covers WP_Webfonts_Provider_Local::print_styles
+	 *
+	 * @dataProvider data_get_css_print_styles
+	 *
+	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
+	 * @param string $expected Expected CSS.
+	 */
+	public function test_print_styles( array $webfonts, $expected ) {
+		$property = $this->get_webfonts_property();
+		$property->setValue( $this->provider, $webfonts );
+
+		$expected_output = sprintf( $expected['style-element'], $expected['font-face-css'] );
+		$this->expectOutputString( $expected_output );
+		$this->provider->print_styles();
 	}
 
 	/**
@@ -96,7 +97,7 @@ public function test_get_css( array $webfonts, $expected ) {
 	 *
 	 * @return array
 	 */
-	public function data_get_css() {
+	public function data_get_css_print_styles() {
 		return array(
 			'truetype format' => array(
 				'webfonts' => array(
@@ -108,10 +109,13 @@ public function data_get_css() {
 						'src'         => 'http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf',
 					),
 				),
-				'expected' => <<<CSS
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;src:local("Open Sans"), url('http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');}
 CSS
-			,
+					,
+				),
 			),
 			'woff2 format'    => array(
 				'webfonts' => array(
@@ -132,14 +136,39 @@ public function data_get_css() {
 						'src'          => 'http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
 					),
 				),
-				'expected' => <<<CSS
+				'expected' => array(
+					'style-element' => "<style id='wp-webfonts-local' type='text/css'>\n%s\n</style>\n",
+					'font-face-css' => <<<CSS
 @font-face{font-family:"Source Serif Pro";font-style:normal;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');}@font-face{font-family:"Source Serif Pro";font-style:italic;font-weight:200 900;font-stretch:normal;src:local("Source Serif Pro"), url('http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');}
 CSS
-			,
+
+					,
+				),
 			),
 		);
 	}
 
+	/**
+	 * Local `src` paths to need to be relative to the theme. This method sets up the
+	 * `wp-content/themes/` directory to ensure consistency when running tests.
+	 */
+	private function set_up_theme() {
+		$this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
+		$this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
+		$GLOBALS['wp_theme_directories'] = array( $this->theme_root );
+
+		$theme_root_callback = function () {
+			return $this->theme_root;
+		};
+		add_filter( 'theme_root', $theme_root_callback );
+		add_filter( 'stylesheet_root', $theme_root_callback );
+		add_filter( 'template_root', $theme_root_callback );
+
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
 	private function get_webfonts_property() {
 		$property = new ReflectionProperty( $this->provider, 'webfonts' );
 		$property->setAccessible( true );
diff --git a/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php b/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
new file mode 100644
index 00000000000000..d258f1e5c435df
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/convertFontFamilyIntoHandle-test.php
@@ -0,0 +1,84 @@
+<?php
+/**
+ * WP_Webfonts_Utils::convert_font_family_into_handle() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::convert_font_family_into_handle
+ */
+class Tests_Webfonts_WpWebfontsUtils_ConvertFontFamilyIntoHandle extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_input
+	 *
+	 * @param mixed  $font_family Font family to test.
+	 * @param string $expected    Expected results.
+	 */
+	public function test_should_convert_with_valid_input( $font_family, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::convert_font_family_into_handle( $font_family ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_input() {
+		return array(
+			'font family single word name'               => array(
+				'font_family' => 'Merriweather',
+				'expected'    => 'merriweather',
+			),
+			'font family multiword name'                 => array(
+				'font_family' => 'Source Sans Pro',
+				'expected'    => 'source-sans-pro',
+			),
+			'font family handle delimited by hyphens'    => array(
+				'font_family' => 'source-serif-pro',
+				'expected'    => 'source-serif-pro',
+			),
+			'font family handle delimited by underscore' => array(
+				'font_family' => 'source_serif_pro',
+				'expected'    => 'source_serif_pro',
+			),
+			'font family handle delimited by hyphens and underscore' => array(
+				'font_family' => 'my-custom_font_family',
+				'expected'    => 'my-custom_font_family',
+			),
+			'font family handle delimited mixture'       => array(
+				'font_family' => 'My custom_font-family',
+				'expected'    => 'my-custom_font-family',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @covers WP_Webfonts_Utils::convert_font_family_into_handle
+	 *
+	 * @param mixed $invalid_input Invalid input.
+	 */
+	public function test_should_not_convert_with_invalid_input( $invalid_input ) {
+		$this->assertNull( WP_Webfonts_Utils::convert_font_family_into_handle( $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'empty string'                    => array( '' ),
+			'integer'                         => array( 10 ),
+			'font family wrapped in an array' => array( array( 'source-serif-pro' ) ),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php b/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
new file mode 100644
index 00000000000000..9e2a3462ed7a82
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/convertVariationIntoHandle-test.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * WP_Webfonts_Utils::convert_variation_into_handle() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::convert_variation_into_handle
+ */
+class Tests_Webfonts_WpWebfontsUtils_ConvertVariationIntoHandle extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_input
+	 *
+	 * @param string $font_family Font family to test.
+	 * @param array  $variation   Variation to test.
+	 * @param string $expected    Expected results.
+	 */
+	public function test_should_convert_with_valid_inputs( $font_family, array $variation, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::convert_variation_into_handle( $font_family, $variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_input() {
+		return array(
+			'with only font-weight'                  => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => '400',
+				),
+				'expected'    => 'merriweather-400',
+			),
+			'with no font-style'                     => array(
+				'font_family' => 'source-sans-pro',
+				'variation'   => array(
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected'    => 'source-sans-pro-200-900',
+			),
+			'with font family name and full variant' => array(
+				'font_family' => 'source-sans-pro',
+				'variation'   => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'    => 'source-sans-pro-200-900-normal',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @param string $font_family   Font family to test.
+	 * @param array  $invalid_input Variation to test.
+	 */
+	public function tests_should_convert_with_invalid_input( $font_family, $invalid_input ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( 'Variant handle could not be determined as font-weight and/or font-style are require' );
+
+		$this->assertNull( WP_Webfonts_Utils::convert_variation_into_handle( $font_family, $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'with no font-weight or font-style' => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'provider'     => 'local',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+			),
+			'with non-string font-weight'       => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => 400,
+				),
+			),
+			'with non-string font-style'        => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-style' => 0,
+				),
+			),
+			'with empty string font-weight'     => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-weight' => '',
+				),
+			),
+			'with empty string font-style'      => array(
+				'font_family' => 'merriweather',
+				'variation'   => array(
+					'font-style' => '',
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php b/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
new file mode 100644
index 00000000000000..f370e1d043222c
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/getFontFamilyFromVariation-test.php
@@ -0,0 +1,134 @@
+<?php
+/**
+ * WP_Webfonts_Utils::get_font_family_from_variation() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::get_font_family_from_variation
+ */
+class Tests_Webfonts_WpWebfontsUtils_GetFontFamilyFromVariation extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_with_valid_variation
+	 *
+	 * @param array  $variation Variation to test.
+	 * @param string $expected  Expected results.
+	 */
+	public function test_with_valid_variation( array $variation, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts_Utils::get_font_family_from_variation( $variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_valid_variation() {
+		return array(
+			'keyed by font-family'                   => array(
+				'variation' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'  => 'Source Serif Pro',
+			),
+			'keyed by fontFamily and as a handle'    => array(
+				'variation' => array(
+					'fontFamily'  => 'source-sans-pro',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected'  => 'source-sans-pro',
+			),
+			'with font family name and full variant' => array(
+				'variation' => array(
+					'provider'     => 'local',
+					'font-family'  => 'Merriweather',
+					'font-style'   => 'normal',
+					'font-weight'  => '400 600',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected'  => 'Merriweather',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_with_invalid_input
+	 *
+	 * @param array  $invalid_variation Variation to test.
+	 * @param string $expected_message  Expected notice message.
+	 */
+	public function test_with_invalid_input( array $invalid_variation, $expected_message ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$this->assertNull( WP_Webfonts_Utils::get_font_family_from_variation( $invalid_variation ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_with_invalid_input() {
+		return array(
+			'keyed with underscore'       => array(
+				'variation'        => array(
+					'provider'     => 'local',
+					'font_family'  => 'Source Serif Pro',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'keyed with space'            => array(
+				'variation'        => array(
+					'font family' => 'Source Sans Pro',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'fontFamily => empty string'  => array(
+				'variation'        => array(
+					'fontFamily'  => '',
+					'font-weight' => '200 900',
+					'src'         => 'https://example.com/assets/fonts/source-sans-pro/source-sans-pro.ttf.woff2',
+					'provider'    => 'local',
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+			'font-family => empty string' => array(
+				'variation'        => array(
+					'provider'     => 'local',
+					'font-family'  => '',
+					'font-style'   => 'normal',
+					'font-weight'  => '200 900',
+					'font-stretch' => 'normal',
+					'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					'font-display' => 'fallback',
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+		);
+	}
+}
diff --git a/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php b/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php
new file mode 100644
index 00000000000000..c5b2a1608269c8
--- /dev/null
+++ b/phpunit/webfonts/wpWebfontsUtils/isDefined-test.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * WP_Webfonts_Utils::is_defined() tests.
+ *
+ * @package    WordPress
+ * @subpackage Webfonts
+ */
+
+require_once __DIR__ . '/../wp-webfonts-testcase.php';
+
+/**
+ * @group webfonts
+ * @covers WP_Webfonts_Utils::is_defined
+ */
+class Tests_Webfonts_WpWebfontsUtils_IsDefined extends WP_Webfonts_TestCase {
+
+	/**
+	 * @dataProvider data_when_defined
+	 *
+	 * @param mixed $input Input to test.
+	 */
+	public function test_should_return_true_when_defined( $input ) {
+		$this->assertTrue( WP_Webfonts_Utils::is_defined( $input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_when_defined() {
+		return array(
+			'name: non empty string'   => array( 'Some Font Family' ),
+			'handle: non empty string' => array( 'some-font-family' ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_when_not_defined
+	 *
+	 * @param mixed $invalid_input Input to test.
+	 */
+	public function test_should_return_false_when_not_defined( $invalid_input ) {
+		$this->assertFalse( WP_Webfonts_Utils::is_defined( $invalid_input ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_when_not_defined() {
+		return array(
+			'empty string'               => array( '' ),
+			'string 0'                   => array( '0' ),
+			'integer'                    => array( 10 ),
+			'name wrapped in an array'   => array( array( 'Some Font Family' ) ),
+			'handle wrapped in an array' => array( array( 'some-font-family' ) ),
+		);
+	}
+}
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 3a3726010d0b67..ae461ba4cabf3f 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -183,7 +183,7 @@
 						},
 						"meta": {
 							"type": "string",
-							"description": "Although attributes may be obtained from a post’s meta, meta attribute sources are considered deprecated; EntityProvider and related hook APIs should be used instead, as shown in the Create Meta Block how-to here:\n\nhttps://developer.wordpress.org/block-editor/how-to-guides/metabox/meta-block-3-add/"
+							"description": "Although attributes may be obtained from a post’s meta, meta attribute sources are considered deprecated; EntityProvider and related hook APIs should be used instead, as shown in the Create Meta Block how-to here:\n\nhttps://developer.wordpress.org/block-editor/how-to-guides/metabox/#step-2-add-meta-block"
 						},
 						"default": {
 							"description": "A block attribute can contain a default value, which will be used if the type and source do not match anything within the block content.\n\nThe value is provided by the default field, and the value should match the expected format of the attribute."
@@ -401,7 +401,7 @@
 		},
 		"styles": {
 			"type": "array",
-			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#block-styles",
+			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles",
 			"items": {
 				"type": "object",
 				"properties": {
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 1a8aa67b0967b1..f4934ef20394b0 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -7,6 +7,15 @@
 			"createTheme": "https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/",
 			"reference": "https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/"
 		},
+		"refComplete": {
+			"type": "object",
+			"properties": {
+				"ref": {
+					"description": "A reference to another property value. e.g. `styles.color.text`",
+					"type": "string"
+				}
+			}
+		},
 		"settingsPropertiesAppearanceTools": {
 			"type": "object",
 			"properties": {
@@ -58,6 +67,40 @@
 				}
 			}
 		},
+		"settingsPropertiesShadow": {
+			"type": "object",
+			"properties": {
+				"shadow": {
+					"description": "Settings related to shadows.",
+					"type": "object",
+					"properties": {
+						"palette": {
+							"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",
+							"type": "array",
+							"items": {
+								"type": "object",
+								"properties": {
+									"name": {
+										"description": "Name of the shadow preset, translatable.",
+										"type": "string"
+									},
+									"slug": {
+										"description": "Kebab-case unique identifier for the shadow preset.",
+										"type": "string"
+									},
+									"shadow": {
+										"description": "CSS box-shadow value",
+										"type": "string"
+									}
+								},
+								"required": [ "name", "slug", "shadow" ],
+								"additionalProperties": false
+							}
+						}
+					}
+				}
+			}
+		},
 		"settingsPropertiesColor": {
 			"type": "object",
 			"properties": {
@@ -353,8 +396,23 @@
 							"default": true
 						},
 						"fluid": {
-							"description": "Opts into fluid typography.",
-							"type": "boolean"
+							"description": "Enables fluid typography and allows users to set global fluid typography parameters.",
+							"oneOf": [
+								{
+									"type": "object",
+									"properties": {
+										"minFontSize": {
+											"description": "Allow users to set a global minimum font size boundary in px, rem or em. Custom font sizes below this value will not be clamped, and all calculated minimum font sizes will be, a at minimum, this value.",
+											"type": "string"
+										}
+									},
+									"additionalProperties": false
+								},
+								{
+									"type": "boolean"
+								}
+							],
+							"default": false
 						},
 						"letterSpacing": {
 							"description": "Allow users to set custom letter spacing.",
@@ -562,6 +620,7 @@
 				{ "$ref": "#/definitions/settingsPropertiesAppearanceTools" },
 				{ "$ref": "#/definitions/settingsPropertiesBorder" },
 				{ "$ref": "#/definitions/settingsPropertiesColor" },
+				{ "$ref": "#/definitions/settingsPropertiesShadow" },
 				{ "$ref": "#/definitions/settingsPropertiesLayout" },
 				{ "$ref": "#/definitions/settingsPropertiesSpacing" },
 				{ "$ref": "#/definitions/settingsPropertiesTypography" },
@@ -578,6 +637,7 @@
 					"properties": {
 						"appearanceTools": {},
 						"border": {},
+						"shadow": {},
 						"color": {},
 						"layout": {},
 						"spacing": {},
@@ -903,7 +963,14 @@
 					"properties": {
 						"color": {
 							"description": "Sets the `border-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"radius": {
 							"description": "Sets the `border-radius` CSS property.",
@@ -911,24 +978,55 @@
 								{
 									"type": "string"
 								},
+								{
+									"$ref": "#/definitions/refComplete"
+								},
 								{
 									"type": "object",
 									"properties": {
 										"topLeft": {
 											"description": "Sets the `border-top-left-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"topRight": {
 											"description": "Sets the `border-top-right-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"bottomLeft": {
 											"description": "Sets the `border-bottom-left-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										},
 										"bottomRight": {
 											"description": "Sets the `border-bottom-right-radius` CSS property.",
-											"type": "string"
+											"oneOf": [
+												{
+													"type": "string"
+												},
+												{
+													"$ref": "#/definitions/refComplete"
+												}
+											]
 										}
 									}
 								}
@@ -936,26 +1034,61 @@
 						},
 						"style": {
 							"description": "Sets the `border-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"width": {
 							"description": "Sets the `border-width` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"top": {
 							"type": "object",
 							"properties": {
 								"color": {
 									"description": "Sets the `border-top-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-top-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-top-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -965,15 +1098,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-right-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-right-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-right-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -983,15 +1137,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-bottom-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-bottom-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-bottom-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1001,15 +1176,36 @@
 							"properties": {
 								"color": {
 									"description": "Sets the `border-left-color` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"style": {
 									"description": "Sets the `border-left-style` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"width": {
 									"description": "Sets the `border-left-width` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1023,15 +1219,36 @@
 					"properties": {
 						"background": {
 							"description": "Sets the `background-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"gradient": {
 							"description": "Sets the `background` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"text": {
 							"description": "Sets the `color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
@@ -1042,7 +1259,14 @@
 					"properties": {
 						"blockGap": {
 							"description": "Sets the `--wp--style--block-gap` CSS custom property when settings.spacing.blockGap is true.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"margin": {
 							"description": "Margin styles.",
@@ -1050,19 +1274,47 @@
 							"properties": {
 								"top": {
 									"description": "Sets the `margin-top` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"right": {
 									"description": "Sets the `margin-right` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"bottom": {
 									"description": "Sets the `margin-bottom` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"left": {
 									"description": "Sets the `margin-left` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1073,19 +1325,47 @@
 							"properties": {
 								"top": {
 									"description": "Sets the `padding-top` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"right": {
 									"description": "Sets the `padding-right` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"bottom": {
 									"description": "Sets the `padding-bottom` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								},
 								"left": {
 									"description": "Sets the `padding-left` CSS property.",
-									"type": "string"
+									"oneOf": [
+										{
+											"type": "string"
+										},
+										{
+											"$ref": "#/definitions/refComplete"
+										}
+									]
 								}
 							},
 							"additionalProperties": false
@@ -1099,35 +1379,91 @@
 					"properties": {
 						"fontFamily": {
 							"description": "Sets the `font-family` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontSize": {
 							"description": "Sets the `font-size` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontStyle": {
 							"description": "Sets the `font-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"fontWeight": {
 							"description": "Sets the `font-weight` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"letterSpacing": {
 							"description": "Sets the `letter-spacing` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"lineHeight": {
 							"description": "Sets the `line-height` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"textDecoration": {
 							"description": "Sets the `text-decoration` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"textTransform": {
 							"description": "Sets the `text-transform` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
@@ -1138,14 +1474,28 @@
 					"properties": {
 						"duotone": {
 							"description": "Sets the duotone filter.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
 				},
 				"shadow": {
 					"description": "Box shadow styles.",
-					"type": "string"
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"$ref": "#/definitions/refComplete"
+						}
+					]
 				},
 				"outline": {
 					"description": "Outline styles.",
@@ -1153,19 +1503,47 @@
 					"properties": {
 						"color": {
 							"description": "Sets the `outline-color` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"offset": {
 							"description": "Sets the `outline-offset` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"style": {
 							"description": "Sets the `outline-style` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						},
 						"width": {
 							"description": "Sets the `outline-width` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{
+									"type": "string"
+								},
+								{
+									"$ref": "#/definitions/refComplete"
+								}
+							]
 						}
 					},
 					"additionalProperties": false
@@ -1610,6 +1988,7 @@
 						"spacing": {},
 						"typography": {},
 						"border": {},
+						"shadow": {},
 						"custom": {},
 						"blocks": {
 							"description": "Settings defined on a per-block basis.",
diff --git a/storybook/webpack/source-link-loader.js b/storybook/webpack/source-link-loader.js
index d9501aa737dad3..702e2882916f2d 100644
--- a/storybook/webpack/source-link-loader.js
+++ b/storybook/webpack/source-link-loader.js
@@ -46,7 +46,8 @@ function alterParameters( properties, componentPath ) {
 
 	if ( ! parameters ) {
 		parameters = babel.types.objectProperty(
-			babel.types.identifier( 'parameters' )
+			babel.types.identifier( 'parameters' ),
+			babel.types.objectExpression( [] )
 		);
 		properties.push( parameters );
 	}
diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
index 581027f53a09ec..3232b8ff95cd8f 100644
--- a/test/e2e/specs/editor/blocks/comments.spec.js
+++ b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
 
 /**
  * @typedef {import('@playwright/test').Page} Page
@@ -12,6 +16,9 @@ test.use( {
 	commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => {
 		await use( new CommentsBlockUtils( { page, admin, requestUtils } ) );
 	},
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
 } );
 
 test.describe( 'Comments', () => {
@@ -45,14 +52,15 @@ test.describe( 'Comments', () => {
 	test( 'We show no results message if there are no comments', async ( {
 		admin,
 		editor,
-		page,
 		requestUtils,
 	} ) => {
 		await requestUtils.deleteAllComments();
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/comments' } );
 		await expect(
-			page.locator( 'role=document[name="Block: Comment Template"i]' )
+			editor.canvas.locator(
+				'role=document[name="Block: Comment Template"i]'
+			)
 		).toContainText( 'No results found.' );
 	} );
 
@@ -145,7 +153,6 @@ test.describe( 'Comments', () => {
 	test( 'A button allows the block to switch from legacy mode to editable mode', async ( {
 		admin,
 		editor,
-		page,
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlock( {
@@ -153,7 +160,9 @@ test.describe( 'Comments', () => {
 			attributes: { legacy: true, textColor: 'vivid-purple' },
 		} );
 
-		const block = page.locator( 'role=document[name="Block: Comments"i]' );
+		const block = editor.canvas.locator(
+			'role=document[name="Block: Comments"i]'
+		);
 		const warning = block.locator( '.block-editor-warning' );
 		const placeholder = block.locator(
 			'.wp-block-comments__legacy-placeholder'
@@ -163,7 +172,9 @@ test.describe( 'Comments', () => {
 		await expect( warning ).toBeVisible();
 		await expect( placeholder ).toBeVisible();
 
-		await page.click( 'role=button[name="Switch to editable mode"i]' );
+		await editor.canvas.click(
+			'role=button[name="Switch to editable mode"i]'
+		);
 
 		const commentTemplate = block.locator(
 			'role=document[name="Block: Comment Template"i]'
@@ -301,8 +312,12 @@ test.describe( 'Post Comments', () => {
 		await commentsBlockUtils.hideWelcomeGuide();
 
 		// Check that the Post Comments block has been replaced with Comments.
-		await expect( page.locator( '.wp-block-post-comments' ) ).toBeHidden();
-		await expect( page.locator( '.wp-block-comments' ) ).toBeVisible();
+		await expect(
+			editor.canvas.locator( '.wp-block-post-comments' )
+		).toBeHidden();
+		await expect(
+			editor.canvas.locator( '.wp-block-comments' )
+		).toBeVisible();
 
 		// Check the block definition has changed.
 		const content = await editor.getEditedPostContent();
diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index 19c386cce457d9..ecade19a1aaa40 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -29,9 +29,7 @@ test.describe( 'Paragraph', () => {
 		await page.keyboard.type( '1' );
 
 		const firstBlockTagName = await page.evaluate( () => {
-			return document.querySelector(
-				'.block-editor-block-list__layout .wp-block'
-			).tagName;
+			return document.querySelector( '[data-block]' ).tagName;
 		} );
 
 		// The outer element should be a paragraph. Blocks should never have any
@@ -569,6 +567,10 @@ class DraggingUtils {
 		// Check that both x and y axis of the dropzone
 		// have a less than 1 difference with a given target element
 		const box = await this.dropZone.boundingBox();
+		if ( ! box ) {
+			return false;
+		}
+
 		return (
 			Math.abs( element.x - box.x ) < 1 &&
 			Math.abs( element.y - box.y ) < 1
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 69d69f0003489f..299d56785d831b 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -3,29 +3,317 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'adding a quote', () => {
+test.describe( 'Quote', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
 	test( 'should allow the user to type right away', async ( {
-		admin,
 		editor,
 		page,
 	} ) => {
-		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/quote' } );
+		// Type content right after.
+		await page.keyboard.type( 'Quote content' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Quote content</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by using > at the start of a paragraph block', async ( {
+		editor,
+		page,
+	} ) => {
+		// Create a block with some text that will trigger a paragraph creation.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '> A quote' );
+		// Create a second paragraph.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Another paragraph' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>A quote</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Another paragraph</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by typing > in front of text of a paragraph block', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'test' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 'test'.length );
+		await page.keyboard.type( '> ' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>test</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by typing "/quote"', async ( { editor, page } ) => {
+		// Create a list with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/quote' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'I’m a quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>I’m a quote</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by converting a paragraph', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'test' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>test</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be created by converting multiple paragraphs', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await page.keyboard.down( 'Shift' );
+		await page.click(
+			'role=document[name="Paragraph block"i] >> text=one'
+		);
+		await page.keyboard.up( 'Shift' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
 
-		// Inserting a quote block
-		await editor.insertBlock( {
-			name: 'core/quote',
+	test.describe( 'can be converted to paragraphs', () => {
+		test( 'and renders one paragraph block per <p> within quote', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.type( 'one' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'two' );
+			// Navigate to the citation to select the block.
+			await page.keyboard.press( 'ArrowRight' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph -->`
+			);
 		} );
 
-		// Type content right after.
-		await page.keyboard.type( 'Quote content' );
+		test( 'and renders a paragraph for the cite, if it exists', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.type( 'one' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'two' );
+			await page.keyboard.press( 'ArrowRight' );
+			await page.keyboard.type( 'cite' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p>one</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>cite</p>
+<!-- /wp:paragraph -->`
+			);
+		} );
+
+		test( 'and renders only one paragraph for the cite, if the quote is void', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			await page.keyboard.press( 'ArrowRight' );
+			await page.keyboard.type( 'cite' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
 
-		// Check the content
-		const content = await editor.getEditedPostContent();
-		expect( content ).toBe(
+<!-- wp:paragraph -->
+<p>cite</p>
+<!-- /wp:paragraph -->`
+			);
+		} );
+
+		test( 'and renders a void paragraph if both the cite and quote are void', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/quote' } );
+			// Select the quote
+			await page.keyboard.press( 'ArrowRight' );
+			// Unwrap the block.
+			await editor.transformBlockTo( '*' );
+			expect( await editor.getEditedPostContent() ).toBe( '' );
+		} );
+	} );
+
+	test( 'can be created by converting a heading', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'test' );
+		await editor.transformBlockTo( 'core/quote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:heading -->
+<h2 class="wp-block-heading">test</h2>
+<!-- /wp:heading --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be converted to a pullquote', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( 'cite' );
+		await editor.transformBlockTo( 'core/pullquote' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>one<br>two</p><cite>cite</cite></blockquote></figure>
+<!-- /wp:pullquote -->`
+		);
+	} );
+
+	test( 'can be split at the end', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		// Expect empty paragraph outside quote block.
+		expect( await editor.getEditedPostContent() ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:paragraph -->
-<p>Quote content</p>
+<p>1</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '2' );
+		// Expect the paragraph to be merged into the quote block.
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+	} );
+
+	test( 'can be unwrapped on Backspace', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->`
+		);
+		await page.keyboard.press( 'Backspace' );
+		expect( await editor.getEditedPostContent() ).toBe( '' );
+	} );
+
+	test( 'can be unwrapped with content on Backspace', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( '2' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph --><cite>2</cite></blockquote>
+<!-- /wp:quote -->`
+		);
+		// Move the cursor to the start of the first paragraph of the quoted block.
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 4 );
+		await page.keyboard.press( 'Backspace' );
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><cite>2</cite></blockquote>
 <!-- /wp:quote -->`
 		);
 	} );
diff --git a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
index 7eee32af2b08eb..2c28ba311d8c71 100644
--- a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
+++ b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
@@ -22,7 +22,10 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => {
 			attributes: { content: 'Dummy text' },
 		} );
 
-		// Navigate to first region and check that we made it.
+		// Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field.
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
 		await page.keyboard.press( 'Control+`' );
 		const editorTopBar = page.locator(
 			'role=region[name="Editor top bar"i]'
diff --git a/test/e2e/specs/editor/various/font-size-picker.spec.js b/test/e2e/specs/editor/various/font-size-picker.spec.js
new file mode 100644
index 00000000000000..38707c12b261bc
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-size-picker.spec.js
@@ -0,0 +1,305 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Size Picker', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Common', () => {
+		test( 'should apply a named font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			// This should be the "small" font-size of the editor defaults.
+			await page.keyboard.type( '13' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should apply a custom font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "small"' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph to be made "small"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a custom font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph reset - custom size' );
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await page.keyboard.type( '23' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"style":{"typography":{"fontSize":"23px"}}} -->
+<p style="font-size:23px">Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+
+			await pageUtils.pressKeyTimes( 'Backspace', 2 );
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph reset - custom size</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'More font sizes', () => {
+		test.beforeEach( async ( { page } ) => {
+			await page.evaluate( () => {
+				// set a deep `path[]` property in object `obj` to `value`, immutably
+				function setDeep( obj, path, value ) {
+					function doSet( o, i ) {
+						if ( i < path.length ) {
+							const key = path[ i ];
+							return { ...o, [ key ]: doSet( o[ key ], i + 1 ) };
+						}
+						return value;
+					}
+					return doSet( obj, 0 );
+				}
+
+				window.wp.data.dispatch( 'core/block-editor' ).updateSettings(
+					setDeep(
+						window.wp.data
+							.select( 'core/block-editor' )
+							.getSettings(),
+						[
+							'__experimentalFeatures',
+							'typography',
+							'fontSizes',
+							'default',
+						],
+						[
+							{
+								name: 'Tiny',
+								slug: 'tiny',
+								size: '11px',
+							},
+							{
+								name: 'Small',
+								slug: 'small',
+								size: '13px',
+							},
+							{
+								name: 'Medium',
+								slug: 'medium',
+								size: '20px',
+							},
+							{
+								name: 'Large',
+								slug: 'large',
+								size: '36px',
+							},
+							{
+								name: 'Extra Large',
+								slug: 'x-large',
+								size: '42px',
+							},
+							{
+								name: 'Huge',
+								slug: 'huge',
+								size: '48px',
+							},
+						]
+					)
+				);
+			} );
+		} );
+
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 4 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 3 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"medium"} -->
+<p class="has-medium-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=button[name="Font size"i]'
+			);
+			await pageUtils.pressKeyTimes( 'ArrowDown', 2 );
+			await page.keyboard.press( 'Enter' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+
+	test.describe( 'Few font sizes', () => {
+		test( 'should apply a named font size using the font size buttons', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Large"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Paragraph to be made "large"</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using the tools panel menu', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click( 'role=button[name="Typography options"i]' );
+			await page.click( 'role=menuitem[name="Reset Font size"i]' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using tools panel menu</p>
+<!-- /wp:paragraph -->` );
+		} );
+
+		test( 'should reset a named font size using input field', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await page.click( 'role=button[name="Add default block"i]' );
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=radiogroup[name="Font size"i] >> role=radio[name="Small"i]'
+			);
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph {"fontSize":"small"} -->
+<p class="has-small-font-size">Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Set custom size"i]'
+			);
+			await page.click( 'role=spinbutton[name="Custom"i]' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:paragraph -->
+<p>Paragraph with font size reset using input field</p>
+<!-- /wp:paragraph -->` );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
new file mode 100644
index 00000000000000..43de49fef14811
--- /dev/null
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	ToolbarRovingTabindexUtils: async ( { page, pageUtils }, use ) => {
+		await use( new ToolbarRovingTabindexUtils( { page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Toolbar roving tabindex', () => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'First block' );
+	} );
+
+	test( 'ensures paragraph block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Paragraph block',
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Paragraph block',
+			'Paragraph'
+		);
+	} );
+
+	test( 'ensures heading block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'Heading' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Heading',
+			'Heading'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Heading' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Heading',
+			'Heading'
+		);
+	} );
+
+	test( 'ensures list block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/list' } );
+		await page.keyboard.type( 'List' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'List text',
+			'Select List'
+		);
+		await page.click( `role=button[name="Select List"i]` );
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: List',
+			'List'
+		);
+	} );
+
+	test( 'ensures image block toolbar uses roving tabindex', async ( {
+		editor,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+	} );
+
+	test( 'ensures table block toolbar uses roving tabindex', async ( {
+		editor,
+		page,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/table' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+		// Move focus to the first toolbar item.
+		await page.keyboard.press( 'Home' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
+		await page.click( `role=button[name="Create Table"i]` );
+		await page.keyboard.press( 'Tab' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Body cell text',
+			'Table'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Table' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+	} );
+
+	test( 'ensures custom html block toolbar uses roving tabindex', async ( {
+		editor,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/html' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'HTML',
+			'Custom HTML'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
+			'Custom HTML'
+		);
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Custom HTML',
+			'Custom HTML'
+		);
+	} );
+
+	test( 'ensures block toolbar remembers the last focused item', async ( {
+		editor,
+		page,
+		pageUtils,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+		await ToolbarRovingTabindexUtils.focusBlockToolbar();
+		await page.keyboard.press( 'ArrowRight' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
+		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Move up' );
+	} );
+
+	test( 'can reach toolbar items with arrow keys after pressing alt+F10', async ( {
+		page,
+		pageUtils,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		await pageUtils.pressKeyWithModifier( 'alt', 'F10' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Bold' );
+	} );
+} );
+
+class ToolbarRovingTabindexUtils {
+	constructor( { page, pageUtils } ) {
+		this.page = page;
+		this.pageUtils = pageUtils;
+	}
+
+	async focusBlockToolbar() {
+		await this.pageUtils.pressKeyWithModifier( 'alt', 'F10' );
+	}
+
+	async testBlockToolbarKeyboardNavigation(
+		currentBlockLabel,
+		currentBlockTitle
+	) {
+		await this.focusBlockToolbar();
+		await this.expectLabelToHaveFocus( currentBlockTitle );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+		await this.page.keyboard.press( 'Tab' );
+		await this.expectLabelToHaveFocus( currentBlockLabel );
+		await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+	}
+
+	async expectLabelToHaveFocus( label ) {
+		let ariaLabel = await this.page.evaluate( () =>
+			document.activeElement.getAttribute( 'aria-label' )
+		);
+		// If the labels don't match, try pressing Up Arrow to focus the block wrapper in non-content editable block.
+		if ( ariaLabel !== label ) {
+			await this.page.keyboard.press( 'ArrowUp' );
+			ariaLabel = await this.page.evaluate( () =>
+				document.activeElement.getAttribute( 'aria-label' )
+			);
+		}
+		await expect( ariaLabel ).toBe( label );
+	}
+
+	async wrapCurrentBlockWithGroup( currentBlockTitle ) {
+		await this.page.click( `role=button[name="${ currentBlockTitle }"i]` );
+		await this.page.click( `role=menuitem[name="Group"]` );
+	}
+
+	async testGroupKeyboardNavigation( currentBlockLabel, currentBlockTitle ) {
+		await this.expectLabelToHaveFocus( 'Block: Group' );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( currentBlockLabel );
+		await this.pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await this.expectLabelToHaveFocus( 'Select Group' );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( currentBlockTitle );
+	}
+}
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
new file mode 100644
index 00000000000000..ce854f476e4f9d
--- /dev/null
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
+} );
+
+test.describe( 'Push to Global Styles button', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin, siteEditor } ) => {
+		await admin.visitSiteEditor();
+		await siteEditor.enterEditMode();
+	} );
+
+	test( 'should apply Heading block styles to all Heading blocks', async ( {
+		page,
+		editor,
+	} ) => {
+		// Add a Heading block.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'A heading' );
+
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should not have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'false' );
+
+		// Go to block settings and open the Advanced panel
+		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Push button should be disabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Make the Heading block uppercase
+		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
+
+		// Push button should now be enabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeEnabled();
+
+		// Press the Push button
+		await page
+			.getByRole( 'button', { name: 'Push changes to Global Styles' } )
+			.click();
+
+		// Snackbar notification should appear
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Dismiss this notice',
+				text: 'Pushed styles to all Heading blocks.',
+			} )
+		).toBeVisible();
+
+		// Push button should be disabled again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Navigate again to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should now have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'true' );
+	} );
+} );
diff --git a/test/integration/fixtures/blocks/core__page-list.json b/test/integration/fixtures/blocks/core__page-list.json
index b1992a437b8849..2552d5e093c777 100644
--- a/test/integration/fixtures/blocks/core__page-list.json
+++ b/test/integration/fixtures/blocks/core__page-list.json
@@ -3,7 +3,8 @@
 		"name": "core/page-list",
 		"isValid": true,
 		"attributes": {
-			"parentPageID": 0
+			"parentPageID": 0,
+			"isNested": false
 		},
 		"innerBlocks": []
 	}
diff --git a/test/native/__mocks__/@wordpress/react-native-aztec/index.js b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
index 1452aeb957c872..0c08c17521fc34 100644
--- a/test/native/__mocks__/@wordpress/react-native-aztec/index.js
+++ b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TextInput } from 'react-native';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,9 +14,8 @@ const AztecInputState = jest.requireActual( '@wordpress/react-native-aztec' )
 const AztecKeyCodes = jest.requireActual( '@wordpress/react-native-aztec' )
 	.default.KeyCodes;
 
-const UNSUPPORTED_PROPS = [ 'style' ];
-
 const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
+	const { style, ...supportedProps } = rest;
 	const inputRef = useRef();
 
 	useImperativeHandle( ref, () => ( {
@@ -40,7 +38,7 @@ const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
 
 	return (
 		<TextInput
-			{ ...omit( rest, UNSUPPORTED_PROPS ) }
+			{ ...supportedProps }
 			accessibilityLabel={
 				accessibilityLabel || `Text input. ${ text.text || 'Empty' }`
 			}
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index 45517b2204dd4b..4d86ffd36d09f1 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -92,6 +92,7 @@ module.exports = {
 	},
 	defaultBlock: {
 		marginTop: 16,
+		marginLeft: 16,
 	},
 	scrollableContent: {
 		paddingBottom: 20,
diff --git a/test/native/integration-test-helpers/initialize-editor.js b/test/native/integration-test-helpers/initialize-editor.js
index 662c6fc4544d07..440d69550ae0e6 100644
--- a/test/native/integration-test-helpers/initialize-editor.js
+++ b/test/native/integration-test-helpers/initialize-editor.js
@@ -31,6 +31,7 @@ export async function initializeEditor( props, { component } = {} ) {
 	const postType = 'post';
 
 	return waitForStoreResolvers( () => {
+		const { screenWidth = 320, ...rest } = props || {};
 		const editorElement = component
 			? createElement( component, { postType, postId } )
 			: internalInitializeEditor( uniqueId, postType, postId );
@@ -38,7 +39,7 @@ export async function initializeEditor( props, { component } = {} ) {
 		const screen = render(
 			cloneElement( editorElement, {
 				initialTitle: 'test',
-				...props,
+				...rest,
 			} )
 		);
 
@@ -47,7 +48,7 @@ export async function initializeEditor( props, { component } = {} ) {
 		fireEvent( screen.getByTestId( 'block-list-wrapper' ), 'layout', {
 			nativeEvent: {
 				layout: {
-					width: 100,
+					width: screenWidth,
 				},
 			},
 		} );