From 880a6195d78cdc22696e547b3ef2ba555d6d893e Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 11 Jan 2023 18:09:53 +0000
Subject: [PATCH] Merge changes published in the Gutenberg plugin
 "release/15.0" branch

---
 .eslintrc.js                                  |   1 +
 .github/ISSUE_TEMPLATE/config.yml             |   3 -
 .github/workflows/pull-request-automation.yml |   2 +-
 .github/workflows/rnmobile-android-runner.yml |   4 +-
 .github/workflows/rnmobile-ios-runner.yml     |   4 +-
 .github/workflows/stale-issue-gardening.yml   |   2 +-
 .github/workflows/storybook-pages.yml         |   2 +-
 LICENSE.md                                    |   2 +-
 changelog.txt                                 | 525 ++++++++++
 docs/contributors/accessibility-testing.md    |   2 +-
 .../contributors/code}/e2e/MIGRATION.md       |  13 +-
 docs/contributors/code/e2e/README.md          | 131 +++
 .../code/e2e/overusing-snapshots.md           | 125 +++
 .../getting-started-with-code-contribution.md |   3 +
 docs/contributors/code/testing-overview.md    |   4 +-
 docs/contributors/versions-in-wordpress.md    |   1 +
 docs/explanations/faq.md                      |   2 +-
 .../getting-started/create-block/finishing.md |   2 +-
 .../submitting-to-block-directory.md          |   2 +-
 docs/getting-started/devenv/README.md         |   2 +-
 docs/getting-started/full-site-editing.md     |  16 +-
 .../applying-styles-with-stylesheets.md       |   4 +-
 .../data-basics/2-building-a-list-of-pages.md |   2 +-
 docs/how-to-guides/propagating-updates.md     |   2 +-
 docs/how-to-guides/themes/theme-json.md       |   2 +
 .../widgets/legacy-widget-block.md            |   2 +-
 docs/manifest.json                            |  10 +-
 docs/reference-guides/core-blocks.md          |   2 +-
 .../data/data-core-block-editor.md            |   6 +-
 gutenberg.php                                 |   2 +-
 lib/block-supports/position.php               | 143 +++
 lib/class-wp-theme-json-gutenberg.php         | 102 +-
 lib/compat/wordpress-6.2/blocks.php           |  26 +
 .../get-global-styles-and-settings.php        |   2 +-
 lib/compat/wordpress-6.2/rest-api.php         |   5 +-
 ...-rest-block-editor-settings-controller.php |  12 +-
 lib/experimental/editor-settings.php          |   3 -
 .../html/class-wp-html-tag-processor.php      |  43 +
 lib/experiments-page.php                      |  12 -
 lib/load.php                                  |   2 +
 package-lock.json                             | 965 +++++-------------
 package.json                                  |   3 +-
 packages/base-styles/_z-index.scss            |   1 +
 packages/block-editor/CHANGELOG.md            |   5 +
 .../src/components/block-actions/index.js     |   5 +
 .../src/components/block-inspector/index.js   |   4 +-
 .../src/components/block-preview/auto.js      |   6 +-
 .../block-settings-dropdown.js                |   4 +
 .../src/components/block-styles/index.js      |   5 +-
 .../use-block-toolbar-popover-props.js        |  80 +-
 .../{style.scss => content.scss}              |   0
 .../components/default-style-picker/index.js  |   1 +
 .../components/font-sizes/with-font-sizes.js  |  66 +-
 .../src/components/iframe/index.js            |  71 +-
 .../iframe/use-compatibility-styles.js        |   6 +
 .../components/image-size-control/index.js    |   1 +
 .../components/inserter/block-patterns-tab.js |  11 +-
 .../src/components/inserter/index.js          |  87 +-
 .../src/components/inserter/menu.js           |  12 +-
 .../test/__snapshots__/index.native.js.snap   | 117 +++
 .../components/inserter/test/index.native.js  | 256 ++++-
 .../position-controls-panel.js                |  37 +
 .../inspector-controls-tabs/settings-tab.js   |   2 +
 .../inspector-controls-tabs/style.scss        |  15 +
 .../use-inspector-controls-tabs.js            |  11 +-
 .../components/inspector-controls/groups.js   |   2 +
 .../components/link-control/search-input.js   |   1 +
 .../src/components/link-control/style.scss    |   1 +
 .../src/components/list-view/style.scss       |  16 +-
 .../components/off-canvas-editor/appender.js  |  54 +-
 .../off-canvas-editor/block-contents.js       | 107 +-
 .../src/components/off-canvas-editor/block.js |  88 +-
 .../src/components/off-canvas-editor/index.js |  14 +-
 .../src/components/provider/index.js          |   5 +-
 .../src/components/rich-text/use-enter.js     |   8 +-
 .../src/components/url-input/README.md        |   5 +
 .../src/components/url-input/button.js        |   1 +
 .../src/components/url-input/index.js         |  16 +-
 .../src/components/url-popover/link-editor.js |   1 +
 .../src/components/use-paste-styles/index.js  | 230 +++++
 .../components/writing-flow/use-arrow-nav.js  |  48 +-
 packages/block-editor/src/content.scss        |   1 +
 packages/block-editor/src/hooks/index.js      |   1 +
 packages/block-editor/src/hooks/metadata.js   |   3 +-
 packages/block-editor/src/hooks/position.js   | 375 +++++++
 packages/block-editor/src/hooks/position.scss |  18 +
 packages/block-editor/src/hooks/supports.js   | 302 ++++++
 .../test/__snapshots__/align.native.js.snap   |  73 ++
 .../src/hooks/test/align.native.js            | 133 +++
 packages/block-editor/src/store/reducer.js    |   9 +-
 packages/block-editor/src/store/selectors.js  |  10 +-
 .../block-editor/src/store/test/reducer.js    |  48 +-
 .../block-editor/src/store/test/selectors.js  |  21 +-
 packages/block-editor/src/style.scss          |   3 +-
 packages/block-library/src/archives/edit.js   |   1 +
 packages/block-library/src/audio/edit.js      |   2 +
 .../edit/comments-inspector-controls.js       |  14 +-
 .../block-library/src/embed/embed-preview.js  |   1 +
 packages/block-library/src/file/inspector.js  |   1 +
 packages/block-library/src/gallery/edit.js    |   2 +
 packages/block-library/src/gallery/gallery.js |   1 +
 packages/block-library/src/gallery/v1/edit.js |   2 +
 packages/block-library/src/group/block.json   |   3 +
 packages/block-library/src/group/edit.js      |   1 +
 packages/block-library/src/image/image.js     |  62 +-
 .../block-library/src/latest-posts/edit.js    |  13 +-
 .../block-library/src/navigation-link/edit.js |  25 +-
 .../src/navigation-link/index.php             |  33 +-
 .../src/navigation-link/update-attributes.js  |   2 +-
 .../src/navigation-submenu/index.php          |   4 +-
 .../src/navigation/edit/index.js              |   3 +
 .../edit/menu-inspector-controls.js           | 166 +--
 .../edit/navigation-menu-selector.js          |   7 +-
 .../src/navigation/leaf-more-menu.js          |  93 ++
 .../src/page-list-item/block.json             |   3 +-
 .../block-library/src/page-list/index.php     |   5 +
 .../block-library/src/post-author/edit.js     |   2 +
 .../post-featured-image/dimension-controls.js |   1 +
 .../query/edit/inspector-controls/index.js    |   1 +
 .../edit/inspector-controls/order-control.js  |   1 +
 .../edit/inspector-controls/sticky-control.js |   1 +
 .../src/query/edit/query-content.js           |  13 +
 packages/block-library/src/rss/index.php      |   2 +-
 .../block-library/src/social-link/edit.js     |   3 +-
 packages/block-library/src/table/edit.js      |   1 +
 packages/block-library/src/tag-cloud/edit.js  |   1 +
 .../template-part/edit/advanced-controls.js   |  24 +
 .../src/video/edit-common-settings.js         |  11 +-
 packages/block-library/src/video/edit.js      |   1 +
 .../block-library/src/video/tracks-editor.js  |   1 +
 packages/components/CHANGELOG.md              |  17 +
 .../components/src/color-picker/component.tsx |   1 +
 .../src/color-picker/stories/index.js         |  80 +-
 .../components/src/color-picker/styles.ts     |   5 -
 .../components/src/combobox-control/index.js  |  10 +-
 packages/components/src/dashicon/types.ts     |   6 -
 .../src/focal-point-picker/stories/index.tsx  |   2 +-
 .../src/focal-point-picker/utils.ts           |   5 +-
 .../components/src/guide/stories/index.js     |  55 +-
 packages/components/src/index.js              |  14 +-
 packages/components/src/index.native.js       |  14 +-
 .../src/item-group/item-group/component.tsx   |  27 +-
 .../src/item-group/item/component.tsx         |  28 +-
 .../src/item-group/stories/index.js           | 270 -----
 .../src/item-group/stories/index.tsx          | 103 ++
 packages/components/src/item-group/styles.ts  |   1 +
 .../test/__snapshots__/index.js.snap          |  21 +-
 .../components/src/notice/stories/index.js    |  88 +-
 packages/components/src/panel/row.js          |   6 +-
 .../components/src/panel/stories/index.js     | 142 ++-
 .../components/src/placeholder/style.scss     |   2 +-
 .../components/src/query-controls/index.js    |   1 +
 .../components/src/resizable-box/README.md    |   4 +-
 .../components/src/resizable-box/index.tsx    |  13 +-
 .../src/resizable-box/stories/index.js        |  97 --
 .../src/resizable-box/stories/index.tsx       |  92 ++
 .../src/responsive-wrapper/README.md          |  29 +
 .../{index.js => index.tsx}                   |  25 +-
 .../src/responsive-wrapper/stories/index.tsx  |  38 +
 .../src/responsive-wrapper/types.ts           |  20 +
 packages/components/src/sandbox/README.md     |  47 +-
 .../src/sandbox/{index.js => index.tsx}       |  71 +-
 .../components/src/sandbox/stories/index.tsx  |  32 +
 .../src/sandbox/test/{index.js => index.tsx}  |  13 +-
 packages/components/src/sandbox/types.ts      |  34 +
 .../components/src/slot-fill/stories/index.js |  29 +-
 packages/components/src/style.scss            |   6 +-
 packages/components/src/tab-panel/README.md   |   1 +
 packages/components/src/tab-panel/index.tsx   |  24 +-
 .../src/tab-panel/stories/index.tsx           |  20 +
 .../components/src/tab-panel/test/index.tsx   |  89 ++
 packages/components/src/tab-panel/types.ts    |  14 +-
 packages/components/src/toolbar/index.js      |  58 +-
 .../components/src/toolbar/stories/index.js   |  11 +-
 .../stories/toolbar-button.js}                |   3 +-
 .../stories/toolbar-group.js}                 |   2 +-
 packages/components/src/toolbar/test/index.js |   3 +-
 .../test/toolbar-group.js}                    |   2 +-
 .../{ => toolbar}/toolbar-button/README.md    |   0
 .../src/{ => toolbar}/toolbar-button/index.js |   2 +-
 .../{ => toolbar}/toolbar-button/style.scss   |   0
 .../toolbar-button-container.js               |   0
 .../toolbar-button-container.native.js        |   0
 .../{ => toolbar}/toolbar-context/index.js    |   0
 .../toolbar-dropdown-menu/README.md           |   0
 .../toolbar-dropdown-menu/index.js            |   2 +-
 .../src/{ => toolbar}/toolbar-group/README.md |   0
 .../src/{ => toolbar}/toolbar-group/index.js  |   0
 .../toolbar-group/style.native.scss           |   0
 .../{ => toolbar}/toolbar-group/style.scss    |   0
 .../toolbar-group/toolbar-group-collapsed.js  |   2 +-
 .../toolbar-group-collapsed.native.js         |   2 +-
 .../toolbar-group/toolbar-group-container.js  |   0
 .../toolbar-group-container.native.js         |   0
 .../src/{ => toolbar}/toolbar-item/README.md  |   0
 .../src/{ => toolbar}/toolbar-item/index.js   |   0
 .../toolbar-item/index.native.js              |   0
 .../src/toolbar/{ => toolbar}/README.md       |   0
 .../components/src/toolbar/toolbar/index.js   |  52 +
 .../toolbar/{ => toolbar}/style.native.scss   |   0
 .../src/toolbar/{ => toolbar}/style.scss      |   0
 .../{ => toolbar}/toolbar-container.js        |   0
 .../{ => toolbar}/toolbar-container.native.js |   0
 packages/components/src/tree-grid/index.js    |   6 +-
 packages/components/tsconfig.json             |   7 -
 .../data/src/components/use-select/index.js   | 417 +++-----
 .../src/components/use-select/test/index.js   |  38 +-
 .../components/use-select/test/suspense.js    |  72 ++
 .../src/editor/get-blocks.ts                  |  21 +
 .../src/editor/index.ts                       |   4 +
 .../src/editor/switch-block-inspector-tab.ts  |  26 +
 packages/e2e-test-utils/README.md             |   9 +
 packages/e2e-test-utils/src/index.js          |   1 +
 .../src/switch-block-inspector-tab.js         |  19 +
 .../block-hierarchy-navigation.test.js        |  16 +
 .../editor/various/block-switcher.test.js     |   2 +-
 .../editor/various/inserting-blocks.test.js   |   2 +-
 .../various/manage-reusable-blocks.test.js    |  74 --
 .../editor/various/post-visibility.test.js    | 133 ---
 .../header/template-title/delete-template.js  |  14 +-
 .../test/__snapshots__/index.js.snap          |   1 +
 .../components/sidebar/post-template/form.js  |   1 +
 .../src/components/visual-editor/index.js     |  41 +-
 packages/edit-post/src/plugins/index.js       |   2 -
 .../plugins/navigation-list-view-menu-item.js |  56 -
 .../add-new-template/new-template-part.js     |  24 +-
 .../src/components/add-new-template/utils.js  |  14 +
 .../components/block-editor/editor-canvas.js  |   1 -
 .../src/components/block-editor/index.js      |  65 +-
 .../components/block-editor/resize-handle.js  |   8 +-
 .../src/components/block-editor/style.scss    |  50 +-
 .../edit-site/src/components/editor/index.js  |   2 +-
 .../global-styles/block-preview-panel.js      |  16 +-
 .../components/global-styles/border-panel.js  |  12 +-
 .../components/global-styles/context-menu.js  |   6 +
 .../global-styles/dimensions-panel.js         |  47 +-
 .../global-styles/screen-background-color.js  |  17 +-
 .../global-styles/screen-block-list.js        |   7 +-
 .../components/global-styles/screen-border.js |  11 +-
 .../global-styles/screen-button-color.js      |   4 +-
 .../components/global-styles/screen-colors.js | 103 +-
 .../global-styles/screen-heading-color.js     |  14 +-
 .../components/global-styles/screen-layout.js |  14 +-
 .../global-styles/screen-link-color.js        |  26 +-
 .../global-styles/screen-text-color.js        |  10 +-
 .../global-styles/screen-typography.js        |  15 +-
 .../global-styles/screen-variations.js        |  47 +
 .../src/components/global-styles/style.scss   |   9 +
 .../test/use-global-styles-output.js          |   2 +-
 .../global-styles/typography-panel.js         |  39 +-
 .../src/components/global-styles/ui.js        | 114 ++-
 .../global-styles/use-global-styles-output.js | 151 ++-
 .../src/components/global-styles/utils.js     |  48 +-
 .../global-styles/variations-panel.js         |  78 ++
 .../edit-site/src/components/layout/index.js  | 126 ++-
 .../src/components/layout/style.scss          |  35 +-
 .../navigation-inspector.js                   |   2 +
 .../navigation-menu-sidebar/style.scss        |   4 +
 .../src/components/site-hub/index.js          | 229 +++--
 .../use-sync-canvas-mode-with-url.js          |  40 +
 .../template-details/edit-template-title.js   |   1 +
 .../template-part-area-selector.js            |   1 +
 .../push-changes-to-global-styles/index.js    |   6 +-
 packages/edit-site/src/store/reducer.js       |   2 +-
 .../src/components/post-author/select.js      |   1 +
 .../src/components/post-format/index.js       |   1 +
 .../src/components/post-template/index.js     |   1 +
 .../provider/use-block-editor-settings.js     |   2 +-
 .../custom-sources-backwards-compatibility.js |  29 +-
 packages/element/README.md                    |   7 +-
 packages/env/README.md                        |   4 +-
 .../preferences-modal-tabs/style.scss         |   8 +
 packages/react-native-aztec/package.json      |   2 +-
 packages/react-native-bridge/package.json     |   2 +-
 packages/react-native-editor/CHANGELOG.md     |   2 +
 ...gutenberg-editor-block-insertion-2.test.js | 131 ---
 packages/react-native-editor/ios/Podfile.lock |   8 +-
 packages/react-native-editor/package.json     |   2 +-
 .../src/__tests__/markdown.test.ts            |   5 +-
 .../src/__tests__/run.test.ts                 |  27 +-
 packages/report-flaky-tests/src/github-api.ts |  55 +-
 packages/report-flaky-tests/src/markdown.ts   |   4 +-
 packages/report-flaky-tests/src/run.ts        |  36 +-
 .../src/blocks/legacy-widget/edit/index.js    |  54 +-
 .../edit/widget-type-selector.js              |   1 +
 .../src/blocks/legacy-widget/editor.scss      |   9 -
 ...ass-block-library-navigation-link-test.php |  35 +-
 phpunit/class-wp-theme-json-test.php          |   5 +
 phpunit/fixtures/mock-provider.php            |   1 -
 phpunit/html/wp-html-tag-processor-test.php   |  94 ++
 schemas/json/theme.json                       |  11 +
 test/e2e/README.md                            | 113 +-
 .../e2e}/assets/greeting-reusable-block.json  |   0
 test/e2e/specs/editor/blocks/avatar.spec.js   |   4 +-
 test/e2e/specs/editor/blocks/buttons.spec.js  |   1 +
 .../specs/editor/blocks/navigation.spec.js    |  62 ++
 test/e2e/specs/editor/blocks/table.spec.js    |   6 +-
 .../specs/editor/plugins/hooks-api.spec.js    |   3 +
 .../various/manage-reusable-blocks.spec.js    |  48 +
 .../editor/various/post-visibility.spec.js    | 105 ++
 .../block-list-panel-preference.spec.js       |   2 -
 .../site-editor/push-to-global-styles.spec.js |  22 +-
 .../integration-test-helpers/add-block.js     |  16 +-
 303 files changed, 6819 insertions(+), 3299 deletions(-)
 rename {test => docs/contributors/code}/e2e/MIGRATION.md (60%)
 create mode 100644 docs/contributors/code/e2e/README.md
 create mode 100644 docs/contributors/code/e2e/overusing-snapshots.md
 create mode 100644 lib/block-supports/position.php
 create mode 100644 lib/compat/wordpress-6.2/blocks.php
 rename packages/block-editor/src/components/button-block-appender/{style.scss => content.scss} (100%)
 create mode 100644 packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap
 create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
 create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/style.scss
 create mode 100644 packages/block-editor/src/components/use-paste-styles/index.js
 create mode 100644 packages/block-editor/src/hooks/position.js
 create mode 100644 packages/block-editor/src/hooks/position.scss
 create mode 100644 packages/block-editor/src/hooks/supports.js
 create mode 100644 packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
 create mode 100644 packages/block-editor/src/hooks/test/align.native.js
 create mode 100644 packages/block-library/src/navigation/leaf-more-menu.js
 delete mode 100644 packages/components/src/item-group/stories/index.js
 create mode 100644 packages/components/src/item-group/stories/index.tsx
 delete mode 100644 packages/components/src/resizable-box/stories/index.js
 create mode 100644 packages/components/src/resizable-box/stories/index.tsx
 rename packages/components/src/responsive-wrapper/{index.js => index.tsx} (62%)
 create mode 100644 packages/components/src/responsive-wrapper/stories/index.tsx
 create mode 100644 packages/components/src/responsive-wrapper/types.ts
 rename packages/components/src/sandbox/{index.js => index.tsx} (80%)
 create mode 100644 packages/components/src/sandbox/stories/index.tsx
 rename packages/components/src/sandbox/test/{index.js => index.tsx} (85%)
 create mode 100644 packages/components/src/sandbox/types.ts
 rename packages/components/src/{toolbar-button/stories/index.js => toolbar/stories/toolbar-button.js} (89%)
 rename packages/components/src/{toolbar-group/stories/index.js => toolbar/stories/toolbar-group.js} (92%)
 rename packages/components/src/{toolbar-group/test/index.js => toolbar/test/toolbar-group.js} (98%)
 rename packages/components/src/{ => toolbar}/toolbar-button/README.md (100%)
 rename packages/components/src/{ => toolbar}/toolbar-button/index.js (98%)
 rename packages/components/src/{ => toolbar}/toolbar-button/style.scss (100%)
 rename packages/components/src/{ => toolbar}/toolbar-button/toolbar-button-container.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-button/toolbar-button-container.native.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-context/index.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-dropdown-menu/README.md (100%)
 rename packages/components/src/{ => toolbar}/toolbar-dropdown-menu/index.js (95%)
 rename packages/components/src/{ => toolbar}/toolbar-group/README.md (100%)
 rename packages/components/src/{ => toolbar}/toolbar-group/index.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-group/style.native.scss (100%)
 rename packages/components/src/{ => toolbar}/toolbar-group/style.scss (100%)
 rename packages/components/src/{ => toolbar}/toolbar-group/toolbar-group-collapsed.js (94%)
 rename packages/components/src/{ => toolbar}/toolbar-group/toolbar-group-collapsed.native.js (92%)
 rename packages/components/src/{ => toolbar}/toolbar-group/toolbar-group-container.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-group/toolbar-group-container.native.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-item/README.md (100%)
 rename packages/components/src/{ => toolbar}/toolbar-item/index.js (100%)
 rename packages/components/src/{ => toolbar}/toolbar-item/index.native.js (100%)
 rename packages/components/src/toolbar/{ => toolbar}/README.md (100%)
 create mode 100644 packages/components/src/toolbar/toolbar/index.js
 rename packages/components/src/toolbar/{ => toolbar}/style.native.scss (100%)
 rename packages/components/src/toolbar/{ => toolbar}/style.scss (100%)
 rename packages/components/src/toolbar/{ => toolbar}/toolbar-container.js (100%)
 rename packages/components/src/toolbar/{ => toolbar}/toolbar-container.native.js (100%)
 create mode 100644 packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
 create mode 100644 packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts
 create mode 100644 packages/e2e-test-utils/src/switch-block-inspector-tab.js
 delete mode 100644 packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js
 delete mode 100644 packages/e2e-tests/specs/editor/various/post-visibility.test.js
 delete mode 100644 packages/edit-post/src/plugins/navigation-list-view-menu-item.js
 create mode 100644 packages/edit-site/src/components/global-styles/screen-variations.js
 create mode 100644 packages/edit-site/src/components/global-styles/variations-panel.js
 create mode 100644 packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
 delete mode 100644 packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
 rename {packages/e2e-tests => test/e2e}/assets/greeting-reusable-block.json (100%)
 create mode 100644 test/e2e/specs/editor/blocks/navigation.spec.js
 create mode 100644 test/e2e/specs/editor/various/manage-reusable-blocks.spec.js
 create mode 100644 test/e2e/specs/editor/various/post-visibility.spec.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 46c930ee0fb732..341c9d0a7dd856 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -115,6 +115,7 @@ const restrictedImports = [
 			'partial',
 			'partialRight',
 			'pick',
+			'pickBy',
 			'random',
 			'reduce',
 			'reject',
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 51bfb0d1bb7c13..a3abc5ece034ce 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -6,6 +6,3 @@ contact_links:
     - name: Technical help request
       url: https://wordpress.org/support/forum/wp-advanced/
       about: For more technical help requests, create a new topic in the Developing with WordPress Forum
-    - name: Development help request
-      url: https://wordpress.stackexchange.com/
-      about: For questions about WordPress development, ask a question in the WordPress Development Stack Exchange
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index e6e4f1bdfb84ec..98ff14fbac7ee0 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -25,7 +25,7 @@ jobs:
                   node-version: ${{ matrix.node }}
 
             - name: Cache NPM packages
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@4723a57e26efda3a62cbde1812113b730952852d # v3.2.2
               with:
                   # npm cache files are stored in `~/.npm` on Linux/macOS
                   path: ~/.npm
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 093c2a99ad4a07..dba62b04dd7087 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -26,7 +26,7 @@ jobs:
               uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
 
             - name: Use desired version of Java
-              uses: actions/setup-java@de1bb2b0c5634f0fc4438d7aa9944e68f9bf86cc # v3.6.0
+              uses: actions/setup-java@1df8dbefe2a8cbc99770194893dd902763bee34b # v3.9.0
               with:
                   distribution: 'temurin'
                   java-version: '11'
@@ -43,7 +43,7 @@ jobs:
               uses: gradle/gradle-build-action@3fbe033aaae657f011f88f29be9e65ed26bd29ef # v2.3.3
 
             - name: AVD cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@4723a57e26efda3a62cbde1812113b730952852d # v3.2.2
               id: avd-cache
               with:
                   path: |
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 36dc3a5dc30c9e..0494928ad1b0dd 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -37,7 +37,7 @@ jobs:
               run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt
 
             - name: Restore build cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@4723a57e26efda3a62cbde1812113b730952852d # v3.2.2
               with:
                   path: |
                       packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app
@@ -45,7 +45,7 @@ jobs:
                   key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }}
 
             - name: Restore pods cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@4723a57e26efda3a62cbde1812113b730952852d # v3.2.2
               with:
                   path: |
                       packages/react-native-editor/ios/Pods
diff --git a/.github/workflows/stale-issue-gardening.yml b/.github/workflows/stale-issue-gardening.yml
index bcf72182262ba1..11134fe68062a6 100644
--- a/.github/workflows/stale-issue-gardening.yml
+++ b/.github/workflows/stale-issue-gardening.yml
@@ -42,7 +42,7 @@ jobs:
 
         steps:
             - name: Update issues
-              uses: actions/stale@5ebf00ea0e4c1561e9b43a292ed34424fb1d4578 # v6.0.1
+              uses: actions/stale@6f05e4244c9a0b2ed3401882b05d701dd0a7289b # v7.0.0
               with:
                   repo-token: ${{ secrets.GITHUB_TOKEN }}
                   stale-issue-message: ${{ matrix.message }}
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index e0ce7283b28bad..da1f3c446ed762 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -29,7 +29,7 @@ jobs:
               run: npm run storybook:build
 
             - name: Deploy
-              uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935 # v3.9.0
+              uses: peaceiris/actions-gh-pages@64b46b4226a4a12da2239ba3ea5aa73e3163c75b # v3.9.1
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   publish_dir: ./storybook/build
diff --git a/LICENSE.md b/LICENSE.md
index 89ae0ff923d468..1dcb4d22cba5e6 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2022 by the contributors
+    Copyright 2016-2023 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 
diff --git a/changelog.txt b/changelog.txt
index 93cdbecad9ad8d..65bb846e47371c 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,530 @@
 == Changelog ==
 
+= 15.0.0-rc.1 =
+
+
+
+## Changelog
+
+### Enhancements
+
+- Add help text on the HTML element for the Comments and Query Loop blocks. ([46989](https://github.com/WordPress/gutenberg/pull/46989))
+- URLInput: Deprecate bottom margin. ([46692](https://github.com/WordPress/gutenberg/pull/46692))
+
+#### Site Editor
+- Allow resizing the sidebar and frame of the site editor. ([46903](https://github.com/WordPress/gutenberg/pull/46903))
+- Remove the editor notices from the site editor frame. ([46931](https://github.com/WordPress/gutenberg/pull/46931))
+- Synchronize the canvas mode with the site editor URL. ([47002](https://github.com/WordPress/gutenberg/pull/47002))
+
+#### Block Library
+- Add paste styles to the block settings. ([45477](https://github.com/WordPress/gutenberg/pull/45477))
+- Prevent the image from being resized larger than its container. ([45775](https://github.com/WordPress/gutenberg/pull/45775))
+- Replace block settings menu with a custom menu in off canvas editor. ([46675](https://github.com/WordPress/gutenberg/pull/46675))
+
+#### Inspector Controls
+- Sidebar Tabs: Add text only mode for block inspector tabs. ([46968](https://github.com/WordPress/gutenberg/pull/46968))
+- Sidebar Tabs: Stabilize the block inspector tabs experiment. ([47045](https://github.com/WordPress/gutenberg/pull/47045))
+
+#### Global Styles
+- Update push changes to global styles label text to "apply globally". ([46965](https://github.com/WordPress/gutenberg/pull/46965))
+
+#### Accessibility
+- TabPanel: Add prop to allow disabling of a tab button. ([46471](https://github.com/WordPress/gutenberg/pull/46471))
+
+#### Components
+- SelectControl: Remove margin overrides and add new opt-in prop. ([46448](https://github.com/WordPress/gutenberg/pull/46448))
+
+
+### Bug Fixes
+
+- Docs: Fix typos. ([46912](https://github.com/WordPress/gutenberg/pull/46912))
+- Fix offsite navigation editor component loading issue. ([46937](https://github.com/WordPress/gutenberg/pull/46937))
+- Iframe: compat styles: Check for ownerNode === null. ([46932](https://github.com/WordPress/gutenberg/pull/46932))
+- Tabs in preferences: Fix regression from horizontal tabs. ([46796](https://github.com/WordPress/gutenberg/pull/46796))
+
+#### Block Editor
+- Align labels on Link Control. ([46936](https://github.com/WordPress/gutenberg/pull/46936))
+- Remove the border property from the body element on previews. ([46946](https://github.com/WordPress/gutenberg/pull/46946))
+- [Inserter]: Don't show empty `reusable` tab if not allowed to insert reusable blocks. ([46922](https://github.com/WordPress/gutenberg/pull/46922))
+- [Inserter]: Hide empty pattern categories. ([46923](https://github.com/WordPress/gutenberg/pull/46923))
+
+#### Block Library
+- Navigation Block: Properly decode URL-encoded links. ([46435](https://github.com/WordPress/gutenberg/pull/46435))
+- RSS: Correctly output 'datetime' string. ([47027](https://github.com/WordPress/gutenberg/pull/47027))
+- [Social Icon]: Fix React warning when adding `link label`. ([46905](https://github.com/WordPress/gutenberg/pull/46905))
+
+#### Components
+- ComboboxControl: Fix unexpected behaviour in IME Composition. ([46827](https://github.com/WordPress/gutenberg/pull/46827))
+- Fix TreeGrid keyboard nav skipping Edit Block button in off canvas editor. ([46998](https://github.com/WordPress/gutenberg/pull/46998))
+- [Placeholder]: Set fixed right margin for label's icon. ([46918](https://github.com/WordPress/gutenberg/pull/46918))
+
+#### Global Styles
+- Fix the 'test_remove_invalid_element_pseudo_selectors' test case. ([47049](https://github.com/WordPress/gutenberg/pull/47049))
+- Fixed Global Styles variables for colors, font family, gradient, fontSize. ([46944](https://github.com/WordPress/gutenberg/pull/46944))
+
+
+### Performance
+
+- Lodash: Remove `_.pickBy()` from block editor and deprecate. ([46999](https://github.com/WordPress/gutenberg/pull/46999))
+- Optimize keydown event handlers. ([46653](https://github.com/WordPress/gutenberg/pull/46653))
+
+#### Post Editor
+- Lodash: Remove `_.pickBy()` from editor hooks. ([46982](https://github.com/WordPress/gutenberg/pull/46982))
+- Lodash: Remove `_.pickBy()` from template deletion. ([46975](https://github.com/WordPress/gutenberg/pull/46975))
+
+#### Global Styles
+- Lodash: Remove `_.pickBy()` from `getNodesWithStyles()`. ([46980](https://github.com/WordPress/gutenberg/pull/46980))
+
+#### Block Library
+- Lodash: Remove `_.pickBy()` from latest posts block. ([46974](https://github.com/WordPress/gutenberg/pull/46974))
+
+
+### Experiments
+
+- Update last inserted block state to track multiple blocks. ([46885](https://github.com/WordPress/gutenberg/pull/46885))
+- WP_HTML_Tag_Processor: Add `get_attribute_names_with_prefix()` method. ([46840](https://github.com/WordPress/gutenberg/pull/46840))
+
+#### Block Library
+- Alternative Nav Offcanvas show link UI for submenu creation. ([46857](https://github.com/WordPress/gutenberg/pull/46857))
+- Nav offcanvas disable direct insertion. ([46898](https://github.com/WordPress/gutenberg/pull/46898))
+
+#### Layout
+- Design Tools: Add a Position block support (including sticky), decoupled from layout. ([46142](https://github.com/WordPress/gutenberg/pull/46142))
+
+
+### Documentation
+
+- Adds "fluid" field inside `settings.typography`. ([45705](https://github.com/WordPress/gutenberg/pull/45705))
+- Docs: Add recommendation for developers to use GH CLI. ([46847](https://github.com/WordPress/gutenberg/pull/46847))
+- Quick update to versions in WordPress doc for 6.1.1. ([46850](https://github.com/WordPress/gutenberg/pull/46850))
+- ReactDOM.render deprecated, update Element README. ([46925](https://github.com/WordPress/gutenberg/pull/46925))
+- Remove stack exchange from new issue templates. ([36158](https://github.com/WordPress/gutenberg/pull/36158))
+- Revise NPM to npm. ([46963](https://github.com/WordPress/gutenberg/pull/46963))
+- Update legacy-widget-block.md. ([44343](https://github.com/WordPress/gutenberg/pull/44343))
+- [RFC] Add documentation for snapshot testing in Playwright end-to-end tests. ([45709](https://github.com/WordPress/gutenberg/pull/45709))
+
+
+### Code Quality
+
+- Chore: Fix incorrect usage of map instead of forEach. ([46853](https://github.com/WordPress/gutenberg/pull/46853))
+- Chore: Remove unreachable line from phpunit/fixtures/mock-provider.php. ([46843](https://github.com/WordPress/gutenberg/pull/46843))
+- Fix number of arguments passed to hasBlockMetadataSupport. ([46842](https://github.com/WordPress/gutenberg/pull/46842))
+- Fix: Use of array index instead of post id on latest posts. ([46911](https://github.com/WordPress/gutenberg/pull/46911))
+
+#### Components
+- Dashicon: Remove unnecessary type for `className` prop. ([46849](https://github.com/WordPress/gutenberg/pull/46849))
+- ItemGroup: Migrate Storybook to controls, refactor to TypeScript. ([46945](https://github.com/WordPress/gutenberg/pull/46945))
+- Toolbar: Move all subcomponents under the same folder. ([46951](https://github.com/WordPress/gutenberg/pull/46951))
+
+#### Block Library
+- Navigation Link: Fix PHP notices in unit tests. ([47070](https://github.com/WordPress/gutenberg/pull/47070))
+- Video Block: Fix browser warning error when settings are toggled. ([46835](https://github.com/WordPress/gutenberg/pull/46835))
+
+
+### Tools
+
+#### Testing
+- Block inserter search end-to-end test: Scope list item lookup to the inserter panel. ([47066](https://github.com/WordPress/gutenberg/pull/47066))
+- Migrate Manage Reusable Block to Playwright. ([45621](https://github.com/WordPress/gutenberg/pull/45621))
+- Migrate Post Visibility Test to Playwright. ([44488](https://github.com/WordPress/gutenberg/pull/44488))
+- Navigation block end-to-end tests: Default to a list of pages if there are no menus. ([45070](https://github.com/WordPress/gutenberg/pull/45070))
+- Only use a single comment for the flakiness report on PRs. ([46785](https://github.com/WordPress/gutenberg/pull/46785))
+
+#### Build Tooling
+- package.json: Add script to profile unit tests. ([46909](https://github.com/WordPress/gutenberg/pull/46909))
+
+
+### Various
+
+- Block editor: Move content styles to avoid triggering iframe compat mode. ([46728](https://github.com/WordPress/gutenberg/pull/46728))
+- Iframe: Preload style assets to avoid flash of unstyled content. ([46706](https://github.com/WordPress/gutenberg/pull/46706))
+- Mobile - Move the `gutenberg-editor-block-insertion-2` end-to-end tests to integration tests. ([46882](https://github.com/WordPress/gutenberg/pull/46882))
+- Update copyright year to 2023 in `license.md`. ([46910](https://github.com/WordPress/gutenberg/pull/46910))
+- Updating missing shortcut in FAQ section. ([44968](https://github.com/WordPress/gutenberg/pull/44968))
+
+#### Components
+- ColorPicker: Remove knobs in stories. ([46772](https://github.com/WordPress/gutenberg/pull/46772))
+- Guide: Remove knobs in stories. ([46773](https://github.com/WordPress/gutenberg/pull/46773))
+- Notice: Remove knobs in stories. ([46956](https://github.com/WordPress/gutenberg/pull/46956))
+- Panel: Remove knobs from stories. ([46958](https://github.com/WordPress/gutenberg/pull/46958))
+- ResizableBox: Remove knobs in stories. ([46774](https://github.com/WordPress/gutenberg/pull/46774))
+- ResponsiveWrapper: Convert to TypeScript. ([46480](https://github.com/WordPress/gutenberg/pull/46480))
+- SandBox: Convert to TypeScript. ([46478](https://github.com/WordPress/gutenberg/pull/46478))
+- SlotFill: Remove knobs in stories. ([46957](https://github.com/WordPress/gutenberg/pull/46957))
+- Use data URI for `FocalPointPicker` video story. ([42377](https://github.com/WordPress/gutenberg/pull/42377))
+
+#### Block Library
+- Navigation: Add an icon to the add submenu item option. ([46884](https://github.com/WordPress/gutenberg/pull/46884))
+- Navigation: Remove ghost inserter. ([46919](https://github.com/WordPress/gutenberg/pull/46919))
+- Navigation: Show the loading indictor when users add a new navigation menu. ([46855](https://github.com/WordPress/gutenberg/pull/46855))
+- Page List Block: Fix warning error when the parent page has no child pages. ([46829](https://github.com/WordPress/gutenberg/pull/46829))
+- Page List Item: Disable block toolbar. ([46950](https://github.com/WordPress/gutenberg/pull/46950))
+- Simplify the way we create a link UI control in the offcanvas editor. ([46744](https://github.com/WordPress/gutenberg/pull/46744))
+- Template Parts: Avoid duplicate titles on creation. ([46996](https://github.com/WordPress/gutenberg/pull/46996))
+
+#### Inspector Controls
+- Block Inspector: Fix browser warning error when block is not selected. ([46875](https://github.com/WordPress/gutenberg/pull/46875))
+- Remove Block Inspector Button. ([46709](https://github.com/WordPress/gutenberg/pull/46709))
+
+#### List View
+- Update template part children background color. ([46708](https://github.com/WordPress/gutenberg/pull/46708))
+- Update template part hover style in list view. ([46707](https://github.com/WordPress/gutenberg/pull/46707))
+
+#### Accessibility
+- Navigation: Add more explicit labels to the Navigation Menu Selector. ([47015](https://github.com/WordPress/gutenberg/pull/47015))
+
+#### Rich Text
+- Adds an identifier prop to the RichText component for captions, allowing annotation. ([46917](https://github.com/WordPress/gutenberg/pull/46917))
+
+#### Data Layer
+- useSelect: Implement with useSyncExternalStore. ([46538](https://github.com/WordPress/gutenberg/pull/46538))
+
+#### Global Styles
+- Edit block style variations from global styles. ([46343](https://github.com/WordPress/gutenberg/pull/46343))
+
+#### Block Editor
+- Site Editor: Enable copy/cut shortcut. ([45752](https://github.com/WordPress/gutenberg/pull/45752))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @BogdanUngureanu: Fixed Global Styles variables for colors, font family, gradient, fontSize. ([46944](https://github.com/WordPress/gutenberg/pull/46944))
+- @cameronjonesweb: Update legacy-widget-block.md. ([44343](https://github.com/WordPress/gutenberg/pull/44343))
+- @d-alleyne: Prevent the image from being resized larger than its container. ([45775](https://github.com/WordPress/gutenberg/pull/45775))
+- @kozer: Navigation Block: Properly decode URL-encoded links. ([46435](https://github.com/WordPress/gutenberg/pull/46435))
+- @mhkuu: Adds an identifier prop to the RichText component for captions, allowing annotation. ([46917](https://github.com/WordPress/gutenberg/pull/46917))
+- @tekapo: Revise NPM to npm. ([46963](https://github.com/WordPress/gutenberg/pull/46963))
+- @TonyGravagno: ReactDOM.render deprecated, update Element README. ([46925](https://github.com/WordPress/gutenberg/pull/46925))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @alanjacobmathew @alexstine @andrewserong @annezazu @apeatling @BogdanUngureanu @brookewp @cameronjonesweb @ciampo @d-alleyne @draganescu @ellatrix @geriux @getdave @jameskoster @jasmussen @jorgefilipecosta @joshuatf @jsnajdr @juanfra @kevin940726 @kozer @MaggieCabrera @Mamaduka @mateuswetah @mhkuu @mirka @ntsekouras @ockham @pooja-muchandikar @scruffian @Soean @stokesman @t-hamano @talldan @tekapo @tellthemachines @tomjn @TonyGravagno @tyxla @youknowriad
+
+
+= 14.9.1 =
+
+
+
+## Changelog
+
+### Bug Fixes
+
+- REST API: Do not set sidebar status to 'active' when using classic theme. ([46966](https://github.com/WordPress/gutenberg/pull/46966))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@noisysocks
+
+
+= 14.9.0 =
+
+## Changelog
+
+### Features
+
+#### Global Styles
+
+- Site Editor: Add new 'Push changes to Global Styles' button. ([46446](https://github.com/WordPress/gutenberg/pull/46446))
+
+#### Patterns
+
+- Add: Template types to the patterns API. ([45814](https://github.com/WordPress/gutenberg/pull/45814))
+
+### Enhancements
+
+- Post editor: Iframe for block-based themes. ([46212](https://github.com/WordPress/gutenberg/pull/46212))
+- Move word count to the top of the outline. ([46648](https://github.com/WordPress/gutenberg/pull/46648))
+- Update: Remove need for template prefix in `gutenberg_get_template_hierarchy`. ([46257](https://github.com/WordPress/gutenberg/pull/46257))
+- Update: Use offsite navigation editor on the navigation inspector sidebar. ([46440](https://github.com/WordPress/gutenberg/pull/46440))
+
+#### Site Editor
+
+- Add the template title and type to the site hub. ([46736](https://github.com/WordPress/gutenberg/pull/46736))
+- Increase the width of the site editor sidebar. ([46769](https://github.com/WordPress/gutenberg/pull/46769))
+- Move the edit button in the site editor sidebar to a contextual widget. ([46700](https://github.com/WordPress/gutenberg/pull/46700))
+
+#### Block Library
+
+- Navigation: Adds page list as child of submenu. ([46414](https://github.com/WordPress/gutenberg/pull/46414))
+- Navigation: Bring back the heading and the menu selector in the ellipsis menu. ([46622](https://github.com/WordPress/gutenberg/pull/46622))
+- Template Parts: Add an option to import widgets from the sidebars. ([45509](https://github.com/WordPress/gutenberg/pull/45509))
+
+#### Design Tools
+
+- Page List: Add typography supports. ([43316](https://github.com/WordPress/gutenberg/pull/43316))
+- Style Engine: Add support for text columns (column-count). ([46566](https://github.com/WordPress/gutenberg/pull/46566))
+
+#### CSS & Styling
+
+- Edit-post site logo: Fix focus style. ([46733](https://github.com/WordPress/gutenberg/pull/46733))
+- Base Styles: Extract long-content-fade to its own file so it can be imported and reused. ([46485](https://github.com/WordPress/gutenberg/pull/46485))
+
+#### Components
+- `TextareaControl`: Add new opt-in prop. ([46559](https://github.com/WordPress/gutenberg/pull/46559))
+
+#### Colors
+- Remove clearable from link `ColorPanel` item. ([46507](https://github.com/WordPress/gutenberg/pull/46507))
+
+#### Global Styles
+
+- Shadow: Add shadow presets support via `theme.json`. ([46813](https://github.com/WordPress/gutenberg/pull/46813))
+- Fluid typography: Add configurable settings for minimum font size to `theme.json`. ([42489](https://github.com/WordPress/gutenberg/pull/42489))
+- Inline preview: Center align block in global styles inline preview. ([46727](https://github.com/WordPress/gutenberg/pull/46727))
+
+
+### Bug Fixes
+
+- DOM: Fix `findNext`/`findPrevious` tabbable if target is not in `findFocusable` list. ([46580](https://github.com/WordPress/gutenberg/pull/46580))
+- Fix: Bug on `withSafeTimeouts`. ([46595](https://github.com/WordPress/gutenberg/pull/46595))
+- Fixed incorrect CHANGELOG link. ([46609](https://github.com/WordPress/gutenberg/pull/46609))
+- Fixed table block footer section issue. ([46567](https://github.com/WordPress/gutenberg/pull/46567))
+- Iframe: Restore typewriter effect in post editor. ([46745](https://github.com/WordPress/gutenberg/pull/46745))
+- Parse the attributes in a case-insensitive way to comply with the HTML parsing spec. ([46748](https://github.com/WordPress/gutenberg/pull/46748))
+- Update: Guard against null block in off canvas editor. ([46594](https://github.com/WordPress/gutenberg/pull/46594))
+- docgen: Add function to handle list of types for `theme.json` schema. ([46375](https://github.com/WordPress/gutenberg/pull/46375))
+- Post editor: Fix title margin. ([46698](https://github.com/WordPress/gutenberg/pull/46698))
+
+#### Block Library
+
+- Fix Off Canvas Editor add submenu item option. ([46562](https://github.com/WordPress/gutenberg/pull/46562))
+- Make table of contents label in placeholder translatable. ([46788](https://github.com/WordPress/gutenberg/pull/46788))
+- Query Loop: Fetch terms suggestions dynamically. ([46649](https://github.com/WordPress/gutenberg/pull/46649))
+
+#### Components
+
+- `FocalPointPicker`: Fix layout misalignment when placed in the `BlockInspector`. ([46631](https://github.com/WordPress/gutenberg/pull/46631))
+- Storybook: Fix crash when `parameters` is undefined. ([46670](https://github.com/WordPress/gutenberg/pull/46670))
+- Toolbar: Fix duplicate focus style on anchor link button. ([46759](https://github.com/WordPress/gutenberg/pull/46759))
+
+#### Widgets Editor
+
+- Revert "[`customize-widgets/utils/widgetToBlock`] Initialize a widget's `raw_content.content` to an empty string if it's `undefined`". ([46600](https://github.com/WordPress/gutenberg/pull/46600))
+- [`customize-widgets/utils/widgetToBlock`] Initialize a widget's `raw_content.content` to an empty string if it's `undefined`. ([46487](https://github.com/WordPress/gutenberg/pull/46487))
+
+#### Nested / Inner Blocks
+
+- Inner Blocks: Fix provides context condition. ([46729](https://github.com/WordPress/gutenberg/pull/46729))
+
+#### Global Styles
+
+- Allow content/wide widths when `unfiltered_html` is not allowed. ([46712](https://github.com/WordPress/gutenberg/pull/46712))
+
+#### CSS & Styling
+
+- Fix nav list alignment. ([46682](https://github.com/WordPress/gutenberg/pull/46682))
+
+#### Block Editor
+
+- Inserter: Try fix media tab when upload of media types has been disabled. ([46676](https://github.com/WordPress/gutenberg/pull/46676))
+
+#### Build Tooling
+
+- Restore `gutenberg_` prefix to function calls in PHPUnit tests. ([46662](https://github.com/WordPress/gutenberg/pull/46662))
+
+#### Patterns
+
+- Pattern Setup: Fix full heights during transition. ([46615](https://github.com/WordPress/gutenberg/pull/46615))
+
+#### Design Tools
+
+- Verse: Prevent default styles overriding `theme.json` font family. ([46560](https://github.com/WordPress/gutenberg/pull/46560))
+
+#### Block Variations
+
+- Block Variation Picker: Adds support to declared icon with source. ([46373](https://github.com/WordPress/gutenberg/pull/46373))
+
+#### Themes
+
+- `theme.json` schema: Allow object type on style properties. ([45897](https://github.com/WordPress/gutenberg/pull/45897))
+
+### Accessibility
+
+- Block editor: iframe/writing flow: Change tab index to 0. ([46323](https://github.com/WordPress/gutenberg/pull/46323))
+- Fix region navigation in the site editor. ([46525](https://github.com/WordPress/gutenberg/pull/46525))
+- Keycodes: Fix tilde (`~`) character isn't displayed correctly. ([46826](https://github.com/WordPress/gutenberg/pull/46826))
+- `useNavigateRegions`: Use closest to determine the next region to navigate to. ([44883](https://github.com/WordPress/gutenberg/pull/44883))
+
+### Performance
+
+- Add a performance metric to measure typing within containers. ([46529](https://github.com/WordPress/gutenberg/pull/46529))
+- Block Editor: Optimize `useAvailableAlignments` performance. ([46655](https://github.com/WordPress/gutenberg/pull/46655))
+- Reset the page between every performance test. ([46646](https://github.com/WordPress/gutenberg/pull/46646))
+- Lodash:
+- Refactor block editor away from `_.find()`. ([46577](https://github.com/WordPress/gutenberg/pull/46577))
+- Remove `omit` usage from RN test mocks. ([46660](https://github.com/WordPress/gutenberg/pull/46660))
+- Remove dependency from server-side-render. ([46746](https://github.com/WordPress/gutenberg/pull/46746))
+- Remove from block editor reducer. ([46656](https://github.com/WordPress/gutenberg/pull/46656))
+
+#### Widgets Editor
+
+- Lodash: Remove dependency from `customize-widgets`. ([46747](https://github.com/WordPress/gutenberg/pull/46747))
+
+#### Block Library
+
+- Gallery: Avoid creating new layout objects on every render. ([46715](https://github.com/WordPress/gutenberg/pull/46715))
+
+#### Site Editor
+
+- Memoize sidebar component. ([46604](https://github.com/WordPress/gutenberg/pull/46604))
+
+#### Components
+
+- Lodash: Refactor components away from `_.find()`. ([46537](https://github.com/WordPress/gutenberg/pull/46537))
+
+### Experiments
+
+- Add rough animation to navigation and links. ([46342](https://github.com/WordPress/gutenberg/pull/46342))
+- Tag Processor: Fix a problem backing up too far after updating HTML. ([46598](https://github.com/WordPress/gutenberg/pull/46598))
+
+#### Block Library
+
+- Improve empty menu state in nav off-canvas editor. ([46602](https://github.com/WordPress/gutenberg/pull/46602))
+- Nav offcanvas - handle non-direct insert block inserter. ([46503](https://github.com/WordPress/gutenberg/pull/46503))
+- Navigation list view: Use smaller lock icon. ([46578](https://github.com/WordPress/gutenberg/pull/46578))
+
+### Documentation
+
+- Add missing prefix in PHPDoc comment. ([46808](https://github.com/WordPress/gutenberg/pull/46808))
+- Clarifying the npm package release process for the RC release. ([46555](https://github.com/WordPress/gutenberg/pull/46555))
+- Doc: Fix missing link to Block Styles page. ([46695](https://github.com/WordPress/gutenberg/pull/46695))
+- Fix: Missing links in `block.json` schema. ([46694](https://github.com/WordPress/gutenberg/pull/46694))
+- Lodash: Refactor away from `_.omit()`. ([46674](https://github.com/WordPress/gutenberg/pull/46674))
+- Update PHPDoc for `gutenberg_get_global_stylesheet`. ([46817](https://github.com/WordPress/gutenberg/pull/46817))
+- Added a note to `register_block_pattern_category()`. ([46628](https://github.com/WordPress/gutenberg/pull/46628))
+
+### Code Quality
+
+- Block Editor:
+- Improve `ImageSizeControl` tests. ([46765](https://github.com/WordPress/gutenberg/pull/46765))
+- Make `URLPopover` tests more precise. ([46654](https://github.com/WordPress/gutenberg/pull/46654))
+- Chore: Remove Inexistent parameter from function call in categories block. ([46804](https://github.com/WordPress/gutenberg/pull/46804))
+- ESLint: Enable `testing-library/no-node-access` rule. ([46703](https://github.com/WordPress/gutenberg/pull/46703))
+- Fix return type of `getSpacingPresetSlug` function. ([46805](https://github.com/WordPress/gutenberg/pull/46805))
+- Iframe: Simplify/reactify compat styles logic. ([46732](https://github.com/WordPress/gutenberg/pull/46732))
+- Mobile BlockToolbar: Improve `useSelect` for fewer rerenders. ([46697](https://github.com/WordPress/gutenberg/pull/46697))
+- Remove leftover pattern. ([46701](https://github.com/WordPress/gutenberg/pull/46701))
+- Remove the nux package. ([46110](https://github.com/WordPress/gutenberg/pull/46110))
+- Remove: `__experimentalHasMultipleOrigins` prop from colors and gradients. ([46315](https://github.com/WordPress/gutenberg/pull/46315))
+- Use `<>` instead of `Fragment`. ([46633](https://github.com/WordPress/gutenberg/pull/46633))
+- `package-lock.json`: Dedupe the scheduler package. ([46605](https://github.com/WordPress/gutenberg/pull/46605))
+- `withFilters` tests: More precise `act()` calls. ([46630](https://github.com/WordPress/gutenberg/pull/46630))
+- Jest config: Use real timers by default. ([46714](https://github.com/WordPress/gutenberg/pull/46714))
+- Element: Export new React 18 APIs. ([46610](https://github.com/WordPress/gutenberg/pull/46610))
+
+#### Block Library
+
+- Comments Block: Remove unnecessary `editorStyle` prop in legacy metadata. ([46514](https://github.com/WordPress/gutenberg/pull/46514))
+- Extract hook for offcanvas inserted block. ([46618](https://github.com/WordPress/gutenberg/pull/46618))
+- Try making page list a controlled block. ([46416](https://github.com/WordPress/gutenberg/pull/46416))
+
+#### Components
+
+- `BorderControl`: Improve popover waiting. ([46713](https://github.com/WordPress/gutenberg/pull/46713))
+- Improve `PanelBody` tests. ([46659](https://github.com/WordPress/gutenberg/pull/46659))
+
+#### Data Layer
+
+- Data: Fix `no-node-access` violation in suspense tests. ([46657](https://github.com/WordPress/gutenberg/pull/46657))
+
+### Tools
+
+#### Testing
+
+- Always run initialization code before Playwright end-to-end tests. ([46459](https://github.com/WordPress/gutenberg/pull/46459))
+- E2E: Fix `confirmValidDropZonePosition()` when dropzone not ready. ([46677](https://github.com/WordPress/gutenberg/pull/46677))
+- E2E: Refactor global inserter utility. ([46366](https://github.com/WordPress/gutenberg/pull/46366))
+- Fix CORS error in the demo end-to-end test. ([46668](https://github.com/WordPress/gutenberg/pull/46668))
+- Migrate Font Size Picker tests to Playwright. ([46591](https://github.com/WordPress/gutenberg/pull/46591))
+- Migrate Toolbar roving tabindex tests to Playwright. ([46634](https://github.com/WordPress/gutenberg/pull/46634))
+- Migrate quote end-to-end tests to playwright. ([46549](https://github.com/WordPress/gutenberg/pull/46549))
+- Post a summary of the flaky tests to the commit. ([45798](https://github.com/WordPress/gutenberg/pull/45798))
+- Update performance tests to work with themes that load editor into an iframe. ([46665](https://github.com/WordPress/gutenberg/pull/46665))
+
+#### Block Library
+
+- Update `OffCanvasEditor` to use `clientids` tree. ([46541](https://github.com/WordPress/gutenberg/pull/46541))
+- Update copy of off canvas editor 'add submenu item' option. ([46564](https://github.com/WordPress/gutenberg/pull/46564))
+- Page List:
+- Remove duplicate code. ([46620](https://github.com/WordPress/gutenberg/pull/46620))
+- Update the icon to demonstrate that the pages are automatically updated. ([46438](https://github.com/WordPress/gutenberg/pull/46438))
+- Query Loop:
+- Only show the Filters panel when there are allowed controls that need to be displayed. ([45869](https://github.com/WordPress/gutenberg/pull/45869))
+- Connect scoped `block` variation to `inserter` variations. ([46410](https://github.com/WordPress/gutenberg/pull/46410))
+- Show pattern titles in setup. ([46688](https://github.com/WordPress/gutenberg/pull/46688))
+
+#### Components
+
+- Icon: Remove knobs in stories. ([46517](https://github.com/WordPress/gutenberg/pull/46517))
+- Refactor Dropdown component to TypeScript. ([45787](https://github.com/WordPress/gutenberg/pull/45787))
+- Theme component: Remove public export. ([46427](https://github.com/WordPress/gutenberg/pull/46427))
+- ToolTip: Remove knobs in stories. ([46515](https://github.com/WordPress/gutenberg/pull/46515))
+
+#### Block Editor
+
+- `BlockListAppender`: With custom appender, don't react to nested list settings changes. ([46461](https://github.com/WordPress/gutenberg/pull/46461))
+- Paste: Reuse file transforms for file pasting. ([45891](https://github.com/WordPress/gutenberg/pull/45891))
+- Site Editor: Don't show block inserter when the canvas is view mode. ([46763](https://github.com/WordPress/gutenberg/pull/46763))
+
+#### Data Layer
+
+- Data: Recreate `listeningStores` set for every `markListeningStores` call. ([46607](https://github.com/WordPress/gutenberg/pull/46607))
+- `useSelect`: Add unit tests for static select mode. ([46606](https://github.com/WordPress/gutenberg/pull/46606))
+
+#### Navigation Menu Sidebar
+
+- Navigation Sidebar: Hide behind the experiment flag. ([46710](https://github.com/WordPress/gutenberg/pull/46710))
+
+#### Icons
+
+- Update the update icon. ([46575](https://github.com/WordPress/gutenberg/pull/46575))
+
+#### Accessibility
+
+- Change `SpacingSizesControl` ARIA from region to group. ([46530](https://github.com/WordPress/gutenberg/pull/46530))
+
+#### Global Styles
+
+- Inline block preview: Add preview block in nested global style panels. ([46401](https://github.com/WordPress/gutenberg/pull/46401))
+
+#### Typography
+
+- Typography block supports: Sync with 6.1 backport. ([43928](https://github.com/WordPress/gutenberg/pull/43928))
+
+#### Web Fonts
+
+- Change architecture to use Core's Dependencies API. ([43492](https://github.com/WordPress/gutenberg/pull/43492))
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @gigitux: Block Variation Picker: Adds support to declared icon with src. ([46373](https://github.com/WordPress/gutenberg/pull/46373))
+- @marekdedic: Fixed incorrect CHANGELOG link. ([46609](https://github.com/WordPress/gutenberg/pull/46609))
+- @viralsampat-multidots: Fixed table block footer section issue. ([46567](https://github.com/WordPress/gutenberg/pull/46567))
+- @vykes-mac: Base Styles: Extract long-content-fade to its own file so it can be imported and reused. ([46485](https://github.com/WordPress/gutenberg/pull/46485))
+- @websitegenii: Added a note to `register_block_pattern_category()`. ([46628](https://github.com/WordPress/gutenberg/pull/46628))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @ajlende @alexstine @artemiomorales @brookewp @danielbachhuber @DAreRodz @dmsnell @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @gigitux @hellofromtonya @jasmussen @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mikachan @mirka @mmtr @noisysocks @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @scruffian @t-hamano @talldan @tyxla @viralsampat-multidots @vykes-mac @websitegenii @WunderBart @youknowriad
+
+
 = 14.8.4 =
 
 
diff --git a/docs/contributors/accessibility-testing.md b/docs/contributors/accessibility-testing.md
index 46085df4afb817..8012b5214764c2 100644
--- a/docs/contributors/accessibility-testing.md
+++ b/docs/contributors/accessibility-testing.md
@@ -34,7 +34,7 @@ According to the [WebAIM: Screen Reader User Survey #8 Results](https://webaim.o
 | NVDA with Internet Explorer | 14               | 1.2%             |
 | Other combinations          | 126              | 10.4%            |
 
-When testing with screen readers, try to use some of the combinations at the top of this list. For example, when testing with VoiceOver, it's preferrable to use Safari.
+When testing with screen readers, try to use some of the combinations at the top of this list. For example, when testing with VoiceOver, it's preferable to use Safari.
 
 ### NVDA with Firefox
 
diff --git a/test/e2e/MIGRATION.md b/docs/contributors/code/e2e/MIGRATION.md
similarity index 60%
rename from test/e2e/MIGRATION.md
rename to docs/contributors/code/e2e/MIGRATION.md
index aad4305aa8c3a9..e9376b3db320b8 100644
--- a/test/e2e/MIGRATION.md
+++ b/docs/contributors/code/e2e/MIGRATION.md
@@ -1,5 +1,7 @@
 # Migration guide
 
+This document outlines a typical flow of migrating a Jest + Puppeteer test to Playwright. Note that the migration process is also a good opportunity to refactor or rewrite parts of the tests. Please read the [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices) guide before starting the migration.
+
 ## Migration steps for tests
 
 1. Choose a test suite to migrate in `packages/e2e-tests/specs`, rename `.test.js` into `.spec.js` and put it in the same folder structure inside `test/e2e/specs`.
@@ -24,12 +26,17 @@
         },
     } );
     ```
-7. If there's a missing util, go ahead and [migrate it](#migration-steps-for-test-utils).
-8. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
+7. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below.
+8. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
 
 ## Migration steps for test utils
 
-Playwright utilities are organized a little differently to those in the `e2e-test-utils` package. The `e2e-test-utils-playwright` package has the following folders that utils are divided up into:
+Before migrating a test utility function, think twice about whether it's necessary. Playwright offers a lot of readable and powerful APIs which make a lot of the utils obsolete. Try implementing the same thing inline directly in the test first. Only follow the below guide if that doesn't work for you. Some examples of utils that deserve to be implemented in the `e2e-test-utils-playwright` package include complex browser APIs (like `pageUtils.dragFiles` and `pageUtils.pressKeyWithModifier`) and APIs that set states (`requestUtils.*`).
+
+> **Note**
+> The `e2e-test-utils-playwright` package is not meant to be a drop-in replacement of the Jest + Puppeteer's `e2e-test-utils` package. Some utils are only created to ease the migration process, but they are not necessarily required.
+
+Playwright utilities are organized a little differently from those in the `e2e-test-utils` package. The `e2e-test-utils-playwright` package has the following folders that utils are divided up into:
 - `admin` - Utilities related to WordPress admin or WordPress admin's user interface (e.g. `visitAdminPage`).
 - `editor` - Utilities for the block editor (e.g. `clickBlockToolbarButton`).
 - `pageUtils` - General utilities for interacting with the browser (e.g. `pressKeyWithModifier`).
diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md
new file mode 100644
index 00000000000000..968db5638a6a95
--- /dev/null
+++ b/docs/contributors/code/e2e/README.md
@@ -0,0 +1,131 @@
+# End-to-End Testing
+
+This living document serves to prescribe instructions and best practices for writing end-to-end (E2E) tests with Playwright in the Gutenberg project.
+
+> **Note**
+> See the dedicated guide if you're working with the previous Jest + Puppeteer framework. See the [migration guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/MIGRATION.md) if you're migrating tests from Jest + Puppeteer.
+
+## Running tests
+
+```bash
+# Run all available tests.
+npm run test:e2e:playwright
+
+# Run in headed mode.
+npm run test:e2e:playwright -- --headed
+
+# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
+npm run test:e2e:playwright -- --project=webkit --project=firefox
+
+# Run a single test file.
+npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
+
+# Debugging.
+npm run test:e2e:playwright -- --debug
+```
+
+If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
+
+```bash
+# Run all available tests.
+xvfb-run npm run test:e2e:playwright
+
+# Only run webkit tests.
+xvfb-run -- npm run test:e2e:playwright -- --project=webkit
+```
+
+## Best practices
+
+<details>
+	<summary><h3>Forbid `$`, use `locator` instead</h3></summary>
+
+In fact, any API that returns `ElementHandle` is [discouraged](https://playwright.dev/docs/api/class-page#page-query-selector). This includes `$`, `$$`, `$eval`, `$$eval`, etc. [`Locator`](https://playwright.dev/docs/api/class-locator) is a much better API and can be used with playwright's [assertions](https://playwright.dev/docs/api/class-locatorassertions). This also works great with Page Object Model since that locator is lazy and doesn't return a promise.
+</details>
+
+<details>
+	<summary><h3>Use accessible selectors</h3></summary>
+
+Use the selector engine [role-selector](https://playwright.dev/docs/selectors#role-selector) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations. The syntax should be straightforward and looks like this:
+
+```js
+// Select a button with the accessible name "Hello World" (case-insensitive).
+page.locator( 'role=button[name="Hello World"i]' );
+
+// Using short-form API, the `name` is case-insensitive by default.
+page.getByRole( 'button', { name: 'Hello World' } );
+```
+
+It's recommended to append `i` to the name attribute to match it case-insensitively wherever it makes sense. It can also be chained with built-in selector engines to perform complex queries:
+
+```js
+// Select a button with a name ends with `Back` and is visible on the screen.
+page.locator( 'role=button[name=/Back$/] >> visible=true' );
+// Select a button with the (exact) name "View options" under `#some-section`.
+page.locator( 'css=#some-section >> role=button[name="View options"]' );
+```
+
+See the [official documentation](https://playwright.dev/docs/selectors#role-selector) for more info on how to use them.
+</details>
+
+<details>
+	<summary><h3>Selectors are strict by default</h3></summary>
+
+To encourage better practices for querying elements, selectors are [strict](https://playwright.dev/docs/api/class-browser#browser-new-page-option-strict-selectors) by default, meaning that it will throw an error if the query returns more than one element.
+</details>
+
+<details>
+	<summary><h3>Don't overload test-utils, inline simple utils</h3></summary>
+
+`e2e-test-utils` are too bloated with too many utils. Most of them are simple enough to be inlined directly in tests. With the help of accessible selectors, simple utils are easier to write now. For utils that only take place on a certain page, use Page Object Model instead (with an exception of clearing states with `requestUtils` which are better placed in `e2e-test-utils`). Otherwise, only create an util if the action is complex and repetitive enough.
+</details>
+
+<details>
+	<summary><h3>Favor Page Object Model over utils</h3></summary>
+
+As mentioned above, [Page Object Model](https://playwright.dev/docs/test-pom) is the preferred way to create reusable utility functions on a certain page.
+
+The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`.
+</details>
+
+<details>
+	<summary><h3>Restify actions to clear or set states</h3></summary>
+
+It's slow to set states manually before or after tests, especially when they're repeated multiple times between tests. It's recommended to set them via API calls. Use `requestUtils.rest` and `requestUtils.batchRest` instead to call the [REST API](https://developer.wordpress.org/rest-api/reference/) (and add them to `requestUtils` if needed). We should still add a test for manually setting them, but that should only be tested once.
+</details>
+
+<details>
+	<summary><h3>Avoid global variables</h3></summary>
+
+Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed as global variables. This makes it harder to work with when we have multiple pages/tabs in the same test, or if we want to run multiple tests in parallel. `@playwright/test` has the concept of [fixtures](https://playwright.dev/docs/test-fixtures) which allows us to inject `page`, `browser`, and other parameters into the tests.
+</details>
+
+<details>
+	<summary><h3>Make explicit assertions</h3></summary>
+
+We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read.
+</details>
+
+## Common pitfalls
+
+### [Overusing snapshots](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/overusing-snapshots.md)
+
+
+## Cross-browser testing
+
+By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
+
+```js
+test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
+	// ...
+} );
+
+test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
+	// ...
+} );
+
+test.describe( 'Grouping tests (@webkit, -chromium)', () => {
+	test( 'I will only run in webkit', async ( { page } ) => {
+		// ...
+	} );
+} );
+```
diff --git a/docs/contributors/code/e2e/overusing-snapshots.md b/docs/contributors/code/e2e/overusing-snapshots.md
new file mode 100644
index 00000000000000..6364fd7394789e
--- /dev/null
+++ b/docs/contributors/code/e2e/overusing-snapshots.md
@@ -0,0 +1,125 @@
+# Overusing snapshots
+
+Take a look at the below code. Could you understand what the test is trying to do at first glance?
+
+```js
+await editor.insertBlock( { name: 'core/quote' } );
+await page.keyboard.type( '1' );
+await page.keyboard.press( 'Enter' );
+await page.keyboard.press( 'Enter' );
+
+expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+await page.keyboard.press( 'Backspace' );
+await page.keyboard.type( '2' );
+
+expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+```
+
+This is borrowed from the real code in gutenberg, with the test title and the comments removed and refactored into Playwright. Ideally, E2E tests should be self-documented and readable to end users; in the end, they are trying to resemble how end users interact with the app. However, there are a couple of red flags in the code.
+
+## Problems with snapshot testing
+
+Popularized by Jest, [snapshot testing](https://jestjs.io/docs/snapshot-testing) is a great tool to help test our app _when it makes sense_. However, probably because it's so powerful, it's often overused by developers. There are already multiple [articles](https://kentcdodds.com/blog/effective-snapshot-testing) about this. In this particular case, snapshot testing fails to reflect the developer's intention. It's not clear what the assertions are about without looking into other information. This makes the code harder to understand and creates a mental overhead for all the other readers other than the one who wrote it. As readers, we have to jump around the code to fully understand them. The added complexity of the code discourages contributors from changing the test to fit their needs. It could sometimes even confuse the authors and make them accidentally [commit the wrong snapshots](https://github.com/WordPress/gutenberg/pull/42780#discussion_r949865612).
+
+Here's the same test with the test title and comments. Now you know what these assertions are actually about.
+
+```js
+it( 'can be split at the end', async () => {
+	// ...
+
+	// Expect empty paragraph outside quote block.
+	expect( await getEditedPostContent() ).toMatchSnapshot();
+
+	// ...
+
+	// Expect the paragraph to be merged into the quote block.
+	expect( await getEditedPostContent() ).toMatchSnapshot();
+} );
+```
+
+The developer's intention is a bit more readable, but it still feels disconnected from the test. You might be tempted to try [inline snapshots](https://jestjs.io/docs/snapshot-testing#inline-snapshots), which do solve the issue of having to jump around files, but they're still not self-documented nor explicit. We can do better.
+
+## The solution
+
+Instead of writing the assertions in comments, we can try directly writing them out explicitly. With the help of `editor.getBlocks`, we can rewrite them into simpler and atomic assertions.
+
+```js
+// ...
+
+// Expect empty paragraph outside quote block.
+await expect.poll( editor.getBlocks ).toMatchObject( [
+	{
+		name: 'core/quote',
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+		],
+	},
+	{
+		name: 'core/paragraph',
+		attributes: { content: '' },
+	}
+] );
+
+// ...
+
+// Expect the paragraph to be merged into the quote block.
+await expect.poll( editor.getBlocks ).toMatchObject( [ {
+	name: 'core/quote',
+	innerBlocks: [
+		{
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		},
+		{
+			name: 'core/paragraph',
+			attributes: { content: '2' },
+		},
+	],
+} ] );
+```
+
+These assertions are more readable and explicit. You can add additional assertions or split existing ones into multiple ones to highlight their importance. Whether to keep the comments is up to you, but it's usually fine to omit them when the code is already readable without them.
+
+## Snapshot variants
+
+Due to the lack of inline snapshots in Playwright, some migrated tests are using string assertions (`toBe`) to simulate similar effects without having to create dozens of snapshot files.
+
+```js
+expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:paragraph -->
+<p>Paragraph</p>
+<!-- /wp:paragraph -->` );
+```
+
+We can consider this pattern as a variant of snapshot testing, and we should follow the same rule when writing them. It's often better to rewrite them using `editor.getBlocks` or other methods to make explicit assertions.
+
+```js
+await expect.poll( editor.getBlocks ).toMatchObject( [ {
+	name: 'core/paragraph',
+	attributes: { content: 'Paragraph' },
+} ] );
+```
+
+## What about test coverage?
+
+Comparing the explicit assertions to snapshot testing, we're definitely losing some test coverage in this test. Snapshot testing is still useful when we want to assert the full serialized content of the block. Fortunately, though, some tests in the integration test already assert the [full content](https://github.com/WordPress/gutenberg/blob/trunk/test/integration/fixtures/blocks/README.md) of each core block. They run in Node.js, making them way faster than repeating the same test in Playwright. Running 273 test cases in my machine only costs about 5.7 seconds. These sorts of tests work great at the unit or integration level, and we can run them much faster without losing test coverage.
+
+## Best practices
+
+Snapshot testing should rarely be required in E2E tests, often there are better alternatives that leverage explicit assertions. For times when there isn't any other suitable alternative, we should follow the best practices when using them.
+
+### Avoid huge snapshots
+
+Huge snapshots are hard to read and difficult to review. Moreover, when everything is important then nothing is important. Huge snapshots prevent us from focusing on the important parts of the snapshots.
+
+### Avoid repetitive snapshots
+
+If you find yourself creating multiple snapshots of similar contents in the same test, then it's probably a sign that you want to make more atomic assertions instead. Rethink what you want to test, if the first snapshot is only just a reference for the second one, then what you want is likely the **difference** between the snapshots. Store the first result in a variable and assert the difference between the results instead.
+
+## Further readings
+
+- [Effective Snapshot Testing - Kent C. Dodds](https://kentcdodds.com/blog/effective-snapshot-testing)
+- [Common Testing Mistakes - Kent C. Dodds](https://kentcdodds.com/blog/common-testing-mistakes)
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index dd15f2f8dd3711..b4bc1275cf1ea0 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -18,6 +18,9 @@ We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nv
 
 As an alternative to Docker setup, you can use [Local](https://localwp.com/), [WampServer](http://www.wampserver.com/en/), or [MAMP](https://www.mamp.info/), or even use a remote server.
 
+-   GitHub CLI
+    Although not a requirement, the [GitHub CLI](https://cli.github.com/) can be very useful in helping you checkout pull requests locally. Both from the Gutenberg repo and forked repos. This can be a major time saver while code reviewing and testing pull requests.
+
 ## Getting the Gutenberg code
 
 Fork the Gutenberg repository, clone it to your computer and add the WordPress repository as upstream.
diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md
index f68469f6a893f4..b646756669563d 100644
--- a/docs/contributors/code/testing-overview.md
+++ b/docs/contributors/code/testing-overview.md
@@ -491,9 +491,9 @@ There is an ongoing effort to add integration tests to the native mobile project
 
 ## End-to-end Testing
 
-End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
+Most existing End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
 
-> There's a ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. See the [README](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/README.md) of the new E2E tests for the updated guideline and best practices.
+There's an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. **It's recommended to write new e2e tests in Playwright whenever possible**. The sections below mostly apply to the old Jest + Puppeteer framework. See the dedicated [guide](/docs/contributors/code/e2e/README.md) if you're writing tests with Playwright.**
 
 ### Using wp-env
 
diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
index cb23c072e8e4e8..83bb4dc94ab976 100644
--- a/docs/contributors/versions-in-wordpress.md
+++ b/docs/contributors/versions-in-wordpress.md
@@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 13.1-14.1          | 6.1.1             |
 | 13.1-14.1          | 6.1               |
 | 12.0-13.0          | 6.0.3             |
 | 12.0-13.0          | 6.0.2             |
diff --git a/docs/explanations/faq.md b/docs/explanations/faq.md
index 08fcc6cbdce521..f9c6b059e133d9 100644
--- a/docs/explanations/faq.md
+++ b/docs/explanations/faq.md
@@ -270,7 +270,7 @@ This is the canonical list of keyboard shortcuts:
 		</tr>
 		<tr>
 			<td>Remove multiple selected blocks.</td>
-			<td></td>
+			<td><kbd>del</kbd><kbd>backspace</kbd></td>
 			<td><kbd>del</kbd><kbd>backspace</kbd></td>
 		</tr>
 	</tbody>
diff --git a/docs/getting-started/create-block/finishing.md b/docs/getting-started/create-block/finishing.md
index 227e01e212276f..ef8f276d75a57f 100644
--- a/docs/getting-started/create-block/finishing.md
+++ b/docs/getting-started/create-block/finishing.md
@@ -10,7 +10,7 @@ You can visually browse the components and what their implementation looks like
 
 ## Additional Tutorials
 
-The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formating. See the [RichText Reference](/docs/reference-guides/richtext.md) for documentation using this component.
+The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formatting. See the [RichText Reference](/docs/reference-guides/richtext.md) for documentation using this component.
 
 The InspectorPanel (the settings on the right for a block) and Block Controls (toolbar controls) have a standard way to be implemented. See the [Block controls tutorial](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for additional information.
 
diff --git a/docs/getting-started/create-block/submitting-to-block-directory.md b/docs/getting-started/create-block/submitting-to-block-directory.md
index fc32814c364a3d..f898a9d52caaa0 100644
--- a/docs/getting-started/create-block/submitting-to-block-directory.md
+++ b/docs/getting-started/create-block/submitting-to-block-directory.md
@@ -71,7 +71,7 @@ Wondering where to input all this information? Read the next section :)
 
 Each block in your plugin should have a corresponding `block.json` file with the [block metadata](/docs/reference-guides/block-api/block-metadata.md). This file provides the Block Directory important information about your block. Along with being the place to store contextual information about your block like the: `name`, `description`, `keywords` and `category`, the `block.json` file stores the location of your block’s files.
 
-Block plugins submitted to the Block Directory can contain mutliple blocks only if they are children of a single parent/ancestor. There should only be one main block. For example, a list block can contain list-item blocks. Children blocks must set the `parent` property in their `block.json` file.
+Block plugins submitted to the Block Directory can contain multiple blocks only if they are children of a single parent/ancestor. There should only be one main block. For example, a list block can contain list-item blocks. Children blocks must set the `parent` property in their `block.json` file.
 
 Double check that the following is true for your block:
 
diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index ecafeadc0dc370..b755c687cbd646 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -69,7 +69,7 @@ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
 Note: On macOS, the required developer tools are not installed by default, if not already installed you may be prompted to download the install.
 
-<img src="https://developer.wordpress.org/files/2020/07/git-install-prompt.png" alt="Mac git command requies command line developer tools" width="400" height="195"/>
+<img src="https://developer.wordpress.org/files/2020/07/git-install-prompt.png" alt="Mac git command requires command line developer tools" width="400" height="195"/>
 
 After installing nvm, you need to use it to install Node.js, to install v14, run:
 
diff --git a/docs/getting-started/full-site-editing.md b/docs/getting-started/full-site-editing.md
index 3c3e4153cd422c..72d85ec7e13675 100644
--- a/docs/getting-started/full-site-editing.md
+++ b/docs/getting-started/full-site-editing.md
@@ -1,21 +1,21 @@
 # Full Site Editing
 
-At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551): 
+At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551):
 
-- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more. 
-- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses. 
-- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below. 
+- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
+- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.
+- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below.
 - Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications).
-- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block). 
-- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc. 
+- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block).
+- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc.
 - Navigation Block: a new block that allows you to edit a site's navigation menu, both in terms of structure and design.
-- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality. 
+- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality.
 
 There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places.
 
 **Jump in:**
 
-The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/), it is listed in the theme diretory and our development reference theme. You can find other themes in the directory using the [full-site-editing feature tag](https://wordpress.org/themes/tags/full-site-editing/).
+The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/), it is listed in the theme directory and our development reference theme. You can find other themes in the directory using the [full-site-editing feature tag](https://wordpress.org/themes/tags/full-site-editing/).
 
 ## Get Involved
 
diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
index e668a6ac762388..e32054c167ca55 100644
--- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
+++ b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
@@ -162,7 +162,7 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 
 ### Build or add dependency
 
-In order to include the blockEditor as a dependancy, make sure to run the build step, or update the asset php file.
+In order to include the blockEditor as a dependency, make sure to run the build step, or update the asset php file.
 
 {% codetabs %}
 {% JSX %}
@@ -174,7 +174,7 @@ npm run build
 
 {% Plain %}
 
-Edit the asset file to include the block-editor dependancy for the scripts.
+Edit the asset file to include the block-editor dependency for the scripts.
 
 ```php
 <?php return
diff --git a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
index e9d0c50d1d2113..2aa91cd1a067e9 100644
--- a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
+++ b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
@@ -262,7 +262,7 @@ function MyFirstApp() {
 
 Working outside of core-data, we would need to solve two problems here.
 
-Firstly, out-of-order updates. Searching for „About” would trigger five API requests filtering for `A`, `Ab`, `Abo`, `Abou`, and `About`. Theese requests could finish in a different order than they started. It is possible that _search=A_ would resolve after _ search=About_ and thus we’d display the wrong data.
+Firstly, out-of-order updates. Searching for „About” would trigger five API requests filtering for `A`, `Ab`, `Abo`, `Abou`, and `About`. These requests could finish in a different order than they started. It is possible that _search=A_ would resolve after _ search=About_ and thus we’d display the wrong data.
 
 Gutenberg data helps by handling the asynchronous part behind the scenes. `useSelect` remembers the most recent call and returns only the data we expect.
 
diff --git a/docs/how-to-guides/propagating-updates.md b/docs/how-to-guides/propagating-updates.md
index 15b3da96be8ff4..3bb281fe6fdfea 100644
--- a/docs/how-to-guides/propagating-updates.md
+++ b/docs/how-to-guides/propagating-updates.md
@@ -22,7 +22,7 @@ How to manage block updates depends on the nature of the block itself. If the bl
 
 ### Patterns
 
-**For content that you want updated later on, do not use patterns and instead rely on reusable blocks or template parts.** Patterns cannot be updated after you insert one into your site. For context, you can think of Patterns as more like sample/example/starter content. While Patterns exposed in the Inserter might evolve over time, those changes won't be automatically applied to any current useage of the pattern. Once inserted, patterns become completely detached from the original pattern unlike Reusable block or Template Part block.
+**For content that you want updated later on, do not use patterns and instead rely on reusable blocks or template parts.** Patterns cannot be updated after you insert one into your site. For context, you can think of Patterns as more like sample/example/starter content. While Patterns exposed in the Inserter might evolve over time, those changes won't be automatically applied to any current usage of the pattern. Once inserted, patterns become completely detached from the original pattern unlike Reusable block or Template Part block.
 
 If needed, one potential workaround for patterns with custom styles is to add a class name to the wrapping block for a pattern. For example, the following adds a themeslug-special class to a Group block:
 
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index c62ecb3cdbb48d..b6b102d9ffbb5a 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -206,6 +206,7 @@ The settings section has the following structure:
 			"customFontSize": true,
 			"lineHeight": false,
 			"dropCap": true,
+			"fluid": false,
 			"fontStyle": true,
 			"fontWeight": true,
 			"letterSpacing": true,
@@ -278,6 +279,7 @@ The settings section has the following structure:
 		"typography": {
 			"customFontSize": true,
 			"dropCap": true,
+			"fluid": false,
 			"fontFamilies": [],
 			"fontSizes": [],
 			"fontStyle": true,
diff --git a/docs/how-to-guides/widgets/legacy-widget-block.md b/docs/how-to-guides/widgets/legacy-widget-block.md
index e349829acb25c8..80353f5d690658 100644
--- a/docs/how-to-guides/widgets/legacy-widget-block.md
+++ b/docs/how-to-guides/widgets/legacy-widget-block.md
@@ -18,7 +18,7 @@ For example, a widget might want to show a "Password" field when the "Change pas
 
 ```js
 ( function ( $ ) {
-	$( document ).on( 'widget-added', function ( $control ) {
+	$( document ).on( 'widget-added', function ( $event, $control ) {
 		$control.find( '.change-password' ).on( 'change', function () {
 			var isChecked = $( this ).prop( 'checked' );
 			$control.find( '.password' ).toggleClass( 'hidden', ! isChecked );
diff --git a/docs/manifest.json b/docs/manifest.json
index a06df18c6c44b9..fbffcbcfb2fb01 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1268,31 +1268,31 @@
 	{
 		"title": "ToolbarButton",
 		"slug": "toolbar-button",
-		"markdown_source": "../packages/components/src/toolbar-button/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-button/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarDropdownMenu",
 		"slug": "toolbar-dropdown-menu",
-		"markdown_source": "../packages/components/src/toolbar-dropdown-menu/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-dropdown-menu/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarGroup",
 		"slug": "toolbar-group",
-		"markdown_source": "../packages/components/src/toolbar-group/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-group/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarItem",
 		"slug": "toolbar-item",
-		"markdown_source": "../packages/components/src/toolbar-item/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-item/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "Toolbar",
 		"slug": "toolbar",
-		"markdown_source": "../packages/components/src/toolbar/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar/README.md",
 		"parent": "components"
 	},
 	{
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 25fe5746a04122..71c0c1c8b957ff 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -275,7 +275,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** tagName, templateLock
 
 ## Heading
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 0580aa0141b2be..1b9da160f0f6fb 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -556,9 +556,9 @@ _Properties_
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
 -   _frecency_ `number`: Heuristic that combines frequency and recency.
 
-### getLastInsertedBlockClientId
+### getLastInsertedBlocksClientIds
 
-Gets the client id of the last inserted block.
+Gets the client ids of the last inserted blocks.
 
 _Parameters_
 
@@ -566,7 +566,7 @@ _Parameters_
 
 _Returns_
 
--   `string|undefined`: Client Id of the last inserted block.
+-   `Array|undefined`: Client Ids of the last inserted block(s).
 
 ### getLastMultiSelectedBlockClientId
 
diff --git a/gutenberg.php b/gutenberg.php
index af75dfb7463f20..3546a9674f86d9 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.9.0-rc.1
+ * Version: 15.0.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/position.php b/lib/block-supports/position.php
new file mode 100644
index 00000000000000..8d1436049a7e42
--- /dev/null
+++ b/lib/block-supports/position.php
@@ -0,0 +1,143 @@
+<?php
+/**
+ * Position block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the style block attribute for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_position_support( $block_type ) {
+	$has_position_support = block_has_support( $block_type, array( 'position' ), false );
+
+	// Set up attributes and styles within that if needed.
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_position_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+}
+
+/**
+ * Renders position styles to the block wrapper.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_position_support( $block_content, $block ) {
+	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$has_position_support = block_has_support( $block_type, array( 'position' ), false );
+
+	if (
+		! $has_position_support ||
+		empty( $block['attrs']['style']['position'] )
+	) {
+		return $block_content;
+	}
+
+	$global_settings          = gutenberg_get_global_settings();
+	$theme_has_sticky_support = _wp_array_get( $global_settings, array( 'position', 'sticky' ), false );
+	$theme_has_fixed_support  = _wp_array_get( $global_settings, array( 'position', 'fixed' ), false );
+
+	// Only allow output for position types that the theme supports.
+	$allowed_position_types = array();
+	if ( true === $theme_has_sticky_support ) {
+		$allowed_position_types[] = 'sticky';
+	}
+	if ( true === $theme_has_fixed_support ) {
+		$allowed_position_types[] = 'fixed';
+	}
+
+	$style_attribute = _wp_array_get( $block, array( 'attrs', 'style' ), null );
+	$class_name      = wp_unique_id( 'wp-container-' );
+	$selector        = ".$class_name";
+	$position_styles = array();
+	$position_type   = _wp_array_get( $style_attribute, array( 'position', 'type' ), '' );
+
+	if (
+		in_array( $position_type, $allowed_position_types, true )
+	) {
+		$sides = array( 'top', 'right', 'bottom', 'left' );
+
+		foreach ( $sides as $side ) {
+			$side_value = _wp_array_get( $style_attribute, array( 'position', $side ) );
+			if ( null !== $side_value ) {
+				/*
+				* For fixed or sticky top positions,
+				* ensure the value includes an offset for the logged in admin bar.
+				*/
+				if (
+					'top' === $side &&
+					( 'fixed' === $position_type || 'sticky' === $position_type )
+				) {
+					// Ensure 0 values can be used in `calc()` calculations.
+					if ( '0' === $side_value || 0 === $side_value ) {
+						$side_value = '0px';
+					}
+
+					// Ensure current side value also factors in the height of the logged in admin bar.
+					$side_value = "calc($side_value + var(--wp-admin--admin-bar--height, 0px))";
+				}
+
+				$position_styles[] =
+					array(
+						'selector'     => $selector,
+						'declarations' => array(
+							$side => $side_value,
+						),
+					);
+			}
+		}
+
+		$position_styles[] =
+			array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'position' => $position_type,
+					'z-index'  => '10', // TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+				),
+			);
+	}
+
+	if ( ! empty( $position_styles ) ) {
+		/*
+		 * Add to the style engine store to enqueue and render position styles.
+		 */
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$position_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
+		);
+
+		// Inject class name to block container markup.
+		$content = new WP_HTML_Tag_Processor( $block_content );
+		$content->next_tag();
+		$content->add_class( $class_name );
+		return (string) $content;
+	}
+
+	return $block_content;
+}
+
+// Register the block support. (overrides core one).
+WP_Block_Supports::get_instance()->register(
+	'position',
+	array(
+		'register_attribute' => 'gutenberg_register_position_support',
+	)
+);
+
+if ( function_exists( 'wp_render_position_support' ) ) {
+	remove_filter( 'render_block', 'wp_render_position_support' );
+}
+add_filter( 'render_block', 'gutenberg_render_position_support', 10, 2 );
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index ddad36e15fc02d..9acef6006d4e68 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -330,7 +330,7 @@ class WP_Theme_JSON_Gutenberg {
 	 *              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`.
+	 * @since 6.2.0 Added `dimensions.minHeight`, `position.fixed` and `position.sticky`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -369,6 +369,10 @@ class WP_Theme_JSON_Gutenberg {
 			'definitions' => null,
 			'wideSize'    => null,
 		),
+		'position'                      => array(
+			'fixed'  => null,
+			'sticky' => null,
+		),
 		'spacing'                       => array(
 			'customSpacingSize' => null,
 			'spacingSizes'      => null,
@@ -536,6 +540,7 @@ public static function get_element_class_name( $element ) {
 	 * Options that settings.appearanceTools enables.
 	 *
 	 * @since 6.0.0
+	 * @since 6.2.0 Added `position.fixed` and `position.sticky`.
 	 * @var array
 	 */
 	const APPEARANCE_TOOLS_OPT_INS = array(
@@ -545,6 +550,8 @@ public static function get_element_class_name( $element ) {
 		array( 'border', 'width' ),
 		array( 'color', 'link' ),
 		array( 'dimensions', 'minHeight' ),
+		array( 'position', 'fixed' ),
+		array( 'position', 'sticky' ),
 		array( 'spacing', 'blockGap' ),
 		array( 'spacing', 'margin' ),
 		array( 'spacing', 'padding' ),
@@ -713,9 +720,17 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 		$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;
+			// Build the schema for each block style variation.
+			$style_variation_names    = isset( $input['styles']['blocks'][ $block ]['variations'] ) ? array_keys( $input['styles']['blocks'][ $block ]['variations'] ) : array();
+			$schema_styles_variations = array();
+			if ( ! empty( $style_variation_names ) ) {
+				$schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level );
+			}
+
+			$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_blocks[ $block ]['variations'] = $schema_styles_variations;
 		}
 
 		$schema['styles']             = static::VALID_STYLES;
@@ -863,6 +878,16 @@ protected static function get_blocks_metadata() {
 				}
 				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
 			}
+
+			// If the block has style variations, append their selectors to the block metadata.
+			if ( ! empty( $block_type->styles ) ) {
+				$style_selectors = array();
+				foreach ( $block_type->styles as $style ) {
+					// The style variation classname is duplicated in the selector to ensure that it overrides core block styles.
+					$style_selectors[ $style['name'] ] = static::append_to_selector( '.is-style-' . $style['name'] . '.is-style-' . $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+				}
+				static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+			}
 		}
 
 		return static::$blocks_metadata;
@@ -2145,12 +2170,23 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 				$feature_selectors = $selectors[ $name ]['features'];
 			}
 
+			$variation_selectors = array();
+			if ( isset( $node['variations'] ) ) {
+				foreach ( $node['variations'] as $variation => $node ) {
+					$variation_selectors[] = array(
+						'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
+						'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
+					);
+				}
+			}
+
 			$nodes[] = array(
-				'name'     => $name,
-				'path'     => array( 'styles', 'blocks', $name ),
-				'selector' => $selector,
-				'duotone'  => $duotone_selector,
-				'features' => $feature_selectors,
+				'name'       => $name,
+				'path'       => array( 'styles', 'blocks', $name ),
+				'selector'   => $selector,
+				'duotone'    => $duotone_selector,
+				'features'   => $feature_selectors,
+				'variations' => $variation_selectors,
 			);
 
 			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
@@ -2230,6 +2266,49 @@ public function get_styles_for_block( $block_metadata ) {
 			}
 		}
 
+		// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
+		$style_variation_declarations = array();
+		if ( ! empty( $block_metadata['variations'] ) ) {
+			foreach ( $block_metadata['variations'] as $style_variation ) {
+				$style_variation_node     = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
+				$style_variation_selector = $style_variation['selector'];
+
+				// If the block has feature selectors, generate the declarations for them within the current style variation.
+				if ( ! empty( $block_metadata['features'] ) ) {
+					foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
+						if ( ! empty( $style_variation_node[ $feature_name ] ) ) {
+							// Prepend the variation selector to the feature selector.
+							$split_feature_selectors    = explode( ',', $feature_selector );
+							$feature_selectors          = array_map(
+								function( $split_feature_selector ) use ( $style_variation_selector ) {
+									return trim( $style_variation_selector ) . trim( $split_feature_selector );
+								},
+								$split_feature_selectors
+							);
+							$combined_feature_selectors = implode( ',', $feature_selectors );
+
+							// Compute declarations for the feature.
+							$new_feature_declarations = static::compute_style_properties( array( $feature_name => $style_variation_node[ $feature_name ] ), $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( $style_variation_declarations[ $combined_feature_selectors ] ) ) {
+								$style_variation_declarations[ $combined_feature_selectors ] = array_merge( $style_variation_declarations[ $combined_feature_selectors ], $new_feature_declarations );
+							} else {
+								$style_variation_declarations[ $combined_feature_selectors ] = $new_feature_declarations;
+							}
+							// Remove the feature from the variation's node now the
+							// styles will be included under the feature level selector.
+							unset( $style_variation_node[ $feature_name ] );
+						}
+					}
+				}
+				// Compute declarations for remaining styles not covered by feature level selectors.
+				$style_variation_declarations[ $style_variation_selector ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
+			}
+		}
+
 		/*
 		 * Get a reference to element name from path.
 		 * $block_metadata['path'] = array( 'styles','elements','link' );
@@ -2320,6 +2399,11 @@ function( $pseudo_selector ) use ( $selector ) {
 			$block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
 		}
 
+		// 6. Generate and append the style variation rulesets.
+		foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
+			$block_rules .= static::to_ruleset( $style_variation_selector, $individual_style_variation_declarations );
+		}
+
 		return $block_rules;
 	}
 
diff --git a/lib/compat/wordpress-6.2/blocks.php b/lib/compat/wordpress-6.2/blocks.php
new file mode 100644
index 00000000000000..250ed70ff9b98a
--- /dev/null
+++ b/lib/compat/wordpress-6.2/blocks.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Update allowed inline style attributes list.
+ *
+ * Note: This should be removed when the minimum required WP version is >= 6.2.
+ *
+ * @param string[] $attrs Array of allowed CSS attributes.
+ * @return string[] CSS attributes.
+ */
+function gutenberg_safe_style_attrs_6_2( $attrs ) {
+	$attrs[] = 'position';
+	$attrs[] = 'top';
+	$attrs[] = 'right';
+	$attrs[] = 'bottom';
+	$attrs[] = 'left';
+	$attrs[] = 'z-index';
+
+	return $attrs;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_2' );
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 4006b4c23cc0b1..86199807081ecc 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
@@ -66,7 +66,7 @@ function wp_theme_has_theme_json_clean_cache() {
  *                     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'.
+ *                     - for themes with theme.json: 'variables', 'presets', 'styles', 'custom-css'.
  *
  * @return string Stylesheet.
  */
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
index 12f7afda3b4d5d..6161885d020d7c 100644
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -111,8 +111,9 @@ function gutenberg_register_global_styles_endpoints() {
  * @return WP_REST_Response $response Updated response object.
  */
 function gutenberg_modify_rest_sidebars_response( $response ) {
-	$response->data['status'] = wp_is_block_theme() ? 'inactive' : 'active';
-
+	if ( wp_is_block_theme() ) {
+		$response->data['status'] = 'inactive';
+	}
 	return $response;
 }
 add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
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 7031a14e89ccac..d38f73be71d208 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -168,12 +168,6 @@ public function get_item_schema() {
 					'context'     => array( 'mobile' ),
 				),
 
-				'__experimentalBlockInspectorTabs'       => array(
-					'description' => __( 'Block inspector tab display overrides.', 'gutenberg' ),
-					'type'        => 'object',
-					'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',
@@ -204,6 +198,12 @@ public function get_item_schema() {
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
 
+				'blockInspectorTabs'                     => array(
+					'description' => __( 'Block inspector tab display overrides.', 'gutenberg' ),
+					'type'        => 'object',
+					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+				),
+
 				'disableCustomColors'                    => array(
 					'description' => __( 'Disables custom colors.', 'gutenberg' ),
 					'type'        => 'boolean',
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index fbff977cb9fb2d..d5e6393711118f 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -86,9 +86,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
 	}
-	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' );
 	}
diff --git a/lib/experimental/html/class-wp-html-tag-processor.php b/lib/experimental/html/class-wp-html-tag-processor.php
index 0dfa57f30f2aab..9539f0d626e9d6 100644
--- a/lib/experimental/html/class-wp-html-tag-processor.php
+++ b/lib/experimental/html/class-wp-html-tag-processor.php
@@ -1412,6 +1412,49 @@ public function get_attribute( $name ) {
 		return html_entity_decode( $raw_value );
 	}
 
+	/**
+	 * Returns the lowercase names of all attributes matching a given prefix in the currently-opened tag.
+	 *
+	 * Note that matching is case-insensitive. This is in accordance with the spec:
+	 *
+	 * > 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
+	 *
+	 * Example:
+	 * <code>
+	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
+	 *     $p->next_tag( [ 'class_name' => 'test' ] ) === true;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
+	 *
+	 *     $p->next_tag( [] ) === false;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
+	 * </code>
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $prefix Prefix of requested attribute names.
+	 * @return array|null List of attribute names, or `null` if not at a tag.
+	 */
+	function get_attribute_names_with_prefix( $prefix ) {
+		if ( $this->is_closing_tag || null === $this->tag_name_starts_at ) {
+			return null;
+		}
+
+		$comparable = strtolower( $prefix );
+
+		$matches = array();
+		foreach ( array_keys( $this->attributes ) as $attr_name ) {
+			if ( str_starts_with( $attr_name, $comparable ) ) {
+				$matches[] = $attr_name;
+			}
+		}
+		return $matches;
+	}
+
 	/**
 	 * Returns the lowercase name of the currently-opened tag.
 	 *
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 83e926da520e93..ea16a526b7cc5c 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -77,18 +77,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-block-inspector-tabs',
-		__( 'Block inspector tabs ', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test a new block inspector view splitting settings and appearance controls into tabs', 'gutenberg' ),
-			'id'    => 'gutenberg-block-inspector-tabs',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-global-styles-custom-css',
 		__( 'Global styles custom css ', 'gutenberg' ),
diff --git a/lib/load.php b/lib/load.php
index 1b296053965319..83af73adc53d11 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -75,6 +75,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.1/theme.php';
 
 // WordPress 6.2 compat.
+require __DIR__ . '/compat/wordpress-6.2/blocks.php';
 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';
@@ -132,6 +133,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/typography.php';
 require __DIR__ . '/block-supports/border.php';
 require __DIR__ . '/block-supports/layout.php';
+require __DIR__ . '/block-supports/position.php';
 require __DIR__ . '/block-supports/spacing.php';
 require __DIR__ . '/block-supports/dimensions.php';
 require __DIR__ . '/block-supports/duotone.php';
diff --git a/package-lock.json b/package-lock.json
index 942a06240f848c..a22cd922cc6ca3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.9.0-rc.1",
+	"version": "15.0.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -5512,9 +5512,9 @@
 					}
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -7236,9 +7236,9 @@
 					"dev": true
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -7421,9 +7421,9 @@
 					}
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -7524,9 +7524,9 @@
 					"dev": true
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -8405,14 +8405,6 @@
 						"resolve-from": "^3.0.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"parse-json": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -8791,14 +8783,6 @@
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"pump": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -8943,14 +8927,6 @@
 					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
 					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"onetime": {
 					"version": "5.1.2",
 					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -10113,15 +10089,6 @@
 					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
 					"dev": true
 				},
-				"qs": {
-					"version": "6.10.1",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
-					"integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
 				"resolve-from": {
 					"version": "5.0.0",
 					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -10132,7 +10099,6 @@
 					"version": "1.0.4",
 					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
 					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
 					"requires": {
 						"call-bind": "^1.0.0",
 						"get-intrinsic": "^1.0.2",
@@ -10761,17 +10727,6 @@
 						"minimatch": "^3.1.1",
 						"once": "^1.3.0",
 						"path-is-absolute": "^1.0.0"
-					},
-					"dependencies": {
-						"minimatch": {
-							"version": "3.1.2",
-							"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-							"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-							"dev": true,
-							"requires": {
-								"brace-expansion": "^1.1.7"
-							}
-						}
 					}
 				},
 				"graceful-fs": {
@@ -10842,18 +10797,18 @@
 					}
 				},
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -11019,15 +10974,15 @@
 					},
 					"dependencies": {
 						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+							"version": "2.2.3",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+							"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
 							"dev": true
 						},
 						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+							"version": "2.0.4",
+							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+							"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
 							"dev": true,
 							"requires": {
 								"big.js": "^5.2.2",
@@ -11183,15 +11138,15 @@
 					},
 					"dependencies": {
 						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+							"version": "2.2.3",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+							"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
 							"dev": true
 						},
 						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+							"version": "2.0.4",
+							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+							"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
 							"dev": true,
 							"requires": {
 								"big.js": "^5.2.2",
@@ -11675,15 +11630,6 @@
 						"p-locate": "^4.1.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"p-limit": {
 					"version": "2.3.0",
 					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -11805,15 +11751,6 @@
 					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
 					"dev": true
 				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
 				"telejson": {
 					"version": "6.0.8",
 					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
@@ -11951,15 +11888,6 @@
 					"requires": {
 						"lodash": "^4.17.15"
 					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
 				}
 			}
 		},
@@ -12019,15 +11947,6 @@
 					"integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==",
 					"dev": true
 				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
 				"react-syntax-highlighter": {
 					"version": "15.5.0",
 					"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -12108,15 +12027,6 @@
 					"requires": {
 						"lodash": "^4.17.15"
 					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
 				}
 			}
 		},
@@ -12389,9 +12299,9 @@
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -12400,9 +12310,9 @@
 					},
 					"dependencies": {
 						"json5": {
-							"version": "1.0.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-							"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+							"version": "1.0.2",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+							"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 							"dev": true,
 							"requires": {
 								"minimist": "^1.2.0"
@@ -12419,15 +12329,6 @@
 						"p-locate": "^4.1.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"mkdirp": {
 					"version": "0.5.6",
 					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -12897,9 +12798,9 @@
 					"dev": true
 				},
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
@@ -12916,9 +12817,9 @@
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -13814,9 +13715,9 @@
 					"dev": true
 				},
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
@@ -13833,9 +13734,9 @@
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -13876,15 +13777,6 @@
 					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
 					"dev": true
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"minipass": {
 					"version": "3.1.6",
 					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
@@ -14171,15 +14063,15 @@
 					},
 					"dependencies": {
 						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+							"version": "2.2.3",
+							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+							"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
 							"dev": true
 						},
 						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+							"version": "2.0.4",
+							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+							"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
 							"dev": true,
 							"requires": {
 								"big.js": "^5.2.2",
@@ -15029,15 +14921,6 @@
 					"requires": {
 						"lodash": "^4.17.15"
 					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
 				}
 			}
 		},
@@ -20753,7 +20636,6 @@
 					"version": "1.3.7",
 					"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
 					"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-					"dev": true,
 					"requires": {
 						"mime-types": "~2.1.24",
 						"negotiator": "0.6.2"
@@ -22507,8 +22389,7 @@
 				"array-flatten": {
 					"version": "1.1.1",
 					"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-					"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-					"dev": true
+					"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
 				},
 				"asn1": {
 					"version": "0.2.4",
@@ -22665,8 +22546,7 @@
 				"balanced-match": {
 					"version": "1.0.2",
 					"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-					"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-					"dev": true
+					"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 				},
 				"base64-js": {
 					"version": "1.5.1",
@@ -22784,7 +22664,6 @@
 					"version": "1.1.11",
 					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 					"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-					"dev": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -23096,8 +22975,7 @@
 				"concat-map": {
 					"version": "0.0.1",
 					"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-					"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-					"dev": true
+					"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
@@ -23109,7 +22987,6 @@
 					"version": "0.5.3",
 					"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
 					"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-					"dev": true,
 					"requires": {
 						"safe-buffer": "5.1.2"
 					}
@@ -23133,14 +23010,12 @@
 				"cookie": {
 					"version": "0.4.0",
 					"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-					"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-					"dev": true
+					"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
 				},
 				"cookie-signature": {
 					"version": "1.0.6",
 					"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-					"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-					"dev": true
+					"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
 				},
 				"core-js": {
 					"version": "2.6.12",
@@ -23314,14 +23189,12 @@
 				"depd": {
 					"version": "1.1.2",
 					"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-					"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-					"dev": true
+					"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
 				},
 				"destroy": {
 					"version": "1.0.4",
 					"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-					"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-					"dev": true
+					"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
 				},
 				"devtools": {
 					"version": "6.12.1",
@@ -23381,8 +23254,7 @@
 				"ee-first": {
 					"version": "1.1.1",
 					"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-					"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-					"dev": true
+					"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
 				},
 				"emitter-listener": {
 					"version": "1.1.2",
@@ -23408,8 +23280,7 @@
 				"encodeurl": {
 					"version": "1.0.2",
 					"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-					"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-					"dev": true
+					"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
 				},
 				"end-of-stream": {
 					"version": "1.4.4",
@@ -23444,8 +23315,7 @@
 				"escape-html": {
 					"version": "1.0.3",
 					"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-					"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-					"dev": true
+					"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
 				},
 				"escape-string-regexp": {
 					"version": "1.0.5",
@@ -23456,8 +23326,7 @@
 				"etag": {
 					"version": "1.8.1",
 					"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-					"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-					"dev": true
+					"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
 				},
 				"eventemitter3": {
 					"version": "3.1.2",
@@ -23503,61 +23372,6 @@
 					"integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
 					"dev": true
 				},
-				"express": {
-					"version": "4.17.1",
-					"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-					"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-					"dev": true,
-					"requires": {
-						"accepts": "~1.3.7",
-						"array-flatten": "1.1.1",
-						"body-parser": "1.19.0",
-						"content-disposition": "0.5.3",
-						"content-type": "~1.0.4",
-						"cookie": "0.4.0",
-						"cookie-signature": "1.0.6",
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"etag": "~1.8.1",
-						"finalhandler": "~1.1.2",
-						"fresh": "0.5.2",
-						"merge-descriptors": "1.0.1",
-						"methods": "~1.1.2",
-						"on-finished": "~2.3.0",
-						"parseurl": "~1.3.3",
-						"path-to-regexp": "0.1.7",
-						"proxy-addr": "~2.0.5",
-						"qs": "6.7.0",
-						"range-parser": "~1.2.1",
-						"safe-buffer": "5.1.2",
-						"send": "0.17.1",
-						"serve-static": "1.14.1",
-						"setprototypeof": "1.1.1",
-						"statuses": "~1.5.0",
-						"type-is": "~1.6.18",
-						"utils-merge": "1.0.1",
-						"vary": "~1.1.2"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
 				"extend": {
 					"version": "3.0.2",
 					"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -23648,7 +23462,6 @@
 					"version": "1.1.2",
 					"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
 					"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-					"dev": true,
 					"requires": {
 						"debug": "2.6.9",
 						"encodeurl": "~1.0.2",
@@ -23663,7 +23476,6 @@
 							"version": "2.6.9",
 							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
 							"requires": {
 								"ms": "2.0.0"
 							}
@@ -23671,8 +23483,7 @@
 						"ms": {
 							"version": "2.0.0",
 							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
+							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
 						}
 					}
 				},
@@ -23724,14 +23535,12 @@
 				"forwarded": {
 					"version": "0.2.0",
 					"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-					"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-					"dev": true
+					"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
 				},
 				"fresh": {
 					"version": "0.5.2",
 					"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-					"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-					"dev": true
+					"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
 				},
 				"fs-constants": {
 					"version": "1.0.0",
@@ -23959,7 +23768,6 @@
 					"version": "1.7.2",
 					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
 					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
 					"requires": {
 						"depd": "~1.1.2",
 						"inherits": "2.0.3",
@@ -23971,8 +23779,7 @@
 						"inherits": {
 							"version": "2.0.3",
 							"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-							"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-							"dev": true
+							"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
 						}
 					}
 				},
@@ -24083,8 +23890,7 @@
 				"ipaddr.js": {
 					"version": "1.9.1",
 					"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-					"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-					"dev": true
+					"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
 				},
 				"is-arrayish": {
 					"version": "0.3.2",
@@ -24618,8 +24424,7 @@
 				"merge-descriptors": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-					"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-					"dev": true
+					"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
 				},
 				"method-override": {
 					"version": "3.0.0",
@@ -24659,20 +24464,17 @@
 				"mime": {
 					"version": "1.6.0",
 					"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-					"dev": true
+					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
 				},
 				"mime-db": {
 					"version": "1.48.0",
 					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-					"integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
-					"dev": true
+					"integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ=="
 				},
 				"mime-types": {
 					"version": "2.1.31",
 					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
 					"integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
-					"dev": true,
 					"requires": {
 						"mime-db": "1.48.0"
 					}
@@ -24698,15 +24500,6 @@
 						"dom-walk": "^0.1.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-					"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"minimist": {
 					"version": "1.2.5",
 					"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
@@ -24835,8 +24628,7 @@
 				"negotiator": {
 					"version": "0.6.2",
 					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-					"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-					"dev": true
+					"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
 				},
 				"nice-try": {
 					"version": "1.0.5",
@@ -24936,7 +24728,6 @@
 					"version": "2.3.0",
 					"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
 					"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-					"dev": true,
 					"requires": {
 						"ee-first": "1.1.1"
 					}
@@ -25079,8 +24870,7 @@
 				"parseurl": {
 					"version": "1.3.3",
 					"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-					"dev": true
+					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
 				},
 				"path-exists": {
 					"version": "4.0.0",
@@ -25109,8 +24899,7 @@
 				"path-to-regexp": {
 					"version": "0.1.7",
 					"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-					"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-					"dev": true
+					"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
 				},
 				"pem": {
 					"version": "1.14.4",
@@ -25288,7 +25077,6 @@
 					"version": "2.0.7",
 					"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
 					"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-					"dev": true,
 					"requires": {
 						"forwarded": "0.2.0",
 						"ipaddr.js": "1.9.1"
@@ -25357,8 +25145,7 @@
 				"range-parser": {
 					"version": "1.2.1",
 					"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-					"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-					"dev": true
+					"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
 				},
 				"raw-body": {
 					"version": "2.4.0",
@@ -25447,9 +25234,9 @@
 							}
 						},
 						"qs": {
-							"version": "6.5.2",
-							"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-							"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+							"version": "6.5.3",
+							"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+							"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
 							"dev": true
 						},
 						"uuid": {
@@ -25583,8 +25370,7 @@
 				"safe-buffer": {
 					"version": "5.1.2",
 					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-					"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-					"dev": true
+					"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -25643,7 +25429,6 @@
 					"version": "0.17.1",
 					"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
 					"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-					"dev": true,
 					"requires": {
 						"debug": "2.6.9",
 						"depd": "~1.1.2",
@@ -25664,7 +25449,6 @@
 							"version": "2.6.9",
 							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
 							"requires": {
 								"ms": "2.0.0"
 							},
@@ -25672,16 +25456,14 @@
 								"ms": {
 									"version": "2.0.0",
 									"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-									"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-									"dev": true
+									"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
 								}
 							}
 						},
 						"ms": {
 							"version": "2.1.1",
 							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-							"dev": true
+							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
 						}
 					}
 				},
@@ -25725,7 +25507,6 @@
 					"version": "1.14.1",
 					"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
 					"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-					"dev": true,
 					"requires": {
 						"encodeurl": "~1.0.2",
 						"escape-html": "~1.0.3",
@@ -25748,8 +25529,7 @@
 				"setprototypeof": {
 					"version": "1.1.1",
 					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
+					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
 				},
 				"shared-preferences-builder": {
 					"version": "0.0.4",
@@ -25864,8 +25644,7 @@
 				"statuses": {
 					"version": "1.5.0",
 					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
+					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
 				},
 				"stealthy-require": {
 					"version": "1.1.1",
@@ -26014,8 +25793,7 @@
 				"toidentifier": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-					"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-					"dev": true
+					"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
 				},
 				"tough-cookie": {
 					"version": "2.5.0",
@@ -26110,8 +25888,7 @@
 				"unpipe": {
 					"version": "1.0.0",
 					"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-					"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-					"dev": true
+					"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
 				},
 				"uri-js": {
 					"version": "4.4.1",
@@ -26163,8 +25940,7 @@
 				"utils-merge": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-					"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-					"dev": true
+					"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
 				},
 				"uuid": {
 					"version": "8.3.2",
@@ -28281,18 +28057,18 @@
 					}
 				},
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -28980,75 +28756,6 @@
 			"integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==",
 			"dev": true
 		},
-		"body-parser": {
-			"version": "1.19.0",
-			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-			"integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-			"dev": true,
-			"requires": {
-				"bytes": "3.1.0",
-				"content-type": "~1.0.4",
-				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"http-errors": "1.7.2",
-				"iconv-lite": "0.4.24",
-				"on-finished": "~2.3.0",
-				"qs": "6.7.0",
-				"raw-body": "2.4.0",
-				"type-is": "~1.6.17"
-			},
-			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"http-errors": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				},
-				"qs": {
-					"version": "6.7.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-					"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-					"dev": true
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
-				}
-			}
-		},
 		"body-scroll-lock": {
 			"version": "3.1.5",
 			"resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
@@ -29432,12 +29139,6 @@
 			"integrity": "sha512-crQdqyCwhokxwV1UyDzLZanhkugAgft7vt0qbbdt60C6Zf3CAiGmtUCylbtYwrU6loOUw3euGrNtW1J651ot1A==",
 			"dev": true
 		},
-		"bytes": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-			"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-			"dev": true
-		},
 		"c8": {
 			"version": "7.11.3",
 			"resolved": "https://registry.npmjs.org/c8/-/c8-7.11.3.tgz",
@@ -29661,7 +29362,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
 			"integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
-			"dev": true,
 			"requires": {
 				"function-bind": "^1.1.1",
 				"get-intrinsic": "^1.0.0"
@@ -30923,15 +30623,6 @@
 			"integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
 			"dev": true
 		},
-		"content-disposition": {
-			"version": "0.5.3",
-			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-			"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-			"dev": true,
-			"requires": {
-				"safe-buffer": "5.1.2"
-			}
-		},
 		"content-type": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
@@ -31261,12 +30952,6 @@
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
 			"integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU="
 		},
-		"cookie": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-			"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-			"dev": true
-		},
 		"cookie-signature": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -31476,18 +31161,18 @@
 			},
 			"dependencies": {
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
 					}
 				},
 				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
+					"version": "1.4.2",
+					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+					"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
 					"dev": true,
 					"requires": {
 						"big.js": "^5.2.2",
@@ -32270,9 +31955,9 @@
 			"dev": true
 		},
 		"decode-uri-component": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-			"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+			"integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
 		},
 		"decompress-response": {
 			"version": "6.0.0",
@@ -32685,12 +32370,6 @@
 				"minimalistic-assert": "^1.0.0"
 			}
 		},
-		"destroy": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-			"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-			"dev": true
-		},
 		"detab": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/detab/-/detab-2.0.4.tgz",
@@ -35361,53 +35040,95 @@
 			"dev": true
 		},
 		"express": {
-			"version": "4.17.1",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-			"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+			"version": "4.18.2",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+			"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
 			"dev": true,
 			"requires": {
-				"accepts": "~1.3.7",
+				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
-				"body-parser": "1.19.0",
-				"content-disposition": "0.5.3",
+				"body-parser": "1.20.1",
+				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
-				"cookie": "0.4.0",
+				"cookie": "0.5.0",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
-				"depd": "~1.1.2",
+				"depd": "2.0.0",
 				"encodeurl": "~1.0.2",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
-				"finalhandler": "~1.1.2",
+				"finalhandler": "1.2.0",
 				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
 				"merge-descriptors": "1.0.1",
 				"methods": "~1.1.2",
-				"on-finished": "~2.3.0",
+				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
 				"path-to-regexp": "0.1.7",
-				"proxy-addr": "~2.0.5",
-				"qs": "6.7.0",
+				"proxy-addr": "~2.0.7",
+				"qs": "6.11.0",
 				"range-parser": "~1.2.1",
-				"safe-buffer": "5.1.2",
-				"send": "0.17.1",
-				"serve-static": "1.14.1",
-				"setprototypeof": "1.1.1",
-				"statuses": "~1.5.0",
+				"safe-buffer": "5.2.1",
+				"send": "0.18.0",
+				"serve-static": "1.15.0",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
 				"type-is": "~1.6.18",
 				"utils-merge": "1.0.1",
 				"vary": "~1.1.2"
 			},
 			"dependencies": {
 				"accepts": {
-					"version": "1.3.7",
-					"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-					"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+					"version": "1.3.8",
+					"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+					"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
 					"dev": true,
 					"requires": {
-						"mime-types": "~2.1.24",
-						"negotiator": "0.6.2"
+						"mime-types": "~2.1.34",
+						"negotiator": "0.6.3"
+					}
+				},
+				"body-parser": {
+					"version": "1.20.1",
+					"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+					"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+					"dev": true,
+					"requires": {
+						"bytes": "3.1.2",
+						"content-type": "~1.0.4",
+						"debug": "2.6.9",
+						"depd": "2.0.0",
+						"destroy": "1.2.0",
+						"http-errors": "2.0.0",
+						"iconv-lite": "0.4.24",
+						"on-finished": "2.4.1",
+						"qs": "6.11.0",
+						"raw-body": "2.5.1",
+						"type-is": "~1.6.18",
+						"unpipe": "1.0.0"
+					}
+				},
+				"bytes": {
+					"version": "3.1.2",
+					"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+					"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+					"dev": true
+				},
+				"content-disposition": {
+					"version": "0.5.4",
+					"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+					"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+					"dev": true,
+					"requires": {
+						"safe-buffer": "5.2.1"
 					}
 				},
+				"cookie": {
+					"version": "0.5.0",
+					"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+					"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+					"dev": true
+				},
 				"debug": {
 					"version": "2.6.9",
 					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -35417,121 +35138,110 @@
 						"ms": "2.0.0"
 					}
 				},
-				"http-errors": {
-					"version": "1.7.3",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-					"integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+				"depd": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+					"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+					"dev": true
+				},
+				"destroy": {
+					"version": "1.2.0",
+					"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+					"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+					"dev": true
+				},
+				"finalhandler": {
+					"version": "1.2.0",
+					"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+					"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
 					"dev": true,
 					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.4",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
+						"debug": "2.6.9",
+						"encodeurl": "~1.0.2",
+						"escape-html": "~1.0.3",
+						"on-finished": "2.4.1",
+						"parseurl": "~1.3.3",
+						"statuses": "2.0.1",
+						"unpipe": "~1.0.0"
 					}
 				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+				"forwarded": {
+					"version": "0.2.0",
+					"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+					"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
 					"dev": true
 				},
-				"mime": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-					"dev": true
+				"iconv-lite": {
+					"version": "0.4.24",
+					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+					"dev": true,
+					"requires": {
+						"safer-buffer": ">= 2.1.2 < 3"
+					}
 				},
 				"mime-db": {
-					"version": "1.43.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-					"integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
+					"version": "1.52.0",
+					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+					"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
 					"dev": true
 				},
 				"mime-types": {
-					"version": "2.1.26",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-					"integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
+					"version": "2.1.35",
+					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+					"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
 					"dev": true,
 					"requires": {
-						"mime-db": "1.43.0"
+						"mime-db": "1.52.0"
 					}
 				},
 				"negotiator": {
-					"version": "0.6.2",
-					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-					"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-					"dev": true
-				},
-				"parseurl": {
-					"version": "1.3.3",
-					"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-					"dev": true
-				},
-				"qs": {
-					"version": "6.7.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-					"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+					"version": "0.6.3",
+					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+					"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
 					"dev": true
 				},
-				"range-parser": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-					"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-					"dev": true
+				"on-finished": {
+					"version": "2.4.1",
+					"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+					"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+					"dev": true,
+					"requires": {
+						"ee-first": "1.1.1"
+					}
 				},
-				"send": {
-					"version": "0.17.1",
-					"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-					"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+				"proxy-addr": {
+					"version": "2.0.7",
+					"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+					"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
 					"dev": true,
 					"requires": {
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"destroy": "~1.0.4",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"etag": "~1.8.1",
-						"fresh": "0.5.2",
-						"http-errors": "~1.7.2",
-						"mime": "1.6.0",
-						"ms": "2.1.1",
-						"on-finished": "~2.3.0",
-						"range-parser": "~1.2.1",
-						"statuses": "~1.5.0"
-					},
-					"dependencies": {
-						"ms": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-							"dev": true
-						}
+						"forwarded": "0.2.0",
+						"ipaddr.js": "1.9.1"
 					}
 				},
-				"serve-static": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-					"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+				"raw-body": {
+					"version": "2.5.1",
+					"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+					"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
 					"dev": true,
 					"requires": {
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"parseurl": "~1.3.3",
-						"send": "0.17.1"
+						"bytes": "3.1.2",
+						"http-errors": "2.0.0",
+						"iconv-lite": "0.4.24",
+						"unpipe": "1.0.0"
 					}
 				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
+				"safe-buffer": {
+					"version": "5.2.1",
+					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+					"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
 					"dev": true
 				},
 				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+					"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
 					"dev": true
 				}
 			}
@@ -36457,17 +36167,6 @@
 						"minimatch": "^3.1.1",
 						"once": "^1.3.0",
 						"path-is-absolute": "^1.0.0"
-					},
-					"dependencies": {
-						"minimatch": {
-							"version": "3.1.2",
-							"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-							"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-							"dev": true,
-							"requires": {
-								"brace-expansion": "^1.1.7"
-							}
-						}
 					}
 				},
 				"graceful-fs": {
@@ -36539,12 +36238,6 @@
 			"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
 			"dev": true
 		},
-		"forwarded": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-			"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
-			"dev": true
-		},
 		"fraction.js": {
 			"version": "4.0.13",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
@@ -36966,7 +36659,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
 			"integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
-			"dev": true,
 			"requires": {
 				"function-bind": "^1.1.1",
 				"has": "^1.0.3",
@@ -36976,8 +36668,7 @@
 				"has-symbols": {
 					"version": "1.0.1",
 					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
+					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
 				}
 			}
 		},
@@ -43252,14 +42943,6 @@
 					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"rimraf": {
 					"version": "2.6.3",
 					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -43522,12 +43205,9 @@
 			"dev": true
 		},
 		"json5": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-			"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-			"requires": {
-				"minimist": "^1.2.5"
-			}
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
 		},
 		"jsonc-parser": {
 			"version": "3.0.0",
@@ -44565,9 +44245,9 @@
 			"dev": true
 		},
 		"loader-utils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-			"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+			"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
 			"dev": true,
 			"requires": {
 				"big.js": "^5.2.2",
@@ -45017,9 +44697,9 @@
 					"dev": true
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -46050,14 +45730,6 @@
 						"mime-db": "1.52.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"normalize-path": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -46251,14 +45923,6 @@
 						"path-is-absolute": "^1.0.0"
 					}
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"rimraf": {
 					"version": "2.7.1",
 					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -47005,9 +46669,9 @@
 			"dev": true
 		},
 		"minimatch": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-			"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 			"requires": {
 				"brace-expansion": "^1.1.7"
 			}
@@ -47620,15 +47284,6 @@
 					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
 					"dev": true
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
 				"which": {
 					"version": "2.0.2",
 					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -48850,8 +48505,7 @@
 		"object-inspect": {
 			"version": "1.10.3",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-			"integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-			"dev": true
+			"integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw=="
 		},
 		"object-is": {
 			"version": "1.1.5",
@@ -50140,9 +49794,9 @@
 					"dev": true
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -52045,16 +51699,6 @@
 			"integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
 			"dev": true
 		},
-		"proxy-addr": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-			"integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
-			"dev": true,
-			"requires": {
-				"forwarded": "~0.1.2",
-				"ipaddr.js": "1.9.1"
-			}
-		},
 		"proxy-compare": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
@@ -52331,10 +51975,13 @@
 			"dev": true
 		},
 		"qs": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-			"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-			"dev": true
+			"version": "6.11.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+			"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+			"dev": true,
+			"requires": {
+				"side-channel": "^1.0.4"
+			}
 		},
 		"query-string": {
 			"version": "6.14.1",
@@ -52394,54 +52041,6 @@
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
 			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
 		},
-		"raw-body": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-			"integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-			"dev": true,
-			"requires": {
-				"bytes": "3.1.0",
-				"http-errors": "1.7.2",
-				"iconv-lite": "0.4.24",
-				"unpipe": "1.0.0"
-			},
-			"dependencies": {
-				"http-errors": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
-				}
-			}
-		},
 		"raw-loader": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
@@ -53736,9 +53335,9 @@
 					"dev": true
 				},
 				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.2.tgz",
+					"integrity": "sha512-bNH9mmM9qsJ2X4r2Nat1B//1dJVcn3+iBLa3IgqJ7EbGaDNepL9QSHOxN4ng33s52VMMhhIfgCYDk3C4ZmlDAg==",
 					"dev": true,
 					"requires": {
 						"brace-expansion": "^2.0.1"
@@ -54863,6 +54462,12 @@
 						"mime-db": "1.40.0"
 					}
 				},
+				"qs": {
+					"version": "6.5.3",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+					"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+					"dev": true
+				},
 				"uuid": {
 					"version": "3.4.0",
 					"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
@@ -59734,12 +59339,6 @@
 			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
 			"dev": true
 		},
-		"toidentifier": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-			"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-			"dev": true
-		},
 		"totalist": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
@@ -59852,9 +59451,9 @@
 			},
 			"dependencies": {
 				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+					"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
 					"dev": true,
 					"requires": {
 						"minimist": "^1.2.0"
@@ -60438,14 +60037,6 @@
 					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 					"dev": true
 				},
-				"json5": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-					"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-					"requires": {
-						"minimist": "^1.2.5"
-					}
-				},
 				"mime-db": {
 					"version": "1.45.0",
 					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
diff --git a/package.json b/package.json
index 0c66c6acc2acb8..d67ea9e69835b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.9.0-rc.1",
+	"version": "15.0.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -308,6 +308,7 @@
 		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
 		"test:unit:date": "bash ./bin/unit-test-date.sh",
 		"test:unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
+		"test:unit:profile": "wp-scripts --cpu-prof test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
 		"pretest:unit:php": "wp-env start",
 		"test:unit:php": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist --verbose",
 		"pretest:unit:php:multisite": "wp-env start",
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index d7c7842bdfd248..28f3a14ac1d950 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -183,6 +183,7 @@ $z-layers: (
 	".edit-site-layout__header": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
+	".edit-site-layout__canvas-container.is-resizing::after": 100,
 );
 
 @function z-index( $key ) {
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index c639ee59422cd7..111d8c6ada2bb5 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `BlockInspector`: Fix browser warning error when block is not selected ([#46875](https://github.com/WordPress/gutenberg/pull/46875)).
+
 ## 11.1.0 (2023-01-02)
 
 ## 11.0.0 (2022-12-14)
@@ -14,6 +18,7 @@
 
 -   `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)).
+-   `URLInput`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([46692](https://github.com/WordPress/gutenberg/pull/46692)).
 
 ### Bug Fix
 
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
index f94f16e9256283..a7fe38245e5ac5 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import { useNotifyCopy } from '../copy-handler';
+import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockActions( {
@@ -60,6 +61,7 @@ export default function BlockActions( {
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
+	const pasteStyles = usePasteStyles();
 
 	return children( {
 		canDuplicate,
@@ -128,5 +130,8 @@ export default function BlockActions( {
 			}
 			notifyCopy( 'copy', selectedBlockClientIds );
 		},
+		async onPasteStyles() {
+			await pasteStyles( blocks );
+		},
 	} );
 }
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 3e2aebb5d500a5..147d28173a7e3a 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -35,6 +35,7 @@ import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
+import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -177,7 +178,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 
 	const blockInspectorAnimationSettings = useSelect(
 		( select ) => {
-			if ( isOffCanvasNavigationEditorEnabled ) {
+			if ( isOffCanvasNavigationEditorEnabled && blockType ) {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
 						.__experimentalBlockInspectorAnimation;
@@ -377,6 +378,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						__experimentalGroup="border"
 						label={ __( 'Border' ) }
 					/>
+					<PositionControls />
 					<div>
 						<AdvancedControls />
 					</div>
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 587a264f407ca4..fb763ed466629c 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -33,11 +33,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets, duotone } = useSelect( ( select ) => {
+	const { styles, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
 			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
@@ -49,7 +48,7 @@ function ScaledBlockPreview( {
 				...styles,
 				...__experimentalStyles,
 				{
-					css: 'body{height:auto;overflow:hidden;}',
+					css: 'body{height:auto;overflow:hidden;border:none;}',
 					__unstableType: 'presets',
 				},
 			];
@@ -79,7 +78,6 @@ function ScaledBlockPreview( {
 		>
 			<Iframe
 				head={ <EditorStyles styles={ editorStyles } /> }
-				assets={ assets }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 9ebc961440f7a5..def097313e48fe 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -209,6 +209,7 @@ export function BlockSettingsDropdown( {
 				onInsertBefore,
 				onRemove,
 				onCopy,
+				onPasteStyles,
 				onMoveTo,
 				blocks,
 			} ) => (
@@ -262,6 +263,9 @@ export function BlockSettingsDropdown( {
 									blocks={ blocks }
 									onCopy={ onCopy }
 								/>
+								<MenuItem onClick={ onPasteStyles }>
+									{ __( 'Paste styles' ) }
+								</MenuItem>
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a4c45dea8c14e1..7b9cbc72691985 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -14,6 +14,7 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,7 +65,9 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
+					const buttonText = style.isDefault
+						? __( 'Default' )
+						: style.label || style.name;
 
 					return (
 						<Button
diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
index d218b1104139cf..f99323dd5c80a7 100644
--- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
+++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
@@ -3,13 +3,20 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
+import {
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { hasStickyOrFixedPositionValue } from '../../hooks/position';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -40,28 +47,50 @@ const RESTRICTED_HEIGHT_PROPS = {
  *
  * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
  * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {Element} scrollContainer      The scrollable container for the contentElement.
  * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.
  *
  * @return {Object} The popover props used to determine the position of the toolbar.
  */
-function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+function getProps(
+	contentElement,
+	selectedBlockElement,
+	scrollContainer,
+	toolbarHeight,
+	isSticky
+) {
 	if ( ! contentElement || ! selectedBlockElement ) {
 		return DEFAULT_PROPS;
 	}
 
+	// Get how far the content area has been scrolled.
+	const scrollTop = scrollContainer?.scrollTop || 0;
+
 	const blockRect = selectedBlockElement.getBoundingClientRect();
 	const contentRect = contentElement.getBoundingClientRect();
 
+	// Get the vertical position of top of the visible content area.
+	const topOfContentElementInViewport = scrollTop + contentRect.top;
+
 	// The document element's clientHeight represents the viewport height.
 	const viewportHeight =
 		contentElement.ownerDocument.documentElement.clientHeight;
 
-	const hasSpaceForToolbarAbove =
-		blockRect.top - contentRect.top > toolbarHeight;
+	// The restricted height area is calculated as the sum of the
+	// vertical position of the visible content area, plus the height
+	// of the block toolbar.
+	const restrictedTopArea = topOfContentElementInViewport + toolbarHeight;
+	const hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;
+
 	const isBlockTallerThanViewport =
 		blockRect.height > viewportHeight - toolbarHeight;
 
-	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
+	// Sticky blocks are treated as if they will never have enough space for the toolbar above.
+	if (
+		! isSticky &&
+		( hasSpaceForToolbarAbove || isBlockTallerThanViewport )
+	) {
 		return DEFAULT_PROPS;
 	}
 
@@ -83,13 +112,34 @@ export default function useBlockToolbarPopoverProps( {
 } ) {
 	const selectedBlockElement = useBlockElement( clientId );
 	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
-	const [ props, setProps ] = useState( () =>
-		getProps( contentElement, selectedBlockElement, toolbarHeight )
-	);
-	const blockIndex = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+	const { blockIndex, isSticky } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockAttributes } =
+				select( blockEditorStore );
+			return {
+				blockIndex: getBlockIndex( clientId ),
+				isSticky: hasStickyOrFixedPositionValue(
+					getBlockAttributes( clientId )
+				),
+			};
+		},
 		[ clientId ]
 	);
+	const scrollContainer = useMemo( () => {
+		if ( ! contentElement ) {
+			return;
+		}
+		return getScrollContainer( contentElement );
+	}, [ contentElement ] );
+	const [ props, setProps ] = useState( () =>
+		getProps(
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky
+		)
+	);
 
 	const popoverRef = useRefEffect( ( popoverNode ) => {
 		setToolbarHeight( popoverNode.offsetHeight );
@@ -98,9 +148,15 @@ export default function useBlockToolbarPopoverProps( {
 	const updateProps = useCallback(
 		() =>
 			setProps(
-				getProps( contentElement, selectedBlockElement, toolbarHeight )
+				getProps(
+					contentElement,
+					selectedBlockElement,
+					scrollContainer,
+					toolbarHeight,
+					isSticky
+				)
 			),
-		[ contentElement, selectedBlockElement, toolbarHeight ]
+		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
 	);
 
 	// Update props when the block is moved. This also ensures the props are
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/content.scss
similarity index 100%
rename from packages/block-editor/src/components/button-block-appender/style.scss
rename to packages/block-editor/src/components/button-block-appender/content.scss
diff --git a/packages/block-editor/src/components/default-style-picker/index.js b/packages/block-editor/src/components/default-style-picker/index.js
index 4d4bbaac6a259c..0f3190a7a24f72 100644
--- a/packages/block-editor/src/components/default-style-picker/index.js
+++ b/packages/block-editor/src/components/default-style-picker/index.js
@@ -58,6 +58,7 @@ export default function DefaultStylePicker( { blockName } ) {
 		onUpdatePreferredStyleVariations && (
 			<div className="default-style-picker__default-switcher">
 				<SelectControl
+					__nextHasNoMarginBottom
 					options={ selectOptions }
 					value={ preferredStyle || '' }
 					label={ __( 'Default Style' ) }
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 380ea5a3dc0c5c..50f3ea77828170 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,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pickBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -160,35 +155,40 @@ export default ( ...fontSizeNames ) => {
 						}
 
 						const newState = Object.entries(
-							pickBy(
-								fontSizeAttributeNames,
-								didAttributesChange
+							fontSizeAttributeNames
+						)
+							.filter( ( [ key, value ] ) =>
+								didAttributesChange( value, key )
 							)
-						).reduce(
-							(
-								newStateAccumulator,
-								[
-									fontSizeAttributeName,
-									customFontSizeAttributeName,
-								]
-							) => {
-								const fontSizeAttributeValue =
-									attributes[ fontSizeAttributeName ];
-								const fontSizeObject = getFontSize(
-									fontSizes,
-									fontSizeAttributeValue,
-									attributes[ customFontSizeAttributeName ]
-								);
-								newStateAccumulator[ fontSizeAttributeName ] = {
-									...fontSizeObject,
-									class: getFontSizeClass(
-										fontSizeAttributeValue
-									),
-								};
-								return newStateAccumulator;
-							},
-							{}
-						);
+							.reduce(
+								(
+									newStateAccumulator,
+									[
+										fontSizeAttributeName,
+										customFontSizeAttributeName,
+									]
+								) => {
+									const fontSizeAttributeValue =
+										attributes[ fontSizeAttributeName ];
+									const fontSizeObject = getFontSize(
+										fontSizes,
+										fontSizeAttributeValue,
+										attributes[
+											customFontSizeAttributeName
+										]
+									);
+									newStateAccumulator[
+										fontSizeAttributeName
+									] = {
+										...fontSizeObject,
+										class: getFontSizeClass(
+											fontSizeAttributeValue
+										),
+									};
+									return newStateAccumulator;
+								},
+								{}
+							);
 
 						return {
 							...previousState,
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 46a5c6f92bc197..f9d7b96297ecaf 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -12,6 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useReducer,
+	renderToString,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,6 +21,7 @@ import {
 	useRefEffect,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { useCompatibilityStyles } from './use-compatibility-styles';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -97,20 +100,22 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe(
-	{
-		contentRef,
-		children,
-		head,
-		tabIndex = 0,
-		assets,
-		scale = 1,
-		frameSize = 0,
-		readonly,
-		...props
-	},
-	ref
-) {
+function Iframe( {
+	contentRef,
+	children,
+	head,
+	tabIndex = 0,
+	scale = 1,
+	frameSize = 0,
+	readonly,
+	forwardedRef: ref,
+	...props
+} ) {
+	const assets = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
+		[]
+	);
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -204,7 +209,7 @@ function Iframe(
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
 
-	head = (
+	const styleAssets = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
 			{ [ ...styles, ...neededCompatStyles ].map(
@@ -224,10 +229,16 @@ function Iframe(
 					);
 				}
 			) }
-			{ head }
 		</>
 	);
 
+	// Correct doctype is required to enable rendering in standards
+	// mode. Also preload the styles to avoid a flash of unstyled
+	// content.
+	const srcDoc = useMemo( () => {
+		return '<!doctype html>' + renderToString( styleAssets );
+	}, [] );
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
@@ -235,14 +246,17 @@ function Iframe(
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
-				// Correct doctype is required to enable rendering in standards mode
-				srcDoc="<!doctype html>"
+				// Correct doctype is required to enable rendering in standards
+				// mode. Also preload the styles to avoid a flash of unstyled
+				// content.
+				srcDoc={ srcDoc }
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&
 					createPortal(
 						<>
 							<head ref={ headRef }>
+								{ styleAssets }
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
@@ -286,4 +300,23 @@ function Iframe(
 	);
 }
 
-export default forwardRef( Iframe );
+function IframeIfReady( props, ref ) {
+	const isInitialised = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__internalIsInitialized,
+		[]
+	);
+
+	// We shouldn't render the iframe until the editor settings are initialised.
+	// The initial settings are needed to get the styles for the srcDoc, which
+	// cannot be changed after the iframe is mounted. srcDoc is used to to set
+	// the initial iframe HTML, which is required to avoid a flash of unstyled
+	// content.
+	if ( ! isInitialised ) {
+		return null;
+	}
+
+	return <Iframe { ...props } forwardedRef={ ref } />;
+}
+
+export default forwardRef( IframeIfReady );
diff --git a/packages/block-editor/src/components/iframe/use-compatibility-styles.js b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
index 5a1d7de5518654..92e755b318ec45 100644
--- a/packages/block-editor/src/components/iframe/use-compatibility-styles.js
+++ b/packages/block-editor/src/components/iframe/use-compatibility-styles.js
@@ -28,6 +28,12 @@ export function useCompatibilityStyles() {
 
 				const { ownerNode, cssRules } = styleSheet;
 
+				// Stylesheet is added by another stylesheet. See
+				// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
+				if ( ownerNode === null ) {
+					return accumulator;
+				}
+
 				if ( ! cssRules ) {
 					return accumulator;
 				}
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 15337ef3887f14..b8c2d656070558 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -41,6 +41,7 @@ export default function ImageSizeControl( {
 		<>
 			{ ! isEmpty( imageSizeOptions ) && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					value={ slug }
 					options={ imageSizeOptions }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index 93b4ca40978e19..9cc38fed818e3b 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -28,8 +28,11 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
-function usePatternsCategories() {
-	const [ allPatterns, allCategories ] = usePatternsState();
+function usePatternsCategories( rootClientId ) {
+	const [ allPatterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
 
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
@@ -128,7 +131,7 @@ export function BlockPatternsCategoryPanel( {
 		rootClientId
 	);
 
-	const availableCategories = usePatternsCategories();
+	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
@@ -184,7 +187,7 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories();
+	const categories = usePatternsCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 258faff2b826ab..680a967ba3a625 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -220,48 +220,53 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
-		const {
-			getBlockRootClientId,
-			hasInserterItems,
-			__experimentalGetAllowedBlocks,
-			__experimentalGetDirectInsertBlock,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const { getBlockVariations } = select( blocksStore );
-
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
-
-		const directInsertBlock =
-			__experimentalGetDirectInsertBlock( rootClientId );
-
-		const settings = getSettings();
-
-		const hasSingleBlockType =
-			allowedBlocks?.length === 1 &&
-			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-				?.length === 0;
-
-		let allowedBlockType = false;
-		if ( hasSingleBlockType ) {
-			allowedBlockType = allowedBlocks[ 0 ];
+	withSelect(
+		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				__experimentalGetAllowedBlocks,
+				__experimentalGetDirectInsertBlock,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const { getBlockVariations } = select( blocksStore );
+
+			rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks =
+				__experimentalGetAllowedBlocks( rootClientId );
+
+			const directInsertBlock =
+				shouldDirectInsert &&
+				__experimentalGetDirectInsertBlock( rootClientId );
+
+			const settings = getSettings();
+
+			const hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+
+			let allowedBlockType = false;
+			if ( hasSingleBlockType ) {
+				allowedBlockType = allowedBlocks[ 0 ];
+			}
+
+			return {
+				hasItems: hasInserterItems( rootClientId ),
+				hasSingleBlockType,
+				blockTitle: allowedBlockType ? allowedBlockType.title : '',
+				allowedBlockType,
+				directInsertBlock,
+				rootClientId,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId,
+			};
 		}
-
-		return {
-			hasItems: hasInserterItems( rootClientId ),
-			hasSingleBlockType,
-			blockTitle: allowedBlockType ? allowedBlockType.title : '',
-			allowedBlockType,
-			directInsertBlock,
-			rootClientId,
-			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
-		};
-	} ),
+	),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index beb97af1466987..70c5d0892ee7c7 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -67,20 +67,24 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, hasReusableBlocks } = useSelect(
+	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
+			const { __experimentalGetAllowedPatterns, getInserterItems } =
 				select( blockEditorStore );
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
 				).length,
-				hasReusableBlocks:
-					!! getSettings().__experimentalReusableBlocks?.length,
+				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
+	const hasReusableBlocks = useMemo( () => {
+		return inserterItems.some(
+			( { category } ) => category === 'reusable'
+		);
+	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
 	const showMedia = !! mediaCategories.length;
diff --git a/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..c63f71e81f8c36
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inserter can add blocks adds new block at the end of post 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 -->"
+`;
+
+exports[`Inserter can add blocks after another 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:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks before another block 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last 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></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks inserts block at the end of post when no block is selected 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:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
+
+exports[`Inserter can add blocks to the beginning 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- 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></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks to the end 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></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
diff --git a/packages/block-editor/src/components/inserter/test/index.native.js b/packages/block-editor/src/components/inserter/test/index.native.js
index fd65e88ffec3bc..c86fb4c2d91ff4 100644
--- a/packages/block-editor/src/components/inserter/test/index.native.js
+++ b/packages/block-editor/src/components/inserter/test/index.native.js
@@ -1,7 +1,20 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	getEditorHtml,
+	render,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -20,4 +33,245 @@ describe( 'Inserter', () => {
 
 		expect( screen.getByTestId( 'add-block-button' ) ).toBeTruthy();
 	} );
+
+	describe( 'can add blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'to the beginning', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To Beginning option
+			const addBlockToBeginningButton = await getByLabelText(
+				'Add To Beginning'
+			);
+			expect( addBlockToBeginningButton ).toBeVisible();
+			fireEvent.press( addBlockToBeginningButton );
+
+			// Add another block at the beginning
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'before another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block Before option
+			const addBlockBeforeButton = await getByLabelText(
+				'Add Block Before'
+			);
+			expect( addBlockBeforeButton ).toBeVisible();
+			fireEvent.press( addBlockBeforeButton );
+
+			// Add another block before the first one
+			await addBlock( screen, 'Heading', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'after another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block After option
+			const addBlockAfterButton = await getByLabelText(
+				'Add Block After'
+			);
+			expect( addBlockAfterButton ).toBeVisible();
+			fireEvent.press( addBlockAfterButton );
+
+			// Add another block after the Heading block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'to the end', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To End option
+			const addBlockToEndButton = await getByLabelText( 'Add To End' );
+			expect( addBlockToEndButton ).toBeVisible();
+			fireEvent.press( addBlockToEndButton );
+
+			// Add another block to the end after the Paragraph Block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'adds new block at the end of post', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			expect( headingBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts between 2 existing blocks', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 2 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts block at the end of post when no block is selected', async () => {
+			const screen = await initializeEditor();
+			const { getAllByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Select the title
+			const titleInputElement = await getAllByLabelText(
+				'Post title. test'
+			)[ 0 ];
+			expect( titleInputElement ).toBeVisible();
+			fireEvent.press( titleInputElement );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 3 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get the empty paragraph placeholder
+			const paragraphPlaceholder = await getByLabelText(
+				'Add paragraph block'
+			);
+			fireEvent.press( paragraphPlaceholder );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph', {
+				rowIndex: 3,
+			} );
+			expect( paragraphBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
new file mode 100644
index 00000000000000..5fc71fab5960f4
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import { default as InspectorControls } from '../inspector-controls';
+
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__position"
+			title={ __( 'Position' ) }
+			initialOpen={ false }
+		>
+			<InspectorControls.Slot __experimentalGroup="position" />
+		</PanelBody>
+	);
+};
+
+export default PositionControls;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
index beac0f10a178a5..ec34035b754a91 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -2,11 +2,13 @@
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
+import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
+		<PositionControls />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
new file mode 100644
index 00000000000000..f863f8f844d720
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -0,0 +1,15 @@
+.show-icon-labels {
+	.block-editor-block-inspector__tabs .components-tab-panel__tabs {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index fbe072fab11c58..65677506893034 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -16,12 +16,6 @@ import { store as blockEditorStore } from '../../store';
 const EMPTY_ARRAY = [];
 
 function getShowTabs( blockName, tabSettings = {} ) {
-	// Don't allow settings to force the display of tabs if the block inspector
-	// tabs experiment hasn't been opted into.
-	if ( ! window?.__experimentalEnableBlockInspectorTabs ) {
-		return false;
-	}
-
 	// Block specific setting takes precedence over generic default.
 	if ( tabSettings[ blockName ] !== undefined ) {
 		return tabSettings[ blockName ];
@@ -43,6 +37,7 @@ export default function useInspectorControlsTabs( blockName ) {
 		default: defaultGroup,
 		dimensions: dimensionsGroup,
 		list: listGroup,
+		position: positionGroup,
 		typography: typographyGroup,
 	} = InspectorControlsGroups;
 
@@ -71,6 +66,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	// or Advanced Controls slot, then add this tab.
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
+		...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
 	];
 
@@ -79,8 +75,7 @@ export default function useInspectorControlsTabs( blockName ) {
 	}
 
 	const tabSettings = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()
-			.__experimentalBlockInspectorTabs;
+		return select( blockEditorStore ).getSettings().blockInspectorTabs;
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index cb03c1ff13fa57..46fca564925aa6 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
@@ -23,6 +24,7 @@ const groups = {
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	typography: InspectorControlsTypography,
+	position: InspectorControlsPosition,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 95c925a45d8303..f38ae4384f1cfa 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -126,6 +126,7 @@ const LinkControlSearchInput = forwardRef(
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					__nextHasNoMarginBottom
 					label={ useLabel ? 'URL' : undefined }
 					className={ inputClasses }
 					value={ value }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index dadcc2ffc2f1f2..a321bceb29cc20 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -55,6 +55,7 @@ $preview-image-height: 140px;
 	.components-base-control__label {
 		margin-right: $grid-unit-20;
 		margin-bottom: 0;
+		min-width: 29px; // align with search results.
 	}
 
 	input[type="text"],
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 61c6f80dab608e..0bedb39061af4c 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -22,8 +22,18 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents {
+		&:hover,
+		&:focus,
+		.block-editor-block-icon {
+			color: var(--wp-block-synced-color);
+		}
+
+		&:focus::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
@@ -74,7 +84,7 @@
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
-	&.is-synced-branch:not(.is-selected) {
+	&.is-synced-branch.is-branch-selected {
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
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 5571db2816382d..7ed5d3577506bc 100644
--- a/packages/block-editor/src/components/off-canvas-editor/appender.js
+++ b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -2,24 +2,14 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 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 [ insertedBlockClientId, setInsertedBlockClientId ] = useState();
-
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
 			getTemplateLock,
@@ -37,59 +27,19 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const {
-		insertedBlockAttributes,
-		insertedBlockName,
-		setInsertedBlockAttributes,
-	} = useInsertedBlock( insertedBlockClientId );
-
-	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
-		if ( ! _insertedBlock?.clientId ) {
-			return;
-		}
-
-		setInsertedBlockClientId( _insertedBlock?.clientId );
-	};
-
-	let maybeLinkUI;
-
-	if (
-		insertedBlockClientId &&
-		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
-	) {
-		maybeLinkUI = (
-			<LinkUI
-				clientId={ insertedBlockClientId }
-				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlockClientId( null ) }
-				hasCreateSuggestion={ false }
-				onChange={ ( updatedValue ) => {
-					updateAttributes(
-						updatedValue,
-						setInsertedBlockAttributes,
-						insertedBlockAttributes
-					);
-					setInsertedBlockClientId( null );
-				} }
-			/>
-		);
-	}
-
 	if ( hideInserter ) {
 		return null;
 	}
 
 	return (
 		<div className="offcanvas-editor__appender">
-			{ maybeLinkUI }
-
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ maybeSetInsertedBlockOnInsertion }
+				shouldDirectInsert={ false }
 				__experimentalIsQuick
 				{ ...props }
 			/>
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-contents.js b/packages/block-editor/src/components/off-canvas-editor/block-contents.js
index 507e7575344ab3..7dfa98fb60e261 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block-contents.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block-contents.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,14 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { updateAttributes } from './update-attributes';
+import { LinkUI } from './link-ui';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -33,19 +41,54 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
+		const [ isLinkUIOpen, setIsLinkUIOpen ] = useState();
+		const {
+			blockMovingClientId,
+			selectedBlockInBlockEditor,
+			lastInsertedBlockClientId,
+		} = useSelect(
 			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
+				const {
+					hasBlockMovingClientId,
+					getSelectedBlockClientId,
+					getLastInsertedBlocksClientIds,
+				} = select( blockEditorStore );
+				const lastInsertedBlocksClientIds =
+					getLastInsertedBlocksClientIds();
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
+					lastInsertedBlockClientId:
+						lastInsertedBlocksClientIds &&
+						lastInsertedBlocksClientIds[ 0 ],
 				};
 			},
 			[ clientId ]
 		);
 
+		const {
+			insertedBlockAttributes,
+			insertedBlockName,
+			setInsertedBlockAttributes,
+		} = useInsertedBlock( lastInsertedBlockClientId );
+
+		const hasExistingLinkValue = insertedBlockAttributes?.id;
+
+		useEffect( () => {
+			if (
+				clientId === lastInsertedBlockClientId &&
+				BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
+				! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
+			) {
+				setIsLinkUIOpen( true );
+			}
+		}, [
+			lastInsertedBlockClientId,
+			clientId,
+			insertedBlockName,
+			hasExistingLinkValue,
+		] );
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +105,44 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
+			<>
+				{ isLinkUIOpen && (
+					<LinkUI
+						clientId={ lastInsertedBlockClientId }
+						link={ insertedBlockAttributes }
+						onClose={ () => setIsLinkUIOpen( false ) }
+						hasCreateSuggestion={ false }
+						onChange={ ( updatedValue ) => {
+							updateAttributes(
+								updatedValue,
+								setInsertedBlockAttributes,
+								insertedBlockAttributes
+							);
+							setIsLinkUIOpen( false );
+						} }
 					/>
 				) }
-			</BlockDraggable>
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index a3861ef847274f..0d70a75376ca98 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -6,11 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createBlock, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
@@ -86,8 +85,7 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { insertBlock, replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const block = useSelect(
@@ -128,7 +126,8 @@ function ListViewBlock( {
 		[ selectBlock ]
 	);
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+		useListViewContext();
 
 	const toggleExpanded = useCallback(
 		( event ) => {
@@ -237,6 +236,10 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	const MoreMenuComponent = LeafMoreMenu
+		? LeafMoreMenu
+		: BlockSettingsDropdown;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -352,61 +355,26 @@ function ListViewBlock( {
 						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
 					>
 						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockSettingsDropdown
-								clientIds={ dropdownClientIds }
-								icon={ moreVertical }
-								label={ settingsAriaLabel }
-								toggleProps={ {
-									ref,
-									className:
-										'block-editor-list-view-block__menu',
-									tabIndex,
-									onFocus,
-								} }
-								disableOpenOnArrowDown
-								__experimentalSelectBlock={ updateSelection }
-							>
-								{ ( { onClose } ) => (
-									<MenuItem
-										onClick={ () => {
-											const newLink = createBlock(
-												'core/navigation-link'
-											);
-											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 submenu item' ) }
-									</MenuItem>
-								) }
-							</BlockSettingsDropdown>
+							<>
+								<MoreMenuComponent
+									clientIds={ dropdownClientIds }
+									block={ block }
+									clientId={ clientId }
+									icon={ moreVertical }
+									label={ settingsAriaLabel }
+									toggleProps={ {
+										ref,
+										className:
+											'block-editor-list-view-block__menu',
+										tabIndex,
+										onFocus,
+									} }
+									disableOpenOnArrowDown
+									__experimentalSelectBlock={
+										updateSelection
+									}
+								/>
+							</>
 						) }
 					</TreeGridCell>
 				</>
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 2642d6605baac1..9cf3c59f8b632d 100644
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers     Flag to enable block movers
  * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
- * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism.
+ * @param {Object}  props.LeafMoreMenu        Optional more menu substitution.
  * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
@@ -70,6 +71,7 @@ function __ExperimentalOffCanvasEditor(
 		showBlockMovers = false,
 		isExpanded = false,
 		selectBlockInCanvas = true,
+		LeafMoreMenu,
 	},
 	ref
 ) {
@@ -188,8 +190,16 @@ function __ExperimentalOffCanvasEditor(
 			expandedState,
 			expand,
 			collapse,
+			LeafMoreMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			LeafMoreMenu,
+		]
 	);
 
 	return (
diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
index 8851a2b9b47a15..e9a9da86dc15ef 100644
--- a/packages/block-editor/src/components/provider/index.js
+++ b/packages/block-editor/src/components/provider/index.js
@@ -19,7 +19,10 @@ function BlockEditorProvider( props ) {
 
 	const { updateSettings } = useDispatch( blockEditorStore );
 	useEffect( () => {
-		updateSettings( settings );
+		updateSettings( {
+			...settings,
+			__internalIsInitialized: true,
+		} );
 	}, [ settings ] );
 
 	// Syncs the entity provider with changes in the block-editor store.
diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js
index 1c05a423da1400..ad51128172582e 100644
--- a/packages/block-editor/src/components/rich-text/use-enter.js
+++ b/packages/block-editor/src/components/rich-text/use-enter.js
@@ -28,6 +28,10 @@ export function useEnter( props ) {
 				return;
 			}
 
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
 			const {
 				removeEditorOnlyFormats,
 				value,
@@ -40,10 +44,6 @@ export function useEnter( props ) {
 				onSplitAtEnd,
 			} = propsRef.current;
 
-			if ( event.keyCode !== ENTER ) {
-				return;
-			}
-
 			event.preventDefault();
 
 			const _value = { ...value };
diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
index c6f4f172968759..87031000394fe3 100644
--- a/packages/block-editor/src/components/url-input/README.md
+++ b/packages/block-editor/src/components/url-input/README.md
@@ -160,6 +160,10 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
+### `__nextHasNoMarginBottom: Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
 ## Example
 
 {% codetabs %}
@@ -217,6 +221,7 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
+				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 6ee6b96f61e0e1..fca054993e7c3c 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -57,6 +57,7 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
+								__nextHasNoMarginBottom
 								value={ url || '' }
 								onChange={ onChange }
 							/>
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 0eb97730e15d18..758c3bf51bec3d 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -7,6 +7,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
@@ -424,6 +425,8 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
+			/** Start opting into the new margin-free styles that will become the default in a future version. */
+			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -477,8 +480,19 @@ class URLInput extends Component {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
+		if ( ! __nextHasNoMarginBottom ) {
+			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
+				since: '6.2',
+				version: '6.5',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			} );
+		}
+
 		return (
-			<BaseControl { ...controlProps }>
+			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				{ ...controlProps }
+			>
 				<input { ...inputProps } />
 				{ loading && <Spinner /> }
 			</BaseControl>
diff --git a/packages/block-editor/src/components/url-popover/link-editor.js b/packages/block-editor/src/components/url-popover/link-editor.js
index cf783b6875b0a9..b0502fbb2a402d 100644
--- a/packages/block-editor/src/components/url-popover/link-editor.js
+++ b/packages/block-editor/src/components/url-popover/link-editor.js
@@ -31,6 +31,7 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
+				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }
diff --git a/packages/block-editor/src/components/use-paste-styles/index.js b/packages/block-editor/src/components/use-paste-styles/index.js
new file mode 100644
index 00000000000000..9150776ad1158b
--- /dev/null
+++ b/packages/block-editor/src/components/use-paste-styles/index.js
@@ -0,0 +1,230 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { getBlockType, parse } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import {
+	hasAlignSupport,
+	hasBorderSupport,
+	hasBackgroundColorSupport,
+	hasTextColorSupport,
+	hasGradientSupport,
+	hasCustomClassNameSupport,
+	hasFontFamilySupport,
+	hasFontSizeSupport,
+	hasLayoutSupport,
+	hasStyleSupport,
+} from '../../hooks/supports';
+
+/**
+ * Determine if the copied text looks like serialized blocks or not.
+ * Since plain text will always get parsed into a freeform block,
+ * we check that if the parsed blocks is anything other than that.
+ *
+ * @param {string} text The copied text.
+ * @return {boolean} True if the text looks like serialized blocks, false otherwise.
+ */
+function hasSerializedBlocks( text ) {
+	try {
+		const blocks = parse( text, {
+			__unstableSkipMigrationLogs: true,
+			__unstableSkipAutop: true,
+		} );
+		if ( blocks.length === 1 && blocks[ 0 ].name === 'core/freeform' ) {
+			// It's likely that the text is just plain text and not serialized blocks.
+			return false;
+		}
+		return true;
+	} catch ( err ) {
+		// Parsing error, the text is not serialized blocks.
+		// (Even though that it technically won't happen)
+		return false;
+	}
+}
+
+/**
+ * Style attributes are attributes being added in `block-editor/src/hooks/*`.
+ * (Except for some unrelated to style like `anchor` or `settings`.)
+ * They generally represent the default block supports.
+ */
+const STYLE_ATTRIBUTES = {
+	align: hasAlignSupport,
+	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
+	backgroundColor: hasBackgroundColorSupport,
+	textColor: hasTextColorSupport,
+	gradient: hasGradientSupport,
+	className: hasCustomClassNameSupport,
+	fontFamily: hasFontFamilySupport,
+	fontSize: hasFontSizeSupport,
+	layout: hasLayoutSupport,
+	style: hasStyleSupport,
+};
+
+/**
+ * Get the "style attributes" from a given block to a target block.
+ *
+ * @param {WPBlock} sourceBlock The source block.
+ * @param {WPBlock} targetBlock The target block.
+ * @return {Object} the filtered attributes object.
+ */
+function getStyleAttributes( sourceBlock, targetBlock ) {
+	return Object.entries( STYLE_ATTRIBUTES ).reduce(
+		( attributes, [ attributeKey, hasSupport ] ) => {
+			// Only apply the attribute if both blocks support it.
+			if (
+				hasSupport( sourceBlock.name ) &&
+				hasSupport( targetBlock.name )
+			) {
+				// Override attributes that are not present in the block to their defaults.
+				attributes[ attributeKey ] =
+					sourceBlock.attributes[ attributeKey ];
+			}
+			return attributes;
+		},
+		{}
+	);
+}
+
+/**
+ * Update the target blocks with style attributes recursively.
+ *
+ * @param {WPBlock[]} targetBlocks          The target blocks to be updated.
+ * @param {WPBlock[]} sourceBlocks          The source blocks to get th style attributes from.
+ * @param {Function}  updateBlockAttributes The function to update the attributes.
+ */
+function recursivelyUpdateBlockAttributes(
+	targetBlocks,
+	sourceBlocks,
+	updateBlockAttributes
+) {
+	for (
+		let index = 0;
+		index < Math.min( sourceBlocks.length, targetBlocks.length );
+		index += 1
+	) {
+		updateBlockAttributes(
+			targetBlocks[ index ].clientId,
+			getStyleAttributes( sourceBlocks[ index ], targetBlocks[ index ] )
+		);
+
+		recursivelyUpdateBlockAttributes(
+			targetBlocks[ index ].innerBlocks,
+			sourceBlocks[ index ].innerBlocks,
+			updateBlockAttributes
+		);
+	}
+}
+
+/**
+ * A hook to return a pasteStyles event function for handling pasting styles to blocks.
+ *
+ * @return {Function} A function to update the styles to the blocks.
+ */
+export default function usePasteStyles() {
+	const registry = useRegistry();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { createSuccessNotice, createWarningNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	return useCallback(
+		async ( targetBlocks ) => {
+			let html = '';
+			try {
+				// `http:` sites won't have the clipboard property on navigator.
+				// (with the exception of localhost.)
+				if ( ! window.navigator.clipboard ) {
+					createErrorNotice(
+						__(
+							'Unable to paste styles. This feature is only available on secure (https) sites in supporting browsers.'
+						),
+						{ type: 'snackbar' }
+					);
+					return;
+				}
+
+				html = await window.navigator.clipboard.readText();
+			} catch ( error ) {
+				// Possibly the permission is denied.
+				createErrorNotice(
+					__(
+						'Unable to paste styles. Please allow browser clipboard permissions before continuing.'
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			// Abort if the copied text is empty or doesn't look like serialized blocks.
+			if ( ! html || ! hasSerializedBlocks( html ) ) {
+				createWarningNotice(
+					__(
+						"Unable to paste styles. Block styles couldn't be found within the copied content."
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			const copiedBlocks = parse( html );
+
+			if ( copiedBlocks.length === 1 ) {
+				// Apply styles of the block to all the target blocks.
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						targetBlocks.map( () => copiedBlocks[ 0 ] ),
+						updateBlockAttributes
+					);
+				} );
+			} else {
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						copiedBlocks,
+						updateBlockAttributes
+					);
+				} );
+			}
+
+			if ( targetBlocks.length === 1 ) {
+				const title = getBlockType( targetBlocks[ 0 ].name )?.title;
+				createSuccessNotice(
+					sprintf(
+						// Translators: Name of the block being pasted, e.g. "Paragraph".
+						__( 'Pasted styles to %s.' ),
+						title
+					),
+					{ type: 'snackbar' }
+				);
+			} else {
+				createSuccessNotice(
+					sprintf(
+						// Translators: The number of the blocks.
+						__( 'Pasted styles to %d blocks.' ),
+						targetBlocks.length
+					),
+					{ type: 'snackbar' }
+				);
+			}
+		},
+		[
+			registry.batch,
+			updateBlockAttributes,
+			createSuccessNotice,
+			createWarningNotice,
+			createErrorNotice,
+		]
+	);
+}
diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
index f0da074d196a2b..484080f97ce525 100644
--- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
@@ -167,6 +167,12 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
+			// Abort if navigation has already been handled (e.g. RichText
+			// inline boundaries).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
 			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
 				event;
 			const isUp = keyCode === UP;
@@ -182,24 +188,20 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			if ( ! isNav ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
-				// Only handle if we have a full selection (not a native partial
-				// selection).
-				if ( ! __unstableIsFullySelected() ) {
-					return;
-				}
-
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				if ( ! isNav ) {
+				if ( shiftKey ) {
 					return;
 				}
 
-				if ( shiftKey ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
 					return;
 				}
 
@@ -214,6 +216,12 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// Abort if our current target is not a candidate for navigation
+			// (e.g. preserve native input behaviors).
+			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
+				return;
+			}
+
 			// When presing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
 			// it can be restored as well as possible on sebsequent vertical
@@ -227,22 +235,6 @@ export default function useArrowNav() {
 				verticalRect = computeCaretRect( defaultView );
 			}
 
-			// Abort if navigation has already been handled (e.g. RichText
-			// inline boundaries).
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( ! isNav ) {
-				return;
-			}
-
-			// Abort if our current target is not a candidate for navigation
-			// (e.g. preserve native input behaviors).
-			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
-				return;
-			}
-
 			// In the case of RTL scripts, right means previous and left means
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 7dcb9083e1d338..df11f5e3aa362a 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -3,6 +3,7 @@
 @import "./components/block-content-overlay/content.scss";
 @import "./components/block-draggable/content.scss";
 @import "./components/block-preview/content.scss";
+@import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f6fa73a053ac58..84b3ba3a95a33b 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -14,6 +14,7 @@ import './color';
 import './duotone';
 import './font-size';
 import './border';
+import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';
diff --git a/packages/block-editor/src/hooks/metadata.js b/packages/block-editor/src/hooks/metadata.js
index 5ed4870d56e4f0..9f39082f46d85e 100644
--- a/packages/block-editor/src/hooks/metadata.js
+++ b/packages/block-editor/src/hooks/metadata.js
@@ -27,8 +27,7 @@ export function addMetaAttribute( blockTypeSettings ) {
 
 	const supportsBlockNaming = hasBlockMetadataSupport(
 		blockTypeSettings,
-		'name',
-		false
+		'name'
 	);
 
 	if ( supportsBlockNaming ) {
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
new file mode 100644
index 00000000000000..1e50c35bfd0e6f
--- /dev/null
+++ b/packages/block-editor/src/hooks/position.js
@@ -0,0 +1,375 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	createPortal,
+	Platform,
+} from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../components/block-list';
+import useSetting from '../components/use-setting';
+import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
+
+const POSITION_SUPPORT_KEY = 'position';
+
+const OPTION_CLASSNAME =
+	'block-editor-hooks__position-selection__select-control__option';
+
+const DEFAULT_OPTION = {
+	key: 'default',
+	value: '',
+	name: __( 'Default' ),
+	className: OPTION_CLASSNAME,
+};
+
+const STICKY_OPTION = {
+	key: 'sticky',
+	value: 'sticky',
+	name: __( 'Sticky' ),
+	className: OPTION_CLASSNAME,
+	__experimentalHint: __(
+		'The block will stick to the top of the window instead of scrolling.'
+	),
+};
+
+const FIXED_OPTION = {
+	key: 'fixed',
+	value: 'fixed',
+	name: __( 'Fixed' ),
+	className: OPTION_CLASSNAME,
+	__experimentalHint: __(
+		'The block will not move when the page is scrolled.'
+	),
+};
+
+const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+const VALID_POSITION_TYPES = [ 'sticky', 'fixed' ];
+
+/**
+ * Get calculated position CSS.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.selector Selector to use.
+ * @param {Object} props.style    Style object.
+ * @return {string} The generated CSS rules.
+ */
+export function getPositionCSS( { selector, style } ) {
+	let output = '';
+
+	const { type: positionType } = style?.position || {};
+
+	if ( ! VALID_POSITION_TYPES.includes( positionType ) ) {
+		return output;
+	}
+
+	output += `${ selector } {`;
+	output += `position: ${ positionType };`;
+
+	POSITION_SIDES.forEach( ( side ) => {
+		if ( style?.position?.[ side ] !== undefined ) {
+			output += `${ side }: ${ style.position[ side ] };`;
+		}
+	} );
+
+	if ( positionType === 'sticky' || positionType === 'fixed' ) {
+		// TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+		output += `z-index: 10`;
+	}
+	output += `}`;
+
+	return output;
+}
+
+/**
+ * Determines if there is sticky position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasStickyPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.sticky );
+}
+
+/**
+ * Determines if there is fixed position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasFixedPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.fixed );
+}
+
+/**
+ * Determines if there is position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! support;
+}
+
+/**
+ * Checks if there is a current value in the position block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a position value set.
+ */
+export function hasPositionValue( props ) {
+	return props.attributes.style?.position?.type !== undefined;
+}
+
+/**
+ * Checks if the block is currently set to a sticky or fixed position.
+ * This check is helpful for determining how to position block toolbars or other elements.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {boolean} Whether or not the block is set to a sticky or fixed position.
+ */
+export function hasStickyOrFixedPositionValue( attributes ) {
+	const positionType = attributes.style?.position?.type;
+	return positionType === 'sticky' || positionType === 'fixed';
+}
+
+/**
+ * Resets the position block support attributes. This can be used when disabling
+ * the position support controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetPosition( { attributes = {}, setAttributes } ) {
+	const { style = {} } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			position: {
+				...style?.position,
+				type: undefined,
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			},
+		} ),
+	} );
+}
+
+/**
+ * Custom hook that checks if position settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ *
+ * @return {boolean} Whether padding setting is disabled.
+ */
+export function useIsPositionDisabled( { name: blockName } = {} ) {
+	const allowFixed = useSetting( 'position.fixed' );
+	const allowSticky = useSetting( 'position.sticky' );
+	const isDisabled = ! allowFixed && ! allowSticky;
+
+	return ! hasPositionSupport( blockName ) || isDisabled;
+}
+
+/*
+ * Position controls to be rendered in an inspector control panel.
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Padding edit element.
+ */
+export function PositionEdit( props ) {
+	const {
+		attributes: { style = {} },
+		name: blockName,
+		setAttributes,
+	} = props;
+
+	const allowFixed = hasFixedPositionSupport( blockName );
+	const allowSticky = hasStickyPositionSupport( blockName );
+	const value = style?.position?.type;
+
+	const options = useMemo( () => {
+		const availableOptions = [ DEFAULT_OPTION ];
+		if ( allowSticky || value === STICKY_OPTION.value ) {
+			availableOptions.push( STICKY_OPTION );
+		}
+		if ( allowFixed || value === FIXED_OPTION.value ) {
+			availableOptions.push( FIXED_OPTION );
+		}
+		return availableOptions;
+	}, [ allowFixed, allowSticky, value ] );
+
+	const onChangeType = ( next ) => {
+		// For now, use a hard-coded `0px` value for the position.
+		// `0px` is preferred over `0` as it can be used in `calc()` functions.
+		// In the future, it could be useful to allow for an offset value.
+		const placementValue = '0px';
+
+		const newStyle = {
+			...style,
+			position: {
+				...style?.position,
+				type: next,
+				top:
+					next === 'sticky' || next === 'fixed'
+						? placementValue
+						: undefined,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const selectedOption = value
+		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
+		: DEFAULT_OPTION;
+
+	return Platform.select( {
+		web: (
+			<>
+				<BaseControl className="block-editor-hooks__position-selection">
+					<CustomSelectControl
+						__nextUnconstrainedWidth
+						__next36pxDefaultSize
+						className="block-editor-hooks__position-selection__select-control"
+						label={ __( 'Position' ) }
+						hideLabelFromVision
+						describedBy={ sprintf(
+							// translators: %s: Currently selected font size.
+							__( 'Currently selected position: %s' ),
+							selectedOption.name
+						) }
+						options={ options }
+						value={ selectedOption }
+						__experimentalShowSelectedHint
+						onChange={ ( { selectedItem } ) => {
+							onChangeType( selectedItem.value );
+						} }
+						size={ '__unstable-large' }
+					/>
+				</BaseControl>
+			</>
+		),
+		native: null,
+	} );
+}
+
+/**
+ * Override the default edit UI to include position controls.
+ *
+ * @param {Function} BlockEdit Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withInspectorControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name: blockName } = props;
+		const positionSupport = hasBlockSupport(
+			blockName,
+			POSITION_SUPPORT_KEY
+		);
+		const showPositionControls =
+			positionSupport && ! useIsPositionDisabled( props );
+
+		return [
+			showPositionControls && (
+				<InspectorControls
+					key="position"
+					__experimentalGroup="position"
+				>
+					<PositionEdit { ...props } />
+				</InspectorControls>
+			),
+			<BlockEdit key="edit" { ...props } />,
+		];
+	},
+	'withInspectorControls'
+);
+
+/**
+ * Override the default block element to add the position styles.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withPositionStyles = createHigherOrderComponent(
+	( BlockListBlock ) => ( props ) => {
+		const { name, attributes } = props;
+		const hasPositionBlockSupport = hasBlockSupport(
+			name,
+			POSITION_SUPPORT_KEY
+		);
+		const allowPositionStyles =
+			hasPositionBlockSupport && ! useIsPositionDisabled( props );
+
+		const id = useInstanceId( BlockListBlock );
+		const element = useContext( BlockList.__unstableElementContext );
+
+		// Higher specificity to override defaults in editor UI.
+		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
+
+		// Get CSS string for the current position values.
+		let css;
+		if ( allowPositionStyles ) {
+			css =
+				getPositionCSS( {
+					selector: positionSelector,
+					style: attributes?.style,
+				} ) || '';
+		}
+
+		// Attach a `wp-container-` id-based class name.
+		const className = classnames( props?.className, {
+			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		} );
+
+		return (
+			<>
+				{ allowPositionStyles &&
+					element &&
+					!! css &&
+					createPortal( <style>{ css }</style>, element ) }
+				<BlockListBlock { ...props } className={ className } />
+			</>
+		);
+	}
+);
+
+addFilter(
+	'editor.BlockListBlock',
+	'core/editor/position/with-position-styles',
+	withPositionStyles
+);
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/position/with-inspector-controls',
+	withInspectorControls
+);
diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss
new file mode 100644
index 00000000000000..b3bd6b1b9ef041
--- /dev/null
+++ b/packages/block-editor/src/hooks/position.scss
@@ -0,0 +1,18 @@
+.block-editor-hooks__position-selection__select-control {
+	.components-custom-select-control__hint {
+		display: none;
+	}
+}
+
+.block-editor-hooks__position-selection__select-control__option {
+	&.has-hint {
+		grid-template-columns: auto 30px;
+		line-height: $default-line-height;
+		margin-bottom: 0;
+	}
+
+	.components-custom-select-control__item-hint {
+		grid-row: 2;
+		text-align: left;
+	}
+}
diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js
new file mode 100644
index 00000000000000..a71e2312937b09
--- /dev/null
+++ b/packages/block-editor/src/hooks/supports.js
@@ -0,0 +1,302 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
+
+const ALIGN_SUPPORT_KEY = 'align';
+const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
+const BORDER_SUPPORT_KEY = '__experimentalBorder';
+const COLOR_SUPPORT_KEY = 'color';
+const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
+const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
+/**
+ * Key within block settings' support array indicating support for font style.
+ */
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+/**
+ * Key within block settings' support array indicating support for font weight.
+ */
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * decorations e.g. settings found in `block.json`.
+ */
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+/**
+ * Key within block settings' supports array indicating support for text
+ * transforms e.g. settings found in `block.json`.
+ */
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+/**
+ * Key within block settings' supports array indicating support for letter-spacing
+ * e.g. settings found in `block.json`.
+ */
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const LAYOUT_SUPPORT_KEY = '__experimentalLayout';
+const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+	FONT_STYLE_SUPPORT_KEY,
+	FONT_WEIGHT_SUPPORT_KEY,
+	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_DECORATION_SUPPORT_KEY,
+	TEXT_TRANSFORM_SUPPORT_KEY,
+	LETTER_SPACING_SUPPORT_KEY,
+];
+const SPACING_SUPPORT_KEY = 'spacing';
+const styleSupportKeys = [
+	...TYPOGRAPHY_SUPPORT_KEYS,
+	BORDER_SUPPORT_KEY,
+	COLOR_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+];
+
+/**
+ * Returns true if the block defines support for align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for align wide.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignWideSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align wide, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignWideSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Determine whether there is block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to check support for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBorderSupport( nameOrType, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! (
+			support?.color ||
+			support?.radius ||
+			support?.width ||
+			support?.style
+		);
+	}
+
+	return !! support?.[ feature ];
+}
+
+/**
+ * Get block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getBorderSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ BORDER_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+	return (
+		colorSupport &&
+		( colorSupport.link === true ||
+			colorSupport.gradient === true ||
+			colorSupport.background !== false ||
+			colorSupport.text !== false )
+	);
+};
+
+/**
+ * Returns true if the block defines support for link color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLinkColorSupport = ( nameOrType ) => {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
+};
+
+/**
+ * Returns true if the block defines support for gradient color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasGradientSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasBackgroundColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.background !== false;
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.text !== false;
+};
+
+/**
+ * Get block support for color properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Color feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getColorSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ COLOR_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for custom class name.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasCustomClassNameSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns the block support value for custom class name, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getCustomClassNameSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns true if the block defines support for font family.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontFamilySupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font family, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontFamilySupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for font size.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontSizeSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font size, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontSizeSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for layout.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLayoutSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for layout, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getLayoutSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for style.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
new file mode 100644
index 00000000000000..4656e513cb9aca
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align options for group block sets Full width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignfull\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets None option 1`] = `
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets Wide width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"wide\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignwide\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for media block sets Align center option 1`] = `
+"<!-- wp:image {\\"align\\":\\"center\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image aligncenter size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align left option 1`] = `
+"<!-- wp:image {\\"align\\":\\"left\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignleft size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align right option 1`] = `
+"<!-- wp:image {\\"align\\":\\"right\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignright size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Full width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"full\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignfull size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets None option 1`] = `
+"<!-- wp:image {\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Wide width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"wide\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignwide size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for text block sets Align text center option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text left option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"left\\"} -->
+<p class=\\"has-text-align-left\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text right option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"right\\"} -->
+<p class=\\"has-text-align-right\\"></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-editor/src/hooks/test/align.native.js b/packages/block-editor/src/hooks/test/align.native.js
new file mode 100644
index 00000000000000..da29bbfc79dd70
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/align.native.js
@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	fireEvent,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Align options', () => {
+	describe( 'for media block', () => {
+		[
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor( {
+					initialHtml: imageHTML,
+				} );
+				const { getByLabelText } = screen;
+
+				// Get Image block
+				const imageBlock = await getBlock( screen, 'Image' );
+				expect( imageBlock ).toBeVisible();
+				fireEvent.press( imageBlock );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+
+	describe( 'for text block', () => {
+		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
+
+					// Add Paragraph block
+					await addBlock( screen, 'Paragraph' );
+
+					// Get Paragraph block
+					const paragraphBlock = await getBlock(
+						screen,
+						'Paragraph'
+					);
+					expect( paragraphBlock ).toBeVisible();
+
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align' );
+					fireEvent.press( alignmentButtons );
+
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
+
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
+		);
+	} );
+
+	describe( 'for group block', () => {
+		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor();
+				const { getByLabelText } = screen;
+
+				// Add Group block
+				await addBlock( screen, 'Group' );
+
+				// Get Paragraph block
+				const groupBlock = await getBlock( screen, 'Group' );
+				expect( groupBlock ).toBeVisible();
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper = await within(
+					groupBlock
+				).findByTestId( 'block-list-wrapper' );
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index a19983ce58ff46..919ca1dceb4e32 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1829,14 +1829,19 @@ export function highlightedBlock( state, action ) {
 export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
+		case 'REPLACE_BLOCKS':
+		case 'REPLACE_INNER_BLOCKS':
 			if ( ! action.blocks.length ) {
 				return state;
 			}
 
-			const clientId = action.blocks[ 0 ].clientId;
+			const clientIds = action.blocks.map( ( block ) => {
+				return block.clientId;
+			} );
+
 			const source = action.meta?.source;
 
-			return { clientId, source };
+			return { clientIds, source };
 		case 'RESET_BLOCKS':
 			return {};
 	}
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index f096767bf6178c..a29220305e6c65 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -2647,19 +2647,19 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 export function wasBlockJustInserted( state, clientId, source ) {
 	const { lastBlockInserted } = state;
 	return (
-		lastBlockInserted.clientId === clientId &&
+		lastBlockInserted.clientIds?.includes( clientId ) &&
 		lastBlockInserted.source === source
 	);
 }
 
 /**
- * Gets the client id of the last inserted block.
+ * Gets the client ids of the last inserted blocks.
  *
  * @param {Object} state Global application state.
- * @return {string|undefined} Client Id of the last inserted block.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
  */
-export function getLastInsertedBlockClientId( state ) {
-	return state?.lastBlockInserted?.clientId;
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
 }
 
 /**
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index 61a51a5f28cd0b..609cbb59c6e54b 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -3255,7 +3255,7 @@ describe( 'state', () => {
 	} );
 
 	describe( 'lastBlockInserted', () => {
-		it( 'should return client id if last block inserted is called with action INSERT_BLOCKS', () => {
+		it( 'should contain client id if last block inserted is called with action INSERT_BLOCKS', () => {
 			const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
 
 			const action = {
@@ -3272,7 +3272,7 @@ describe( 'state', () => {
 
 			const state = lastBlockInserted( {}, action );
 
-			expect( state.clientId ).toBe( expectedClientId );
+			expect( state.clientIds ).toContain( expectedClientId );
 		} );
 
 		it( 'should return inserter_menu source if last block inserted is called with action INSERT_BLOCKS', () => {
@@ -3297,7 +3297,7 @@ describe( 'state', () => {
 
 		it( 'should return state if last block inserted is called with action INSERT_BLOCKS and block list is empty', () => {
 			const expectedState = {
-				clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+				clientIds: [ '9db792c6-a25a-495d-adbd-97d56a4c4189' ],
 			};
 
 			const action = {
@@ -3313,6 +3313,48 @@ describe( 'state', () => {
 			expect( state ).toEqual( expectedState );
 		} );
 
+		it( 'should return client ids of blocks when called with REPLACE_BLOCKS', () => {
+			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
+			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+
+			const action = {
+				blocks: [
+					{
+						clientId: clientIdOne,
+					},
+					{
+						clientId: clientIdTwo,
+					},
+				],
+				type: 'REPLACE_BLOCKS',
+			};
+
+			const state = lastBlockInserted( {}, action );
+
+			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+		} );
+
+		it( 'should return client ids of all blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
+			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
+			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+
+			const action = {
+				blocks: [
+					{
+						clientId: clientIdOne,
+					},
+					{
+						clientId: clientIdTwo,
+					},
+				],
+				type: 'REPLACE_INNER_BLOCKS',
+			};
+
+			const state = lastBlockInserted( {}, action );
+
+			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+		} );
+
 		it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => {
 			const expectedState = {};
 
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index ee4e9ee4c167ab..2984171787c329 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -73,7 +73,7 @@ const {
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
 	__experimentalGetGlobalBlocksByName,
-	getLastInsertedBlockClientId,
+	getLastInsertedBlocksClientIds,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -4457,7 +4457,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: expectedClientId,
+					clientIds: [ expectedClientId ],
 					source,
 				},
 			};
@@ -4474,7 +4474,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: unexpectedClientId,
+					clientIds: [ unexpectedClientId ],
 					source,
 				},
 			};
@@ -4490,7 +4490,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId,
+					clientIds: [ clientId ],
 				},
 			};
 
@@ -4667,22 +4667,25 @@ describe( '__unstableGetClientIdsTree', () => {
 	} );
 } );
 
-describe( 'getLastInsertedBlockClientId', () => {
+describe( 'getLastInsertedBlocksClientIds', () => {
 	it( 'should return undefined if no blocks have been inserted', () => {
 		const state = {
 			lastBlockInserted: {},
 		};
 
-		expect( getLastInsertedBlockClientId( state ) ).toEqual( undefined );
+		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( undefined );
 	} );
 
-	it( 'should return clientId if blocks have been inserted', () => {
+	it( 'should return clientIds if blocks have been inserted', () => {
 		const state = {
 			lastBlockInserted: {
-				clientId: '123456',
+				clientIds: [ '123456', '78910' ],
 			},
 		};
 
-		expect( getLastInsertedBlockClientId( state ) ).toEqual( '123456' );
+		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
+			'123456',
+			'78910',
+		] );
 	} );
 } );
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 76da3c16325db9..deee5efdb62f9b 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -22,7 +22,6 @@
 @import "./components/block-pattern-setup/style.scss";
 @import "./components/block-variation-transforms/style.scss";
 @import "./components/border-radius-control/style.scss";
-@import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/date-format-picker/style.scss";
@@ -31,6 +30,7 @@
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
@@ -50,6 +50,7 @@
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
 @import "./hooks/dimensions.scss";
+@import "./hooks/position.scss";
 @import "./hooks/typography.scss";
 @import "./hooks/color.scss";
 @import "./hooks/padding.scss";
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 118fa5cfa2d1ad..9f1f681e95a09b 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -48,6 +48,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Group by:' ) }
 						options={ [
 							{ label: __( 'Year' ), value: 'yearly' },
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 47b2f36b2fb342..a11ab6fdc9442a 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -218,6 +218,7 @@ function AudioEdit( {
 						checked={ loop }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
 						// `undefined` is required for the preload attribute to be unset.
@@ -251,6 +252,7 @@ function AudioEdit( {
 				{ showCaption &&
 					( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
+							identifier="caption"
 							tagName="figcaption"
 							className={ __experimentalGetElementClassName(
 								'caption'
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index acc2bbce4e7c46..263e8bde699170 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -6,23 +6,33 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 
 export default function CommentsInspectorControls( {
-	attributes: { TagName },
+	attributes: { tagName },
 	setAttributes,
 } ) {
+	const htmlElementMessages = {
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
 	return (
 		<InspectorControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ TagName }
+					value={ tagName }
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 		</InspectorControls>
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index 5fa959375245bf..017fac72f6637e 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -143,6 +143,7 @@ class EmbedPreview extends Component {
 				) }
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
+						identifier="caption"
 						tagName="figcaption"
 						className={ __experimentalGetElementClassName(
 							'caption'
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index 71e0885eae1c6b..c09e3b7685aec0 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -71,6 +71,7 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
 						options={ linkDestinationOptions }
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index c56cf1dab84e8f..962cd954bbbfd2 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -531,6 +531,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -546,6 +547,7 @@ function GalleryEdit( props ) {
 					) }
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 957a141d51c6b7..65fa218cb3bd6b 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -51,6 +51,7 @@ export const Gallery = ( props ) => {
 			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
+				identifier="caption"
 				tagName="figcaption"
 				className={ classnames(
 					'blocks-gallery-caption',
diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
index 9c36f02ec028ad..29d88cae4ce9b9 100644
--- a/packages/block-library/src/gallery/v1/edit.js
+++ b/packages/block-library/src/gallery/v1/edit.js
@@ -420,6 +420,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -428,6 +429,7 @@ function GalleryEdit( props ) {
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index a3997db0621c54..2b227a15847a27 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -56,6 +56,9 @@
 				"width": true
 			}
 		},
+		"position": {
+			"sticky": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 8962d8a8a3bf16..a2cd8bd8cbaf22 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -51,6 +51,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	return (
 		<InspectorControls __experimentalGroup="advanced">
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 15f152a1ff7a45..a53e1ca1ddb72b 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -125,37 +125,30 @@ export default function Image( {
 		},
 		[ id, isSelected, clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockRootClientId,
-					getSettings,
-					canInsertBlockType,
-				} = select( blockEditorStore );
-
-				const rootClientId = getBlockRootClientId( clientId );
-				const settings = Object.fromEntries(
-					Object.entries( getSettings() ).filter( ( [ key ] ) =>
-						[
-							'imageEditing',
-							'imageSizes',
-							'maxWidth',
-							'mediaUpload',
-						].includes( key )
+	const { canInsertCover, imageEditing, imageSizes, mediaUpload } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getSettings, canInsertBlockType } =
+				select( blockEditorStore );
+
+			const rootClientId = getBlockRootClientId( clientId );
+			const settings = Object.fromEntries(
+				Object.entries( getSettings() ).filter( ( [ key ] ) =>
+					[ 'imageEditing', 'imageSizes', 'mediaUpload' ].includes(
+						key
 					)
-				);
+				)
+			);
 
-				return {
-					...settings,
-					canInsertCover: canInsertBlockType(
-						'core/cover',
-						rootClientId
-					),
-				};
-			},
-			[ clientId ]
-		);
+			return {
+				...settings,
+				canInsertCover: canInsertBlockType(
+					'core/cover',
+					rootClientId
+				),
+			};
+		},
+		[ clientId ]
+	);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -549,13 +542,9 @@ export default function Image( {
 		// With the current implementation of ResizableBox, an image needs an
 		// explicit pixel value for the max-width. In absence of being able to
 		// set the content-width, this max-width is currently dictated by the
-		// vanilla editor style. The following variable adds a buffer to this
-		// vanilla style, so 3rd party themes have some wiggleroom. This does,
-		// in most cases, allow you to scale the image beyond the width of the
-		// main column, though not infinitely.
-		// @todo It would be good to revisit this once a content-width variable
-		// becomes available.
-		const maxWidthBuffer = maxWidth * 2.5;
+		// vanilla editor style. We'll use the clientWidth here, to prevent the width
+		// of the image growing larger than the width of the block column.
+		const maxWidthBuffer = clientWidth;
 
 		let showRightHandle = false;
 		let showLeftHandle = false;
@@ -639,6 +628,7 @@ export default function Image( {
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
+						identifier="caption"
 						className={ __experimentalGetElementClassName(
 							'caption'
 						) }
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 45ffe1338aaabf..cc8a044b0a1eab 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, pickBy } from 'lodash';
+import { get } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -104,16 +104,15 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				categories && categories.length > 0
 					? categories.map( ( cat ) => cat.id )
 					: [];
-			const latestPostsQuery = pickBy(
-				{
+			const latestPostsQuery = Object.fromEntries(
+				Object.entries( {
 					categories: catIds,
 					author: selectedAuthor,
 					order,
 					orderby: orderBy,
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
-				},
-				( value ) => typeof value !== 'undefined'
+				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
 			);
 
 			return {
@@ -433,7 +432,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ layoutControls } />
 			</BlockControls>
 			<ul { ...blockProps }>
-				{ displayPosts.map( ( post, i ) => {
+				{ displayPosts.map( ( post ) => {
 					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
@@ -493,7 +492,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 
 					return (
-						<li key={ i }>
+						<li key={ post.id }>
 							{ renderFeaturedImage && (
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index ac2b43501e9ed3..afdd7446a5cf08 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -375,12 +375,19 @@ export default function NavigationLinkEdit( {
 	const DEFAULT_BLOCK = {
 		name: 'core/navigation-link',
 	};
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
-		renderAppender: false,
-	} );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			...blockProps,
+			className: 'remove-outline', // Remove the outline from the inner blocks container.
+		},
+		{
+			allowedBlocks: ALLOWED_BLOCKS,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: true,
+			renderAppender: false,
+		}
+	);
 
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
@@ -435,7 +442,11 @@ export default function NavigationLinkEdit( {
 					<TextControl
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
-							setAttributes( { url: urlValue } );
+							updateAttributes(
+								{ url: urlValue },
+								setAttributes,
+								attributes
+							);
 						} }
 						label={ __( 'URL' ) }
 						autoComplete="off"
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 36bfbf5d1fc0ae..f214a6b9b5740f 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -120,6 +120,33 @@ function block_core_navigation_link_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
+/**
+ * Decodes a url if it's encoded, returning the same url if not.
+ *
+ * @param string $url The url to decode.
+ *
+ * @return string $url Returns the decoded url.
+ */
+function block_core_navigation_link_maybe_urldecode( $url ) {
+	$is_url_encoded = false;
+	$query          = parse_url( $url, PHP_URL_QUERY );
+	$query_params   = wp_parse_args( $query );
+
+	foreach ( $query_params as $query_param ) {
+		if ( rawurldecode( $query_param ) !== $query_param ) {
+			$is_url_encoded = true;
+			break;
+		}
+	}
+
+	if ( $is_url_encoded ) {
+		return rawurldecode( $url );
+	}
+
+	return $url;
+}
+
+
 /**
  * Renders the `core/navigation-link` block.
  *
@@ -171,7 +198,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
 	}
 
 	if ( $is_active ) {
@@ -363,11 +390,11 @@ function register_block_core_navigation_link() {
 function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-link' => false )
 	);
diff --git a/packages/block-library/src/navigation-link/update-attributes.js b/packages/block-library/src/navigation-link/update-attributes.js
index 4b7ee45ac99111..f618b5f03ef2fe 100644
--- a/packages/block-library/src/navigation-link/update-attributes.js
+++ b/packages/block-library/src/navigation-link/update-attributes.js
@@ -89,7 +89,7 @@ export const updateAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...{ url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl },
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index c1c8006039f555..f3c8cad8f0ca89 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -308,11 +308,11 @@ function register_block_core_navigation_submenu() {
 function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
 	$current_tab_settings = _wp_array_get(
 		$settings,
-		array( '__experimentalBlockInspectorTabs' ),
+		array( 'blockInspectorTabs' ),
 		array()
 	);
 
-	$settings['__experimentalBlockInspectorTabs'] = array_merge(
+	$settings['blockInspectorTabs'] = array_merge(
 		$current_tab_settings,
 		array( 'core/navigation-submenu' => false )
 	);
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 3a4f09ccfd0411..2855bc5e2b9ba7 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -727,6 +727,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				<ResponsiveWrapper
@@ -768,6 +769,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				<Warning>
 					{ __(
@@ -842,6 +844,7 @@ function Navigation( {
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
 				/>
 				{ stylingInspectorControls }
 				{ isEntityAvailable && (
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 d6eb607120c46b..3350a6a881cfcc 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -10,6 +10,7 @@ import {
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
+	Spinner,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -19,26 +20,17 @@ import { __ } from '@wordpress/i18n';
  */
 import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
+import { LeafMoreMenu } from '../leaf-more-menu';
 
-const MenuInspectorControls = ( {
+/* translators: %s: The name of a menu. */
+const actionLabel = __( "Switch to '%s'" );
+
+const ExperimentMainContent = ( {
 	clientId,
-	createNavigationMenuIsSuccess,
-	createNavigationMenuIsError,
-	currentMenuId = null,
+	currentMenuId,
+	isLoading,
 	isNavigationMenuMissing,
-	isManageMenusButtonDisabled,
-	onCreateNew,
-	onSelectClassicMenu,
-	onSelectNavigationMenu,
 } ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
-		? 'list'
-		: undefined;
-	/* 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(
@@ -49,6 +41,94 @@ const MenuInspectorControls = ( {
 		[ clientId ]
 	);
 
+	if ( currentMenuId && isNavigationMenuMissing ) {
+		return <p>{ __( 'Select or create a menu' ) }</p>;
+	}
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	return (
+		<OffCanvasEditor
+			blocks={ clientIdsTree }
+			isExpanded={ true }
+			selectBlockInCanvas={ false }
+			LeafMoreMenu={ LeafMoreMenu }
+		/>
+	);
+};
+
+const ExperimentControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
+
+	return (
+		<>
+			<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>
+			<ExperimentMainContent { ...props } />
+		</>
+	);
+};
+
+const DefaultControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		isManageMenusButtonDisabled,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+	} = props;
+
+	return (
+		<>
+			<NavigationMenuSelector
+				currentMenuId={ currentMenuId }
+				onSelectClassicMenu={ onSelectClassicMenu }
+				onSelectNavigationMenu={ onSelectNavigationMenu }
+				onCreateNew={ onCreateNew }
+				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+				createNavigationMenuIsError={ createNavigationMenuIsError }
+				actionLabel={ actionLabel }
+			/>
+			<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
+		</>
+	);
+};
+
+const MenuInspectorControls = ( props ) => {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const menuControlsSlot = isOffCanvasNavigationEditorEnabled
+		? 'list'
+		: undefined;
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -57,59 +137,9 @@ const MenuInspectorControls = ( {
 				}
 			>
 				{ 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 }
-							/>
-						) }
-					</>
+					<ExperimentControls { ...props } />
 				) : (
-					<>
-						<NavigationMenuSelector
-							currentMenuId={ currentMenuId }
-							onSelectClassicMenu={ onSelectClassicMenu }
-							onSelectNavigationMenu={ onSelectNavigationMenu }
-							onCreateNew={ onCreateNew }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							actionLabel={ actionLabel }
-						/>
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-						/>
-					</>
+					<DefaultControls { ...props } />
 				) }
 			</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 d923d55d64b66c..4b1f6c33d1d1ae 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -69,7 +69,10 @@ function NavigationMenuSelector( {
 			navigationMenus?.map( ( { id, title } ) => {
 				const label = decodeEntities( title.rendered );
 				if ( id === currentMenuId && ! isCreatingMenu ) {
-					setSelectorLabel( currentTitle );
+					setSelectorLabel(
+						/* translators: %s is the name of a navigation menu. */
+						sprintf( __( 'You are currently editing %s' ), label )
+					);
 					setEnableOptions( shouldEnableMenuSelector );
 				}
 				return {
@@ -102,7 +105,7 @@ function NavigationMenuSelector( {
 		if ( ! hasResolvedNavigationMenus ) {
 			setSelectorLabel( __( 'Loading …' ) );
 		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
-			setSelectorLabel( __( 'Select menu' ) );
+			setSelectorLabel( __( 'Choose a Navigation menu' ) );
 			setEnableOptions( shouldEnableMenuSelector );
 		}
 
diff --git a/packages/block-library/src/navigation/leaf-more-menu.js b/packages/block-library/src/navigation/leaf-more-menu.js
new file mode 100644
index 00000000000000..77b11b71b28459
--- /dev/null
+++ b/packages/block-library/src/navigation/leaf-more-menu.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { addSubmenu, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore, BlockTitle } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+export const LeafMoreMenu = ( props ) => {
+	const { clientId, block } = props;
+
+	const { insertBlock, replaceBlock, removeBlocks, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<MenuItem
+						icon={ addSubmenu }
+						onClick={ () => {
+							const updateSelectionOnInsert = false;
+							const newLink = createBlock(
+								'core/navigation-link'
+							);
+							if ( block.name === 'core/navigation-submenu' ) {
+								insertBlock(
+									newLink,
+									block.innerBlocks.length,
+									clientId,
+									updateSelectionOnInsert
+								);
+							} else {
+								// Convert to a submenu if the block currently isn't one.
+								const newSubmenu = createBlock(
+									'core/navigation-submenu',
+									block.attributes,
+									block.innerBlocks
+								);
+
+								// The following must happen as two independent actions.
+								// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+								// selector to determine which block is "active". As the UX needs the newLink to be
+								// the "active" block it must be the last block to be inserted.
+								// Therefore the Submenu is first created and **then** the newLink is inserted
+								// thus ensuring it is the last inserted block.
+								replaceBlock( clientId, newSubmenu );
+
+								replaceInnerBlocks(
+									newSubmenu.clientId,
+									[ newLink ],
+									updateSelectionOnInsert
+								);
+							}
+							onClose();
+						} }
+					>
+						{ __( 'Add submenu item' ) }
+					</MenuItem>
+					<MenuItem
+						onClick={ () => {
+							removeBlocks( [ clientId ], false );
+							onClose();
+						} }
+					>
+						{ label }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+};
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
index 97c312d1b7960e..04e7f7f574dd25 100644
--- a/packages/block-library/src/page-list-item/block.json
+++ b/packages/block-library/src/page-list-item/block.json
@@ -44,7 +44,8 @@
 		"reusable": false,
 		"html": false,
 		"lock": false,
-		"inserter": false
+		"inserter": false,
+		"__experimentalToolbar": false
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 45681737165b80..efc73ad3a0a486 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -308,6 +308,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
 	if ( 0 !== $parent_page_id ) {
+		// If the parent page has no child pages, there is nothing to show.
+		if ( ! array_key_exists( $parent_page_id, $pages_with_children ) ) {
+			return;
+		}
+
 		$nested_pages = block_core_page_list_nest_pages(
 			$pages_with_children[ $parent_page_id ],
 			$pages_with_children
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index b0a2fb2883f79a..9573eedde66cfe 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -112,6 +112,7 @@ function PostAuthorEdit( {
 							/>
 						) ) || (
 							<SelectControl
+								__nextHasNoMarginBottom
 								label={ __( 'Author' ) }
 								value={ authorId }
 								options={ authorOptions }
@@ -127,6 +128,7 @@ function PostAuthorEdit( {
 					/>
 					{ showAvatar && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Avatar size' ) }
 							value={ attributes.avatarSize }
 							options={ avatarSizes }
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 9d0b11a6318d26..76bc9787bd5874 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -160,6 +160,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Image size' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
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 6bd0289687ad7a..567bcc84f0a0bd 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -144,6 +144,7 @@ export default function QueryInspectorControls( {
 						) }
 						{ showPostTypeControl && (
 							<SelectControl
+								__nextHasNoMarginBottom
 								options={ postTypesSelectOptions }
 								value={ postType }
 								label={ __( 'Post type' ) }
diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js
index 143e4c5f8dd8b0..71ddd290989728 100644
--- a/packages/block-library/src/query/edit/inspector-controls/order-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js
@@ -27,6 +27,7 @@ const orderOptions = [
 function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }
diff --git a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
index 8c0c95e19d56db..d3f29a66385931 100644
--- a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
@@ -13,6 +13,7 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 9cb8d8775a2bf3..193499709d0689 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -94,6 +94,17 @@ export default function QueryContent( {
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
+	const htmlElementMessages = {
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
 	return (
 		<>
 			<QueryInspectorControls
@@ -113,6 +124,7 @@ export default function QueryContent( {
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
@@ -124,6 +136,7 @@ export default function QueryContent( {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ TagName ] }
 				/>
 			</InspectorControls>
 			<TagName { ...innerBlocksProps } />
diff --git a/packages/block-library/src/rss/index.php b/packages/block-library/src/rss/index.php
index e32155195af1db..91cdab3f589e06 100644
--- a/packages/block-library/src/rss/index.php
+++ b/packages/block-library/src/rss/index.php
@@ -48,7 +48,7 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( 'c', $date ) ),
 					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 71ec7faee6406b..01863f1fd7e749 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -43,6 +43,7 @@ const SocialLinkURLPopover = ( {
 		>
 			<div className="block-editor-url-input">
 				<URLInput
+					__nextHasNoMarginBottom
 					value={ url }
 					onChange={ ( nextURL ) =>
 						setAttributes( { url: nextURL } )
@@ -105,7 +106,7 @@ const SocialLinkEdit = ( {
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
 							) }
-							value={ label }
+							value={ label || '' }
 							onChange={ ( value ) =>
 								setAttributes( { label: value } )
 							}
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 2ca9cb6c42a984..86c68cf938b507 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -510,6 +510,7 @@ function TableEdit( {
 			) }
 			{ ! isEmpty && (
 				<RichText
+					identifier="caption"
 					tagName="figcaption"
 					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index dd669a7e840b3f..e13c70b1a97f10 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -109,6 +109,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Taxonomy' ) }
 					options={ getTaxonomyOptions() }
 					value={ taxonomy }
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 ca42726b5655fa..7683615738daf0 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -49,6 +49,27 @@ export function TemplatePartAdvancedControls( {
 		};
 	}, [] );
 
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+
 	return (
 		<InspectorControls __experimentalGroup="advanced">
 			{ isEntityAvailable && (
@@ -63,6 +84,7 @@ export function TemplatePartAdvancedControls( {
 					/>
 
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }
@@ -72,6 +94,7 @@ export function TemplatePartAdvancedControls( {
 				</>
 			) }
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{
@@ -92,6 +115,7 @@ export function TemplatePartAdvancedControls( {
 				] }
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				help={ htmlElementMessages[ tagName ] }
 			/>
 			{ ! hasInnerBlocks && (
 				<TemplatePartImportControls
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index dbd8ab49c226eb..5c8f5e2ab531f0 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -50,30 +50,31 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 			<ToggleControl
 				label={ __( 'Autoplay' ) }
 				onChange={ toggleFactory.autoplay }
-				checked={ autoplay }
+				checked={ !! autoplay }
 				help={ getAutoplayHelp }
 			/>
 			<ToggleControl
 				label={ __( 'Loop' ) }
 				onChange={ toggleFactory.loop }
-				checked={ loop }
+				checked={ !! loop }
 			/>
 			<ToggleControl
 				label={ __( 'Muted' ) }
 				onChange={ toggleFactory.muted }
-				checked={ muted }
+				checked={ !! muted }
 			/>
 			<ToggleControl
 				label={ __( 'Playback controls' ) }
 				onChange={ toggleFactory.controls }
-				checked={ controls }
+				checked={ !! controls }
 			/>
 			<ToggleControl
 				label={ __( 'Play inline' ) }
 				onChange={ toggleFactory.playsInline }
-				checked={ playsInline }
+				checked={ !! playsInline }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Preload' ) }
 				value={ preload }
 				onChange={ onChangePreload }
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index f09f7dca49b51e..5647aec95c0061 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -327,6 +327,7 @@ function VideoEdit( {
 				{ showCaption &&
 					( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
+							identifier="caption"
 							tagName="figcaption"
 							className={ __experimentalGetElementClassName(
 								'caption'
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 4f8ebbdba3f243..a9c9e24c53f731 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -119,6 +119,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					/>
 				</div>
 				<SelectControl
+					__nextHasNoMarginBottom
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
 					options={ KIND_OPTIONS }
 					value={ kind }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2017d43e246995..fd0407a1f0a941 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Toolbar`: move all subcomponents under the same folder ([46951](https://github.com/WordPress/gutenberg/pull/46951)).
+-   `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
+-   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
+-   `SandBox`: Convert to TypeScript ([#46478](https://github.com/WordPress/gutenberg/pull/46478)).
+-   `ResponsiveWrapper`: Convert to TypeScript ([#46480](https://github.com/WordPress/gutenberg/pull/46480)).
+-   `ItemGroup`: migrate Storybook to controls, refactor to TypeScript ([46945](https://github.com/WordPress/gutenberg/pull/46945)).
+
+### Bug Fix
+
+-   `Placeholder`: set fixed right margin for label's icon ([46918](https://github.com/WordPress/gutenberg/pull/46918)).
+-   `TreeGrid`: Fix right-arrow keyboard navigation when a row contains more than two focusable elements ([46998](https://github.com/WordPress/gutenberg/pull/46998)).
+
 ## 23.1.0 (2023-01-02)
 
 ## 23.0.0 (2022-12-14)
@@ -13,6 +27,7 @@
 ### New Feature
 
 -   `TabPanel`: support manual tab activation ([#46004](https://github.com/WordPress/gutenberg/pull/46004)).
+-   `TabPanel`: support disabled prop for tab buttons ([#46471](https://github.com/WordPress/gutenberg/pull/46471)).
 -   `BaseControl`: Add `useBaseControlProps` hook to help generate id-releated props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
 
 ### Bug Fix
@@ -23,6 +38,7 @@
 -   `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)).
+-   `ComboboxControl`: Fix unexpected behaviour in IME Composition ([#46827](https://github.com/WordPress/gutenberg/pull/46827)).
 
 ### Enhancements
 
@@ -70,6 +86,7 @@
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 
 ### Internal
+
 -   `AnglePickerControl`: remove `:focus-visible' outline on `CircleOutlineWrapper` ([#45758](https://github.com/WordPress/gutenberg/pull/45758))
 
 ### Bug Fix
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index 9e4777aec3eecb..bb5caedb8082a0 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -97,6 +97,7 @@ const ColorPicker = (
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
+						__nextHasNoMarginBottom
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
index 98bd612e631218..b3dfb21fb1c489 100644
--- a/packages/components/src/color-picker/stories/index.js
+++ b/packages/components/src/color-picker/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -12,70 +7,35 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { Flex } from '../../flex';
-import { Spacer } from '../../spacer';
-import { space } from '../../ui/utils/space';
 
 export default {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		color: { control: { type: null } },
+		copyFormat: {
+			control: { type: 'select' },
+			options: [ 'rgb', 'hsl', 'hex', undefined ],
+		},
+		// We can't use a `on*` regex because this component will switch to
+		// legacy mode when an onChangeComplete prop is passed.
+		onChange: { action: 'onChange' },
 	},
 };
 
-const PROP_UNSET = 'unset';
-
-const Example = () => {
-	const [ color, setColor ] = useState( undefined );
-	const props = {
-		enableAlpha: boolean( 'enableAlpha', false ),
-		copyFormat: select(
-			'copyFormat',
-			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
-			PROP_UNSET
-		),
-	};
-
-	if ( props.copyFormat === PROP_UNSET ) {
-		delete props.copyFormat;
-	}
-
-	return (
-		<Flex
-			as={ Spacer }
-			gap={ space( 2 ) }
-			justify="space-around"
-			align="flex-start"
-			marginTop={ space( 10 ) }
-		>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-		</Flex>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-const LegacyExample = () => {
-	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
-	const legacyProps = {
-		color: legacyColor,
-		onChangeComplete: setLegacyColor,
-		disableAlpha: boolean( 'disableAlpha', true ),
-	};
+const Template = ( { onChange, ...props } ) => {
+	const [ color, setColor ] = useState();
 
 	return (
-		<Flex align="flex-start" justify="flex-start">
-			<ColorPicker { ...legacyProps } />
-			<pre style={ { width: '20em' } }>
-				{ JSON.stringify( legacyColor, undefined, 4 ) }
-			</pre>
-		</Flex>
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
 	);
 };
 
-export const legacy = () => <LegacyExample />;
+export const Default = Template.bind( {} );
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 0058cb90f4710e..bf25707ba9c936 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -9,7 +9,6 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
 import { boxSizingReset } from '../utils';
 import Button from '../button';
@@ -111,10 +110,6 @@ export const ColorfulWrapper = styled.div`
 	}
 
 	${ interactiveHueStyles }
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 export const CopyButton = styled( Button )`
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
index eae04e09d8cf71..f01eb7dd4cac2a 100644
--- a/packages/components/src/combobox-control/index.js
+++ b/packages/components/src/combobox-control/index.js
@@ -121,7 +121,15 @@ function ComboboxControl( {
 	const onKeyDown = ( event ) => {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
 
diff --git a/packages/components/src/dashicon/types.ts b/packages/components/src/dashicon/types.ts
index a53f9f275da42e..eeee9c2d40a19d 100644
--- a/packages/components/src/dashicon/types.ts
+++ b/packages/components/src/dashicon/types.ts
@@ -3,12 +3,6 @@ export type DashiconProps = {
 	 * The icon name
 	 */
 	icon: IconKey;
-
-	/**
-	 * Class name
-	 */
-	className?: string;
-
 	/**
 	 * Size of the icon
 	 */
diff --git a/packages/components/src/focal-point-picker/stories/index.tsx b/packages/components/src/focal-point-picker/stories/index.tsx
index a42185f3c1ffb5..709b864baf0214 100644
--- a/packages/components/src/focal-point-picker/stories/index.tsx
+++ b/packages/components/src/focal-point-picker/stories/index.tsx
@@ -59,7 +59,7 @@ Image.args = {
 export const Video = Template.bind( {} );
 Video.args = {
 	...Default.args,
-	url: 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm',
+	url: 'data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAACAG1wNDJpc28yYXZjMW1wNDEAAAScbW9vdgAAAGxtdmhkAAAAAN7yaaTe8mmkAAAD6AAAAzAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAA7l0cmFrAAAAXHRraGQAAAAD3vJppN7yaaQAAAABAAAAAAAAAzAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAUAAAADwAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAMwAAAXcAABAAAAAAMxbWRpYQAAACBtZGhkAAAAAN7yaaTe8mmkAAFfkAABHqFVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAAC3G1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAApxzdGJsAAAA0HN0c2QAAAAAAAAAAQAAAMBhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAUAA8ABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAM2F2Y0MBTUAo/+EAG2dNQCjsoKD9gLUGAQalAAADAAEAAr8gDxgxlgEABWjq4TLIAAAAE2NvbHJuY2x4AAYAAQAGAAAAABBwYXNwAAAAAQAAAAEAAAAUYnRydAAAAAAAApRuAAKUbgAAABhzdHRzAAAAAAAAAAEAAAAYAAALuAAAABRzdHNzAAAAAAAAAAEAAAABAAAAJHNkdHAAAAAAIBAQGBgQEBgYEBAYGBAQGBgQEBgYEBAYAAAA0GN0dHMAAAAAAAAAGAAAAAEAABdwAAAAAQAAOpgAAAABAAAXcAAAAAEAAAAAAAAAAQAAC7gAAAABAAA6mAAAAAEAABdwAAAAAQAAAAAAAAABAAALuAAAAAEAADqYAAAAAQAAF3AAAAABAAAAAAAAAAEAAAu4AAAAAQAAOpgAAAABAAAXcAAAAAEAAAAAAAAAAQAAC7gAAAABAAA6mAAAAAEAABdwAAAAAQAAAAAAAAABAAALuAAAAAEAABdwAAAAAQAAKIkAAAABAAALuAAAABxzdHNjAAAAAAAAAAEAAAABAAAAGAAAAAEAAAB0c3RzegAAAAAAAAAAAAAAGAAADx0AAAUwAAADvQAAADgAAAA3AAAEuQAAA3IAAAApAAAAPAAABZ8AAANFAAAANAAAADoAAATdAAAE3gAAAC8AAAA2AAAEXgAAA1sAAAAlAAAANQAABU0AAAAfAAAAEQAAABRzdGNvAAAAAAAAAAEAAATMAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAxLjUuMSAyMDIyMDExMDAwAAAACGZyZWUAAEITbWRhdAAAAvQGBf//8NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNjQgcjMwNjUgYWUwM2Q5MiAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMjEgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0yIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDE6MHgxMTEgbWU9aGV4IHN1Ym1lPTYgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02IGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MyBiX3B5cmFtaWQ9MiBiX2FkYXB0PTEgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0xIGtleWludD0zMDAga2V5aW50X21pbj0zMCBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmNfbG9va2FoZWFkPTMwIHJjPWNyZiBtYnRyZWU9MSBjcmY9MjIuMCBxY29tcD0wLjYwIHFwbWluPTAgcXBtYXg9NjkgcXBzdGVwPTQgdmJ2X21heHJhdGU9MjAwMDAgdmJ2X2J1ZnNpemU9MjUwMDAgY3JmX21heD0wLjAgbmFsX2hyZD1ub25lIGZpbGxlcj0wIGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAwhZYiEAf/zA2GNkKfOFSsuTVloQEaXdzoHD7Vtw/suEginCwuvVdLAAIC4a8RRwZWlYBuDUCSPfB3B5lW9X50lraB4kEgmym6mAAImPPAiIv5IzQUREXNTlXLGDbZ6pr7DtSUl9HZ8/7xMuDpvacJMwO2ZrQABPwobl+UNw97XDlJhhlm1a9jM3/P/K1jvpDw63Bu9E5f4cavT3elDFhSIT6FQ+iTN+13wY9LeL+T20YNckYyNifbav1oJZN6ec1X+ai3nodpai1j2QnWNfq3lO8tGXVbG1DPN4S7Xm8qs0ba7GbbB3eagRurMx0TWeIRfxVmKgXizipPdX4zTTlG4C0U0+eeEcjWzes5UzxKEhLcaJRJ6P5LU4p24Puq9xTLEB1EjbhpdbrclA2Z8rSfiQxXPW+9hvNkCWMDRvjKpUVzTQP+HgnD3Th39tikUJZJYer5OCbzdwPK7Q/f47QynLISBoW5VZXmWwIOZG4T7KAYVOKrQuU0wW3bhUY4SPvo979r3FTfcf4MxGr2LR5+2BDLaI7EntpwCI1zj9Lk5WFGY+Rlb++hMvZ4DSJKzv6fE0ROmmXsJ0U1LPjkHe7bastf5R3a+x2QHuUSIxWmO7wnVWVn6mkvjU6BQUelrRTDKrwOGPrn0lNrZCLZE1nQXB5TxM82EX+hv1YG3eS5tSoQpWaLkvvnoMBxGt1bBo42UKVKmpzSfPfTapexYbjW0pQB+BfazvlIsbkWoUgdIPsmpq7+ca7FT+iIeD+TNU9TvEmvHyV1MKYax64hPCtNO34u5vwjlu5P2O2d0nL5mg++r4+Gl9ybNKGPWGXK/L5HjojDKSZBdCcv8rejatxmJxlUI9JdvZy0kAjLislEn8mWpf1I0ZXkeb+HuOWFMjYcJy1WwwEIN04jzhejmHpqdzduXUqMyzSKrbIX5zc0EcicHQpoGg0Tlf5yOfTKX3sqZgXsLUobfqUz8Xj5HdyWq2iW3MLytOMm/8Rbyb+RaVyWZQL6yBQcJNRFIvdkTT7K1N6amktfFiPJKaKpBaE07Y5sytd2C3KSZnvlrr2AZ2s/6u2HsMCRRr+qDzywVpCkXW3EWrdKb+3Sq7yh+lopglZGRb+BKkSWihgi00ZRL+F3mwUNV5VPibODPvr//skhJk7LLXI7r8/JEz4lnQqpwZJu8CpeJzFX4dlytL8bpoRhilI9Nwu3fkyJGu4d/esGQfXvg+OLzf63xMyu6HMwey7Z9aA21FHYFH+3rIum72Mu22IXYFSXVq1eN0yTUsMT3/lnrTuWt8zh9INPUDUgUi/uPuvnhjDr/MAO5Tb7h3nsfQy6WDWhHcRZBQQkLd7M1tZdEeWw+jz1ckNjcnCe5o3o6Ucd+Tb9uZKyvlzyzVkx+PZRFCAdQrKLXv2OGHCUR9eLFWNHogm2XZU/39A462LM0PkeM6Wn2Aurjpoxq9V4uzC7NW0P0f+LrypIunB8Cy8VYYy0i4eLJhjtGqXHLazJh6BxDRysBIxpqDp16Hm+sT8+LnPrH0yAl2TXf1KmkLnP/+2193RxJJ9roy85d96K9RZTG76ZxUFPGgmGILrhrY4maFWhGq9guBeokoIkUAUn9yhzTHr88D5MSvGlesrpy7CJI1vKwJPFX56c25ScAdNOXEB0aASly1xpzslZ65oQJrP5lh1OSgAzMaCzrWleHUOxmpcwMeFYys3lEgOtwQgBmoKvGQ6ld0BLI5JJPQrZTAs6M6cU9WxiOHiqSraNLEooqeepDNmg9AjKVKCUTh1pc26JOdg7YhrKqdc4jyq0YqUrguZkTo7pt2mHdWExgEfHshuEUvL2J0hW6y4wC1tfEdJoKIPnySv6peQMYGAD50HGsg6lix+bfYb+wYj1RQrDZyPMrib47nNjVSQq7feOrqdY5PX1ey7AzW0wFOg1ksN9uRszBUb1JELEEFBqTIDQz3DH0JALQ4WhunD7cpmlPuoaWLNwVztHeWLerXLE74iuziBx/SMZgzQOFMJ/XFrjWw8rmaJSIiA9uRyhaW9YDJ/smWG8Uf+7cRtpTu6ao/3Lh2sQQdWzQIRLONgxLzDlVyOavM/kDa5da0hknWv3PlLILv7vGQ+Zs4UktjycwP6duVkN/u1KQTf8X0HXCAPvq07AswtBQyNRVuWGdvKv9qVwzF0C8QueA69lL9j/dn5vVYW+qbUyF9z/ilUPHVl9LzV+Y4n+QGnxyVMFvOit87NtZphn+L4ZYLMztPRYIZHWmJHx59Ek8cThU/RyDEU2ZQ9GuXH/tAA0b0CqP0Opvb3iqgzeNDcvz7C6W4wUgm2G3vM0KdmNgADxF4iTE0cJswo2exOMt/uRYFORat+ffXU+4pXpPr0cZeBO5qHqk/w+21EctDB0Ky9PZSyT2L/CdLQC+6GIbRo871nJkDZId5POS8t8qf25O3DeUze17pUYvtK1rcYNGGv9kr5Noh/cvVxlZfZk+hAJZEsJqN+k6xG2469xaQq8wEKL6yev5Eiq+DzSDyO3xk9IL4UDosFTqgv+nLqSEQZf42/1vlI6r7PLBWiw7Grg2ITSfVRZT9OhEQCEEIrfA0BXFIjtJ9e9pDZZhpF6qIhJ+EZtB2UOCWU4zxwt0pDLkX8+qEaefg0s8XkxDrCbUInNY5+MS97YMrbAZDo11HpMbD6spXTj/sGEJEVvBhVJYZxT34+E8RzPjbn5PgSrUpM1lQZ+hbeJ4PV+kiDwC60BVriYI4xyd/DlHSe0CwGooOSUYzLb2x6ScpvbuGmkZ+FS48S/RL6BdZcC+tw9YJuj3k+ZRzQEygvLJGn/Ff3g35Mu5OniFh8iBs7klOQBR+DcH5LndXN+Mw4OcrCyfC3qOUXyUEB4KAMAF6x48I4Q3G2+/asthOmO/Lfue5ELh8fPTOeWGcNEEHPeQbacOs7YSHiT8eBfzXxUdYHjI5/RMqG7UJaIVf6C+DHGX1XF7AUtj4MaTJDu+AN20uk9Yokv8eeI4sc9v/+dc0z3GOsyu34kL9qFhGzPhC9a3Eki2vdkvrPNhgUsZmvjbhGGXHWFhPcywW+dUfpTJ8flX7/pnDj8t/1z4/VjkTqN13n+OYmQXKw2wfiDjT3WxFjNvkMywveho0ya3lNGmZ/7XQ4j2wCM53wBd2Vd4aLeXHhulxu1+aCxhe0/0VfjuGRERmY78odPjleOb03ulA+BzFmPC0D/OT91+LDXwicxGW4FYNpdddyyG+Jb250hXUK7mb/kpnLfQLcQ1E0lB/Nh7croXi6FF8uBMlwigktv6jntMUVx0aU7cpR1wIXDR17VCRiuejAbn8v4rVvJvyrI6xLUetS0vdq5L5FVtxcrb41eisp1gTXjO8u9QAXVPjS8r9cNE5yIHvCM6AjWLy5oBTGkoQ/BrzuTkdM8y8GZq8Q1Nd7wBbj407htDYJknbg32SWpCnZNkpNXVL2Nt4fU+kXZEqtJJa6zJTLk+VhXWT+s8oW4YfUESvkoB5mUaU18P7xPA4V5P1V3na4yyXzrLdWAHcaZBQnddBFad2AYUcoTEeYYckXoc9R+bCRQSo5rSNtVUj2jUnT/2YxLKRo3wSiAZGfDnhE0sZ2UaE2+W+LdifOHvwJ0j43ZdeSdtG6aod16qez0JLDvWR2hLjukO3yLRhr4uFN8ebV6vnZztxLCZVcPmax7UfjQ67AWxjcFlyMB/Rm800Oe++ft2Gxngrejdnt0lY6/MpSEIOl24LUp8YXgdR0tsNo0TqBQII0KiU6k8UQCat4MLmbGWKdLzMtZXfzS59+DuVImjG3UGOSrEu7VCPjAMIe3Z+WDNz5nIEaxwQrMtGhqv9oqhNOCG751fxfXb8zNKOC5r96Ti8zqm5P7O/G58xp7F+bbECR+Lf/IUXlxTdt6dyVsP8L9qfonB/9HuWIN5TInSOYkVF3CnRDe92FJTx7URcvk7ABg/akjc2++SqNFEW5tH1igCo4JWWqItaishaksBJnVHYO7xSWre29ik20xixB/j9IQBiYEJnn5UbtZAzUOdCLsbdjH1+aSuRIofXvLynenW4vT4/PpW+jJidXV1fX48ZklOyXf8FXn5UImACwO4rEtlMUZq9eJdO0VAt2w10t/+7PDtAO2wInrOo4V18nju21flg7HyhtrBAAAFLEGaJGxG//yk5V/bYk6AL69BRgDUlzKmvMlnKdcvSzcDMpFz33VkzeYT/fXe72/sEqXtalkzOHcwbKeaUFZK+YZJr4dCu/+aXe1udMCC4PwXR+kHnTiy1yoQ+xKIMjp/3uOW+M9hVvZPaOLpBEMM7WaqU9nGX4hJzj0EKQ2eQdjElT9GIqQDmoXuZ8jssWV+Ao/LqUYAK8ogdNsSMBSpxfEIY64qDQpN/1QnrST4ay5jwsBFt0PB7H6j/ep0pZlZB93ML9g4Oie/bv+cewzgXSL3iKsXDgY8Qc28yicYWQtI9ykEJgb+/Clj+3R13r2jNZtdAqUDrhn4P2qe1oHVddY2vdEKoukaDI1rza7Dh6efOEtd+FPLm49xxlf/uU3wqiN1//r00ibfbGE5dltNN7pdmaxEtpyaTdCCxbJ6u270FuCV5fnsYALRBgq9lLo1L4AwEQHg1uzdZgcIFUyw5pNvFtkfHO2cTagF/RrNYTXr8yobWkmprqgydk6Jn28cT8R6E5JQh8Q8VMCPJt91GBgoYk6DaTKVQ+GR8AQiofW6w2qgI6A69Fny3397qCEg9iEZpDO2N5BpALpZZmzAyaONjw/3Sz07iltmDs45X52rSlQXgoSFKkPg8vAzUgcJRmCDnK4tvr5yv2UXFRflRtnJeUasWD9P9UP7dEujcD237dOA9DDH2ClH2wyT5WmhZRNYbpEoZzHUf5SYG5bGZTBFdXoHCWZkqjMg8bOy7D8EZO+yRNXY9ZuadAQbFCR8uKfmVyAqrdUiATepgc/a58BCpkcQczP8nqIbjS5RfP4/hVWY8RAuuNOvtMmfg3o1et1cCT+pYI17EHgXr59vNEVIE78s6Jwi3uUjPHrnCvbPqrC2GBtyc/HG/epri8XwcPf1cDY3jcA6VwkIx6o/ZmEQ/mAlRIO9ScmJuOX/n6Z6yp97DFOcrLFTHgoL2eMP+V/GOU3TIuyzwj9/zHqzC+S42Tgnm1kfzAeKwuPOgpKIkOS9/SYxsTVHYqmKGkGBZi77VKp7BMJmIIOQe4fVYEOZ5YYAjR+QKduA+ReJMHhh7lDdpcRkiSIOJaYhnWQjwz4r+Mn8qQ2ZlA6B2k9OWV5A6Pzy8cKFWYZvMdWtCuFsFkAlBBY/hSVDlBvBabEJvqxOuls3KXxDSszejfPJOMkYIDbKmK74SmNMbFGYE6AHx8EWP1rTofvGf59sGbYZjoye+kyDH4q2lFuKwzdqX3BvADvwS/JqNiax4McmKbISxuQJacCRkD4Cqoi4FnWFKqA3xgbtwQSrlTV7Hw1beEvfU5x6Bt9e1LIn6DvtIBjwkM8v2hQjq6cWgVThoxwED4TviYxSmNLM9sNrBIQGzR7vzgBlRg+g6cT2fChebuOUfIQOvOW5jwHJWpZN5ddtgvsMmj7ZYUrITDCwY1CgCS8KijSN/Q4aUkGED3bgLe7GKFq/c8oPAgps3jwSuiRWlV7MwXAgpMfowGKM8n67EZMpylSYuApCH2xoOdHePAjYFHHM9hvTMV0Jv+5Q31C1h/UuQyXU1MyduXg9Mlx2uOpBVzP1Qc/hmlsZoHMGysUZ5feYp846DLu/X5xW+9jPexhJ9hLwiVWNHNFfmp5/kaKE7WC+5E9/6OAz/DuNLPOuyvBwJ9JySD8ov9JsK+maBiT7IzJrsaEKzzYS7erYult/p/SyasHUTbJ4BgQmH64Qb2Ydco02tZzGSrAAkZbvGasnvYee+5NkFbnlB1C5xHU7LcQ6t7IRKj4NVIAAAAO5QZ5CeL9DUtN8A/bTgCkRRrBvGKTL6Qq/3/0bv5L58FnEKi7CJwY7YYYePSK08qJjZtspBBfw3JQsZy8UYsAV7u+GxHzRLbeZNw13bJAT7nVcR83GmWeCzDwUEk9elfT45KJyhT/b0x27CWARXNNIcYUzEU2F9U5GsiiQ4clH1kFGf5dI7JVzQaZk5jhoTZY3LK3DOeKtm7Hh/BaHANbEz8ZdztVOrVDwB7QwsmkMoEUIKdX+wDzZWK6JKdEQynr1Rqc+qxGg/PaN5luC9yjEjCMzsYFhEahpiAADL67e6F0WBZSmvI3XZC/nF7iJj5G5ocWFY06hI+W4wQ89KkpOGcUASWRU2mGvbHq12VA+xAF3vVecHZVXmw/Qbu+J+uG1DXY7ktD8hKK1NQ9rShO4r+wlALcacAk2mPoC9KBTKYp31HnpJzJEQlwsBe0cFxBBnEPiW5HOky4eTdy6PruUkSsu3GExXxIf7frY/VqL5pa7RVXry4pdJNtirHiWCC+PdZiTvlX1m/aT2nyRHYEDKAbph896AsYOn+YnHVeENt580uPY91s0uM3vrB74BAq+PtChvY5/oCXngPquoWZ6SkTp3DHIZG+UHI3kRd5FZxg5cKzNuSLACxwL24xPMh9XzJH2z1Et6VzrfZrXQi1conE/TQlhjSd29S01Wc6EUxLXI6IkZToc5yVqNq5yM0DiXt9Os7/dXB/yrH/7+PWjgABHPnEZCJbQCeOjBXIX8egoyaSCKx2Q3AxEzDPsiGN5CpE3mQ+OKHmqpfnzROARN5Yt3LWNwLh+nlXUqKPWTGvfCWxMBzliCdowzMHziIhra4IeDF6cYjId+4/bh+M7aPWauIuKv42h58mkgTeOVYNlx8t2NJO2/1+9D7RMPsfkC4IBz7ZNdI7wws8T4+i8koCAFEukHGCOUeFl0bogUH1cRwuD34m3w4fdawaJU62HHYAbqmsln+7qoyFm/hNlmyVCP90iAhHsjfTMBPJVCcE+mwP7csDuuROcalLfAaMgFywed7ViQpJVfKJJv6PyXzCgWBt6GLHZJ9olmCzS7zykg/5Cueol7nHk0C1u3MwvPv1F6u2RzGlh5WSMATXnkILY+BeLcXTtK6g66EtLk6ZQeDX5PTpm7iMkcfmLN0Twjbn+cXouJ4Mfg4fgisobiGHMWQjY7KGUYMwCi7vmkVStoFQtSDaQqgEYP4A0Aguxk6D+OoRxNFI63oRXeZaTEFuH5HrKdeqW9UEd7TzFMhfudhMM34rXb98AAAA0AZ5hdH8jvpdGROI7bSMKAAADACMj2cV31f7qpkPemBOJNdf3vf36M6gN3zC4osWpqtDXeQAAADMBnmNH/0N1x6D8rbCTqAEImIXY/C6nT/gzHYvs+x7Ifmu0wbVuh7CyJslawMgBgP59Mb8AAAS1QZpoNKTBG//5vW8AXlZAzzbvQt6LccWVmbfXW5TOMS+Sa75eLgodS2aJ2PdBLFmx+Nl+iAxUrh+aH82vePF2kbxo3nx865/9LDGPSQab7QKOjp0GwGc6cPYijS6t8zNsZszcyLxZQU0HHGl2AWf1lX6aL2R6nsSFqa2Bac7e9NGJllBJjMr5mTh7kxVgXVaWf21lMkImZiY+JWbblMlqOMviNnZaO5hjOsFRAHrGqLhpdBz1JeXt6V9QFH0M/7O1o3h60TuF8Sr3R9ru7CZzQeQv/6qVoZ6uGAVPsm13kEbOlAvTjZpkYLL9krnU9a618CVK7xOUjEcQUeGxPEIT28zF9X1ewY5S+FpYHpUE03tbv9/G9Sziccrpj/YpskkdXC3OvrqfNTkAOH/Oe4YlcmOMQAw/v4u7jyIPDgSIn3dvl01QmBrm6VjGIi26w8zlaBCMl+DV4QpuPT0Gyhc3y0YZPBjIl1nP3Odik8EaE1rE5SMbTjAUYgVQa3+TF6yajDxqGNiWM9oo9HXh7x0N91HPXB6TzQak1rvRlWbYBT5S8HltVYdKqEUqrtwV5SgXfMIbJUKdAKLHvT4m4HdqWM92104+vFIIPtWT4COFVF5U8rtpJa8Huh0/HGqzvUTrRH6Q7szTn7b4vmMPDNRTNtyh+NUTGGBpE88FKCj1EWU5gSDHq4SvUrnk/hq7zQwJc3gSuyJADFgrPQ93e300gpzKotyofAuqXm38uY36/9Db2KRcC7U0TRdaVgi5rwdNfOlTzI6Kf/xiMs5rPOjtSS62OtnwvRAQtdIHQc/DPF9obIF6eIidsY0OUkp2gNjzIv06P3Au5C+9VlnEpwTeDlS1wywNSNR613xqSxUi45cFRB/MXk8We8QjIrhrrhKrIQQrMidMrN621RaZHielvsE5MGJIbSmpCwhg/mTyDdbhiXQahZbhAicynmqK66U0pyCcfy1ZxNYRErWt/R2KJWwnpxqenjYbbxrjyn3z3gg5ep/F7pR2b6X0u8JJRJohwLEZgs1Hd5htI3jjThXgLzesg5c1yDlo0nF6Nv0aBESNQ1k8GH3HFsEQ4av90nOpFyqyV0USDP1vSNagRzH4hSdCq9umKD8pITZtqByw2MYEJY5OKnzDd8uC/fe+jhhwGwDIDhCLkGSlalM+t5Wz26M9C+3Iu8D+Wjo/VIVNtOcnW0MVfoiCBV+FEwYueusOYDi8ecHp3xaN1FfFVeo/XKpUQmDcUadEiV0YUAh8Tr9hmpRWkGY7YjkT73zNMg+PkIzrFWFuIX5Ijs/4pzz4NbYKGEfsnbIDrUK6cOMonm/F6OMILnIX27jsarrFj+1DCk2ct88mqeBUhHAJy5XNrlXi3uOFCqUFnfV/UQjRICOgsWJgxqHGnCDQFpLtZRD5ZAdeWB4bSFTRH7pWhZAQpeRkzhLsWpPIoXHd8n1w7JLIssRnKaOA3vJn3cib8PNGUM+Id8foqBjALDYGlDVVD0/gwrk3Km3W0mQoCPqxNVCwaXnf1dOoQHFE8zQcXE+UcLGcm1zND/IsWMGI9TTBI6RzGEsIqzewpdrBM6lZWy8G7rKDQJe5m1+avNqi/2Ze10sfwcEAAANuQZ6GRREt/4drPKDmjD9SiP4GCKASnBhaH/4fPqahr+tNx8A3QJr6gDLqNCrU2q7Xzk0n6Le8xKgjYPjFtPACl9K7Ck9S3sqDyq0e16eLDlMIA3/YJxjCa8NlzJH5EE41PD9bW9VuA+iSHP7X44imUUfrm+K5wdCD5/qf07n7OnFgycrEiH0iCFv8314/5VRGLxoThSbAIV+ROFRdqBmO5kTdVbGCz7AtagWcuKpJYX1ZMDg+5FA2L06zSb8aLMiVmJTan5JssqxZHhqimr8xInMPwQkLErnNFHmMihKJy13HHS+6P4bdfQb7NWVUmEDEjC+lv7lpCVQ9TKG11yy+7eImtHTMKUCeDCvdpHhR/9ByAFWWbLqGhL53SbIvF9uITp5eoeAunyEIPaiE+f8nelSJzWSHUMiJ/nlsT11A7uTV2AtGbUZXyLhoUOo+beBYkqY/4XOVTXlatxjT8nVeZqwgDmy6H8iHeWctIeHPwthDz0Y8lOeDLqLrm/WM3NzbcaLw+SdOvMqzAbIBiRNG/OSqGnSzH4ymks6B4Ox7+RQTMJF+YUrz92144wveNJ+m7DDJcA2Ef+fL5eoK9Grdax5Uu+A3AccruVvICHB6b1jDAqDaU13yeoJ5GMeZpus6/RSeZJSjilUPykAVMvf1pwuixlZmts7+tBRYu5me23mvLPIVbLkX99mon1xnSLV2xE7pTubTikkMPzHHvD70vgR6KpTvu2J8xOZYstmTXHZC4v5LKgPu8mxqNfPSI0Crqulu9YFUNoS4Oqz8Gf2K/Nim8Bmqy4bpwOuFAfztRd++98f5zsbOA2liloQ7QvjwnG0Ugg+WbcwaCNF1EV/qjx//8IkvCvMy8irP0ck7C+mOsijbtTiU240X6Wvf4z3td34UrKx//9D072H+7vdTVn2GTupbSrFbD/OnZm9a2t+ED814PoiiIkZGzsn7rn7viElX01XaXEbVeQQ9W55VCAjvD6MVJ93AhFq5QErrXshPA8JvNekBNrXCnDXPrV+vmwSo5nMsssCSDA1rpUltz3yb1SmOipuSenvPxKoGII4hOV5mUva/kgyLYkfKKt1m+86Av7Vd0C4Kt2QVnHuXvpDefcUCI94gFT0MTxcdcLdo9n/l0wC8mHVI+8uz27Yxw9E5LrFqtWvEWZwvqVEAAAAlAZ6ldH9bMAXa2Fzy2uy5AAADAAAKZqjGMW5qDruI3pQ4rL2czQAAADgBnqdH/4LjU0waEknlET3d4qfUTHiOfuB/zYJFbl0E0ddeRHiNBBVsCJI+qipEq4wifvaehZYh7gAABZtBmqw0pMEX//lvAo5ICKiMCnWCbjZk0ARFeHd/8wpo4T/Er/7PtbIWW9SKqpretF9SLZao2mKHZJl6CSw0K+jJxtnXwZUt5/OyqqiR095Ajt2YqgJoX2pt3S5K2R1/lCurb8Dsd7N06ZeyfMh9lbsBSYym6srOBxAeVcpScHXHW/LWo6nYJg48sNcSIL3y2fcm25IEh3Nh8AJxLvt8FQGR3R2+dRMT8AJVNGyazFibo+vxZdMe8sSsrnxen2jr2CRdcxjmYuEt2gjiSX5VEZ5f6K5P7zlwTzYrkV1nKw7QPyVrwnupQISZcW+KgDk7lFhi1YszBsmC37X4lDWEXTwRugEAH+HpGWeW30P9VLLfLK2ogQ9WN0PagtN0sdh70Bz4zcnEU74hTKoe9bwcW3JbTTOnLA4xUcYWtbbGTwmYzFwiksGOgqFsKM0vebaCAJEgktRJyYxiFMgIUuAsFTcdy8V/aB9qw1yBM8t8UxTuaini6qf4oye30SseUwDlQFd2IwYMTbVF1lNZyWyWcnm4c9oHzta+OPcPBFN4zbG6aPdoYJFpguPf/dBAo9E8sIdfitBGHgN3u8TVqjj52XkyfvWUF2LoYifD+e2Pi7PH6QJ0vgaBBj0ErIMoNNyexJV4QPcBO/V7BU1O4a8b1NU/Uq5hZqkqbRtt/hmxE9/8tnLzffPgZ46q31Ln76tvmVdTCB8zG0NMRkXYlBHC9Jy7H9YA777reCZX/gSuHrDVU4jyAD3kvVITXa2Wks5O0qst/9qfjt1KkhwaCfvF1Ei7YQMvvJ8vnTt+Bhbfv5H29dReRd+J/RrIyMu8bKRUHe9GKoyqgpv+v1LYQn4enbuu0xpl8Da+d7LFi4J3NwiovnrgWKYzR7Pfy1LX/QiOpw9KSJNN/IuqWH1HG4A9jVRxIoMl0gk2v2cT6c4PxCTrbTNVrH9uMlwSc6tqes0c9YArHWeMloFSQV9tEHKYniTHq+3+lGQ7pTPpeBPicPJSHnx4s70sKZaKr5Tt2pwDUZvJWF4PADt5a5HLOluWKbi2k5t8IP5wG3FnUYc2LVCxKwQ4dMIIAH0RSbXlYfxI9ke13VBniXSuTsHgW/S2LRnYXAt9iFD9qufwEuJ0J8p9lcAIMLjTo8z5ezfpbguHut3xzaDwqFaHo5SZSzUpJ4lPDjsEGDUsxoUz15VdSh1nDvzInfZThX8cK19M0ASbSv/GrdFpuANrAT6SXBGeRJKuq+fBOJOr2tILJYACkvmPqkFHCgsNg0gSBqoy7e+olW28U0DSKzjmMkSA/pt3Ozk8dfRnNCYT14fpsw0uNhmSgyV6zWOVtueuVm+viPP/GkwE1eOHrQXHLnXVCEH8Q60jr04JfHpWwM8/RDK4yHFhzOIDvtUbX9KHowRkUdgvu3sJv3GwHRE622afLBtxvnJ51Z8aeKnxBqN0Ay4G9d/HzcmBLuH6c1ncaWVHgUbamtnJFpk9XMalXptaLndc4A19rXA3fpcRAkL7N3W2PWOU6igyHfwni3f4ZxiAOWcCGid3y1rRt2Fpt8/WTF6psz8YU+W3mMiTg8AzAn+e6YXwn5tZf3OFm0UtB4TEs5Z1JEjN5OzowLKmotQAIMvMDffXysNY5i7XLyB4vbJ0ymO/XAeApKkW4t5meC1NOMhy6TQAYJPnxA2wjevhX3V3nPItRxKXw/8qUb1VLG8Tv/yNDCfBVLmQIZ8E7ss8iM70dr+XRE9GS6hxfgX1Wrg4w1XZub7ZqLjVudc4nQ8DyF8+Eu+mGfnlmGK+nYfMu4BfIE+FfHdnznEL+nt5KX86bERWzoUmxijG/Bzw+Y8vtCNjzViqb/miI2Ov3d2meHwNLWpyCIN5R4llgC9QNae5xzPfPWseull987QbmrTdbpPNKzeF2OL7uGcv7noMAAADQUGeykUVLf+n72rcHlCgR7xSO5SNlWHKJaNZ2uvKGimyQk0aChNS9SgDeHNoBlRzm0WV2ain9iTZcN4RhlOPtuohVbV3n+m/PzBbkuwXx3HuirzyqjmtZPzqMpTmZ0nYVxvl/Z0lstl9p2+QSDfE6tBYACoHZbHNVcHgwPfIArlPUmlZB1etVVXpgsoAPleGxqdIfx1jBhzNE9v0EkE8NLRy3Xe1LbwmhgvIodFF+kshgY1+NyLvQnNj0BgRRlMlVgWzxgTE2npKrt89+WxoiSQh6rzgPIpbK4OXnvAIQm2zSIFeeHY8/rFfI9wG6cQoIRU1SEmFo7QozIYC0AMn71vnDCc61/YaqfT2I8R+rfrnuMLyvt8fUMfwQOz4jvCzdd+U3HWwVL1+CO5Juhp1mqSXabiqctSXzRDAKIuz7Aq+GhRwEuSVE+X+nQQLoDO1rC3WBwsUhsR2P7Q6Deb3EU6BsU9L9Eh3MNrDxCfinVld1e/QXBp60smnuzIjyeOCgTHQoHuyIytF6cdDTPK2ON4m35SbtB306pd/zzpV+wIwKlO78NZFHTZOxw+aHu83bzlBHUQnoyqUryQYyqI2Tf/iZTYX9AuTk+yvxHbuTzkQALbUUOTcVqe78SPHksy9f2FGhsZLwlPZMhI1HaqxJ4BUNGBHuF74P/z0zN5VRlltLqH8o4naR/+ZszLKKRayVjTxQoAp63WqEim/zCB+7JlLPv6D9cGskMKy4KnZ00yaiIHCOxedTKoB1KC02cltW379uf14hYIwxN4ac81hZf5oT7tcNUq4KsJjFtb0oQMBe9ngWj+EdksXhfWDL018GMTQy/FERfY7ZYnymC7OZltIG8uSgdCrfo4ZrPD8pmVbjUyahJ0U/TDhAvgvSgE0Cj/HMMxMZBrwpkO36JXwdOB/61cncUK8/euByhtxcs+FE6FjSTL3xktr/jWRaoY4RY5CJEJzt1eqdX5vYYAARY/uFm9mZc0/ekMbZL25sNC7dQ1/XxA7tY7svSawSu0k+rZgoGofT6F3cCn0YeanVHTuopIBDzBksrskbT5f1YB/BW4UKbGdyO5UX8lKygNfI4QEO1djtAv4vSOqksTfatvlAAAAMAGe6XR/qeJdJQyzgTW8TRTdAACQt4ei4m7Uex+ql1ViFkEYF6ozSQlCUs1nd7HOQAAAADYBnutH/6sUlfOR50DzQFTUfcTLetlJWs6X/8jYcTb94JjsaAAf3GzrPRIWgVL9PGpuGSwY0uUAAATZQZrwNKTBE//+DOAQNseATVIvvulM1zbNTm1kte2zdhlRzbLGjXY8Zu9C5cbwE2V3T2N3NU2MfQOoskso9vQLwmv2yjuyydzZI49SM33U8h6P3tlK05g344/9ooNiw1zXuh8k9WP1sf3yCyXlfcJvvW5GG6a5tZKgf9mvUtxG0vyB508xmHXcscwTso3hRUjkvTFxnW9aW0FbgqqXy+L4CRf5W1lxT2Pes6otdiQEBs8CHhvAeu+a3MhHY7a+hAD6kKFCCam09nAnczhYcCu0mpdoxdqyYPpA1SFEE3FDnyWi//iFsXqB7OFT0kT1oAjadoZtgNVOjL1NfFD7aELCwNGPnuWDfPEfGGXRZkKrLqEDZUzGU+KAuCCUkKC5qPWN4qhcJK/jMC94fGVVle7MzKtJ0za4+aXyVTIgIFvJftwMH+C3DOydSFvoZfxR5T27ZuDo09kLmmweBV+B2/wD9f10b8RvMTL4rMWkSw8vepCI+Em6obnzQ9bRctkLNUYWR6cIfUCJQ/eCe3yXiOF0phR/gh0J8Yi1CQtHqrveHMXVep2XwcFZSa55YitLU7Fv1BnWakQ1v8goIUOOmJ9xTMj0GlEheiDTGxzd6BDHjhKgq7oBggzVEsD4IvjsC8Y4dDTH6yXZHg+nLn5GfMhPj1bCbG8csQuGNRHlMcI/a7eW1eO7LdjAMDezLNuXNe4Wzt7RXEk/fTZwqcPJcUJiO1VTkXyJckJjIhiU+K3LW2VGZp2TPsJ3Ucu0c8yZUBxPxNGK9IY7J/fJWx2LxkYQFRNppiZfSROJ3bGz/u6aNgw5Sff/AnBu1jZHwPXxfGzSnnA2uKFCcysOxO+Nd9a/BcY2tT9awdrjS/nXtLAQ2cOf1BDLTZRTgPm2LGaf2u4/lBE3BjNWKL4550gSRFtiwQYjZrGik7RTQIzMEiT0u/Oajg47gYzMmQJNvw7T0u9JgvNCUYZoHVvN7rDPgrPub6or3TcmBZnEZL4xSbN1drgxD03BgNUPgtX+wEcnmBi5L3MZ1HAYJbO30ksBttEKYJxBDUdsiprLFps0q0WscpbStan4JeCgyCYth1WLz6N+c3HWieojQvRhRfJj+cLlhU/L72BRHGdFkXhoK3UlaUvxMdS3u0OX901JHwljUdlgi8rK6Fq2mQlEGU4+Vx63OTCQh0V2TKi+jL/X1bmonSMvHmQFAfVnbJ/H/9M4eRal8Va9jV0hhiznkDv+lHrLMfnIUUIVkRPQISczfY9DQjmcZtTUcM69H4TSpM0Waqe3KQO2pGOVcSHC1QUgQvKxIr4Y6KNLffRLgAI1Xp0xkxv482b9GRY9XzUxUxphu+5/gTMyeNmYip8u4Xa9iwrPIGUmWFxv28ppd/3OmYyq09aJXOYqIalqD7SeUD3lMU2VdR9tvO1IUGPT+FkXDTzq9sx1h4Dtr1YKiV0+ZQXIyNRxwxT3U6VC3/lFsdoTIjqfGbX+C8vlpHBHsNaRLFy/QS6+KWdBT/Fp5Fex05aqIgRYuSyL0tHyvv13bO+5vdlhsvvGWAP8jL5gK5exNS9/UtyFVbOVDhaw0Vn0OnrmhJ51L8NKUM+QiGOy49YT5o3lggfNS8wB4pcR/Jn7zGwDge6vLHEJGzlwyMtLmZxcMUzaJp2SSik+w9MAAATaQZ8ORRUt/3aCTJFiGKXks7idcOR6JHQvZkEhSgtc75eJYkqtyt+Le9nqbcMUA64gQMMJxrK7cKTDERSe7wZvyqJ2SgwVzjZGidDi2gK8tfkv8aMc6i084e4BYRi5RVb0vxRrZOGLvrc3FJXDIzi03pUNBuMVg41Yog7WxLETzIWBOdzmiv02xmrQBQSbe39slcc0tHTNtndNKbmn8Z3Vzmw9U+siJIo1q3Jg3v1+1VOEs59cu3Jpcw6++GEU1FeIRkHhFJr400BmLhjMqYoEwtLNJsDbh4bYnmil4aSU5zjPk1ByBPHAjLoesoU/zdqOAhLx8RLKavVoELf3KbZBzdtT5wtq4BWnKTMy13sLoIEynOqObrMZkgVplgFqkiF0cAdwUq0538+jdnJbHC49GBLS50cRiUglBvhKAEVTvsnZiA6WaScJmmBi9mG9KeH/4fohe/zmWg8XqOE1I0xT6QBIH8ujXi2xi2a2IEhtpIzHyQN4ShyC/NX4M556sv/MkVkqf6ZtTe5/dgOwHStK6ZkSR6D//WAuzItlGs2RmQffPWkY9j5C7ItFNxwEgYCTdxmWGOtWbedlEmCr5TiYxvqmm2szhg0TBYqAqyNoVcQXGn9mEXjm28N29IGs5HDfgjSbq9Vdn1CwfyW1g9gVqF3ter8Z2Qeyv9VhY0obQoQ83/0kehk91ISwqKUM2L5uI6YPg/QlDC9kkYVsXL38EM7B3wmMNhO06fjwcRvDh0nUwm83LUgpnqHsRYhmMqU24YBkUMWPzG9W4BYF5GIZYKbHqB2iTcA7raiuHg5P7004Y1XADNsoLc7vY2J4NOF/WYZAST/haWXJ22i49wBs6iu0KrGS/Q7I0fWaFzNH6PNCZxy1kQH5OVJp6P7Mb+1xqi1eeoMGoXfegHpmzkjmjmOFM4J7VbPO9fyl4TqkU5S7jzPyr4KcEsPF1N19zBQCZFAfCpq42/nfCxI517vqCPdmOi5xtEB4HAVJM61Pu+RmiSrlnnHXWOVOdELpJOW17f6Rj9ZTw5Nvspd2pd62JBX/UTP7MMhAjWIofKKjEwIwGALJ++v/HuCXezOuNJrEekkfLlM1sZGBfXxabJmi8p/R9nyMTs9kt5M6WxLVg1odgQXIim4tDGXC4oFBTgJxwIOwtgFK/mJ39CdSLRfP/ZmmmCWkjVuqPFp83NUPilJbJP6S6ZfduEWCV0LcabcytOn6WNqEhBbj13vkfNsxRcSNIFx4Cg85xbRMM86kGp9D1rMDTA/uIHjiXJHAEST9+j9wBLtoS4uMy2Prv3sMMtmcFca8SoYGWjYO2aEkOpG3rNeGQEAw/eUrNERGacYR0zkF1zibdjJHm28uOYYorqji9UkOlWtJkuRIdN/g18tDtCdB1KlbqmVFsP2+jV3SuCGgataGKAKEIU+Or3dWLtkzUZZNgUpEO694yqXsH9BcXNvX3YP5Yi2LuiP0X16LdYRlcEHGB6LszmLFzo3iCHWDTz1xo7BMBP0iTcLFlvaNTkxPngZIapY/XmqHHg4FUokFzUjZ+NTxyXKwwdvHtN0xqHP5GJvocQ528lgFg2xCUiZKlmIgkBw0SXlz1bp9ReA280JMqAH7pAhHllW0YAYrZHxdZfJQaqgtglQZ7ljSIFW8UYNFJgWxAAAAKwGfLXR/Wy6G0XgAAXTnwgAABZ3lcr4r9A2Up2nEWqgHlsPyx+XK80uYPOEAAAAyAZ8vR/9zj0IFPF5VQDMZ9QGGDL3mdQ35Wi/fw3WLQ6XPgpKAg0V7LQ9cUgoShCSoyQgAAARaQZs0NKTBL+nkrLWL14BgpvYwUI0QSlXD2m67rqJJ28+NTnaILhEiFtNTHVd6A0P1pq8u65+o7U62OjTL+qIvGEm+koebxxsvM8zbUr7697FtF8OnyP3WcgVIJxF9unxBWWGRlLtsbAH22NoH8XUvn2O+ZDIxmKDhMG08O0zsRayxFveTYnHH/YEbbxTEKxqJII2deeqAC8rsnaUnUot6DP2EY2sdnodLluPcquntESzyywrwIBRqMm5WxkyLRy79ld7UmLYU276tf/ZVwrwNdR9LeU9iquFKhSAZV8gcZZo9S8CtSJw+wi+V7HUOlQozyXeBkc2OHv2Ky8FTXCzxhCkrnHUUNaCSfN2mIj2vJBazw5cVVSTuhp/lkNxNmPXZKXiD4kIHSwKC7BpZjty4u8Vi1gUenMmt5QDfm3nVJ/V3s0QFGg1cIhREv3lMa0IOadTK4H3IeuYbbYxSzqQOvs/N+6bnzq0+lk5Smf0Wl038jxt8REJs55FE8L/RcRijvbzwMD3dxiD7/likYCdrncXst+xmp2HCAStX/z61kIIYzJvNd9gZxnYipettHIOYRKrdc670N6lRW2WpaoL9l/6vaXlGkJijR8O9ed9fe/vSCYW1PgkUMV/Q2DUNjTx8jB9kyw4xk/11D6l4YZKhRpQYzgjKR7vnhaozCTAy4ZWmtogw6GK32dLAFqfGYo52nYzhlxpE9wD8ip12tlNh5Pu7f/WskgfOG1/CJ0exyD9zdWmZT43SMIeLc4JfMQphlEMptD7B8hJYSn84pC+WH2UH8cBmmOdCyupNvBMu3HfqLiLoCscE/E/6yhqxuvmJictCNzhKBwbvEFMlLZlujFCLEi9QutZfySrdn0J0+zc+w9ue+3QBT2GUWnPo7gNn+zxILF6rY/xsmJ8Ib6jIIJtaB6T/g2rc1brOXZ6MTw8LqveaGEg9UAsOgslabRYnUfDD7V81ao05sSbkiBhDXXIizByeAPraO45DBDFiJewT6kFPoq9PwDoLw5QyAYkORO2ntVIDQB1OkMvogexjf/K1lnswXISXB5pycQ+F0/1R82xR8WCkIO3HcfIPqAIDPXv+XaqJxdQGHxcz/LgwvJAap7ppGASsGOjqBryJcPp0kEj5wMxAOSvb58yCQ1ZKq8VFOOP0UDsZuec1SVizLK+v0YmXNH0Wl97r9Co3kJklMgZkxYbI8DUBMbAp3CQQPxZC5AwiqgOkhJf5Wwr+f8FWoSX4ISzr3a3XB4pbkc7KT2jBJ0Vg0YEOBjFLwFlCO9bW/PYRn0AguiFumYpR3V1I0ikGbqgE6HBOauwcGNH/gpMP17Hs7pV7gWU4NZH3U9XFK+PDp7HwHWezbvfZYUeYleajAD9gh/rjzloQIM8YOiyCS9oON35edC0EEieGGCv5DB1IKBkWi0YHuK65Es13voLml/nvfnGFg4+IogBN3gCMzILwB9weYN2jDTdVt2FDjzhX+Hy5MAAAA1dBn1JFFSy/tejAKQVMjP6jHG4IE8lNyOEr0Yj6uzSAKM471vUmt9C3RJAL0RcyuTIc9MnT4jf0oyvkHPusajauDLMWLejnXAQr4A1Upb3PI6kqvqa02qnxpXLtL8UrViIpCevaS8/gYwR31mlpN1B1TQRziVFZsD9rlMsi0IPexOLBYIkxfR6JgR6cpjWkReACmU7Mwj2VeJzL9DEx52K0oGAxwHgDQ9oZmG0aH+x54FbTJBYOuAwShIdpprOX+q0nhAD50W1C86/A7BAFlnzwWM2OLejhLm/b0UNChH/ONp+nT7uu7MltgWWpGGtLc7d/oEYNhu2Ktre/FEfznjzC48tSeRzySD4KgjY4U69DvloDmWtOzQ19dpkXpSuPPz2kSbb8BxkKjVBz16B4T7xdYvX2SA0ueT+0gPn3GKBlRbB+rM6tyPzQebNdqqVWGVn3ggl8G3WM/9EJualCe/x/HglKGpIjV1iAZjvSE+p9r0WPJnMI7zV1sDiFK1dsWWgEju6OAbBPbwixUa2M0HBDTLFRIMERf114SXQ23aMm1WtBdaicCqIy1+EybI+guwt0rTpyXpYgOeA0jzk4qaGirYJud5PKCYTnUlRQ/AyjN987sr6XAKCTVrzNsvK89DmaNUNS8Gn08gA5dUVc7m98/TndI/yCjZ0Jyit8XR8uOxcyYHPMLwTOyKJ1bB04vO4Xb4HuOm0yGBpYha8c5lGJV1jjX6zfpAHby/AKlIGbio8w9ofyXUgv3qtJr8zVbO5M59pledUAvJG3MyIl2sHZdPj26hibO1I65ox4aQ/wy5DnDHI7Hg+V/RY7aRmBHqv27ModFwTsMVx1/v2agG5OjblzemSecIepH4eVH8igZ6MlQMAORp/EcovUYdrhmmJAv9qsNtcGPlUS47/+7hGOsHfi+trGNIs/VMGpT3T869Si9kKXOjqeb1DQYJ7imKB82VntfmjVNGmv59mYz9HERieEst1I/iWaizIQ/3X1rRhkw8L5q/J/UhYg48hPOAk0c8hNR0PIMk/GyiXocACfU6UeYxrAb0GVFkG9deuwVC/xt6/kJhMZbjSxt02PZFi/zxjICY27ua2U0N81W/vnYniG9lDNGeum+FrR7w6Qw4cTV016vYEAAAAhAZ9xdH+p4s2UH52lqJS2E9cEmAA11wMne3ub36jm2kZgAAAAMQGfc0f/qxbyhUA7THirxCHylQGNqodn3lDZu7jT/mCovBpzUqOKa1+blNIbAHSp9UkAAAVJQZt1NKTBL+RXFlOh+KjOVqTTfbdWmxm4pHHjfaTgdVRG9dXt6WOuYh+zWSkOX4/dCTB3U0Exmt2Ogu9zrm6ePGEJsXcN4xmMEh4Xog0VK1Ndga5IEemp4rOnmecJzRnqp1ZoHewYQhhj4qjHTTDCO5JOt0Ld2PHSJAc8s44DGDB/9tdUVtnuK57m4YDBqGNltuqoRU8x58q5krVZxVIU6p7XHGUZiGP6VWHD2OnqfNbUT9pOEBr1eBMi04BWAqaS8lPa8kxJDsT15kr7BKbBwHhyalynXbaJQFRYi/0IKiSZEhPbkQFchTvidC14OCCCKddQitI1UXWq9vpfVVkUMdK2efoCjjyohvIeiI8ON+6tJdSo/VW6ISG87RGa/DpqKsXGWK7O+J7B6VO0Cq2NM7gJBoltji8tI2iyRAOcoOTZRrtcoXD8WwS7lKFBoRxoh/AwY//YFpz0jjgjsHQy/K+Ez9eb9zmmWW9DCTHNa57paUFWqOL02f0Fxyy0sVVlYim4MWba2o4IjklbMSsUMM+FbKNhBr2MlmxBafJwcTYdfd9vw/y46NKCdiJp9y1J7On5yQGz13V6RYMwpWAmU662tBP7d1OXSckVUgbndIWyfkN0ZsICB39VT8G54t/PJDJ2h4JrKTkNiqEiT0Tjkl+jhqMOReREuCRd9qyeJBR44lid+EEd+n2itsYETL65wNCVKsuuhCnOKvLMq8N6j9lWsoGFfRkQuGipTLoxmbIUBAcYRBbFJNBrsvunXQsPrxYmOprEQTtTaAAqKNvnzbLF5it6iG8Wa6OKDD+msXDDXl6Ho96pwSKNrvFKUlEDJK71X2whkKeiQU7xgzy7HG9KhDcNqLQcHQ1D4aZ9DNKCt9hgiHqu6fJlaXtEYwxRKRnbTK2lSgLoo2VHM4NlLfOyc8Fm474gk64jEMAfNwQ4zluoV4iGjh0vMUC9buCqqO0wqhXZAXXwMteRdAEBTnyZ/McyHWiIpKbSYY8H1jU2RrVrg4/WGZeBoRUYXM8T9v2oa8rEfZdqF1/PXyX04qMWrLdu4LIuCGVnPGEwFicTbFZyxz6SLKWfF+PTM1YhswdZ1HPuWIqUMZ7Hd6ukQtFnWJWHLSJhj+8eZEP4ItJA0cu1oQ2xRJ2/uTDf3rundAUCDrBQEIfuw1uUQbtvvYmOMkp7YtscAd7ZXu5gq7/2tZW0M9/1BykLzMcf9NJ5jZXgrAyuY9Q3Pc0PfG7/hwLR2GNFnNYSEm84VYpyX5Ixr3Ast82qSd0qt0EdQOnXhA7dZmsyTBZbLLtaTcwjo7PiApjVt0PnhnmI27uZaFzKFa/SoP+BMsYK7PtpnaiR5O8wzqBzitkNmpgEuBUoz1MXVeWOU9cs0qM34aSosyQy2dRhX8pon1ZrNupnwe/poejl/D2FpEoPfyFnjqj4R9BLi4s6VEruViIwMQEqh09s+fwwaJg7hIKzfuxTsyat2UXyO+aSGqitKgSZyMt7S171xZs3KnYoPUppUWPoku+xoXNUyAMcddzYungGAJoEsnDSdbjQS0lVXJYPd47grc0vPFpEv6RCK7Fs5d/4BLZMUy7lR7L86lg0SRba+V8eKGn8Ce1cJ7/FysjyBRut6PUKq4NSmtAc5qyMe6/2cuJ/yYzFLsBif/Eiyf0Z4pBhaWEkOOR7bX/FgXl+EYzraGJivBv1tusEPOVoz/8OKofPlCgFiXsyoTP0TZ8r4mBTbsu+7U1+6WpcQN1aLHU7yWI43k+8MQN7i1c/5dY0SuSnwC/wFDZVJqeuzEDLhFoa75b5HK+HYaFhAAAAG0Gblz0TCipb/4cATgZovIQUgDcqUc47H33miAAAAA0Bn7ZH/wjcNKL6EPfZ',
 };
 
 export const Snapping = Template.bind( {} );
diff --git a/packages/components/src/focal-point-picker/utils.ts b/packages/components/src/focal-point-picker/utils.ts
index 66776f038cf8fb..fb8326f4472c60 100644
--- a/packages/components/src/focal-point-picker/utils.ts
+++ b/packages/components/src/focal-point-picker/utils.ts
@@ -35,7 +35,10 @@ export function getExtension( filename = '' ): string {
  */
 export function isVideoType( filename: string = '' ): boolean {
 	if ( ! filename ) return false;
-	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
+	return (
+		filename.startsWith( 'data:video/' ) ||
+		VIDEO_EXTENSIONS.includes( getExtension( filename ) )
+	);
 }
 
 /**
diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js
index be7a17b2590ce9..253f1252e14cbc 100644
--- a/packages/components/src/guide/stories/index.js
+++ b/packages/components/src/guide/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -17,20 +12,19 @@ import Guide from '../';
 export default {
 	title: 'Components/Guide',
 	component: Guide,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		contentLabel: { control: 'text' },
+		finishButtonText: { control: 'text' },
+		onFinish: { action: 'onFinish' },
 	},
 };
 
-const ModalExample = ( { numberOfPages, ...props } ) => {
+const Template = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );
 	const closeGuide = () => setOpen( false );
 
-	const loremIpsum =
-		'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.';
-
 	return (
 		<>
 			<Button variant="secondary" onClick={ openGuide }>
@@ -39,40 +33,19 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 			{ isOpen && (
 				<Guide
 					{ ...props }
-					onFinish={ closeGuide }
-					pages={ Array.from( { length: numberOfPages } ).map(
-						( _, page ) => ( {
-							content: (
-								<>
-									<h1>
-										Page { page + 1 } of { numberOfPages }
-									</h1>
-									<p>{ loremIpsum }</p>
-								</>
-							),
-						} )
-					) }
+					onFinish={ ( ...finishArgs ) => {
+						closeGuide( ...finishArgs );
+						onFinish( ...finishArgs );
+					} }
 				/>
 			) }
 		</>
 	);
 };
 
-export const _default = () => {
-	const finishButtonText = text( 'finishButtonText', 'Finish' );
-	const contentLabel = text( 'title', 'Guide title' );
-	const numberOfPages = number( 'numberOfPages', 3, {
-		range: true,
-		min: 1,
-		max: 10,
-		step: 1,
-	} );
-
-	const modalProps = {
-		finishButtonText,
-		contentLabel,
-		numberOfPages,
-	};
-
-	return <ModalExample { ...modalProps } />;
+export const Default = Template.bind( {} );
+Default.args = {
+	pages: Array.from( { length: 3 } ).map( ( _, page ) => ( {
+		content: <p>{ `Page ${ page + 1 }` }</p>,
+	} ) ),
 };
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 96b2caf328f088..ee20e323a363e9 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -155,12 +155,14 @@ export {
 	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
 	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
 } from './toggle-group-control';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
 export {
 	ToolsPanel as __experimentalToolsPanel,
 	ToolsPanelItem as __experimentalToolsPanelItem,
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 140ad940ace6eb..36ddedb60cf4ac 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -15,12 +15,14 @@ export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as FocalPointPicker } from './focal-point-picker';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
 export { default as Tooltip } from './tooltip';
 export { default as Icon } from './icon';
 export { default as Spinner } from './spinner';
diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx
index 3c7aa60b5bdd7c..ec6847161f7e27 100644
--- a/packages/components/src/item-group/item-group/component.tsx
+++ b/packages/components/src/item-group/item-group/component.tsx
@@ -12,7 +12,7 @@ import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';
 import type { ItemGroupProps } from '../types';
 
-function ItemGroup(
+function UnconnectedItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -40,4 +40,27 @@ function ItemGroup(
 	);
 }
 
-export default contextConnect( ItemGroup, 'ItemGroup' );
+/**
+ * `ItemGroup` displays a list of `Item`s grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const ItemGroup = contextConnect( UnconnectedItemGroup, 'ItemGroup' );
+
+export default ItemGroup;
diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx
index 34b58573b882e2..18472782989cff 100644
--- a/packages/components/src/item-group/item/component.tsx
+++ b/packages/components/src/item-group/item/component.tsx
@@ -11,7 +11,7 @@ import { useItem } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 
-function Item(
+function UnconnectedItem(
 	props: WordPressComponentProps< ItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -24,4 +24,28 @@ function Item(
 	);
 }
 
-export default contextConnect( Item, 'Item' );
+/**
+ * `Item` is used in combination with `ItemGroup` to display a list of items
+ * grouped and styled together.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const Item = contextConnect( UnconnectedItem, 'Item' );
+
+export default Item;
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
deleted file mode 100644
index 8e15373849ce7e..00000000000000
--- a/packages/components/src/item-group/stories/index.js
+++ /dev/null
@@ -1,270 +0,0 @@
-/* eslint-disable no-alert */
-/* globals alert */
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { typography, chevronRight } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useCx } from '../../utils';
-import { ItemGroup, Item } from '..';
-import Button from '../../button';
-import { FlexItem, FlexBlock } from '../../flex';
-import Dropdown from '../../dropdown';
-import { HStack } from '../../h-stack';
-import Icon from '../../icon';
-import { Text } from '../../text';
-import { Truncate } from '../../truncate';
-import { ZStack } from '../../z-stack';
-
-export default {
-	component: ItemGroup,
-	title: 'Components (Experimental)/ItemGroup',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-// Using `unset` instead of `undefined` as Storybook seems to sometimes pass an
-// empty string instead of `undefined`, which is not ideal.
-// https://github.com/storybookjs/storybook/issues/800
-const PROP_UNSET = 'unset';
-
-export const _default = () => {
-	const itemGroupProps = {
-		isBordered: boolean( 'ItemGroup: isBordered', false ),
-		isSeparated: boolean( 'ItemGroup: isSeparated', false ),
-		isRounded: boolean( 'ItemGroup: isRounded', true ),
-		size: select(
-			'ItemGroup: size',
-			[ 'small', 'medium', 'large' ],
-			'medium'
-		),
-	};
-
-	const itemProps = {
-		size: select(
-			'Item 1: size',
-			{
-				'unset (defaults to the value set on the <ItemGroup> parent)':
-					PROP_UNSET,
-				small: 'small',
-				medium: 'medium',
-				large: 'large',
-			},
-			PROP_UNSET
-		),
-	};
-
-	// Do not pass the `size` prop when its value is `undefined`.
-	// This allows the `Item` component to use the values that are set on the
-	// parent `ItemGroup` component by default.
-	if ( itemProps.size === PROP_UNSET ) {
-		delete itemProps.size;
-	}
-
-	return (
-		<ItemGroup style={ { width: '350px' } } { ...itemGroupProps }>
-			<Item { ...itemProps }>Code is Poetry (no click handlers)</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-		</ItemGroup>
-	);
-};
-
-export const dropdown = () => (
-	<Dropdown
-		renderToggle={ ( { isOpen, onToggle } ) => (
-			<Button onClick={ onToggle } aria-expanded={ isOpen }>
-				Open Popover
-			</Button>
-		) }
-		renderContent={ () => (
-			<ItemGroup style={ { minWidth: 350, padding: 4 } }>
-				<Item>Code is Poetry (no click handlers)</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-			</ItemGroup>
-		) }
-	/>
-);
-
-const SimpleColorSwatch = ( { color, style } ) => (
-	<div
-		style={ {
-			...style,
-			borderRadius: '50%',
-			border: '1px solid rgba(0, 0, 0, 0.2)',
-			width: '24px',
-			height: '24px',
-			backgroundColor: color,
-		} }
-	/>
-);
-
-const ChevronWrapper = styled( FlexItem )`
-	display: block;
-	fill: currentColor;
-	transition: transform 0.15s ease-out;
-`;
-
-const ItemWithChevron = ( {
-	children,
-	className,
-	alwaysVisible,
-	...otherProps
-} ) => {
-	const isRtlLayout = isRTL();
-	const cx = useCx();
-
-	const appearingChevron = css`
-		&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
-			display: none;
-		}
-	`;
-
-	const itemClassName = useMemo(
-		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className, cx, appearingChevron ]
-	);
-
-	const chevronIconClassName = useMemo(
-		() =>
-			cx( css`
-				display: block;
-				fill: currentColor;
-				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
-			` ),
-		[ cx, isRtlLayout ]
-	);
-
-	return (
-		<Item { ...otherProps } className={ itemClassName }>
-			<HStack justify="flex-start">
-				<FlexBlock>{ children }</FlexBlock>
-				<ChevronWrapper>
-					<Icon
-						className={ chevronIconClassName }
-						icon={ chevronRight }
-						size={ 24 }
-					/>
-				</ChevronWrapper>
-			</HStack>
-		</Item>
-	);
-};
-
-export const complexLayouts = () => {
-	const colors = [
-		{
-			color: '#00A19D',
-			id: 'teal',
-		},
-		{
-			color: '#FFF8E5',
-			id: 'cream',
-		},
-		{
-			color: '#FFB344',
-			id: 'yellow',
-		},
-		{
-			color: '#E05D5D',
-			id: 'red',
-		},
-	];
-
-	return (
-		<ItemGroup isBordered isSeparated style={ { width: '250px' } }>
-			<Item onClick={ () => alert( 'Color palette' ) }>
-				<HStack>
-					<FlexBlock>
-						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors.map( ( { color, id } ) => (
-								<SimpleColorSwatch key={ id } color={ color } />
-							) ) }
-						</ZStack>
-					</FlexBlock>
-					<FlexItem as={ Text } variant="muted">
-						23 colors
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<Item onClick={ () => alert( 'Single color setting' ) }>
-				<HStack justify="flex-start">
-					<FlexItem
-						as={ SimpleColorSwatch }
-						color="#22577A"
-						style={ { flexShrink: 0 } }
-					/>
-					<FlexItem as={ Truncate }>
-						Single color setting with very long description
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<Item onClick={ () => alert( 'Single typography setting' ) }>
-				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ typography } size={ 24 } />
-					</FlexItem>
-					<FlexItem as={ Truncate }>
-						Single typography setting
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#2FB63F"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron on hover and focus</Truncate>
-				</HStack>
-			</ItemWithChevron>
-
-			<ItemWithChevron
-				alwaysVisible
-				onClick={ () => alert( 'Single color setting' ) }
-			>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#D175D0"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron always visible</Truncate>
-				</HStack>
-			</ItemWithChevron>
-		</ItemGroup>
-	);
-};
-/* eslint-enable no-alert */
diff --git a/packages/components/src/item-group/stories/index.tsx b/packages/components/src/item-group/stories/index.tsx
new file mode 100644
index 00000000000000..3fa35c67cfb533
--- /dev/null
+++ b/packages/components/src/item-group/stories/index.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ItemGroup } from '../item-group/component';
+import { Item } from '../item/component';
+
+type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
+
+const meta: ComponentMeta< typeof ItemGroup > = {
+	component: ItemGroup,
+	title: 'Components (Experimental)/ItemGroup',
+	subcomponents: { Item },
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const mapPropsToItem = ( props: ItemProps, index: number ) => (
+	<Item { ...props } key={ index } />
+);
+
+const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+	<ItemGroup { ...props } />
+);
+
+export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+Default.args = {
+	children: (
+		[
+			{
+				children: 'First item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'First item clicked' ),
+			},
+			{
+				children: 'Second item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Second item clicked' ),
+			},
+			{
+				children: 'Third item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Third item clicked' ),
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const NonClickableItems: ComponentStory< typeof ItemGroup > =
+	Template.bind( {} );
+NonClickableItems.args = {
+	children: (
+		[
+			{
+				children:
+					"This <Item /> is not click-able because it doesn't have an `onClick` prop",
+			},
+			{
+				children:
+					"This <Item /> is also not click-able because it doesn't have an `onClick` prop",
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+CustomItemSize.args = {
+	children: (
+		[
+			{
+				children:
+					'This <Item /> will inherit the size from <ItemGroup /> (try changing the size prop)',
+			},
+			{
+				children:
+					'This <Item /> has a hardcoded size="large", regardless of <ItemGroup />\'s size',
+				size: 'large',
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
+	{}
+);
+WithBorder.args = {
+	...Default.args,
+	isBordered: true,
+	isSeparated: true,
+};
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index bac0d2e72e462c..9c2b66cd07a9b3 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -33,6 +33,7 @@ export const itemWrapper = css`
 `;
 
 export const item = css`
+	box-sizing: border-box;
 	width: 100%;
 	display: block;
 	margin: 0;
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index 112e119cd50f38..c31562a222b6c9 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+-       class="components-item css-cl593w-View-medium-item e19lxcc00"
++       class="components-item css-1yvqxd-View-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -75,6 +75,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 
 .emotion-3 {
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
@@ -124,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -152,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-cl593w-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js
index 95a1adf0d71834..fad8f919e58712 100644
--- a/packages/components/src/notice/stories/index.js
+++ b/packages/components/src/notice/stories/index.js
@@ -1,74 +1,46 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import Notice from '../';
 
+// TODO: Add a story involving NoticeList to help people understand
+// the difference between onDismiss/onRemove.
+
 export default {
 	title: 'Components/Notice',
 	component: Notice,
+	argTypes: {
+		isDismissible: { control: 'boolean' },
+		onDismiss: { control: { type: null } },
+		onRemove: { control: { type: null } },
+		politeness: {
+			control: 'radio',
+			options: [ 'assertive', 'polite' ],
+		},
+		spokenMessage: { control: 'text' },
+		status: {
+			control: 'radio',
+			options: [ 'warning', 'success', 'error', 'info' ],
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-
-	return (
-		<Notice status={ status } isDismissible={ isDismissible }>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+const Template = ( props ) => {
+	return <Notice { ...props } />;
 };
 
-export const withCustomSpokenMessage = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-	const politeness = select(
-		'Politeness',
-		{
-			Assertive: 'assertive',
-			Polite: 'polite',
-		},
-		'assertive'
-	);
-	const spokenMessage = text(
-		'Spoken Message',
-		'This is a notice with a custom spoken message'
-	);
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a notice.',
+};
 
-	return (
-		<Notice
-			status={ status }
-			isDismissible={ isDismissible }
-			politeness={ politeness }
-			spokenMessage={ spokenMessage }
-		>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+export const WithCustomSpokenMessage = Template.bind( {} );
+WithCustomSpokenMessage.args = {
+	...Default.args,
+	politeness: 'assertive',
+	spokenMessage: 'This is a notice with a custom spoken message',
 };
diff --git a/packages/components/src/panel/row.js b/packages/components/src/panel/row.js
index 9da08b06c84ba3..353c19302194b7 100644
--- a/packages/components/src/panel/row.js
+++ b/packages/components/src/panel/row.js
@@ -8,13 +8,13 @@ import classnames from 'classnames';
  */
 import { forwardRef } from '@wordpress/element';
 
-const PanelRow = forwardRef( ( { className, children }, ref ) => (
+const PanelRow = ( { className, children }, ref ) => (
 	<div
 		className={ classnames( 'components-panel__row', className ) }
 		ref={ ref }
 	>
 		{ children }
 	</div>
-) );
+);
 
-export default PanelRow;
+export default forwardRef( PanelRow );
diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js
index 2afd1ae481eb98..d7af2fc718c6c6 100644
--- a/packages/components/src/panel/stories/index.js
+++ b/packages/components/src/panel/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
@@ -18,88 +13,75 @@ import { wordpress } from '@wordpress/icons';
 export default {
 	title: 'Components/Panel',
 	component: Panel,
+	subcomponents: { PanelRow, PanelBody },
+	argTypes: {
+		children: { control: { type: null } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const opened = boolean( 'Opened', true );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened }>
-				<PanelRow>{ rowText }</PanelRow>
+const Template = ( props ) => <Panel { ...props } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	header: 'My panel',
+	children: (
+		<>
+			<PanelBody title="First section">
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
+			</PanelBody>
+			<PanelBody title="Second section" initialOpen={ false }>
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
 			</PanelBody>
-		</Panel>
-	);
+		</>
+	),
 };
 
-export const multipleBodies = () => {
-	return (
-		<ScrollableContainer>
-			<Panel header="My Panel">
-				<PanelBody title="First Settings">
-					<PanelRow>
-						<Placeholder height={ 250 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Second Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 400 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Third Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 600 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Fourth Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody
-					title="Disabled Settings"
-					initialOpen={ false }
-					buttonProps={ { disabled: true } }
-				/>
-			</Panel>
-		</ScrollableContainer>
-	);
+export const DisabledSection = Template.bind( {} );
+DisabledSection.args = {
+	...Default.args,
+	children: (
+		<PanelBody
+			title="Disabled section"
+			initialOpen={ false }
+			buttonProps={ { disabled: true } }
+		/>
+	),
 };
 
-export const withIcon = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	const icon = boolean( 'Icon', true ) ? wordpress : undefined;
-	const opened = boolean( 'Opened', true );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened } icon={ icon }>
-				<PanelRow>{ rowText }</PanelRow>
-			</PanelBody>
-		</Panel>
-	);
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: (
+		<PanelBody title="Section title" icon={ wordpress }>
+			<PanelRow>
+				<div
+					style={ {
+						background: '#ddd',
+						height: 100,
+						width: '100%',
+					} }
+				/>
+			</PanelRow>
+		</PanelBody>
+	),
 };
-
-function ScrollableContainer( { children } ) {
-	return (
-		<div
-			style={ {
-				width: 300,
-				height: '100vh',
-				overflowY: 'auto',
-				margin: 'auto',
-				boxShadow: '0 0 0 1px #ddd inset',
-			} }
-		>
-			{ children }
-		</div>
-	);
-}
-
-function Placeholder( { height = 200 } ) {
-	return <div style={ { background: '#ddd', height, width: '100%' } } />;
-}
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 9f5db03711dc7e..7fd9977e4645dc 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -45,7 +45,7 @@
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: 1ch;
+		margin-right: $grid-unit-15;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
index e62d71eb2d8eb1..79343c5954c94f 100644
--- a/packages/components/src/query-controls/index.js
+++ b/packages/components/src/query-controls/index.js
@@ -35,6 +35,7 @@ export default function QueryControls( {
 	return [
 		onOrderChange && onOrderByChange && (
 			<SelectControl
+				__nextHasNoMarginBottom
 				key="query-controls-order-select"
 				label={ __( 'Order by' ) }
 				value={ `${ orderBy }/${ order }` }
diff --git a/packages/components/src/resizable-box/README.md b/packages/components/src/resizable-box/README.md
index 3860c1d802ce10..c313ece517a835 100644
--- a/packages/components/src/resizable-box/README.md
+++ b/packages/components/src/resizable-box/README.md
@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 19fab8eeec19cf..0955c29c537786 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -124,4 +123,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;
diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js
deleted file mode 100644
index 44f4a5f5fa6331..00000000000000
--- a/packages/components/src/resizable-box/stories/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ResizableBox from '../';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default {
-	title: 'Components/ResizableBox',
-	component: ResizableBox,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Example = ( props ) => {
-	const [ attributes, setAttributes ] = useState( {
-		height: 200,
-		width: 400,
-	} );
-	const { height, width } = attributes;
-	const { children, ...restProps } = props;
-
-	return (
-		<div style={ { margin: 30 } }>
-			<ResizableBox
-				{ ...restProps }
-				size={ {
-					height,
-					width,
-				} }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						height: parseInt( height + delta.height, 10 ),
-						width: parseInt( width + delta.width, 10 ),
-					} );
-				} }
-			>
-				{ children }
-			</ResizableBox>
-		</div>
-	);
-};
-
-export const _default = () => {
-	const content = text( 'Example: Content', 'Resize' );
-	const showHandle = boolean( 'showHandle', true );
-	const minHeight = number( 'minHeight', 50 );
-	const minWidth = number( 'minWidth', 50 );
-	const enable = {
-		top: boolean( 'enable.top', false ),
-		right: boolean( 'enable.right', true ),
-		bottom: boolean( 'enable.bottom', true ),
-		left: boolean( 'enable.left', false ),
-		topRight: boolean( 'enable.topRight', false ),
-		bottomRight: boolean( 'enable.bottomRight', true ),
-		bottomLeft: boolean( 'enable.bottomLeft', false ),
-		topLeft: boolean( 'enable.topLeft', false ),
-	};
-	const __experimentalShowTooltip = boolean(
-		'__experimentalShowTooltip',
-		false
-	);
-
-	const props = {
-		enable,
-		minHeight,
-		minWidth,
-		showHandle,
-		__experimentalShowTooltip,
-	};
-
-	return (
-		<Example { ...props }>
-			<div
-				style={ {
-					background: '#eee',
-					display: 'flex',
-					height: '100%',
-					width: '100%',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<span>{ content }</span>
-			</div>
-		</Example>
-	);
-};
diff --git a/packages/components/src/resizable-box/stories/index.tsx b/packages/components/src/resizable-box/stories/index.tsx
new file mode 100644
index 00000000000000..77b98ce67bbded
--- /dev/null
+++ b/packages/components/src/resizable-box/stories/index.tsx
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: ComponentMeta< typeof ResizableBox > = {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: { type: null } },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};
diff --git a/packages/components/src/responsive-wrapper/README.md b/packages/components/src/responsive-wrapper/README.md
index 990161de2a99d6..5ccfc16c1b84d3 100644
--- a/packages/components/src/responsive-wrapper/README.md
+++ b/packages/components/src/responsive-wrapper/README.md
@@ -1,5 +1,7 @@
 # ResponsiveWrapper
 
+A wrapper component that maintains its aspect ratio when resized.
+
 ## Usage
 
 ```jsx
@@ -14,3 +16,30 @@ const MyResponsiveWrapper = () => (
 	</ResponsiveWrapper>
 );
 ```
+
+## Props
+
+### `children`: `React.ReactElement`
+
+The element to wrap.
+
+-   Required: Yes
+
+### `isInline`: `boolean`
+
+If true, the wrapper will be `span` instead of `div`.
+
+-   Required: No
+-   Default: `false`
+
+### `naturalHeight`: `number`
+
+The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes
+
+### `naturalWidth`: `number`
+
+The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes
\ No newline at end of file
diff --git a/packages/components/src/responsive-wrapper/index.js b/packages/components/src/responsive-wrapper/index.tsx
similarity index 62%
rename from packages/components/src/responsive-wrapper/index.js
rename to packages/components/src/responsive-wrapper/index.tsx
index 6f3de4bacd8be3..b59731539f3a44 100644
--- a/packages/components/src/responsive-wrapper/index.js
+++ b/packages/components/src/responsive-wrapper/index.tsx
@@ -9,12 +9,33 @@ import classnames from 'classnames';
 import { cloneElement, Children } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveWrapperProps } from './types';
+
+/**
+ * A wrapper component that maintains its aspect ratio when resized.
+ *
+ * ```jsx
+ * import { ResponsiveWrapper } from '@wordpress/components';
+ *
+ * const MyResponsiveWrapper = () => (
+ * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
+ * 		<img
+ * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+ * 			alt="WordPress"
+ * 		/>
+ * 	</ResponsiveWrapper>
+ * );
+ * ```
+ */
 function ResponsiveWrapper( {
 	naturalWidth,
 	naturalHeight,
 	children,
 	isInline = false,
-} ) {
+}: ResponsiveWrapperProps ) {
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
@@ -22,7 +43,7 @@ function ResponsiveWrapper( {
 	}
 	const imageStyle = {
 		paddingBottom:
-			naturalWidth < containerWidth
+			naturalWidth < ( containerWidth ?? 0 )
 				? naturalHeight
 				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};
diff --git a/packages/components/src/responsive-wrapper/stories/index.tsx b/packages/components/src/responsive-wrapper/stories/index.tsx
new file mode 100644
index 00000000000000..5f48b91d279b2d
--- /dev/null
+++ b/packages/components/src/responsive-wrapper/stories/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '..';
+
+const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+	component: ResponsiveWrapper,
+	title: 'Components/ResponsiveWrapper',
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+	<ResponsiveWrapper { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	naturalWidth: 2000,
+	naturalHeight: 680,
+	children: (
+		<img
+			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+			alt="WordPress"
+		/>
+	),
+};
diff --git a/packages/components/src/responsive-wrapper/types.ts b/packages/components/src/responsive-wrapper/types.ts
new file mode 100644
index 00000000000000..2f1e4a53aafbf7
--- /dev/null
+++ b/packages/components/src/responsive-wrapper/types.ts
@@ -0,0 +1,20 @@
+export type ResponsiveWrapperProps = {
+	/**
+	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalWidth: number;
+	/**
+	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalHeight: number;
+	/**
+	 * The element to wrap.
+	 */
+	children: React.ReactElement;
+	/**
+	 * If true, the wrapper will be `span` instead of `div`.
+	 *
+	 * @default false
+	 */
+	isInline?: boolean;
+};
diff --git a/packages/components/src/sandbox/README.md b/packages/components/src/sandbox/README.md
index ee3e124cae22e7..406b54d3de1bdf 100644
--- a/packages/components/src/sandbox/README.md
+++ b/packages/components/src/sandbox/README.md
@@ -1,4 +1,4 @@
-# Sandbox
+# SandBox
 
 This component provides an isolated environment for arbitrary HTML via iframes.
 
@@ -8,6 +8,49 @@ This component provides an isolated environment for arbitrary HTML via iframes.
 import { SandBox } from '@wordpress/components';
 
 const MySandBox = () => (
-	<SandBox html="<p>Content</p>" title="Sandbox" type="embed" />
+	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
 );
 ```
+
+## Props
+
+### `html`: `string`
+
+The HTML to render in the body of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `onFocus`: `React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]`
+
+The `onFocus` callback for the iframe.
+
+-   Required: No
+
+### `scripts`: `string[]`
+
+An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `styles`: `string[]`
+
+An array of CSS strings to inject into the `<head>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `title`: `string`
+
+The `<title>` of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `type`: `string`
+
+The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+
+-   Required: No
+-   Default: ""
\ No newline at end of file
diff --git a/packages/components/src/sandbox/index.js b/packages/components/src/sandbox/index.tsx
similarity index 80%
rename from packages/components/src/sandbox/index.js
rename to packages/components/src/sandbox/index.tsx
index ec7549bbd26243..b914165721fadc 100644
--- a/packages/components/src/sandbox/index.js
+++ b/packages/components/src/sandbox/index.tsx
@@ -9,6 +9,11 @@ import {
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { SandBoxProps } from './types';
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -44,11 +49,11 @@ const observeAndResizeJS = function () {
 	// Hack: Remove viewport unit styles, as these are relative
 	// the iframe root and interfere with our mechanism for
 	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode ) {
+	function removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {
 		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
+			(
+				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
+			 ).forEach( function ( style ) {
 				if (
 					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
 				) {
@@ -83,6 +88,7 @@ const observeAndResizeJS = function () {
 	window.addEventListener( 'resize', sendResize, true );
 };
 
+// TODO: These styles shouldn't be coupled with WordPress.
 const style = `
 	body {
 		margin: 0;
@@ -106,37 +112,53 @@ const style = `
 	}
 `;
 
-export default function Sandbox( {
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( {
 	html = '',
 	title = '',
 	type,
 	styles = [],
 	scripts = [],
 	onFocus,
-} ) {
-	const ref = useRef();
+}: SandBoxProps ) {
+	const ref = useRef< HTMLIFrameElement >();
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
 	function isFrameAccessible() {
 		try {
-			return !! ref.current.contentDocument.body;
+			return !! ref.current?.contentDocument?.body;
 		} catch ( e ) {
 			return false;
 		}
 	}
 
-	function trySandbox( forceRerender = false ) {
+	function trySandBox( forceRerender = false ) {
 		if ( ! isFrameAccessible() ) {
 			return;
 		}
 
-		const { contentDocument, ownerDocument } = ref.current;
-		const { body } = contentDocument;
+		const { contentDocument, ownerDocument } =
+			ref.current as HTMLIFrameElement & {
+				contentDocument: Document;
+			};
 
 		if (
 			! forceRerender &&
-			null !== body.getAttribute( 'data-resizable-iframe-connected' )
+			null !==
+				contentDocument?.body.getAttribute(
+					'data-resizable-iframe-connected'
+				)
 		) {
 			return;
 		}
@@ -187,13 +209,13 @@ export default function Sandbox( {
 	}
 
 	useEffect( () => {
-		trySandbox();
+		trySandBox();
 
-		function tryNoForceSandbox() {
-			trySandbox( false );
+		function tryNoForceSandBox() {
+			trySandBox( false );
 		}
 
-		function checkMessageForResize( event ) {
+		function checkMessageForResize( event: MessageEvent ) {
 			const iframe = ref.current;
 
 			// Verify that the mounted element is the source of the message.
@@ -221,19 +243,18 @@ export default function Sandbox( {
 		}
 
 		const iframe = ref.current;
-		const { ownerDocument } = iframe;
-		const { defaultView } = ownerDocument;
+		const defaultView = iframe?.ownerDocument?.defaultView;
 
 		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
 		// after reordering the containing block. See these two issues for more details:
 		// https://github.com/WordPress/gutenberg/issues/6146
 		// https://github.com/facebook/react/issues/18752
-		iframe.addEventListener( 'load', tryNoForceSandbox, false );
-		defaultView.addEventListener( 'message', checkMessageForResize );
+		iframe?.addEventListener( 'load', tryNoForceSandBox, false );
+		defaultView?.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
-			defaultView.addEventListener( 'message', checkMessageForResize );
+			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
+			defaultView?.addEventListener( 'message', checkMessageForResize );
 		};
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
@@ -241,14 +262,14 @@ export default function Sandbox( {
 	}, [] );
 
 	useEffect( () => {
-		trySandbox();
+		trySandBox();
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
-		trySandbox( true );
+		trySandBox( true );
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -266,3 +287,5 @@ export default function Sandbox( {
 		/>
 	);
 }
+
+export default SandBox;
diff --git a/packages/components/src/sandbox/stories/index.tsx b/packages/components/src/sandbox/stories/index.tsx
new file mode 100644
index 00000000000000..c5fea158cbd21d
--- /dev/null
+++ b/packages/components/src/sandbox/stories/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SandBox from '..';
+
+const meta: ComponentMeta< typeof SandBox > = {
+	component: SandBox,
+	title: 'Components/SandBox',
+	argTypes: {
+		onFocus: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof SandBox > = ( args ) => (
+	<SandBox { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	html: '<p>Arbitrary HTML content</p>',
+};
diff --git a/packages/components/src/sandbox/test/index.js b/packages/components/src/sandbox/test/index.tsx
similarity index 85%
rename from packages/components/src/sandbox/test/index.js
rename to packages/components/src/sandbox/test/index.tsx
index f25bdca675cbfd..e1a51814ecab61 100644
--- a/packages/components/src/sandbox/test/index.js
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -11,9 +11,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Sandbox from '../';
+import SandBox from '..';
 
-describe( 'Sandbox', () => {
+describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
 			// MutationObserver implementation from JSDom does not work as intended
@@ -33,7 +33,7 @@ describe( 'Sandbox', () => {
 				<button onClick={ updateHtml } className="mock-button">
 					Mock Button
 				</button>
-				<Sandbox html={ html } title="Sandbox Title" />
+				<SandBox html={ html } title="SandBox Title" />
 			</div>
 		);
 	};
@@ -41,7 +41,12 @@ describe( 'Sandbox', () => {
 	it( 'should rerender with new emdeded content if html prop changes', () => {
 		render( <TestWrapper /> );
 
-		const iframe = screen.getByTitle( 'Sandbox Title' );
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
+
+		if ( ! iframe.contentWindow ) {
+			throw new Error();
+		}
 
 		let sandboxedIframe = within(
 			iframe.contentWindow.document.body
diff --git a/packages/components/src/sandbox/types.ts b/packages/components/src/sandbox/types.ts
new file mode 100644
index 00000000000000..7edc91b938f299
--- /dev/null
+++ b/packages/components/src/sandbox/types.ts
@@ -0,0 +1,34 @@
+export type SandBoxProps = {
+	/**
+	 * The HTML to render in the body of the iframe document.
+	 *
+	 * @default ''
+	 */
+	html?: string;
+	/**
+	 * The `<title>` of the iframe document.
+	 *
+	 * @default ''
+	 */
+	title?: string;
+	/**
+	 * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+	 */
+	type?: string;
+	/**
+	 * An array of CSS strings to inject into the `<head>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	styles?: string[];
+	/**
+	 * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	scripts?: string[];
+	/**
+	 * The `onFocus` callback for the iframe.
+	 */
+	onFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];
+};
diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.js
index d8f830f267e0b9..1f8dbedeba3fae 100644
--- a/packages/components/src/slot-fill/stories/index.js
+++ b/packages/components/src/slot-fill/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -11,19 +6,21 @@ import { createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Slot, Fill, Provider } from '../';
+import { Slot, Fill, Provider as SlotFillProvider } from '../';
 
 export default {
 	title: 'Components/SlotFill',
+	subcomponents: { Fill, SlotFillProvider },
 	component: Slot,
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
 export const _default = () => {
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name: <Slot bubblesVirtually as="span" name="name" />
@@ -33,15 +30,13 @@ export const _default = () => {
 			</p>
 			<Fill name="name">Grace</Fill>
 			<Fill name="age">33</Fill>
-		</Provider>
+		</SlotFillProvider>
 	);
 };
 
 export const withFillProps = () => {
-	const name = text( 'name', 'Grace' );
-	const age = number( 'age', 33 );
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name:{ ' ' }
@@ -49,7 +44,7 @@ export const withFillProps = () => {
 					bubblesVirtually
 					as="span"
 					name="name"
-					fillProps={ { name } }
+					fillProps={ { name: 'Grace' } }
 				/>
 			</p>
 			<p>
@@ -58,12 +53,12 @@ export const withFillProps = () => {
 					bubblesVirtually
 					as="span"
 					name="age"
-					fillProps={ { age } }
+					fillProps={ { age: 33 } }
 				/>
 			</p>
 			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
 			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
-		</Provider>
+		</SlotFillProvider>
 	);
 };
 
@@ -74,7 +69,7 @@ export const withContext = () => {
 		return <Fill name={ name }>{ value }</Fill>;
 	};
 	return (
-		<Provider>
+		<SlotFillProvider>
 			<h2>Profile</h2>
 			<p>
 				Name: <Slot bubblesVirtually as="span" name="name" />
@@ -88,6 +83,6 @@ export const withContext = () => {
 			<Context.Provider value={ 33 }>
 				<ContextFill name="age" />
 			</Context.Provider>
-		</Provider>
+		</SlotFillProvider>
 	);
 };
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 80dc3dbb682669..1cb363cb6d50c2 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -44,7 +44,7 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
-@import "./toolbar/style.scss";
-@import "./toolbar-button/style.scss";
-@import "./toolbar-group/style.scss";
+@import "./toolbar/toolbar/style.scss";
+@import "./toolbar/toolbar-button/style.scss";
+@import "./toolbar/toolbar-group/style.scss";
 @import "./tooltip/style.scss";
diff --git a/packages/components/src/tab-panel/README.md b/packages/components/src/tab-panel/README.md
index 860bd9604b2d86..67b00c37679eca 100644
--- a/packages/components/src/tab-panel/README.md
+++ b/packages/components/src/tab-panel/README.md
@@ -121,6 +121,7 @@ An array of objects containing the following properties:
 -   `title`:`(string)` Defines the translated text for the tab.
 -   `className`:`(string)` Optional. Defines the class to put on the tab.
 -   `icon`:`(ReactNode)` Optional. When set, displays the icon in place of the tab title. The title is then rendered as an aria-label and tooltip.
+-   `disabled`:`(boolean)` Optional. Determines if the tab should be disabled or selectable.
 
 > > **Note:** Other fields may be added to the object and accessed from the child function if desired.
 
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 2504f7f214fa62..d26a6a862b6d68 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -19,7 +19,6 @@ import type { WordPressComponentProps } from '../ui/context';
 
 const TabButton = ( {
 	tabId,
-	onClick,
 	children,
 	selected,
 	...rest
@@ -29,7 +28,7 @@ const TabButton = ( {
 		tabIndex={ selected ? null : -1 }
 		aria-selected={ selected }
 		id={ tabId }
-		onClick={ onClick }
+		__experimentalIsFocusable
 		{ ...rest }
 	>
 		{ children }
@@ -105,10 +104,24 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		if ( ! selectedTab?.name && tabs.length > 0 ) {
-			handleTabSelection( initialTabName || tabs[ 0 ].name );
+		const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+		const initialTab = tabs.find( ( tab ) => tab.name === initialTabName );
+		if ( ! selectedTab?.name && firstEnabledTab ) {
+			handleTabSelection(
+				initialTab && ! initialTab.disabled
+					? initialTab.name
+					: firstEnabledTab.name
+			);
+		} else if ( selectedTab?.disabled && firstEnabledTab ) {
+			handleTabSelection( firstEnabledTab.name );
 		}
-	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
+	}, [
+		tabs,
+		selectedTab?.name,
+		selectedTab?.disabled,
+		initialTabName,
+		handleTabSelection,
+	] );
 
 	return (
 		<div className={ className }>
@@ -134,6 +147,7 @@ export function TabPanel( {
 						selected={ tab.name === selected }
 						key={ tab.name }
 						onClick={ () => handleTabSelection( tab.name ) }
+						disabled={ tab.disabled }
 						label={ tab.icon && tab.title }
 						icon={ tab.icon }
 						showTooltip={ !! tab.icon }
diff --git a/packages/components/src/tab-panel/stories/index.tsx b/packages/components/src/tab-panel/stories/index.tsx
index 0088f79d7b5d65..7846fe0bdbff29 100644
--- a/packages/components/src/tab-panel/stories/index.tsx
+++ b/packages/components/src/tab-panel/stories/index.tsx
@@ -35,3 +35,23 @@ Default.args = {
 		},
 	],
 };
+
+export const DisabledTab = Template.bind( {} );
+DisabledTab.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			disabled: true,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+		},
+	],
+};
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 1ea23c16b602e0..3ae9122bd94af5 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -162,6 +162,95 @@ describe( 'TabPanel', () => {
 		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 	} );
 
+	it( 'should disable the tab when `disabled` is true', async () => {
+		const user = setupUser();
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					...TABS,
+					{
+						name: 'delta',
+						title: 'Delta',
+						className: 'delta-class',
+						disabled: true,
+					},
+				] }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( screen.getByRole( 'tab', { name: 'Delta' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+
+		// onSelect gets called on the initial render.
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+		// onSelect should not be called since the disabled tab is highlighted, but not selected.
+		await user.keyboard( '[ArrowLeft]' );
+		expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should select the first enabled tab when the inital tab is disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ [
+					{
+						name: 'alpha',
+						title: 'Alpha',
+						className: 'alpha-class',
+						disabled: true,
+					},
+					{
+						name: 'beta',
+						title: 'Beta',
+						className: 'beta-class',
+					},
+				] }
+				initialTabName="alpha"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
+	it( 'should select the first enabled tab when the currently selected becomes disabled', () => {
+		const mockOnSelect = jest.fn();
+
+		const { rerender } = render(
+			<TabPanel
+				tabs={ TABS }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
+
+		rerender(
+			<TabPanel
+				tabs={ TABS.map( ( tab ) => {
+					if ( tab.name === 'alpha' ) {
+						return { ...tab, disabled: true };
+					}
+					return tab;
+				} ) }
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+	} );
+
 	describe( 'fallbacks when new tab list invalidates current selection', () => {
 		it( 'should select `initialTabName` if defined', async () => {
 			const user = setupUser();
diff --git a/packages/components/src/tab-panel/types.ts b/packages/components/src/tab-panel/types.ts
index 8cadd604563482..7528ca99d05d25 100644
--- a/packages/components/src/tab-panel/types.ts
+++ b/packages/components/src/tab-panel/types.ts
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { IconType } from '../icon';
 
-type Tab = {
+type Tab< IconProps = unknown > = {
 	/**
 	 * The key of the tab.
 	 */
@@ -21,18 +21,24 @@ type Tab = {
 	 * The class name to apply to the tab button.
 	 */
 	className?: string;
+	/**
+	 * The icon used for the tab button.
+	 */
+	icon?: IconType< IconProps >;
+	/**
+	 * Determines if the tab button should be disabled.
+	 */
+	disabled?: boolean;
 } & Record< any, any >;
 
 export type TabButtonProps< IconProps = unknown > = {
 	children: ReactNode;
-	className?: string;
-	icon?: IconType< IconProps >;
 	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
-};
+} & Pick< Tab< IconProps >, 'className' | 'icon' | 'disabled' >;
 
 export type TabPanelProps = {
 	/**
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index f798e3c3776a9f..a337fd3af4d216 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -1,52 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import ToolbarGroup from '../toolbar-group';
-import ToolbarContainer from './toolbar-container';
-
-/**
- * Renders a toolbar.
- *
- * To add controls, simply pass `ToolbarButton` components as children.
- *
- * @param {Object} props             Component props.
- * @param {string} [props.className] Class to set on the container div.
- * @param {string} [props.label]     ARIA label for toolbar container.
- * @param {Object} ref               React Element ref.
- */
-function Toolbar( { className, label, ...props }, ref ) {
-	if ( ! label ) {
-		deprecated( 'Using Toolbar without label prop', {
-			since: '5.6',
-			alternative: 'ToolbarGroup component',
-			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
-		} );
-		return <ToolbarGroup { ...props } className={ className } />;
-	}
-	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
-		'components-accessible-toolbar',
-		className
-	);
-	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-}
-
-export default forwardRef( Toolbar );
+export { default as Toolbar } from './toolbar';
+export { default as ToolbarButton } from './toolbar-button';
+export { default as ToolbarContext } from './toolbar-context';
+export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export { default as ToolbarGroup } from './toolbar-group';
+export { default as ToolbarItem } from './toolbar-item';
diff --git a/packages/components/src/toolbar/stories/index.js b/packages/components/src/toolbar/stories/index.js
index 298cd97a8674ab..a186c1c0de50ed 100644
--- a/packages/components/src/toolbar/stories/index.js
+++ b/packages/components/src/toolbar/stories/index.js
@@ -17,15 +17,8 @@ import {
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
-import {
-	SVG,
-	Path,
-	ToolbarButton,
-	ToolbarGroup,
-	ToolbarItem,
-	DropdownMenu,
-} from '../../';
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarItem } from '..';
+import { SVG, Path, DropdownMenu } from '../../..';
 
 export default { title: 'Components/Toolbar', component: Toolbar };
 
diff --git a/packages/components/src/toolbar-button/stories/index.js b/packages/components/src/toolbar/stories/toolbar-button.js
similarity index 89%
rename from packages/components/src/toolbar-button/stories/index.js
rename to packages/components/src/toolbar/stories/toolbar-button.js
index 2a90172a793bd0..3740ed8b2bc10f 100644
--- a/packages/components/src/toolbar-button/stories/index.js
+++ b/packages/components/src/toolbar/stories/toolbar-button.js
@@ -11,8 +11,7 @@ import { wordpress } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { Toolbar } from '../../';
-import ToolbarButton from '../';
+import { Toolbar, ToolbarButton } from '..';
 
 export default {
 	title: 'Components/ToolbarButton',
diff --git a/packages/components/src/toolbar-group/stories/index.js b/packages/components/src/toolbar/stories/toolbar-group.js
similarity index 92%
rename from packages/components/src/toolbar-group/stories/index.js
rename to packages/components/src/toolbar/stories/toolbar-group.js
index c24447be9dfab4..d967fc72a63e43 100644
--- a/packages/components/src/toolbar-group/stories/index.js
+++ b/packages/components/src/toolbar/stories/toolbar-group.js
@@ -6,7 +6,7 @@ import { formatBold, formatItalic, link } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { ToolbarButton, ToolbarGroup } from '../../';
+import { ToolbarButton, ToolbarGroup } from '..';
 
 export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
 
diff --git a/packages/components/src/toolbar/test/index.js b/packages/components/src/toolbar/test/index.js
index 1b48415d28ca9e..c9e58edc8a80e8 100644
--- a/packages/components/src/toolbar/test/index.js
+++ b/packages/components/src/toolbar/test/index.js
@@ -6,8 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Toolbar from '../';
-import ToolbarButton from '../../toolbar-button';
+import { Toolbar, ToolbarButton } from '..';
 
 describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar/test/toolbar-group.js
similarity index 98%
rename from packages/components/src/toolbar-group/test/index.js
rename to packages/components/src/toolbar/test/toolbar-group.js
index 4e521f6f8c4950..1b4c2613c4474c 100644
--- a/packages/components/src/toolbar-group/test/index.js
+++ b/packages/components/src/toolbar/test/toolbar-group.js
@@ -6,7 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToolbarGroup from '../';
+import { ToolbarGroup } from '..';
 
 describe( 'ToolbarGroup', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/toolbar-button/README.md b/packages/components/src/toolbar/toolbar-button/README.md
similarity index 100%
rename from packages/components/src/toolbar-button/README.md
rename to packages/components/src/toolbar/toolbar-button/README.md
diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar/toolbar-button/index.js
similarity index 98%
rename from packages/components/src/toolbar-button/index.js
rename to packages/components/src/toolbar/toolbar-button/index.js
index d053ea2b52cf6e..51300c304fdc7c 100644
--- a/packages/components/src/toolbar-button/index.js
+++ b/packages/components/src/toolbar/toolbar-button/index.js
@@ -9,7 +9,7 @@ import { useContext, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar/toolbar-button/style.scss
similarity index 100%
rename from packages/components/src/toolbar-button/style.scss
rename to packages/components/src/toolbar/toolbar-button/style.scss
diff --git a/packages/components/src/toolbar-button/toolbar-button-container.js b/packages/components/src/toolbar/toolbar-button/toolbar-button-container.js
similarity index 100%
rename from packages/components/src/toolbar-button/toolbar-button-container.js
rename to packages/components/src/toolbar/toolbar-button/toolbar-button-container.js
diff --git a/packages/components/src/toolbar-button/toolbar-button-container.native.js b/packages/components/src/toolbar/toolbar-button/toolbar-button-container.native.js
similarity index 100%
rename from packages/components/src/toolbar-button/toolbar-button-container.native.js
rename to packages/components/src/toolbar/toolbar-button/toolbar-button-container.native.js
diff --git a/packages/components/src/toolbar-context/index.js b/packages/components/src/toolbar/toolbar-context/index.js
similarity index 100%
rename from packages/components/src/toolbar-context/index.js
rename to packages/components/src/toolbar/toolbar-context/index.js
diff --git a/packages/components/src/toolbar-dropdown-menu/README.md b/packages/components/src/toolbar/toolbar-dropdown-menu/README.md
similarity index 100%
rename from packages/components/src/toolbar-dropdown-menu/README.md
rename to packages/components/src/toolbar/toolbar-dropdown-menu/README.md
diff --git a/packages/components/src/toolbar-dropdown-menu/index.js b/packages/components/src/toolbar/toolbar-dropdown-menu/index.js
similarity index 95%
rename from packages/components/src/toolbar-dropdown-menu/index.js
rename to packages/components/src/toolbar/toolbar-dropdown-menu/index.js
index 10b73757057bd2..5fcfe51313631c 100644
--- a/packages/components/src/toolbar-dropdown-menu/index.js
+++ b/packages/components/src/toolbar/toolbar-dropdown-menu/index.js
@@ -8,7 +8,7 @@ import { forwardRef, useContext } from '@wordpress/element';
  */
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 
 function ToolbarDropdownMenu( props, ref ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
diff --git a/packages/components/src/toolbar-group/README.md b/packages/components/src/toolbar/toolbar-group/README.md
similarity index 100%
rename from packages/components/src/toolbar-group/README.md
rename to packages/components/src/toolbar/toolbar-group/README.md
diff --git a/packages/components/src/toolbar-group/index.js b/packages/components/src/toolbar/toolbar-group/index.js
similarity index 100%
rename from packages/components/src/toolbar-group/index.js
rename to packages/components/src/toolbar/toolbar-group/index.js
diff --git a/packages/components/src/toolbar-group/style.native.scss b/packages/components/src/toolbar/toolbar-group/style.native.scss
similarity index 100%
rename from packages/components/src/toolbar-group/style.native.scss
rename to packages/components/src/toolbar/toolbar-group/style.native.scss
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
similarity index 100%
rename from packages/components/src/toolbar-group/style.scss
rename to packages/components/src/toolbar/toolbar-group/style.scss
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.js
similarity index 94%
rename from packages/components/src/toolbar-group/toolbar-group-collapsed.js
rename to packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.js
index c671a4dd00f99f..371f4b9e5f6561 100644
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.js
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.js
@@ -6,7 +6,7 @@ import { useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import ToolbarContext from '../toolbar-context';
 import ToolbarItem from '../toolbar-item';
 
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
similarity index 92%
rename from packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
rename to packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
index 411a4e6edbd604..6fa7b6f6bc13be 100644
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
@@ -9,7 +9,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import styles from './style.scss';
 
 function ToolbarGroupCollapsed( {
diff --git a/packages/components/src/toolbar-group/toolbar-group-container.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.js
similarity index 100%
rename from packages/components/src/toolbar-group/toolbar-group-container.js
rename to packages/components/src/toolbar/toolbar-group/toolbar-group-container.js
diff --git a/packages/components/src/toolbar-group/toolbar-group-container.native.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js
similarity index 100%
rename from packages/components/src/toolbar-group/toolbar-group-container.native.js
rename to packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js
diff --git a/packages/components/src/toolbar-item/README.md b/packages/components/src/toolbar/toolbar-item/README.md
similarity index 100%
rename from packages/components/src/toolbar-item/README.md
rename to packages/components/src/toolbar/toolbar-item/README.md
diff --git a/packages/components/src/toolbar-item/index.js b/packages/components/src/toolbar/toolbar-item/index.js
similarity index 100%
rename from packages/components/src/toolbar-item/index.js
rename to packages/components/src/toolbar/toolbar-item/index.js
diff --git a/packages/components/src/toolbar-item/index.native.js b/packages/components/src/toolbar/toolbar-item/index.native.js
similarity index 100%
rename from packages/components/src/toolbar-item/index.native.js
rename to packages/components/src/toolbar/toolbar-item/index.native.js
diff --git a/packages/components/src/toolbar/README.md b/packages/components/src/toolbar/toolbar/README.md
similarity index 100%
rename from packages/components/src/toolbar/README.md
rename to packages/components/src/toolbar/toolbar/README.md
diff --git a/packages/components/src/toolbar/toolbar/index.js b/packages/components/src/toolbar/toolbar/index.js
new file mode 100644
index 00000000000000..f798e3c3776a9f
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/index.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarGroup from '../toolbar-group';
+import ToolbarContainer from './toolbar-container';
+
+/**
+ * Renders a toolbar.
+ *
+ * To add controls, simply pass `ToolbarButton` components as children.
+ *
+ * @param {Object} props             Component props.
+ * @param {string} [props.className] Class to set on the container div.
+ * @param {string} [props.label]     ARIA label for toolbar container.
+ * @param {Object} ref               React Element ref.
+ */
+function Toolbar( { className, label, ...props }, ref ) {
+	if ( ! label ) {
+		deprecated( 'Using Toolbar without label prop', {
+			since: '5.6',
+			alternative: 'ToolbarGroup component',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
+		} );
+		return <ToolbarGroup { ...props } className={ className } />;
+	}
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
+	const finalClassName = classnames(
+		'components-accessible-toolbar',
+		className
+	);
+	return (
+		<ToolbarContainer
+			className={ finalClassName }
+			label={ label }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( Toolbar );
diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/toolbar/style.native.scss
similarity index 100%
rename from packages/components/src/toolbar/style.native.scss
rename to packages/components/src/toolbar/toolbar/style.native.scss
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
similarity index 100%
rename from packages/components/src/toolbar/style.scss
rename to packages/components/src/toolbar/toolbar/style.scss
diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar/toolbar-container.js
similarity index 100%
rename from packages/components/src/toolbar/toolbar-container.js
rename to packages/components/src/toolbar/toolbar/toolbar-container.js
diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar/toolbar-container.native.js
similarity index 100%
rename from packages/components/src/toolbar/toolbar-container.native.js
rename to packages/components/src/toolbar/toolbar/toolbar-container.native.js
diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
index 3d500b45c80237..94dda843559f8a 100644
--- a/packages/components/src/tree-grid/index.js
+++ b/packages/components/src/tree-grid/index.js
@@ -150,12 +150,10 @@ function TreeGrid(
 							event.preventDefault();
 							return;
 						}
-						// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
+						// If a row is focused, and it is expanded, focuses the next cell in the row.
 						const focusableItems = getRowFocusables( activeRow );
 						if ( focusableItems.length > 0 ) {
-							focusableItems[
-								focusableItems.length - 1
-							]?.focus();
+							focusableItems[ nextIndex ]?.focus();
 						}
 					}
 					// Prevent key use for anything else. For example, Voiceover
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 6d7cfacb6a6abb..a116639b9df341 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -62,14 +62,7 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/responsive-wrapper",
-		"src/sandbox",
 		"src/toolbar",
-		"src/toolbar-button",
-		"src/toolbar-context",
-		"src/toolbar-dropdown-menu",
-		"src/toolbar-group",
-		"src/toolbar-item",
 		"src/tree-grid"
 	]
 }
diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js
index 0be26286eb6c6e..f6adf724a32d40 100644
--- a/packages/data/src/components/use-select/index.js
+++ b/packages/data/src/components/use-select/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { useMemoOne } from 'use-memo-one';
-
 /**
  * WordPress dependencies
  */
@@ -11,11 +6,10 @@ import {
 	useRef,
 	useCallback,
 	useMemo,
-	useReducer,
+	useSyncExternalStore,
 	useDebugValue,
 } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { useIsomorphicLayoutEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,7 +17,6 @@ import { useIsomorphicLayoutEffect } from '@wordpress/compose';
 import useRegistry from '../registry-provider/use-registry';
 import useAsyncMode from '../async-mode-provider/use-async-mode';
 
-const noop = () => {};
 const renderQueue = createQueue();
 
 /**
@@ -40,6 +33,128 @@ const renderQueue = createQueue();
  */
 /** @typedef {import('../../types').MapSelect} MapSelect */
 
+function Store( registry, suspense ) {
+	const select = suspense ? registry.suspendSelect : registry.select;
+	const queueContext = {};
+	let lastMapSelect;
+	let lastMapResult;
+	let lastMapResultValid = false;
+	let lastIsAsync;
+	let subscribe;
+
+	const createSubscriber = ( stores ) => ( listener ) => {
+		// Invalidate the value right after subscription was created. React will
+		// call `getValue` after subscribing, to detect store updates that happened
+		// in the interval between the `getValue` call during render and creating
+		// the subscription, which is slightly delayed. We need to ensure that this
+		// second `getValue` call will compute a fresh value.
+		lastMapResultValid = false;
+
+		const onStoreChange = () => {
+			// Invalidate the value on store update, so that a fresh value is computed.
+			lastMapResultValid = false;
+			listener();
+		};
+
+		const onChange = () => {
+			if ( lastIsAsync ) {
+				renderQueue.add( queueContext, onStoreChange );
+			} else {
+				onStoreChange();
+			}
+		};
+
+		const unsubs = stores.map( ( storeName ) => {
+			return registry.subscribe( onChange, storeName );
+		} );
+
+		return () => {
+			// The return value of the subscribe function could be undefined if the store is a custom generic store.
+			for ( const unsub of unsubs ) {
+				unsub?.();
+			}
+			// Cancel existing store updates that were already scheduled.
+			renderQueue.cancel( queueContext );
+		};
+	};
+
+	return ( mapSelect, resubscribe, isAsync ) => {
+		const selectValue = () => mapSelect( select, registry );
+
+		function updateValue( selectFromStore ) {
+			// If the last value is valid, and the `mapSelect` callback hasn't changed,
+			// then we can safely return the cached value. The value can change only on
+			// store update, and in that case value will be invalidated by the listener.
+			if ( lastMapResultValid && mapSelect === lastMapSelect ) {
+				return lastMapResult;
+			}
+
+			const mapResult = selectFromStore();
+
+			// If the new value is shallow-equal to the old one, keep the old one so
+			// that we don't trigger unwanted updates that do a `===` check.
+			if ( ! isShallowEqual( lastMapResult, mapResult ) ) {
+				lastMapResult = mapResult;
+			}
+			lastMapResultValid = true;
+		}
+
+		function getValue() {
+			// Update the value in case it's been invalidated or `mapSelect` has changed.
+			updateValue( selectValue );
+			return lastMapResult;
+		}
+
+		// When transitioning from async to sync mode, cancel existing store updates
+		// that have been scheduled, and invalidate the value so that it's freshly
+		// computed. It might have been changed by the update we just cancelled.
+		if ( lastIsAsync && ! isAsync ) {
+			lastMapResultValid = false;
+			renderQueue.cancel( queueContext );
+		}
+
+		// Either initialize the `subscribe` function, or create a new one if `mapSelect`
+		// changed and has dependencies.
+		// Usage without dependencies, `useSelect( ( s ) => { ... } )`, will subscribe
+		// only once, at mount, and won't resubscibe even if `mapSelect` changes.
+		if ( ! subscribe || ( resubscribe && mapSelect !== lastMapSelect ) ) {
+			// Find out what stores the `mapSelect` callback is selecting from and
+			// use that list to create subscriptions to specific stores.
+			const listeningStores = { current: null };
+			updateValue( () =>
+				registry.__unstableMarkListeningStores(
+					selectValue,
+					listeningStores
+				)
+			);
+			subscribe = createSubscriber( listeningStores.current );
+		} else {
+			updateValue( selectValue );
+		}
+
+		lastIsAsync = isAsync;
+		lastMapSelect = mapSelect;
+
+		// Return a pair of functions that can be passed to `useSyncExternalStore`.
+		return { subscribe, getValue };
+	};
+}
+
+function useStaticSelect( storeName ) {
+	return useRegistry().select( storeName );
+}
+
+function useMappingSelect( suspense, mapSelect, deps ) {
+	const registry = useRegistry();
+	const isAsync = useAsyncMode();
+	const store = useMemo( () => Store( registry, suspense ), [ registry ] );
+	const selector = useCallback( mapSelect, deps );
+	const { subscribe, getValue } = store( selector, !! deps, isAsync );
+	const result = useSyncExternalStore( subscribe, getValue, getValue );
+	useDebugValue( result );
+	return result;
+}
+
 /**
  * Custom react hook for retrieving props from registered selectors.
  *
@@ -105,162 +220,26 @@ const renderQueue = createQueue();
  * @return {UseSelectReturn<T>} A custom react hook.
  */
 export default function useSelect( mapSelect, deps ) {
-	const hasMappingFunction = 'function' === typeof mapSelect;
-
-	// If we're recalling a store by its name or by
-	// its descriptor then we won't be caching the
-	// calls to `mapSelect` because we won't be calling it.
-	if ( ! hasMappingFunction ) {
-		deps = [];
-	}
-
-	// Because of the "rule of hooks" we have to call `useCallback`
-	// on every invocation whether or not we have a real function
-	// for `mapSelect`. we'll create this intermediate variable to
-	// fulfill that need and then reference it with our "real"
-	// `_mapSelect` if we can.
-	const callbackMapper = useCallback(
-		hasMappingFunction ? mapSelect : noop,
-		deps
-	);
-	const _mapSelect = hasMappingFunction ? callbackMapper : null;
-
-	const registry = useRegistry();
-	const isAsync = useAsyncMode();
-
-	const latestRegistry = useRef( registry );
-	const latestMapSelect = useRef();
-	const latestIsAsync = useRef( isAsync );
-	const latestMapOutput = useRef();
-	const latestMapOutputError = useRef();
-
-	// Keep track of the stores being selected in the _mapSelect function,
-	// and only subscribe to those stores later.
-	const listeningStores = useRef( [] );
-	const wrapSelect = useCallback(
-		( callback ) =>
-			registry.__unstableMarkListeningStores(
-				() => callback( registry.select, registry ),
-				listeningStores
-			),
-		[ registry ]
-	);
-
-	// Generate a "flag" for used in the effect dependency array.
-	// It's different than just using `mapSelect` since deps could be undefined,
-	// in that case, we would still want to memoize it.
-	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
-
-	let mapOutput;
-
-	let selectorRan = false;
-	if ( _mapSelect ) {
-		mapOutput = latestMapOutput.current;
-		const hasReplacedRegistry = latestRegistry.current !== registry;
-		const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
-		const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
-		const lastMapSelectFailed = !! latestMapOutputError.current;
-
-		if (
-			hasReplacedRegistry ||
-			hasReplacedMapSelect ||
-			hasLeftAsyncMode ||
-			lastMapSelectFailed
-		) {
-			try {
-				mapOutput = wrapSelect( _mapSelect );
-				selectorRan = true;
-			} catch ( error ) {
-				let errorMessage = `An error occurred while running 'mapSelect': ${ error.message }`;
-
-				if ( latestMapOutputError.current ) {
-					errorMessage += `\nThe error may be correlated with this previous error:\n`;
-					errorMessage += `${ latestMapOutputError.current.stack }\n\n`;
-					errorMessage += 'Original stack trace:';
-				}
-
-				// eslint-disable-next-line no-console
-				console.error( errorMessage );
-			}
-		}
-	}
-
-	useIsomorphicLayoutEffect( () => {
-		if ( ! hasMappingFunction ) {
-			return;
-		}
-
-		latestRegistry.current = registry;
-		latestMapSelect.current = _mapSelect;
-		latestIsAsync.current = isAsync;
-		if ( selectorRan ) {
-			latestMapOutput.current = mapOutput;
-		}
-		latestMapOutputError.current = undefined;
-	} );
-
-	// React can sometimes clear the `useMemo` cache.
-	// We use the cache-stable `useMemoOne` to avoid
-	// losing queues.
-	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
-	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
-	const isMounted = useRef( false );
-
-	useIsomorphicLayoutEffect( () => {
-		if ( ! hasMappingFunction ) {
-			return;
-		}
-
-		const onStoreChange = () => {
-			try {
-				const newMapOutput = wrapSelect( latestMapSelect.current );
-
-				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
-					return;
-				}
-				latestMapOutput.current = newMapOutput;
-			} catch ( error ) {
-				latestMapOutputError.current = error;
-			}
-			forceRender();
-		};
-
-		const onChange = () => {
-			if ( ! isMounted.current ) {
-				return;
-			}
-
-			if ( latestIsAsync.current ) {
-				renderQueue.add( queueContext, onStoreChange );
-			} else {
-				onStoreChange();
-			}
-		};
-
-		// Catch any possible state changes during mount before the subscription
-		// could be set.
-		onStoreChange();
-
-		const unsubscribers = listeningStores.current.map( ( storeName ) =>
-			registry.subscribe( onChange, storeName )
+	// On initial call, on mount, determine the mode of this `useSelect` call
+	// and then never allow it to change on subsequent updates.
+	const staticSelectMode = typeof mapSelect !== 'function';
+	const staticSelectModeRef = useRef( staticSelectMode );
+
+	if ( staticSelectMode !== staticSelectModeRef.current ) {
+		const prevMode = staticSelectModeRef.current ? 'static' : 'mapping';
+		const nextMode = staticSelectMode ? 'static' : 'mapping';
+		throw new Error(
+			`Switching useSelect from ${ prevMode } to ${ nextMode } is not allowed`
 		);
+	}
 
-		isMounted.current = true;
-
-		return () => {
-			// The return value of the subscribe function could be undefined if the store is a custom generic store.
-			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
-			renderQueue.cancel( queueContext );
-			isMounted.current = false;
-		};
-		// If you're tempted to eliminate the spread dependencies below don't do it!
-		// We're passing these in from the calling function and want to make sure we're
-		// examining every individual value inside the `deps` array.
-	}, [ registry, wrapSelect, hasMappingFunction, depsChangedFlag ] );
-
-	useDebugValue( mapOutput );
-
-	return hasMappingFunction ? mapOutput : registry.select( mapSelect );
+	/* eslint-disable react-hooks/rules-of-hooks */
+	// `staticSelectMode` is not allowed to change during the hook instance's,
+	// lifetime, so the rules of hooks are not really violated.
+	return staticSelectMode
+		? useStaticSelect( mapSelect )
+		: useMappingSelect( false, mapSelect, deps );
+	/* eslint-enable react-hooks/rules-of-hooks */
 }
 
 /**
@@ -279,117 +258,5 @@ export default function useSelect( mapSelect, deps ) {
  * @return {Object} Data object returned by the `mapSelect` function.
  */
 export function useSuspenseSelect( mapSelect, deps ) {
-	const _mapSelect = useCallback( mapSelect, deps );
-
-	const registry = useRegistry();
-	const isAsync = useAsyncMode();
-
-	const latestRegistry = useRef( registry );
-	const latestMapSelect = useRef();
-	const latestIsAsync = useRef( isAsync );
-	const latestMapOutput = useRef();
-	const latestMapOutputError = useRef();
-
-	// Keep track of the stores being selected in the `mapSelect` function,
-	// and only subscribe to those stores later.
-	const listeningStores = useRef( [] );
-	const wrapSelect = useCallback(
-		( callback ) =>
-			registry.__unstableMarkListeningStores(
-				() => callback( registry.suspendSelect, registry ),
-				listeningStores
-			),
-		[ registry ]
-	);
-
-	// Generate a "flag" for used in the effect dependency array.
-	// It's different than just using `mapSelect` since deps could be undefined,
-	// in that case, we would still want to memoize it.
-	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
-
-	let mapOutput = latestMapOutput.current;
-	let mapOutputError = latestMapOutputError.current;
-
-	const hasReplacedRegistry = latestRegistry.current !== registry;
-	const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
-	const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
-
-	let selectorRan = false;
-	if ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {
-		try {
-			mapOutput = wrapSelect( _mapSelect );
-			selectorRan = true;
-		} catch ( error ) {
-			mapOutputError = error;
-		}
-	}
-
-	useIsomorphicLayoutEffect( () => {
-		latestRegistry.current = registry;
-		latestMapSelect.current = _mapSelect;
-		latestIsAsync.current = isAsync;
-		if ( selectorRan ) {
-			latestMapOutput.current = mapOutput;
-		}
-		latestMapOutputError.current = mapOutputError;
-	} );
-
-	// React can sometimes clear the `useMemo` cache.
-	// We use the cache-stable `useMemoOne` to avoid
-	// losing queues.
-	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
-	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
-	const isMounted = useRef( false );
-
-	useIsomorphicLayoutEffect( () => {
-		const onStoreChange = () => {
-			try {
-				const newMapOutput = wrapSelect( latestMapSelect.current );
-
-				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
-					return;
-				}
-				latestMapOutput.current = newMapOutput;
-			} catch ( error ) {
-				latestMapOutputError.current = error;
-			}
-
-			forceRender();
-		};
-
-		const onChange = () => {
-			if ( ! isMounted.current ) {
-				return;
-			}
-
-			if ( latestIsAsync.current ) {
-				renderQueue.add( queueContext, onStoreChange );
-			} else {
-				onStoreChange();
-			}
-		};
-
-		// catch any possible state changes during mount before the subscription
-		// could be set.
-		onStoreChange();
-
-		const unsubscribers = listeningStores.current.map( ( storeName ) =>
-			registry.subscribe( onChange, storeName )
-		);
-
-		isMounted.current = true;
-
-		return () => {
-			// The return value of the subscribe function could be undefined if the store is a custom generic store.
-			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
-			renderQueue.cancel( queueContext );
-			isMounted.current = false;
-		};
-	}, [ registry, wrapSelect, depsChangedFlag ] );
-
-	if ( mapOutputError ) {
-		throw mapOutputError;
-	}
-
-	return mapOutput;
+	return useMappingSelect( true, mapSelect, deps );
 }
diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js
index 4b7babcedeaac7..4f7ab0e2589316 100644
--- a/packages/data/src/components/use-select/test/index.js
+++ b/packages/data/src/components/use-select/test/index.js
@@ -50,9 +50,9 @@ describe( 'useSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times expected
+		// 2 selectSpy calls expected
 		// - 1 for initial mount
-		// - 1 for after mount before subscription set.
+		// - 1 for the subscription effect checking if value has changed
 		expect( selectSpy ).toHaveBeenCalledTimes( 2 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
@@ -118,8 +118,7 @@ describe( 'useSelect', () => {
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
 	} );
 
-	// TODO: this might be impossible to pull off in React 18 without `useSyncExternalStore`
-	it.skip( 'avoid calling nested listener after unmounted', async () => {
+	it( 'does not rerender a nested component that is to be unmounted', () => {
 		registry.registerStore( 'toggler', {
 			reducer: ( state = false, action ) =>
 				action.type === 'TOGGLE' ? ! state : state,
@@ -134,16 +133,16 @@ describe( 'useSelect', () => {
 		const mapSelect = ( select ) => select( 'toggler' ).get();
 
 		const mapSelectChild = jest.fn( mapSelect );
-		function Child() {
+		const Child = jest.fn( () => {
 			const show = useSelect( mapSelectChild, [] );
 			return show ? 'yes' : 'no';
-		}
+		} );
 
 		const mapSelectParent = jest.fn( mapSelect );
-		function Parent() {
+		const Parent = jest.fn( () => {
 			const show = useSelect( mapSelectParent, [] );
 			return show ? <Child /> : 'none';
-		}
+		} );
 
 		render(
 			<RegistryProvider value={ registry }>
@@ -155,14 +154,10 @@ describe( 'useSelect', () => {
 		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 0 );
+		expect( Parent ).toHaveBeenCalledTimes( 1 );
+		expect( Child ).toHaveBeenCalledTimes( 0 );
 
-		// act() does batched updates internally, i.e., any scheduled setStates or effects
-		// will be executed only after the dispatch finishes. But we want to opt out of
-		// batched updates here. We want all the setStates to be done synchronously, as the
-		// store listeners are called. The async/await code is a trick to do it: do the
-		// dispatch in a different event loop tick, where the batched updates are no longer active.
-		await act( async () => {
-			await Promise.resolve();
+		act( () => {
 			registry.dispatch( 'toggler' ).toggle();
 		} );
 
@@ -170,18 +165,21 @@ describe( 'useSelect', () => {
 		expect( screen.getByText( 'yes' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+		expect( Parent ).toHaveBeenCalledTimes( 2 );
+		expect( Child ).toHaveBeenCalledTimes( 1 );
 
-		await act( async () => {
-			await Promise.resolve();
+		act( () => {
 			registry.dispatch( 'toggler' ).toggle();
 		} );
 
 		// Check that child was unmounted without any extra state update being performed on it.
-		// I.e., `mapSelectChild` was never called again, and no "state update on an unmounted
-		// component" warning was triggered.
+		// I.e., `mapSelectChild` was called again, and state update was scheduled, we cannot
+		// avoid that, but the state update is never executed and doesn't do a rerender.
 		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
 		expect( mapSelectParent ).toHaveBeenCalledTimes( 4 );
-		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectChild ).toHaveBeenCalledTimes( 3 );
+		expect( Parent ).toHaveBeenCalledTimes( 3 );
+		expect( Child ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	describe( 'rerenders as expected with various mapSelect return types', () => {
diff --git a/packages/data/src/components/use-select/test/suspense.js b/packages/data/src/components/use-select/test/suspense.js
index 9fbbabaeb1bb09..aa53151ad742db 100644
--- a/packages/data/src/components/use-select/test/suspense.js
+++ b/packages/data/src/components/use-select/test/suspense.js
@@ -162,4 +162,76 @@ describe( 'useSuspenseSelect', () => {
 		expect( label ).toHaveTextContent( 'resolution failed' );
 		expect( console ).toHaveErrored();
 	} );
+
+	it( 'independent resolutions do not cause unrelated rerenders', async () => {
+		const store = createReduxStore( 'test', {
+			reducer: ( state = {}, action ) => {
+				switch ( action.type ) {
+					case 'RECEIVE':
+						return { ...state, [ action.endpoint ]: action.data };
+					default:
+						return state;
+				}
+			},
+			selectors: {
+				getData: ( state, endpoint ) => state[ endpoint ],
+			},
+			resolvers: {
+				getData:
+					( endpoint ) =>
+					async ( { dispatch } ) => {
+						const delay = endpoint === 'slow' ? 30 : 10;
+						await new Promise( ( r ) =>
+							setTimeout( () => r(), delay )
+						);
+						dispatch( {
+							type: 'RECEIVE',
+							endpoint,
+							data: endpoint,
+						} );
+					},
+			},
+		} );
+
+		const registry = createRegistry();
+		registry.register( store );
+
+		const FastUI = jest.fn( () => {
+			const data = useSuspenseSelect(
+				( select ) => select( store ).getData( 'fast' ),
+				[]
+			);
+			return <div aria-label="fast loaded">{ data }</div>;
+		} );
+
+		const SlowUI = jest.fn( () => {
+			const data = useSuspenseSelect(
+				( select ) => select( store ).getData( 'slow' ),
+				[]
+			);
+			return <div aria-label="slow loaded">{ data }</div>;
+		} );
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Suspense fallback="fast loading">
+					<FastUI />
+				</Suspense>
+				<Suspense fallback="slow loading">
+					<SlowUI />
+				</Suspense>
+			</RegistryProvider>
+		);
+
+		render( <App /> );
+
+		const fastLabel = await screen.findByLabelText( 'fast loaded' );
+		expect( fastLabel ).toHaveTextContent( 'fast' );
+
+		const slowLabel = await screen.findByLabelText( 'slow loaded' );
+		expect( slowLabel ).toHaveTextContent( 'slow' );
+
+		expect( FastUI ).toHaveBeenCalledTimes( 2 );
+		expect( SlowUI ).toHaveBeenCalledTimes( 2 );
+	} );
 } );
diff --git a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
new file mode 100644
index 00000000000000..444f41980336b8
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Returns the edited blocks.
+ *
+ * @param  this
+ *
+ * @return  The blocks.
+ */
+export async function getBlocks( this: Editor ) {
+	return await this.page.evaluate( () => {
+		// The editor might still contain an unmodified empty block even when it's technically "empty".
+		if ( window.wp.data.select( 'core/editor' ).isEditedPostEmpty() ) {
+			return [];
+		}
+		return window.wp.data.select( 'core/block-editor' ).getBlocks();
+	} );
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts
index 32d4dff80d6aa4..ebaadebd6205fb 100644
--- a/packages/e2e-test-utils-playwright/src/editor/index.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/index.ts
@@ -8,6 +8,7 @@ import type { Browser, Page, BrowserContext, Frame } from '@playwright/test';
  */
 import { clickBlockOptionsMenuItem } from './click-block-options-menu-item';
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
+import { getBlocks } from './get-blocks';
 import { getEditedPostContent } from './get-edited-post-content';
 import { insertBlock } from './insert-block';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
@@ -17,6 +18,7 @@ import { selectBlocks } from './select-blocks';
 import { setContent } from './set-content';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
+import { switchBlockInspectorTab } from './switch-block-inspector-tab';
 import { transformBlockTo } from './transform-block-to';
 
 type EditorConstructorProps = {
@@ -56,6 +58,7 @@ export class Editor {
 	}
 	clickBlockOptionsMenuItem = clickBlockOptionsMenuItem.bind( this );
 	clickBlockToolbarButton = clickBlockToolbarButton.bind( this );
+	getBlocks = getBlocks.bind( this );
 	getEditedPostContent = getEditedPostContent.bind( this );
 	insertBlock = insertBlock.bind( this );
 	openDocumentSettingsSidebar = openDocumentSettingsSidebar.bind( this );
@@ -65,5 +68,6 @@ export class Editor {
 	selectBlocks = selectBlocks.bind( this );
 	setContent = setContent.bind( this );
 	showBlockToolbar = showBlockToolbar.bind( this );
+	switchBlockInspectorTab = switchBlockInspectorTab.bind( this );
 	transformBlockTo = transformBlockTo.bind( this );
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts b/packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts
new file mode 100644
index 00000000000000..1d9b3b0255ad94
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/switch-block-inspector-tab.ts
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+import { expect } from '../test';
+
+/**
+ * Clicks on the block inspector tab button with the supplied label and waits
+ * for the tab switch.
+ *
+ * @param {Editor} this
+ * @param {string} label
+ */
+export async function switchBlockInspectorTab( this: Editor, label: string ) {
+	const inspectorTabButton = this.page.locator(
+		`role=region[name="Editor settings"i] >> role=tab[name="${ label }"i]`
+	);
+	const id = await inspectorTabButton.getAttribute( 'id' );
+
+	await inspectorTabButton.click();
+	await expect(
+		this.page.locator(
+			`role=region[name="Editor settings"i] >> div[role="tabpanel"][aria-labelledby="${ id }"]`
+		)
+	).toBeVisible();
+}
diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index 96ed7f3dcb1ea4..e6bdf2d9c33cb2 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -797,6 +797,15 @@ _Parameters_
 The block toolbar is not always visible while typing.
 Call this function to reveal it.
 
+### switchBlockInspectorTab
+
+Clicks on the block inspector tab button with the supplied label and waits
+for the tab switch.
+
+_Parameters_
+
+-   _label_ `string`: Aria label to find tab button by.
+
 ### switchEditorModeTo
 
 Switches editor mode.
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index 6b217d52c44074..a35fd1083f1138 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -81,6 +81,7 @@ export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
 export { setOption } from './set-option';
 export { setPostContent } from './set-post-content';
+export { switchBlockInspectorTab } from './switch-block-inspector-tab.js';
 export { switchEditorModeTo } from './switch-editor-mode-to';
 export { switchUserToAdmin } from './switch-user-to-admin';
 export { switchUserToTest } from './switch-user-to-test';
diff --git a/packages/e2e-test-utils/src/switch-block-inspector-tab.js b/packages/e2e-test-utils/src/switch-block-inspector-tab.js
new file mode 100644
index 00000000000000..062339664c8a44
--- /dev/null
+++ b/packages/e2e-test-utils/src/switch-block-inspector-tab.js
@@ -0,0 +1,19 @@
+/**
+ * Clicks on the block inspector tab button with the supplied label and waits
+ * for the tab switch.
+ *
+ * @param { string } label Aria label to find tab button by.
+ */
+export async function switchBlockInspectorTab( label ) {
+	const tabButton = await page.$(
+		`.block-editor-block-inspector__tabs button[aria-label="${ label }"]`
+	);
+
+	if ( tabButton ) {
+		const id = await page.evaluate( ( tab ) => tab.id, tabButton );
+		await tabButton.click();
+		await page.waitForSelector(
+			`div[role="tabpanel"][aria-labelledby="${ id }"]`
+		);
+	}
+}
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 c067ead926a5b7..4c57bc33e0bfb9 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
@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
 	getListViewBlocks,
+	switchBlockInspectorTab,
 } from '@wordpress/e2e-test-utils';
 
 async function openListViewSidebar() {
@@ -20,6 +21,20 @@ async function tabToColumnsControl() {
 	let isColumnsControl = false;
 	do {
 		await page.keyboard.press( 'Tab' );
+
+		const isBlockInspectorTab = await page.evaluate( () => {
+			const activeElement = document.activeElement;
+			return (
+				activeElement.getAttribute( 'role' ) === 'tab' &&
+				activeElement.attributes.getNamedItem( 'aria-label' ).value ===
+					'Styles'
+			);
+		} );
+
+		if ( isBlockInspectorTab ) {
+			await page.keyboard.press( 'ArrowRight' );
+		}
+
 		isColumnsControl = await page.evaluate( () => {
 			const activeElement = document.activeElement;
 			return (
@@ -60,6 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Tweak the columns count.
 		await openDocumentSettingsSidebar();
+		await switchBlockInspectorTab( 'Settings' );
 		await page.focus(
 			'.block-editor-block-inspector [aria-label="Columns"][type="number"]'
 		);
diff --git a/packages/e2e-tests/specs/editor/various/block-switcher.test.js b/packages/e2e-tests/specs/editor/various/block-switcher.test.js
index eed52c005ac749..61278881077ba7 100644
--- a/packages/e2e-tests/specs/editor/various/block-switcher.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-switcher.test.js
@@ -76,7 +76,7 @@ describe( 'Block Switcher', () => {
 				'core/group',
 				'core/heading',
 				'core/columns',
-			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
+			].forEach( ( block ) => wp.blocks.unregisterBlockType( block ) );
 		} );
 
 		await page.keyboard.press( 'ArrowUp' );
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index e1f6b0985e3750..cecceeffd4ba3a 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -318,7 +318,7 @@ describe( 'Inserting blocks', () => {
 		);
 		await browseAll.click();
 		const availableBlocks = await page.$$(
-			'.block-editor-block-types-list__list-item'
+			'.edit-post-editor__inserter-panel .block-editor-block-types-list__list-item'
 		);
 		expect( availableBlocks ).toHaveLength( 1 );
 	} );
diff --git a/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js
deleted file mode 100644
index 47c238a430b4f1..00000000000000
--- a/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-describe( 'Managing reusable blocks', () => {
-	/**
-	 * Returns a Promise which resolves to the number of post list entries on
-	 * the current page.
-	 *
-	 * @return {Promise} Promise resolving to number of post list entries.
-	 */
-	async function getNumberOfEntries() {
-		return page.evaluate(
-			() => document.querySelectorAll( '.hentry' ).length
-		);
-	}
-
-	beforeAll( async () => {
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-	} );
-
-	it( 'Should import reusable blocks', async () => {
-		const originalEntries = await getNumberOfEntries();
-
-		// Import Reusable block.
-		await page.waitForSelector( '.list-reusable-blocks__container' );
-		const importButton = await page.$(
-			'.list-reusable-blocks__container button'
-		);
-		await importButton.click();
-
-		// Select the file to upload.
-		const testReusableBlockFile = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'greeting-reusable-block.json'
-		);
-		const input = await page.$( '.list-reusable-blocks-import-form input' );
-		await input.uploadFile( testReusableBlockFile );
-
-		// Submit the form.
-		const button = await page.$(
-			'.list-reusable-blocks-import-form__button'
-		);
-		await button.click();
-
-		// Wait for the success notice.
-		await page.waitForSelector( '.notice-success' );
-		const noticeContent = await page.$eval(
-			'.notice-success',
-			( element ) => element.textContent
-		);
-		expect( noticeContent ).toEqual(
-			'Reusable block imported successfully!'
-		);
-
-		// Refresh the page.
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-
-		const expectedEntries = originalEntries + 1;
-		const actualEntries = await getNumberOfEntries();
-
-		expect( actualEntries ).toBe( expectedEntries );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/post-visibility.test.js b/packages/e2e-tests/specs/editor/various/post-visibility.test.js
deleted file mode 100644
index 44f3122c7dd95b..00000000000000
--- a/packages/e2e-tests/specs/editor/various/post-visibility.test.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	setBrowserViewport,
-	createNewPost,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Post visibility', () => {
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		it( `can be changed when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-
-			const [ confirmButton ] = await page.$x(
-				'//*[@role="dialog"]//button[text()="OK"]'
-			);
-			await confirmButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( 'private' );
-		} );
-
-		it( `can be canceled when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			const initialStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-			const cancelButton = await page.waitForXPath(
-				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-			);
-			await cancelButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( initialStatus );
-		} );
-	} );
-
-	it( 'visibility remains private even if the publish date is in the future', async () => {
-		await createNewPost();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', 'Title' );
-
-		await openDocumentSettingsSidebar();
-
-		// Set a publish date for the next month.
-		await page.click( '*[aria-label^="Change date"]' );
-		await page.click( '*[aria-label="View next month"]' );
-		await (
-			await page.$x(
-				'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
-			)
-		 )[ 0 ].click();
-
-		await page.click( '*[aria-label^="Select visibility"]' );
-
-		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
-		await privateLabel.click();
-
-		await page.waitForXPath(
-			'//*[text()="Would you like to privately publish this post now?"]'
-		);
-
-		const [ confirmButton ] = await page.$x(
-			'//*[@role="dialog"]//button[text()="OK"]'
-		);
-		await confirmButton.click();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', ' Changed' );
-
-		// Wait for the button to be clickable before attempting to click.
-		// This could cause errors when we try to click before changes are registered.
-		await page.waitForSelector(
-			'.editor-post-publish-button[aria-disabled="false"]'
-		);
-		await page.click( '.editor-post-publish-button' );
-
-		const currentStatus = await page.evaluate( () => {
-			return wp.data
-				.select( 'core/editor' )
-				.getEditedPostAttribute( 'status' );
-		} );
-
-		expect( currentStatus ).toBe( 'private' );
-	} );
-} );
diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 9e0ac957b3dbd8..3a6d25f2a1a8fd 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pickBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -58,11 +53,10 @@ export default function DeleteTemplate() {
 			template: '',
 		} );
 		const settings = getEditorSettings();
-		const newAvailableTemplates = pickBy(
-			settings.availableTemplates,
-			( _title, id ) => {
-				return id !== template.slug;
-			}
+		const newAvailableTemplates = Object.fromEntries(
+			Object.entries( settings.availableTemplates ?? {} ).filter(
+				( [ id ] ) => id !== template.slug
+			)
 		);
 		updateEditorSettings( {
 			...settings,
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 627eb2d284ddf3..5076bd397f32aa 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -597,6 +597,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   background: none;
   text-align: start;
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
diff --git a/packages/edit-post/src/components/sidebar/post-template/form.js b/packages/edit-post/src/components/sidebar/post-template/form.js
index 763ab229556661..14c1e6dee76c7d 100644
--- a/packages/edit-post/src/components/sidebar/post-template/form.js
+++ b/packages/edit-post/src/components/sidebar/post-template/form.js
@@ -111,6 +111,7 @@ export default function PostTemplateForm( { onClose } ) {
 				</Notice>
 			) : (
 				<SelectControl
+					__nextHasNoMarginBottom
 					hideLabelFromVision
 					label={ __( 'Template' ) }
 					value={ selectedOption?.value ?? '' }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 05ec36b06a1143..dcc6f62f38a4e0 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -20,7 +20,6 @@ import {
 	__unstableUseTypewriter as useTypewriter,
 	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
-	__unstableBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableEditorStyles as EditorStyles,
 	useSetting,
@@ -43,17 +42,9 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( {
-	children,
-	contentRef,
-	shouldIframe,
-	styles,
-	assets,
-	style,
-} ) {
+function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	const ref = useMouseMoveTypingReset();
 
 	if ( ! shouldIframe ) {
@@ -75,7 +66,6 @@ function MaybeIframe( {
 	return (
 		<Iframe
 			head={ <EditorStyles styles={ styles } /> }
-			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
@@ -165,20 +155,15 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const {
-		themeHasDisabledLayoutStyles,
-		themeSupportsLayout,
-		assets,
-		isFocusMode,
-	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
-			themeSupportsLayout: _settings.supportsLayout,
-			assets: _settings.__unstableResolvedAssets,
-			isFocusMode: _settings.focusMode,
-		};
-	}, [] );
+	const { themeHasDisabledLayoutStyles, themeSupportsLayout, isFocusMode } =
+		useSelect( ( select ) => {
+			const _settings = select( blockEditorStore ).getSettings();
+			return {
+				themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+				themeSupportsLayout: _settings.supportsLayout,
+				isFocusMode: _settings.focusMode,
+			};
+		}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
@@ -361,7 +346,6 @@ export default function VisualEditor( { styles } ) {
 						}
 						contentRef={ contentRef }
 						styles={ styles }
-						assets={ assets }
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&
@@ -419,11 +403,6 @@ export default function VisualEditor( { styles } ) {
 					</MaybeIframe>
 				</motion.div>
 			</motion.div>
-			<__unstableBlockSettingsMenuFirstItem>
-				{ ( { onClose } ) => (
-					<BlockInspectorButton onClick={ onClose } />
-				) }
-			</__unstableBlockSettingsMenuFirstItem>
 		</BlockTools>
 	);
 }
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index c0f3c5264596a0..94a5d4c98396cf 100644
--- a/packages/edit-post/src/plugins/index.js
+++ b/packages/edit-post/src/plugins/index.js
@@ -14,7 +14,6 @@ import CopyContentMenuItem from './copy-content-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import NavigationListViewMenuItem from './navigation-list-view-menu-item';
 
 registerPlugin( 'edit-post', {
 	render() {
@@ -56,7 +55,6 @@ registerPlugin( 'edit-post', {
 						</>
 					) }
 				</ToolsMoreMenuGroup>
-				<NavigationListViewMenuItem />
 			</>
 		);
 	},
diff --git a/packages/edit-post/src/plugins/navigation-list-view-menu-item.js b/packages/edit-post/src/plugins/navigation-list-view-menu-item.js
deleted file mode 100644
index 18bb1bed3760ac..00000000000000
--- a/packages/edit-post/src/plugins/navigation-list-view-menu-item.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockEditorProvider,
-	__unstableBlockToolbarLastItem,
-	__unstableBlockNameContext,
-} from '@wordpress/block-editor';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { listView } from '@wordpress/icons';
-
-const NavMenuSidebarToggle = () => {
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
-
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Open navigation list view' ) }
-				onClick={ () => openGeneralSidebar( 'edit-post/block' ) }
-				icon={ listView }
-			/>
-		</ToolbarGroup>
-	);
-};
-
-let MaybeNavMenuSidebarToggle = Fragment;
-
-const isOffCanvasNavigationEditorEnabled =
-	window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
-if ( isOffCanvasNavigationEditorEnabled ) {
-	MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-}
-
-const NavigationEditMenuItem = () => {
-	return (
-		<BlockEditorProvider>
-			<__unstableBlockToolbarLastItem>
-				<__unstableBlockNameContext.Consumer>
-					{ ( blockName ) =>
-						blockName === 'core/navigation' && (
-							<MaybeNavMenuSidebarToggle />
-						)
-					}
-				</__unstableBlockNameContext.Consumer>
-			</__unstableBlockToolbarLastItem>
-		</BlockEditorProvider>
-	);
-};
-
-export default NavigationEditMenuItem;
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
index 578cfa515bd2c2..377a5c56f7fe55 100644
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -20,6 +20,7 @@ import { plus } from '@wordpress/icons';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
+import { useExistingTemplateParts } from './utils';
 
 export default function NewTemplatePart( {
 	postType,
@@ -31,6 +32,7 @@ export default function NewTemplatePart( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
 		if ( ! title ) {
@@ -40,6 +42,26 @@ export default function NewTemplatePart( {
 			return;
 		}
 
+		const uniqueTitle = () => {
+			const lowercaseTitle = title.toLowerCase();
+			const existingTitles = existingTemplateParts.map(
+				( templatePart ) => templatePart.title.rendered.toLowerCase()
+			);
+
+			if ( ! existingTitles.includes( lowercaseTitle ) ) {
+				return title;
+			}
+
+			let suffix = 2;
+			while (
+				existingTitles.includes( `${ lowercaseTitle } ${ suffix }` )
+			) {
+				suffix++;
+			}
+
+			return `${ title } ${ suffix }`;
+		};
+
 		try {
 			// Currently template parts only allow latin chars.
 			// Fallback slug will receive suffix by default.
@@ -52,7 +74,7 @@ export default function NewTemplatePart( {
 				'wp_template_part',
 				{
 					slug: cleanSlug,
-					title,
+					title: uniqueTitle(),
 					content: '',
 					area,
 				},
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
index 7309f2ff711ca9..03bd184a8af609 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -52,6 +52,20 @@ export const useExistingTemplates = () => {
 	);
 };
 
+export const useExistingTemplateParts = () => {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template_part',
+				{
+					per_page: -1,
+				}
+			),
+		[]
+	);
+};
+
 export const useDefaultTemplateTypes = () => {
 	return useSelect(
 		( select ) =>
diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
index 2ab7ee4c66579b..3070506faf8e14 100644
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -53,7 +53,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					) }
 				</>
 			}
-			assets={ settings.__unstableResolvedAssets }
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 5ef1702734aba4..49cab9aef912c6 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
 import {
 	useEntityBlockEditor,
 	__experimentalFetchMedia as fetchMedia,
@@ -19,12 +19,10 @@ import {
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
-	__unstableBlockToolbarLastItem,
-	__unstableBlockSettingsMenuFirstItem,
+	__unstableUseClipboardHandler as useClipboardHandler,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
-	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
 import {
 	useMergeRefs,
@@ -32,9 +30,6 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { listView } from '@wordpress/icons';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -43,7 +38,6 @@ import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
-import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
@@ -55,19 +49,20 @@ const LAYOUT = {
 	alignments: [],
 };
 
-export default function BlockEditor( { setIsInserterOpen } ) {
+export default function BlockEditor() {
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { storedSettings, templateType, canvasMode } = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, __unstableGetCanvasMode } =
 				select( editSiteStore );
 
 			return {
-				storedSettings: getSettings( setIsInserterOpen ),
+				storedSettings: getSettings( setIsInserterOpened ),
 				templateType: getEditedPostType(),
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
-		[ setIsInserterOpen ]
+		[ setIsInserterOpened ]
 	);
 
 	const settingsBlockPatterns =
@@ -137,10 +132,13 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-	const { setPage } = useDispatch( editSiteStore );
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
+	const mergedRefs = useMergeRefs( [
+		contentRef,
+		useClipboardHandler(),
+		useTypingObserver(),
+	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const [ resizeObserver, sizes ] = useResizeObserver();
@@ -156,33 +154,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const showBlockAppender =
 		( isTemplatePart && hasBlocks ) || isViewMode ? false : undefined;
 
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const { enableComplementaryArea } = useDispatch( 'core/interface' );
-
-	const NavMenuSidebarToggle = () => (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Open navigation list view' ) }
-				onClick={ () =>
-					enableComplementaryArea(
-						'core/edit-site',
-						'edit-site/block-inspector'
-					)
-				}
-				icon={ listView }
-			/>
-		</ToolbarGroup>
-	);
-
-	let MaybeNavMenuSidebarToggle = Fragment;
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
-	if ( isOffCanvasNavigationEditorEnabled ) {
-		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-	}
-
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -249,20 +220,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 									/>
 								</EditorCanvas>
 							</ResizableEditor>
-							<__unstableBlockSettingsMenuFirstItem>
-								{ ( { onClose } ) => (
-									<BlockInspectorButton onClick={ onClose } />
-								) }
-							</__unstableBlockSettingsMenuFirstItem>
-							<__unstableBlockToolbarLastItem>
-								<__unstableBlockNameContext.Consumer>
-									{ ( blockName ) =>
-										blockName === 'core/navigation' && (
-											<MaybeNavMenuSidebarToggle />
-										)
-									}
-								</__unstableBlockNameContext.Consumer>
-							</__unstableBlockToolbarLastItem>
 						</BlockTools>
 					)
 				}
diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/edit-site/src/components/block-editor/resize-handle.js
index d49bfdf4447b66..199ca09869cf92 100644
--- a/packages/edit-site/src/components/block-editor/resize-handle.js
+++ b/packages/edit-site/src/components/block-editor/resize-handle.js
@@ -7,7 +7,11 @@ import { VisuallyHidden } from '@wordpress/components';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
 
-export default function ResizeHandle( { direction, resizeWidthBy } ) {
+export default function ResizeHandle( {
+	variation = 'default',
+	direction,
+	resizeWidthBy,
+} ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
@@ -27,7 +31,7 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	return (
 		<>
 			<button
-				className={ `resizable-editor__drag-handle is-${ direction }` }
+				className={ `resizable-editor__drag-handle is-${ direction } is-variation-${ variation }` }
 				aria-label={ __( 'Drag to resize' ) }
 				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
 				onKeyDown={ handleKeyDown }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index f767c650d5ce75..35c2649b8b0c3b 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -78,21 +78,50 @@
 }
 
 .resizable-editor__drag-handle {
-	$height: 100px;
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-05;
-	height: $height;
+	width: $grid-unit-15;
 	appearance: none;
 	cursor: ew-resize;
 	outline: none;
-	background: $gray-600;
-	border-radius: 2px;
+	background: none;
+	border-radius: $radius-block-ui;
 	border: 0;
 
+	&.is-variation-default {
+		height: 100px;
+	}
+
+	&.is-variation-separator {
+		height: 100%;
+
+		&::after {
+			width: 1px;
+			border-radius: 0;
+			background: $gray-800;
+			left: auto;
+			right: 50%;
+			transition: all ease 0.2s;
+			transition-delay: 0.1s;
+			@include reduce-motion;
+		}
+	}
+
+	&::after {
+		position: absolute;
+		top: 0;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: 0;
+		content: "";
+		width: $grid-unit-05;
+		background: $gray-600;
+		border-radius: $radius-block-ui;
+	}
+
 	&.is-left {
 		left: -$grid-unit-20;
 	}
@@ -103,10 +132,17 @@
 
 	&:hover,
 	&:active {
-		background: $gray-400;
+		opacity: 1;
+		&.is-variation-default::after {
+			background: $gray-400;
+		}
+		&.is-variation-separator::after {
+			width: 2px;
+			background: var(--wp-admin-theme-color);
+		}
 	}
 
-	&:focus {
+	&:focus::after {
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
 }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index fe733f49a19590..4f6ab66c9a2ced 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -174,7 +174,7 @@ export default function Editor() {
 								content={
 									<>
 										<GlobalStylesRenderer />
-										<EditorNotices />
+										{ isEditMode && <EditorNotices /> }
 										{ showVisualEditor && editedPost && (
 											<BlockEditor />
 										) }
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 5e0ada27ece2db..1db2e33a8f53b9 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
@@ -6,13 +6,25 @@ import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
-const BlockPreviewPanel = ( { name } ) => {
+const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const [
 		containerResizeListener,
 		{ width: containerWidth, height: containerHeight },
 	] = useResizeObserver();
 	const blockExample = getBlockType( name )?.example;
-	const blocks = blockExample && getBlockFromExample( name, blockExample );
+	const blockExampleWithVariation = {
+		...blockExample,
+		attributes: {
+			...blockExample?.attributes,
+			className: variation,
+		},
+	};
+	const blocks =
+		blockExample &&
+		getBlockFromExample(
+			name,
+			variation ? blockExampleWithVariation : blockExample
+		);
 	const viewportWidth = blockExample?.viewportWidth || containerWidth;
 	const minHeight = containerHeight;
 
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 95b746a4c57dcd..91d467dfb13fdd 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -94,11 +94,15 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name } ) {
+export default function BorderPanel( { name, variationPath = '' } ) {
 	// To better reflect if the user has customized a value we need to
 	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const [ border, setBorder ] = useStyle( 'border', name );
+	const [ userBorderStyles ] = useStyle(
+		`${ variationPath }border`,
+		name,
+		'user'
+	);
+	const [ border, setBorder ] = useStyle( `${ variationPath }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -108,7 +112,7 @@ export default function BorderPanel( { name } ) {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
-		'border.radius',
+		`${ variationPath }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index d4c229fe831b2d..fb2ca1db99c98c 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,7 +12,9 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
+import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
+import { ScreenVariations } from './screen-variations';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -20,6 +22,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasDimensionsPanel;
+	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
 
 	return (
 		<ItemGroup>
@@ -59,6 +62,9 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ hasVariationsPanel && (
+				<ScreenVariations name={ name } path={ parentMenu } />
+			) }
 		</ItemGroup>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index 1b88bc4074dc87..960ec0936cd42f 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -197,8 +197,11 @@ function useWideSizeProps( name ) {
 }
 
 // Props for managing `spacing.padding`.
-function usePaddingProps( name ) {
-	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
+function usePaddingProps( name, variationPath = '' ) {
+	const [ rawPadding, setRawPadding ] = useStyle(
+		variationPath + 'spacing.padding',
+		name
+	);
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
 	const isAxialPadding =
@@ -210,7 +213,11 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	const [ userSetPaddingValue ] = useStyle(
+		variationPath + 'spacing.padding',
+		name,
+		'user'
+	);
 	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
 	const hasPaddingValue = () => !! userSetPaddingValue;
 
@@ -225,8 +232,11 @@ function usePaddingProps( name ) {
 }
 
 // Props for managing `spacing.margin`.
-function useMarginProps( name ) {
-	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
+function useMarginProps( name, variationPath = '' ) {
+	const [ rawMargin, setRawMargin ] = useStyle(
+		variationPath + 'spacing.margin',
+		name
+	);
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = useCustomSides( name, 'margin' );
 	const isAxialMargin =
@@ -252,14 +262,21 @@ function useMarginProps( name ) {
 }
 
 // Props for managing `spacing.blockGap`.
-function useBlockGapProps( name ) {
-	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+function useBlockGapProps( name, variationPath = '' ) {
+	const [ gapValue, setGapValue ] = useStyle(
+		variationPath + 'spacing.blockGap',
+		name
+	);
 	const gapValues = splitGapValue( gapValue );
 	const gapSides = useCustomSides( name, 'blockGap' );
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const [ userSetGapValue ] = useStyle(
+		variationPath + 'spacing.blockGap',
+		name,
+		'user'
+	);
 	const hasGapValue = () => !! userSetGapValue;
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -288,9 +305,9 @@ function useBlockGapProps( name ) {
 }
 
 // Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name ) {
+function useMinHeightProps( name, variationPath = '' ) {
 	const [ minHeightValue, setMinHeightValue ] = useStyle(
-		'dimensions.minHeight',
+		variationPath + 'dimensions.minHeight',
 		name
 	);
 	const resetMinHeightValue = () => setMinHeightValue( undefined );
@@ -303,7 +320,7 @@ function useMinHeightProps( name ) {
 	};
 }
 
-export default function DimensionsPanel( { name } ) {
+export default function DimensionsPanel( { name, variationPath = '' } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
@@ -345,7 +362,7 @@ export default function DimensionsPanel( { name } ) {
 		setPaddingValues,
 		resetPaddingValue,
 		hasPaddingValue,
-	} = usePaddingProps( name );
+	} = usePaddingProps( name, variationPath );
 
 	// Props for managing `spacing.margin`.
 	const {
@@ -355,7 +372,7 @@ export default function DimensionsPanel( { name } ) {
 		setMarginValues,
 		resetMarginValue,
 		hasMarginValue,
-	} = useMarginProps( name );
+	} = useMarginProps( name, variationPath );
 
 	// Props for managing `spacing.blockGap`.
 	const {
@@ -367,7 +384,7 @@ export default function DimensionsPanel( { name } ) {
 		setGapValues,
 		resetGapValue,
 		hasGapValue,
-	} = useBlockGapProps( name );
+	} = useBlockGapProps( name, variationPath );
 
 	// Props for managing `dimensions.minHeight`.
 	const {
@@ -375,7 +392,7 @@ export default function DimensionsPanel( { name } ) {
 		setMinHeightValue,
 		resetMinHeightValue,
 		hasMinHeightValue,
-	} = useMinHeightProps( name );
+	} = useMinHeightProps( name, variationPath );
 
 	const resetAll = () => {
 		resetPaddingValue();
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 5693ea97eafd5b..7f06c49e2edcba 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
@@ -16,7 +16,7 @@ import {
 	useStyle,
 } from './hooks';
 
-function ScreenBackgroundColor( { name } ) {
+function ScreenBackgroundColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -39,16 +39,23 @@ function ScreenBackgroundColor( { name } ) {
 		supports.includes( 'background' ) &&
 		( gradients.length > 0 || areCustomGradientsEnabled );
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'color.background',
+		variationPath + 'color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useStyle(
-		'color.background',
+		variationPath + 'color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		variationPath + 'color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		variationPath + 'color.gradient',
 		name,
 		'user'
 	);
-	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
-	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
 
 	if ( ! hasBackgroundColor && ! hasGradientColor ) {
 		return null;
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index 30c03c17bec014..144bfba265f376 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -21,6 +21,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
+import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 
@@ -53,8 +54,12 @@ function BlockMenuItem( { block } ) {
 	const hasBorderPanel = useHasBorderPanel( block.name );
 	const hasDimensionsPanel = useHasDimensionsPanel( block.name );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const hasVariationsPanel = useHasVariationsPanel( block.name );
 	const hasBlockMenuItem =
-		hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+		hasTypographyPanel ||
+		hasColorPanel ||
+		hasLayoutPanel ||
+		hasVariationsPanel;
 
 	if ( ! hasBlockMenuItem ) {
 		return null;
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 d2d3707271dede..5b339f64f795f3 100644
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -9,15 +9,18 @@ import { __ } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function ScreenBorder( { name } ) {
+function ScreenBorder( { name, variationPath = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } />
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasBorderPanel && (
+				<BorderPanel name={ name } variationPath={ variationPath } />
+			) }
 		</>
 	);
 }
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 6f6f6288315ef5..27ae7a07831475 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
@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenButtonColor( { name } ) {
+function ScreenButtonColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -30,7 +30,7 @@ function ScreenButtonColor( { name } ) {
 		( solids.length > 0 || areCustomSolidsEnabled );
 
 	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
+		variationPath + 'elements.button.color.text',
 		name
 	);
 	const [ userButtonTextColor ] = useStyle(
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 ec5cb308b20271..4de6056f7d767f 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -21,14 +21,29 @@ import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function BackgroundColorItem( { name, parentMenu } ) {
+function variationPathToURL( variationPath ) {
+	if ( ! variationPath ) {
+		return '';
+	}
+	// Replace the dots with slashes, add slash at the beginning and remove the last slash.
+	return '/' + variationPath.replace( /\./g, '/' ).slice( 0, -1 );
+}
+
+function BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport =
 		supports.includes( 'backgroundColor' ) ||
 		supports.includes( 'background' );
-	const [ backgroundColor ] = useStyle( 'color.background', name );
-	const [ gradientValue ] = useStyle( 'color.gradient', name );
+	const [ backgroundColor ] = useStyle(
+		variationPath + 'color.background',
+		name
+	);
+	const [ gradientValue ] = useStyle(
+		variationPath + 'color.gradient',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -36,7 +51,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/background' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/background'
+			}
 			aria-label={ __( 'Colors background styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -54,10 +73,10 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	);
 }
 
-function TextColorItem( { name, parentMenu } ) {
+function TextColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'color.text', name );
+	const [ color ] = useStyle( variationPath + 'color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
@@ -65,7 +84,11 @@ function TextColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/text' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/text'
+			}
 			aria-label={ __( 'Colors text styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -83,11 +106,17 @@ function TextColorItem( { name, parentMenu } ) {
 	);
 }
 
-function LinkColorItem( { name, parentMenu } ) {
+function LinkColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useStyle( 'elements.link.color.text', name );
-	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.link.color.text',
+		name
+	);
+	const [ colorHover ] = useStyle(
+		variationPath + 'elements.link.:hover.color.text',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -95,7 +124,11 @@ function LinkColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/link' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/link'
+			}
 			aria-label={ __( 'Colors link styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -115,11 +148,17 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
-function HeadingColorItem( { name, parentMenu } ) {
+function HeadingColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'elements.heading.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.heading.color.text',
+		name
+	);
+	const [ bgColor ] = useStyle(
+		variationPath + 'elements.heading.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
@@ -127,7 +166,11 @@ function HeadingColorItem( { name, parentMenu } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/heading' }
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/heading'
+			}
 			aria-label={ __( 'Colors heading styles' ) }
 		>
 			<HStack justify="flex-start">
@@ -145,18 +188,30 @@ function HeadingColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ButtonColorItem( { name, parentMenu } ) {
+function ButtonColorItem( { name, parentMenu, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useStyle( 'elements.button.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
+	const [ color ] = useStyle(
+		variationPath + 'elements.button.color.text',
+		name
+	);
+	const [ bgColor ] = useStyle(
+		variationPath + 'elements.button.color.background',
+		name
+	);
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+		<NavigationButtonAsItem
+			path={
+				parentMenu +
+				variationPathToURL( variationPath ) +
+				'/colors/button'
+			}
+		>
 			<HStack justify="flex-start">
 				<ZStack isLayered={ false } offset={ -8 }>
 					<ColorIndicatorWrapper expanded={ false }>
@@ -174,9 +229,10 @@ function ButtonColorItem( { name, parentMenu } ) {
 	);
 }
 
-function ScreenColors( { name } ) {
+function ScreenColors( { name, variationPath = '' } ) {
 	const parentMenu =
 		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 
 	return (
 		<>
@@ -187,7 +243,7 @@ function ScreenColors( { name } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
@@ -199,22 +255,27 @@ function ScreenColors( { name } ) {
 							<BackgroundColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<TextColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<LinkColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<HeadingColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
+								variationPath={ variationPath }
 							/>
 						</ItemGroup>
 					</VStack>
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 425c461700c95c..c666873026811b 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
@@ -21,7 +21,7 @@ import {
 	useGradientsPerOrigin,
 } from './hooks';
 
-function ScreenHeadingColor( { name } ) {
+function ScreenHeadingColor( { name, variationPath = '' } ) {
 	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -52,30 +52,30 @@ function ScreenHeadingColor( { name } ) {
 		( gradients.length > 0 || areCustomGradientsEnabled );
 
 	const [ color, setColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+		variationPath + 'elements.' + selectedLevel + '.color.text',
 		name
 	);
 	const [ userColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
+		variationPath + 'elements.' + selectedLevel + '.color.text',
 		name,
 		'user'
 	);
 
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+		variationPath + 'elements.' + selectedLevel + '.color.background',
 		name
 	);
 	const [ userBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
+		variationPath + 'elements.' + selectedLevel + '.color.background',
 		name,
 		'user'
 	);
 	const [ gradient, setGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+		variationPath + 'elements.' + selectedLevel + '.color.gradient',
 		name
 	);
 	const [ userGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
+		variationPath + 'elements.' + selectedLevel + '.color.gradient',
 		name,
 		'user'
 	);
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 2909cc34273b21..b2503e4f8e1e47 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -9,15 +9,21 @@ import { __ } from '@wordpress/i18n';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
-function ScreenLayout( { name } ) {
+function ScreenLayout( { name, variationPath = '' } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel name={ name } />
-			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasDimensionsPanel && (
+				<DimensionsPanel
+					name={ name }
+					variationPath={ variationPath }
+				/>
+			) }
 		</>
 	);
 }
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 3b7bcc6e5fe716..855e8e91c81dbf 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
@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenLinkColor( { name } ) {
+function ScreenLinkColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -32,20 +32,32 @@ function ScreenLinkColor( { name } ) {
 	const pseudoStates = {
 		default: {
 			label: __( 'Default' ),
-			value: useStyle( 'elements.link.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
+			value: useStyle(
+				variationPath + 'elements.link.color.text',
+				name
+			)[ 0 ],
+			handler: useStyle(
+				variationPath + 'elements.link.color.text',
+				name
+			)[ 1 ],
 			userValue: useStyle(
-				'elements.link.color.text',
+				variationPath + 'elements.link.color.text',
 				name,
 				'user'
 			)[ 0 ],
 		},
 		hover: {
 			label: __( 'Hover' ),
-			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
+			value: useStyle(
+				variationPath + 'elements.link.:hover.color.text',
+				name
+			)[ 0 ],
+			handler: useStyle(
+				variationPath + 'elements.link.:hover.color.text',
+				name
+			)[ 1 ],
 			userValue: useStyle(
-				'elements.link.:hover.color.text',
+				variationPath + 'elements.link.:hover.color.text',
 				name,
 				'user'
 			)[ 0 ],
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 9439e5ef0c9d8a..7521b3b68728e7 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
@@ -15,7 +15,7 @@ import {
 	useColorsPerOrigin,
 } from './hooks';
 
-function ScreenTextColor( { name } ) {
+function ScreenTextColor( { name, variationPath = '' } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -28,8 +28,12 @@ function ScreenTextColor( { name } ) {
 		isTextEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
+	const [ color, setColor ] = useStyle( variationPath + 'color.text', name );
+	const [ userColor ] = useStyle(
+		variationPath + 'color.text',
+		name,
+		'user'
+	);
 
 	if ( ! hasTextColor ) {
 		return null;
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 49282b73318127..a92e00361e4c7b 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -18,6 +18,7 @@ import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassNameFromPath } from './utils';
 
 function Item( { name, parentMenu, element, label } ) {
 	const hasSupport = ! name;
@@ -76,9 +77,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name } ) {
+function ScreenTypography( { name, variationPath = '' } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-
+	const variationClassName = getVariationClassNameFromPath( variationPath );
 	return (
 		<>
 			<ScreenHeader
@@ -88,7 +89,7 @@ function ScreenTypography( { name } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
@@ -124,7 +125,13 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && <TypographyPanel name={ name } element="text" /> }
+			{ !! name && (
+				<TypographyPanel
+					name={ name }
+					variationPath={ variationPath }
+					element="text"
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-variations.js b/packages/edit-site/src/components/global-styles/screen-variations.js
new file mode 100644
index 00000000000000..6d7049044984f6
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-variations.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import {
+	VariationPanel,
+	VariationsPanel,
+	useHasVariationsPanel,
+} from './variations-panel';
+import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import Subtitle from './subtitle';
+
+export function ScreenVariations( { name, path = '' } ) {
+	const hasVariationsPanel = useHasVariationsPanel( name, path );
+
+	if ( ! hasVariationsPanel ) {
+		return null;
+	}
+	return (
+		<div className="edit-site-global-styles-screen-variations">
+			<VStack spacing={ 3 }>
+				<p>Manage style variations, saved block appearence presets.</p>
+				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+				<VariationsPanel name={ name } />
+			</VStack>
+		</div>
+	);
+}
+
+export function ScreenVariation( { blockName, style } ) {
+	const { name: styleName, label: styleLabel } = style;
+	return (
+		<>
+			<ScreenHeader title={ styleLabel } />
+			<BlockPreviewPanel
+				name={ blockName }
+				variation={ `is-style-${ styleName }` }
+			/>
+			<VariationPanel blockName={ blockName } styleName={ styleName } />
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 5616a068b594c8..77b991632999c5 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -146,3 +146,12 @@ $block-preview-height: 150px;
 	max-height: 200px;
 	overflow-y: scroll;
 }
+
+.edit-site-global-styles-screen-variations {
+	margin-top: $grid-unit-20;
+	border-top: 1px solid $gray-300;
+
+	& > * {
+		margin: $grid-unit-30 $grid-unit-20;
+	}
+}
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index a26221247dc9b9..2edef1b38b11b6 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -681,7 +681,7 @@ describe( 'global styles renderer', () => {
 			const imageBlock = { name: 'core/image', supports: imageSupports };
 			const blockTypes = [ imageBlock ];
 
-			expect( getBlockSelectors( blockTypes ) ).toEqual( {
+			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSupports.__experimentalSelector,
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 82f7dc796d92f1..b793d81978ef20 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -171,7 +171,12 @@ function useFontAppearance( prefix, name ) {
 	};
 }
 
-export default function TypographyPanel( { name, element, headingLevel } ) {
+export default function TypographyPanel( {
+	name,
+	element,
+	headingLevel,
+	variationPath = '',
+} ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
 	if ( element === 'heading' ) {
@@ -210,9 +215,15 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 	}
 
 	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset( prefix + 'typography.fontFamily', name );
+		useStyleWithReset(
+			variationPath + prefix + 'typography.fontFamily',
+			name
+		);
 	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset( prefix + 'typography.fontSize', name );
+		useFontSizeWithReset(
+			variationPath + prefix + 'typography.fontSize',
+			name
+		);
 	const {
 		fontStyle,
 		setFontStyle,
@@ -220,27 +231,39 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 		setFontWeight,
 		hasFontAppearance,
 		resetFontAppearance,
-	} = useFontAppearance( prefix, name );
+	} = useFontAppearance( variationPath + prefix, name );
 	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset( prefix + 'typography.lineHeight', name );
+		useStyleWithReset(
+			variationPath + prefix + 'typography.lineHeight',
+			name
+		);
 	const [
 		letterSpacing,
 		setLetterSpacing,
 		hasLetterSpacing,
 		resetLetterSpacing,
-	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.letterSpacing',
+		name
+	);
 	const [
 		textTransform,
 		setTextTransform,
 		hasTextTransform,
 		resetTextTransform,
-	] = useStyleWithReset( prefix + 'typography.textTransform', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.textTransform',
+		name
+	);
 	const [
 		textDecoration,
 		setTextDecoration,
 		hasTextDecoration,
 		resetTextDecoration,
-	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
+	] = useStyleWithReset(
+		variationPath + prefix + 'typography.textDecoration',
+		name
+	);
 
 	const resetAll = () => {
 		resetFontFamily();
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index d7c9eed7d8474b..3909eb9f9cd2ed 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -6,7 +6,9 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 } from '@wordpress/components';
-import { getBlockTypes } from '@wordpress/blocks';
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,6 +27,7 @@ import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import { ScreenVariation } from './screen-variations';
 import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
@@ -43,14 +46,67 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function ContextScreens( { name } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
+function BlockStyleVariationsScreens( { name } ) {
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	if ( ! blockStyleVariations?.length ) {
+		return null;
+	}
+
+	return blockStyleVariations.map( ( variation ) => (
+		<ContextScreens
+			key={ variation.name + name }
+			name={ name }
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( name ) +
+				'/variations/' +
+				encodeURIComponent( variation.name )
+			}
+		/>
+	) );
+}
+
+function ContextScreens( { name, parentMenu = '' } ) {
+	const hasVariationPath = parentMenu.search( 'variations' );
+	const variationPath =
+		hasVariationPath !== -1
+			? parentMenu
+					.substring( hasVariationPath )
+					.replace( '/', '.' )
+					.concat( '', '.' )
+			: '';
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+
+	const BlockStylesNavigationScreens = ( { blockStyles, blockName } ) => {
+		return blockStyles.map( ( style, index ) => (
+			<GlobalStylesNavigationScreen
+				key={ index }
+				path={ parentMenu + '/variations/' + style.name }
+			>
+				<ScreenVariation blockName={ blockName } style={ style } />
+			</GlobalStylesNavigationScreen>
+		) );
+	};
 
 	return (
 		<>
 			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } />
+				<ScreenTypography
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -78,7 +134,7 @@ function ContextScreens( { name } ) {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } />
+				<ScreenColors name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
@@ -90,36 +146,58 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/background' }
 			>
-				<ScreenBackgroundColor name={ name } />
+				<ScreenBackgroundColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+				<ScreenTextColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } />
+				<ScreenLinkColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/heading' }
 			>
-				<ScreenHeadingColor name={ name } />
+				<ScreenHeadingColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
-				<ScreenButtonColor name={ name } />
+				<ScreenButtonColor
+					name={ name }
+					variationPath={ variationPath }
+				/>
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } />
+				<ScreenBorder name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } />
+				<ScreenLayout name={ name } variationPath={ variationPath } />
 			</GlobalStylesNavigationScreen>
+
+			{ !! blockStyleVariations?.length && (
+				<BlockStylesNavigationScreens
+					blockStyles={ blockStyleVariations }
+					blockName={ name }
+				/>
+			) }
 		</>
 	);
 }
@@ -154,6 +232,7 @@ function GlobalStylesStyleBook( { onClose } ) {
 
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
+
 	return (
 		<NavigatorProvider
 			className="edit-site-global-styles-sidebar__navigator-provider"
@@ -186,9 +265,18 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 				<ContextScreens
 					key={ 'screens-block-' + block.name }
 					name={ block.name }
+					parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
 				/>
 			) ) }
 
+			{ blocks.map( ( block, index ) => {
+				return (
+					<BlockStyleVariationsScreens
+						key={ 'screens-block-styles-' + block.name + index }
+						name={ block.name }
+					/>
+				);
+			} ) }
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index d83693757b035c..080148b926559f 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
+import { get, isEmpty, kebabCase, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 	getBlockTypes,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
@@ -171,6 +172,29 @@ function flattenTree( input = {}, prefix, token ) {
 	return result;
 }
 
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ *
+ */
+function concatFeatureVariationSelectorString(
+	featureSelector,
+	styleVariationSelector
+) {
+	const featureSelectors = featureSelector.split( ',' );
+	const combinedSelectors = [];
+	featureSelectors.forEach( ( selector ) => {
+		combinedSelectors.push(
+			`${ styleVariationSelector.trim() }${ selector.trim() }`
+		);
+	} );
+	return combinedSelectors.join( ', ' );
+}
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -449,17 +473,19 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	}
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
-		pickBy( treeToPickFrom, ( value, key ) =>
-			[
-				'border',
-				'color',
-				'dimensions',
-				'spacing',
-				'typography',
-				'filter',
-				'outline',
-				'shadow',
-			].includes( key )
+		Object.fromEntries(
+			Object.entries( treeToPickFrom ?? {} ).filter( ( [ key ] ) =>
+				[
+					'border',
+					'color',
+					'dimensions',
+					'spacing',
+					'typography',
+					'filter',
+					'outline',
+					'shadow',
+				].includes( key )
+			)
 		);
 
 	// Top-level.
@@ -484,6 +510,16 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 	Object.entries( tree.styles?.blocks ?? {} ).forEach(
 		( [ blockName, node ] ) => {
 			const blockStyles = pickStyleKeys( node );
+
+			if ( node?.variations ) {
+				const variations = {};
+				Object.keys( node.variations ).forEach( ( variation ) => {
+					variations[ variation ] = pickStyleKeys(
+						node.variations[ variation ]
+					);
+				} );
+				blockStyles.variations = variations;
+			}
 			if (
 				!! blockStyles &&
 				!! blockSelectors?.[ blockName ]?.selector
@@ -499,6 +535,8 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 					styles: blockStyles,
 					featureSelectors:
 						blockSelectors[ blockName ].featureSelectors,
+					styleVariationSelectors:
+						blockSelectors[ blockName ].styleVariationSelectors,
 				} );
 			}
 
@@ -647,6 +685,7 @@ export const toStyles = (
 			fallbackGapValue,
 			hasLayoutSupport,
 			featureSelectors,
+			styleVariationSelectors,
 		} ) => {
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
@@ -673,6 +712,69 @@ export const toStyles = (
 				);
 			}
 
+			if ( styleVariationSelectors ) {
+				Object.entries( styleVariationSelectors ).forEach(
+					( [ styleVariationName, styleVariationSelector ] ) => {
+						if ( styles?.variations?.[ styleVariationName ] ) {
+							// If the block uses any custom selectors for block support, add those first.
+							if ( featureSelectors ) {
+								Object.entries( featureSelectors ).forEach(
+									( [ featureName, featureSelector ] ) => {
+										if (
+											styles?.variations?.[
+												styleVariationName
+											]?.[ featureName ]
+										) {
+											const featureStyles = {
+												[ featureName ]:
+													styles.variations[
+														styleVariationName
+													][ featureName ],
+											};
+											const featureDeclarations =
+												getStylesDeclarations(
+													featureStyles
+												);
+											delete styles.variations[
+												styleVariationName
+											][ featureName ];
+
+											if (
+												!! featureDeclarations.length
+											) {
+												ruleset =
+													ruleset +
+													`${ concatFeatureVariationSelectorString(
+														featureSelector,
+														styleVariationSelector
+													) }{${ featureDeclarations.join(
+														';'
+													) } }`;
+											}
+										}
+									}
+								);
+							}
+							// Otherwise add regular selectors.
+							const styleVariationDeclarations =
+								getStylesDeclarations(
+									styles?.variations?.[ styleVariationName ],
+									styleVariationSelector,
+									useRootPaddingAlign,
+									tree
+								);
+							if ( !! styleVariationDeclarations.length ) {
+								ruleset =
+									ruleset +
+									`${ styleVariationSelector }{${ styleVariationDeclarations.join(
+										';'
+									) }}`;
+							}
+						}
+					}
+				);
+			}
+
 			const duotoneStyles = {};
 			if ( styles?.filter ) {
 				duotoneStyles.filter = styles.filter;
@@ -802,7 +904,7 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
-export const getBlockSelectors = ( blockTypes ) => {
+export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
@@ -815,6 +917,15 @@ export const getBlockSelectors = ( blockTypes ) => {
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 
+		const blockStyleVariations = getBlockStyles( name );
+		const styleVariationSelectors = {};
+		if ( blockStyleVariations?.length ) {
+			blockStyleVariations.forEach( ( variation ) => {
+				const styleVariationSelector = `.is-style-${ variation.name }${ selector }`;
+				styleVariationSelectors[ variation.name ] =
+					styleVariationSelector;
+			} );
+		}
 		// For each block support feature add any custom selectors.
 		const featureSelectors = {};
 		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
@@ -840,6 +951,10 @@ export const getBlockSelectors = ( blockTypes ) => {
 			hasLayoutSupport,
 			name,
 			selector,
+			styleVariationSelectors: Object.keys( styleVariationSelectors )
+				.length
+				? styleVariationSelectors
+				: undefined,
 		};
 	} );
 
@@ -892,12 +1007,19 @@ export function useGlobalStylesOutput() {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
+	const getBlockStyles = useSelect( ( select ) => {
+		return select( blocksStore ).getBlockStyles;
+	}, [] );
+
 	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
 			return [];
 		}
 		mergedConfig = updateConfigWithSeparator( mergedConfig );
-		const blockSelectors = getBlockSelectors( getBlockTypes() );
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles
+		);
 		const customProperties = toCustomProperties(
 			mergedConfig,
 			blockSelectors
@@ -909,6 +1031,7 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
 		const stylesheets = [
 			{
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 14f3b868294172..b33383451ccd3e 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -90,11 +90,42 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
-	'elements.button.backgroundColor': 'background-color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',
-	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
 	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -333,3 +364,16 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ *
+ * @param {string} path The variation path in the Global Styles tree.
+ *
+ * @return {string} The variation class name.
+ */
+export function getVariationClassNameFromPath( path ) {
+	if ( ! path ) {
+		return '';
+	}
+	return `is-style-${ path.split( '.' )[ 1 ] }`;
+}
diff --git a/packages/edit-site/src/components/global-styles/variations-panel.js b/packages/edit-site/src/components/global-styles/variations-panel.js
new file mode 100644
index 00000000000000..7cfeb4301750da
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations-panel.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { NavigationButtonAsItem } from './navigation-button';
+import ContextMenu from './context-menu';
+
+function getCoreBlockStyles( blockStyles ) {
+	return blockStyles?.filter( ( style ) => style.source === 'block' );
+}
+
+export function useHasVariationsPanel( name, parentMenu = '' ) {
+	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+}
+
+export function VariationsPanel( { name } ) {
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ coreBlockStyles.map( ( style, index ) => {
+				if ( style?.isDefault ) {
+					return null;
+				}
+				return (
+					<NavigationButtonAsItem
+						key={ index }
+						path={
+							'/blocks/' +
+							encodeURIComponent( name ) +
+							'/variations/' +
+							encodeURIComponent( style.name )
+						}
+						aria-label={ style.label }
+					>
+						{ style.label }
+					</NavigationButtonAsItem>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
+
+export function VariationPanel( { blockName, styleName } ) {
+	return (
+		<ContextMenu
+			parentMenu={
+				'/blocks/' +
+				encodeURIComponent( blockName ) +
+				'/variations/' +
+				encodeURIComponent( styleName )
+			}
+			name={ blockName }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 0868e08bae289c..9a6d4373edc27d 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -11,6 +11,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	ResizableBox,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -18,7 +19,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
@@ -35,13 +36,28 @@ import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
+import ResizeHandle from '../block-editor/resize-handle';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const ANIMATION_DURATION = 0.5;
+const emptyResizeHandleStyles = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
 
 export default function Layout( { onError } ) {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
+	useSyncCanvasModeWithURL();
 
+	const hubRef = useRef();
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
@@ -86,6 +102,14 @@ export default function Layout( { onError } ) {
 	// Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer, fullSize ] = useResizeObserver();
+	const [ forcedWidth, setForcedWidth ] = useState( null );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const isResizingEnabled = ! isMobileViewport && canvasMode === 'view';
+	const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
+	let canvasWidth = isResizing ? '100%' : fullSize.width;
+	if ( showFrame && ! isResizing ) {
+		canvasWidth = canvasSize.width - canvasPadding;
+	}
 	useEffect( () => {
 		if ( canvasMode === 'view' && isMobileViewport ) {
 			setIsMobileCanvasVisible( false );
@@ -96,6 +120,13 @@ export default function Layout( { onError } ) {
 		}
 	}, [ canvasMode, isMobileViewport ] );
 
+	// Synchronizing the URL with the store value of canvasMode happens in an effect
+	// This condition ensures the component is only rendered after the synchronization happens
+	// which prevents any animations due to potential canvasMode value change.
+	if ( canvasMode === 'init' ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ fullResizer }
@@ -112,7 +143,14 @@ export default function Layout( { onError } ) {
 				) }
 			>
 				<SiteHub
+					ref={ hubRef }
 					className="edit-site-layout__hub"
+					style={ {
+						width:
+							isResizingEnabled && forcedWidth
+								? forcedWidth - 48
+								: undefined,
+					} }
 					isMobileCanvasVisible={ isMobileCanvasVisible }
 					setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
 				/>
@@ -149,7 +187,7 @@ export default function Layout( { onError } ) {
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
 						{ showSidebar && (
-							<NavigableRegion
+							<ResizableBox
 								as={ motion.div }
 								initial={ {
 									opacity: 0,
@@ -162,22 +200,73 @@ export default function Layout( { onError } ) {
 								} }
 								transition={ {
 									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
+									duration:
+										disableMotion || isResizing
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
+								size={ {
+									height: '100%',
+									width:
+										isResizingEnabled && forcedWidth
+											? forcedWidth
+											: defaultSidebarWidth,
+								} }
 								className="edit-site-layout__sidebar"
-								ariaLabel={ __( 'Navigation sidebar' ) }
+								enable={ {
+									right: isResizingEnabled,
+								} }
+								onResizeStop={ ( event, direction, elt ) => {
+									setForcedWidth( elt.clientWidth );
+									setIsResizing( false );
+								} }
+								onResizeStart={ () => {
+									setIsResizing( true );
+								} }
+								onResize={ ( event, direction, elt ) => {
+									// This is a performance optimization
+									// We set the width imperatively to avoid re-rendering
+									// the whole component while resizing.
+									hubRef.current.style.width =
+										elt.clientWidth - 48 + 'px';
+								} }
+								handleComponent={ {
+									right: (
+										<ResizeHandle
+											direction="right"
+											variation="separator"
+										/>
+									),
+								} }
+								handleClasses={ undefined }
+								handleStyles={ {
+									right: emptyResizeHandleStyles,
+								} }
+								minWidth={ isResizingEnabled ? 320 : undefined }
+								maxWidth={
+									isResizingEnabled && fullSize
+										? fullSize.width - 360
+										: undefined
+								}
 							>
-								<Sidebar />
-							</NavigableRegion>
+								<NavigableRegion
+									ariaLabel={ __( 'Navigation sidebar' ) }
+								>
+									<Sidebar />
+								</NavigableRegion>
+							</ResizableBox>
 						) }
 					</AnimatePresence>
 
 					{ showCanvas && (
 						<div
-							className="edit-site-layout__canvas-container"
+							className={ classnames(
+								'edit-site-layout__canvas-container',
+								{
+									'is-resizing': isResizing,
+								}
+							) }
 							style={ {
 								paddingTop: showFrame ? canvasPadding : 0,
 								paddingBottom: showFrame ? canvasPadding : 0,
@@ -191,9 +280,10 @@ export default function Layout( { onError } ) {
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
+										duration:
+											disableMotion || isResizing
+												? 0
+												: ANIMATION_DURATION,
 										ease: 'easeOut',
 									} }
 								>
@@ -206,16 +296,14 @@ export default function Layout( { onError } ) {
 										} }
 										initial={ false }
 										animate={ {
-											width: showFrame
-												? canvasSize.width -
-												  canvasPadding
-												: fullSize.width,
+											width: canvasWidth,
 										} }
 										transition={ {
 											type: 'tween',
-											duration: disableMotion
-												? 0
-												: ANIMATION_DURATION,
+											duration:
+												disableMotion || isResizing
+													? 0
+													: ANIMATION_DURATION,
 											ease: 'easeOut',
 										} }
 									>
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 24bb0b77688e71..f5db7df0c0732e 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -63,6 +63,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 .edit-site-layout__content {
 	flex-grow: 1;
 	display: flex;
+	gap: $canvas-padding;
 
 	// Hide scrollbars during the edit/view animation.
 	overflow: hidden;
@@ -70,9 +71,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
-	overflow-y: auto;
 	width: 100vw;
-	@include custom-scrollbars-on-hover;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -80,17 +79,39 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
-		position: fixed;
+		position: fixed !important;
 		height: 100vh;
 		left: 0;
 		top: 0;
 	}
+
+	.resizable-editor__drag-handle.is-right {
+		right: math.div(-$grid-unit-15, 2);
+	}
+
+	> div {
+		overflow-y: auto;
+		min-height: 100%;
+		@include custom-scrollbars-on-hover;
+	}
 }
 
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	&.is-resizing::after {
+		// This covers the whole content which ensures mouse up triggers
+		// even if the content is "inert".
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
+	}
 }
 
 .edit-site-layout__canvas {
@@ -99,12 +120,13 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 
 	& > div {
 		color: $gray-900;
 		background: $white;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
+
 	@include break-medium {
 		top: $canvas-padding;
 		bottom: $canvas-padding;
@@ -125,7 +147,10 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
 		top: 0;
 		bottom: 0;
 		width: 100%;
-		border-radius: 0;
+
+		& > div {
+			border-radius: 0;
+		}
 	}
 }
 
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
index 1f0c5fefbdc444..34c697a809f3f4 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -180,6 +180,8 @@ export default function NavigationInspector() {
 			) }
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
+					__nextHasNoMarginBottom
+					className="edit-site-navigation-inspector__select-menu"
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
index 8c48661bd700f0..4fb9a1c7596048 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
@@ -22,6 +22,10 @@
 	.block-editor-list-view-block__menu-cell {
 		padding-right: 0;
 	}
+
+	.edit-site-navigation-inspector__select-menu {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 6f6112985d598b..213f0a973eb0f4 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -17,6 +17,7 @@ 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';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,122 +30,132 @@ 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();
+const SiteHub = forwardRef(
+	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
+		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"
+		return (
+			<motion.div
+				ref={ ref }
+				{ ...props }
+				className={ classnames(
+					'edit-site-site-hub',
+					props.className
+				) }
+				layout
+				transition={ {
+					type: 'tween',
+					duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
+					ease: 'easeOut',
+				} }
 			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+				<HStack
+					justify="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
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+						className="edit-site-site-hub__edit-button"
+						label={ __( 'Open the editor' ) }
+						onClick={ () => {
+							__unstableSetCanvasMode( 'edit' );
+						} }
+						variant="primary"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						{ __( 'Edit' ) }
 					</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>
-	);
-}
+				{ isMobileViewport && ! isMobileCanvasVisible && (
+					<Button
+						onClick={ () => setIsMobileCanvasVisible( true ) }
+						variant="primary"
+					>
+						{ __( 'View Editor' ) }
+					</Button>
+				) }
+			</motion.div>
+		);
+	}
+);
 
 export default SiteHub;
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
new file mode 100644
index 00000000000000..cd147168e383da
--- /dev/null
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { useLocation, useHistory } from '../routes';
+
+export default function useSyncCanvasModeWithURL() {
+	const history = useHistory();
+	const { params } = useLocation();
+	const canvasMode = useSelect(
+		( select ) => select( editSiteStore ).__unstableGetCanvasMode(),
+		[]
+	);
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const currentCanvasMode = useRef( canvasMode );
+	const { canvas: canvasInUrl = 'view' } = params;
+	const currentCanvasInUrl = useRef( canvasInUrl );
+	useEffect( () => {
+		currentCanvasMode.current = canvasMode;
+		if ( currentCanvasMode !== currentCanvasInUrl ) {
+			history.push( {
+				...params,
+				canvas: canvasMode,
+			} );
+		}
+	}, [ canvasMode ] );
+
+	useEffect( () => {
+		currentCanvasInUrl.current = canvasInUrl;
+		if ( canvasInUrl !== currentCanvasMode.current ) {
+			__unstableSetCanvasMode( canvasInUrl );
+		}
+	}, [ canvasInUrl ] );
+}
diff --git a/packages/edit-site/src/components/template-details/edit-template-title.js b/packages/edit-site/src/components/template-details/edit-template-title.js
index 5d7e63c7054887..ac2266a0a03d76 100644
--- a/packages/edit-site/src/components/template-details/edit-template-title.js
+++ b/packages/edit-site/src/components/template-details/edit-template-title.js
@@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
 			help={
diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
index 1eff28d2d4c976..4823fea501ce14 100644
--- a/packages/edit-site/src/components/template-details/template-part-area-selector.js
+++ b/packages/edit-site/src/components/template-details/template-part-area-selector.js
@@ -28,6 +28,7 @@ export default function TemplatePartAreaSelector( { id } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }
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
index 70b9fa1b02f8ea..6d29de4fdc9eed 100644
--- 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
@@ -97,7 +97,7 @@ function PushChangesToGlobalStylesControl( {
 		createSuccessNotice(
 			sprintf(
 				// translators: %s: Title of the block e.g. 'Heading'.
-				__( 'Pushed styles to all %s blocks.' ),
+				__( '%s styles applied.' ),
 				getBlockType( name ).title
 			),
 			{
@@ -124,7 +124,7 @@ function PushChangesToGlobalStylesControl( {
 			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.'
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
 				),
 				getBlockType( name ).title
 			) }
@@ -137,7 +137,7 @@ function PushChangesToGlobalStylesControl( {
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
-				{ __( 'Push changes to Global Styles' ) }
+				{ __( 'Apply globally' ) }
 			</Button>
 		</BaseControl>
 	);
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 6a7e68fccb3c90..fee3a8fcc5618b 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -131,7 +131,7 @@ export function saveViewPanel( state = false, action ) {
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  */
-function canvasMode( state = 'view', action ) {
+function canvasMode( state = 'init', action ) {
 	switch ( action.type ) {
 		case 'SET_CANVAS_MODE':
 			return action.mode;
diff --git a/packages/editor/src/components/post-author/select.js b/packages/editor/src/components/post-author/select.js
index 4439f75e4e8009..a367f4fb8a4ede 100644
--- a/packages/editor/src/components/post-author/select.js
+++ b/packages/editor/src/components/post-author/select.js
@@ -40,6 +40,7 @@ function PostAuthorSelect() {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="post-author-selector"
 			label={ __( 'Author' ) }
 			options={ authorOptions }
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index 518ec2c0d26bca..2b422ccebbaa84 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -76,6 +76,7 @@ export default function PostFormat() {
 		<PostFormatCheck>
 			<div className="editor-post-format">
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post Format' ) }
 					value={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
diff --git a/packages/editor/src/components/post-template/index.js b/packages/editor/src/components/post-template/index.js
index c52fab6316ba2d..3e73135321b183 100644
--- a/packages/editor/src/components/post-template/index.js
+++ b/packages/editor/src/components/post-template/index.js
@@ -44,6 +44,7 @@ export function PostTemplate() {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Template:' ) }
 			value={ selectedTemplate }
 			onChange={ ( templateSlug ) => {
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
index 70ab1ac333c44a..a914602db45e8f 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -135,7 +135,6 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				Object.entries( settings ).filter( ( [ key ] ) =>
 					[
 						'__experimentalBlockDirectory',
-						'__experimentalBlockInspectorTabs',
 						'__experimentalDiscussionSettings',
 						'__experimentalFeatures',
 						'__experimentalPreferredStyleVariations',
@@ -143,6 +142,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 						'__unstableGalleryWithImageBlocks',
 						'alignWide',
 						'allowedBlockTypes',
+						'blockInspectorTabs',
 						'bodyPlaceholder',
 						'canLockBlocks',
 						'codeEditingEnabled',
diff --git a/packages/editor/src/hooks/custom-sources-backwards-compatibility.js b/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
index 3d90a19a268070..bf73a3ade79353 100644
--- a/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
+++ b/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pickBy, mapValues, isEmpty } from 'lodash';
+import { mapValues, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -70,18 +70,17 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
 						attributes={ mergedAttributes }
 						setAttributes={ ( nextAttributes ) => {
 							const nextMeta = Object.fromEntries(
-								Object.entries(
-									// Filter to intersection of keys between the updated
-									// attributes and those with an associated meta key.
-									pickBy(
-										nextAttributes,
-										( value, key ) => metaAttributes[ key ]
+								Object.entries( nextAttributes ?? {} )
+									.filter(
+										// Filter to intersection of keys between the updated
+										// attributes and those with an associated meta key.
+										( [ key ] ) => key in metaAttributes
 									)
-								).map( ( [ attributeKey, value ] ) => [
-									// Rename the keys to the expected meta key name.
-									metaAttributes[ attributeKey ],
-									value,
-								] )
+									.map( ( [ attributeKey, value ] ) => [
+										// Rename the keys to the expected meta key name.
+										metaAttributes[ attributeKey ],
+										value,
+									] )
 							);
 
 							if ( ! isEmpty( nextMeta ) ) {
@@ -108,7 +107,11 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
 function shimAttributeSource( settings ) {
 	/** @type {WPMetaAttributeMapping} */
 	const metaAttributes = mapValues(
-		pickBy( settings.attributes, { source: 'meta' } ),
+		Object.fromEntries(
+			Object.entries( settings.attributes ?? {} ).filter(
+				( [ , { source } ] ) => source === 'meta'
+			)
+		),
 		'meta'
 	);
 	if ( ! isEmpty( metaAttributes ) ) {
diff --git a/packages/element/README.md b/packages/element/README.md
index 60a64113bca7ef..0c1a99f2c302b7 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -38,9 +38,10 @@ Let's render a customized greeting into an empty element:
 		);
 	}
 
-	wp.element.render(
-		wp.element.createElement( Greeting, { toWhom: 'World' } ),
-		document.getElementById( 'greeting' )
+	wp.element.createRoot(document.getElementById( 'greeting' ))
+		.render(
+			wp.element.createElement( Greeting, { toWhom: 'World' } )
+		)
 	);
 </script>
 ```
diff --git a/packages/env/README.md b/packages/env/README.md
index 13aa1cefaad5f1..30924172dbff60 100644
--- a/packages/env/README.md
+++ b/packages/env/README.md
@@ -18,7 +18,7 @@ The local environment will be available at http://localhost:8888 (Username: `adm
 
 `wp-env` requires Docker to be installed. There are instructions available for installing Docker on [Windows](https://docs.docker.com/desktop/install/windows-install/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/desktop/install/linux-install/).
 
-Node.js and NPM are required. The latest LTS version of Node.js is used to develop `wp-env` and is recommended.
+Node.js and npm are required. The latest LTS version of Node.js is used to develop `wp-env` and is recommended.
 
 ## Installation
 
@@ -221,7 +221,7 @@ npm run wp-env start -- --xdebug
 npx wp-env start --xdebug
 ```
 
-If you forget about that, the `--xdebug` parameter will be passed to NPM instead of the `wp-env start` command and it will be ignored.
+If you forget about that, the `--xdebug` parameter will be passed to npm instead of the `wp-env start` command and it will be ignored.
 
 You can see a reference on each of the Xdebug modes and what they do in the [Xdebug documentation](https://xdebug.org/docs/all_settings#mode).
 
diff --git a/packages/interface/src/components/preferences-modal-tabs/style.scss b/packages/interface/src/components/preferences-modal-tabs/style.scss
index d09c8b3572bd23..ec094040805642 100644
--- a/packages/interface/src/components/preferences-modal-tabs/style.scss
+++ b/packages/interface/src/components/preferences-modal-tabs/style.scss
@@ -7,19 +7,27 @@ $vertical-tabs-width: 160px;
 		// Aligns button text instead of button box.
 		left: $grid-unit-20;
 		width: $vertical-tabs-width;
+
 		.components-tab-panel__tabs-item {
 			border-radius: $radius-block-ui;
 			font-weight: 400;
+
 			&.is-active {
 				background: $gray-100;
 				box-shadow: none;
 				font-weight: 500;
 			}
+
+			&.is-active::after {
+				content: none;
+			}
+
 			&:focus:not(:disabled) {
 				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			}
 		}
 	}
+
 	.components-tab-panel__tab-content {
 		padding-left: $grid-unit-30;
 		margin-left: $vertical-tabs-width;
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index 7c3a0f31eed780..e5f2b9552e3cd6 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.1",
+	"version": "1.87.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index b497edb86f0409..940774f756b6be 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.1",
+	"version": "1.87.0",
 	"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 c260e479728aa5..2289dc3b32085f 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+
+## 1.87.0
 -   [*] Add capabilities to force only Core blocks and control Support section [#46215]
 
 ## 1.86.1
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
deleted file mode 100644
index 44cc767ec5bfc3..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import {
-	headerBlockEmpty,
-	imageBlockEmpty,
-	listBlockEmpty,
-	moreBlockEmpty,
-	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'
-		);
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'inserts between 2 existing blocks', async () => {
-		const firstBlock = await editorPage.getFirstBlockVisible();
-		await firstBlock.click();
-
-		await editorPage.addNewBlock( blockNames.separator );
-
-		const separatorBlock = await editorPage.getBlockAtPosition(
-			blockNames.separator,
-			2
-		);
-		expect( separatorBlock ).toBeTruthy();
-
-		const expectedHtml = [
-			headerBlockEmpty,
-			separatorBlockEmpty,
-			listBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'inserts block before selected block', async () => {
-		const separatorBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.separator,
-			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,
-			separatorBlockEmpty,
-			listBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	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,
-			separatorBlockEmpty,
-			listBlockEmpty,
-			moreBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	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,
-			separatorBlockEmpty,
-			listBlockEmpty,
-			moreBlockEmpty,
-			paragraphBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-} );
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index a9dd6d174a27e8..bc24e5fe60b760 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.1):
+  - Gutenberg (1.87.0):
     - 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.1):
+  - RNTAztecView (1.87.0):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.8)
   - SDWebImage (5.11.1):
@@ -545,7 +545,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 2ff441cbe6e58c1778d8a5cf3311831a6a8c0809
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
-  Gutenberg: d5a7f8a1047c0076a75a3e0a6400d22c324eef83
+  Gutenberg: 1adccadbf2ed65b692a2deaed4ffdd0f7544576d
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
   RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
   RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4
@@ -588,7 +588,7 @@ SPEC CHECKSUMS:
   RNReanimated: 8b189a09da0345d84b33b8cde57a57f8ed847352
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 24db190c1b8b792a8b56f51835483547a8790d78
+  RNTAztecView: d32bfa5253803115b7d36e95bb31a5ce25321ee1
   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 263486c9a0eb04..256426c1559bf6 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.1",
+	"version": "1.87.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/report-flaky-tests/src/__tests__/markdown.test.ts b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
index e8a5b4f25da5d3..87b52b6acf9c73 100644
--- a/packages/report-flaky-tests/src/__tests__/markdown.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/markdown.test.ts
@@ -246,15 +246,17 @@ describe( 'renderCommitComment', () => {
 				issueUrl: 'url2',
 			},
 		];
+		const commitSHA = 'commitSHA';
 
 		const commentBody = renderCommitComment( {
 			reportedIssues,
 			runURL,
+			commitSHA,
 		} );
 
 		expect( commentBody ).toMatchInlineSnapshot( `
 		"<!-- flaky-tests-report-comment -->
-		**Flaky tests detected.**
+		**Flaky tests detected in commitSHA.**
 		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
@@ -270,6 +272,7 @@ describe( 'isReportComment', () => {
 		const commentBody = renderCommitComment( {
 			reportedIssues: [],
 			runURL: '',
+			commitSHA: 'commitSHA',
 		} );
 
 		expect( isReportComment( commentBody ) ).toBe( true );
diff --git a/packages/report-flaky-tests/src/__tests__/run.test.ts b/packages/report-flaky-tests/src/__tests__/run.test.ts
index b064fae579f3e3..c73c3fa2bc1132 100644
--- a/packages/report-flaky-tests/src/__tests__/run.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/run.test.ts
@@ -31,6 +31,7 @@ const mockPullRequestEventContext = {
 	sha: 'mergeSHA',
 	eventName: 'pull_request',
 	payload: {
+		number: 10,
 		pull_request: {
 			head: {
 				ref: 'headBranch',
@@ -60,7 +61,8 @@ const mockAPI = {
 	findMergeBaseCommit: jest.fn(),
 	updateIssue: jest.fn(),
 	createIssue: jest.fn(),
-	createComment: jest.fn(),
+	createCommentOnPR: jest.fn(),
+	createCommentOnCommit: jest.fn(),
 };
 jest.mock( '../github-api', () => ( {
 	GitHubAPI: jest.fn( () => mockAPI ),
@@ -130,7 +132,7 @@ describe( 'Report flaky tests', () => {
 			html_url: 'html_url',
 		} ) );
 
-		mockAPI.createComment.mockImplementationOnce( () => ( {
+		mockAPI.createCommentOnPR.mockImplementationOnce( () => ( {
 			html_url: 'comment_html_url',
 		} ) );
 
@@ -159,12 +161,12 @@ describe( 'Report flaky tests', () => {
 			'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 ] )
+		expect( mockAPI.createCommentOnPR ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createCommentOnPR.mock.calls[ 0 ][ 0 ] ).toBe( 10 );
+		expect( mockAPI.createCommentOnPR.mock.calls[ 0 ][ 1 ] )
 			.toMatchInlineSnapshot( `
 		"<!-- flaky-tests-report-comment -->
-		**Flaky tests detected.**
+		**Flaky tests detected in headSHA.**
 		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
@@ -230,7 +232,7 @@ describe( 'Report flaky tests', () => {
 			html_url: 'html_url',
 		} ) );
 
-		mockAPI.createComment.mockImplementationOnce( () => ( {
+		mockAPI.createCommentOnCommit.mockImplementationOnce( () => ( {
 			html_url: 'comment_html_url',
 		} ) );
 
@@ -259,14 +261,14 @@ describe( 'Report flaky tests', () => {
 			'Created new flaky issue'
 		);
 
-		expect( mockAPI.createComment ).toHaveBeenCalledTimes( 1 );
-		expect( mockAPI.createComment.mock.calls[ 0 ][ 0 ] ).toBe(
+		expect( mockAPI.createCommentOnCommit ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createCommentOnCommit.mock.calls[ 0 ][ 0 ] ).toBe(
 			'commitSHA'
 		);
-		expect( mockAPI.createComment.mock.calls[ 0 ][ 1 ] )
+		expect( mockAPI.createCommentOnCommit.mock.calls[ 0 ][ 1 ] )
 			.toMatchInlineSnapshot( `
 		"<!-- flaky-tests-report-comment -->
-		**Flaky tests detected.**
+		**Flaky tests detected in commitSHA.**
 		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
@@ -331,6 +333,7 @@ describe( 'Report flaky tests', () => {
 
 		expect( mockAPI.updateIssue ).not.toHaveBeenCalled();
 
-		expect( mockAPI.createComment ).not.toHaveBeenCalled();
+		expect( mockAPI.createCommentOnPR ).not.toHaveBeenCalled();
+		expect( mockAPI.createCommentOnCommit ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/report-flaky-tests/src/github-api.ts b/packages/report-flaky-tests/src/github-api.ts
index 8d5d49025f576c..c4e52d229c612b 100644
--- a/packages/report-flaky-tests/src/github-api.ts
+++ b/packages/report-flaky-tests/src/github-api.ts
@@ -5,11 +5,6 @@ import { getOctokit } from '@actions/github';
 import type { GitHub } from '@actions/github/lib/utils';
 import type { Endpoints } from '@octokit/types';
 
-/**
- * Internal dependencies
- */
-import { isReportComment } from './markdown';
-
 type Octokit = InstanceType< typeof GitHub >;
 
 type Repo = {
@@ -78,7 +73,11 @@ class GitHubAPI {
 		return data;
 	}
 
-	async createComment( sha: string, body: string ) {
+	async createCommentOnCommit(
+		sha: string,
+		body: string,
+		isReportComment: ( body: string ) => boolean
+	) {
 		const { data: comments } =
 			await this.#octokit.rest.repos.listCommentsForCommit( {
 				...this.#repo,
@@ -108,6 +107,50 @@ class GitHubAPI {
 
 		return data;
 	}
+
+	async createCommentOnPR(
+		prNumber: number,
+		body: string,
+		isReportComment: ( body: string ) => boolean
+	) {
+		let reportComment;
+		let page = 1;
+
+		while ( ! reportComment ) {
+			const { data: comments } =
+				await this.#octokit.rest.issues.listComments( {
+					...this.#repo,
+					issue_number: prNumber,
+					page,
+				} );
+			reportComment = comments.find(
+				( comment ) => comment.body && isReportComment( comment.body )
+			);
+			if ( comments.length > 0 ) {
+				page += 1;
+			} else {
+				break;
+			}
+		}
+
+		if ( reportComment ) {
+			const { data } = await this.#octokit.rest.issues.updateComment( {
+				...this.#repo,
+				comment_id: reportComment.id,
+				body,
+			} );
+
+			return data;
+		}
+
+		const { data } = await this.#octokit.rest.issues.createComment( {
+			...this.#repo,
+			issue_number: prNumber,
+			body,
+		} );
+
+		return data;
+	}
 }
 
 export { GitHubAPI };
diff --git a/packages/report-flaky-tests/src/markdown.ts b/packages/report-flaky-tests/src/markdown.ts
index 15d850773ffe65..0f55c12a247130 100644
--- a/packages/report-flaky-tests/src/markdown.ts
+++ b/packages/report-flaky-tests/src/markdown.ts
@@ -208,12 +208,14 @@ const FLAKY_TESTS_REPORT_COMMENT_TOKEN = `flaky-tests-report-comment`;
 function renderCommitComment( {
 	reportedIssues,
 	runURL,
+	commitSHA,
 }: {
 	reportedIssues: ReportedIssue[];
 	runURL: string;
+	commitSHA: string;
 } ) {
 	return `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->
-**Flaky tests detected.**
+**Flaky tests detected in ${ commitSHA }.**
 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 }
diff --git a/packages/report-flaky-tests/src/run.ts b/packages/report-flaky-tests/src/run.ts
index 65323c3d87fa80..9bfcbf16ce9ae7 100644
--- a/packages/report-flaky-tests/src/run.ts
+++ b/packages/report-flaky-tests/src/run.ts
@@ -17,6 +17,7 @@ import {
 	formatTestResults,
 	parseIssueBody,
 	renderCommitComment,
+	isReportComment,
 } from './markdown';
 import type { ReportedIssue } from './types';
 
@@ -163,19 +164,30 @@ async function run() {
 		return;
 	}
 
-	const commitSHA =
+	const { html_url: commentUrl } =
 		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,
-		} )
-	);
+			? await api.createCommentOnPR(
+					// Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+					( github.context.payload as PullRequestEvent ).number,
+					renderCommitComment( {
+						runURL,
+						reportedIssues,
+						commitSHA: (
+							github.context.payload as PullRequestEvent
+						 ).pull_request.head.sha,
+					} ),
+					isReportComment
+			  )
+			: await api.createCommentOnCommit(
+					github.context.sha,
+					renderCommitComment( {
+						runURL,
+						reportedIssues,
+						commitSHA: github.context.sha,
+					} ),
+					isReportComment
+			  );
+
 	core.info( `Reported the summary of the flaky tests to ${ commentUrl }` );
 }
 
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index a763bbd0dd4045..cb0b993376668f 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -13,7 +13,7 @@ import {
 	BlockIcon,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Spinner, Placeholder } from '@wordpress/components';
+import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
 import { brush as brushIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
@@ -57,30 +57,34 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
 			icon={ <BlockIcon icon={ brushIcon } /> }
 			label={ __( 'Legacy Widget' ) }
 		>
-			<WidgetTypeSelector
-				selectedId={ id ?? idBase }
-				onSelect={ ( { selectedId, isMulti } ) => {
-					if ( ! selectedId ) {
-						setAttributes( {
-							id: null,
-							idBase: null,
-							instance: null,
-						} );
-					} else if ( isMulti ) {
-						setAttributes( {
-							id: null,
-							idBase: selectedId,
-							instance: {},
-						} );
-					} else {
-						setAttributes( {
-							id: selectedId,
-							idBase: null,
-							instance: null,
-						} );
-					}
-				} }
-			/>
+			<Flex>
+				<FlexBlock>
+					<WidgetTypeSelector
+						selectedId={ id ?? idBase }
+						onSelect={ ( { selectedId, isMulti } ) => {
+							if ( ! selectedId ) {
+								setAttributes( {
+									id: null,
+									idBase: null,
+									instance: null,
+								} );
+							} else if ( isMulti ) {
+								setAttributes( {
+									id: null,
+									idBase: selectedId,
+									instance: {},
+								} );
+							} else {
+								setAttributes( {
+									id: selectedId,
+									idBase: null,
+									instance: null,
+								} );
+							}
+						} }
+					/>
+				</FlexBlock>
+			</Flex>
 		</Placeholder>
 	);
 }
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
index 4afe1ee1359eae..215e2d2447c3c9 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
@@ -27,6 +27,7 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			label={ __( 'Select a legacy widget to display:' ) }
 			value={ selectedId ?? '' }
 			options={ [
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index 93e7ab374f70d1..78bcf533ac5e9d 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -163,12 +163,3 @@
 	min-width: 400px;
 }
 
-.wp-block-legacy-widget {
-	.components-base-control {
-		width: 100%;
-	}
-	.components-select-control__input {
-		padding: 0;
-		font-family: system-ui;
-	}
-}
diff --git a/phpunit/class-block-library-navigation-link-test.php b/phpunit/class-block-library-navigation-link-test.php
index ba9922effcf64c..0ff603bca3ef6c 100644
--- a/phpunit/class-block-library-navigation-link-test.php
+++ b/phpunit/class-block-library-navigation-link-test.php
@@ -87,7 +87,7 @@ public static function wpSetUpBeforeClass() {
 
 	public static function wpTearDownAfterClass() {
 		foreach ( self::$pages as $page_to_delete ) {
-			wp_delete_post( $page_to_delete );
+			wp_delete_post( $page_to_delete->ID );
 		}
 		foreach ( self::$terms as $term_to_delete ) {
 			wp_delete_term( $term_to_delete->term_id, $term_to_delete->taxonomy );
@@ -212,6 +212,39 @@ public function test_returns_link_for_plain_link() {
 		);
 	}
 
+	public function test_returns_link_for_decoded_link() {
+
+		$urls_before_render = array(
+			'https://example.com/?id=10&data=lzB%252Fzd%252FZA%253D%253D',
+			'https://example.com/?id=10&data=lzB%2Fzd%FZA%3D%3D',
+			'https://example.com/?id=10&data=1234',
+		);
+
+		$urls_after_render = array(
+			'https://example.com/?id=10&#038;data=lzB%2Fzd%2FZA%3D%3D',
+			'https://example.com/?id=10&#038;data=lzB%2Fzd%FZA%3D%3D',
+			'https://example.com/?id=10&#038;data=1234',
+		);
+
+		foreach ( $urls_before_render as $idx => $link ) {
+				$parsed_blocks = parse_blocks( '<!-- wp:navigation-link {"label":"test label", "url": "' . $link . '"} /-->' );
+			$this->assertEquals( 1, count( $parsed_blocks ) );
+				$block             = $parsed_blocks[0];
+			$navigation_link_block = new WP_Block( $block, array() );
+				$this->assertEquals(
+					true,
+					strpos(
+						gutenberg_render_block_core_navigation_link(
+							$navigation_link_block->attributes,
+							array(),
+							$navigation_link_block
+						),
+						$urls_after_render[ $idx ]
+					) !== false
+				);
+		};
+	}
+
 	public function test_returns_empty_when_custom_post_type_draft() {
 		$page_id = self::$custom_draft->ID;
 
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index ca27606ea2e442..0d21f46ee9c291 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -894,6 +894,11 @@ public function test_remove_invalid_element_pseudo_selectors() {
 									'background' => 'blue',
 								),
 							),
+							':seen'  => array(
+								'color' => array(
+									'background' => 'ivory',
+								),
+							),
 						),
 					),
 				),
diff --git a/phpunit/fixtures/mock-provider.php b/phpunit/fixtures/mock-provider.php
index 91475837e0e916..0a22adbbd16242 100644
--- a/phpunit/fixtures/mock-provider.php
+++ b/phpunit/fixtures/mock-provider.php
@@ -11,7 +11,6 @@ class Mock_Provider extends WP_Webfonts_Provider {
 	public function get_css() {
 		$handles = array_keys( $this->webfonts );
 		return implode( '; ', $handles );
-		return sprintf( $this->css, implode( '; ', $handles ) );
 	}
 
 	/**
diff --git a/phpunit/html/wp-html-tag-processor-test.php b/phpunit/html/wp-html-tag-processor-test.php
index e6b3d4d8071af5..6750410f26d43c 100644
--- a/phpunit/html/wp-html-tag-processor-test.php
+++ b/phpunit/html/wp-html-tag-processor-test.php
@@ -74,6 +74,19 @@ public function test_get_attribute_returns_null_when_not_in_open_tag() {
 		$this->assertNull( $p->get_attribute( 'class' ), 'Accessing an attribute of a non-existing tag did not return null' );
 	}
 
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers next_tag
+	 * @covers get_attribute
+	 */
+	public function test_get_attribute_returns_null_when_in_closing_tag() {
+		$p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
+		$this->assertTrue( $p->next_tag( 'div' ), 'Querying an existing tag did not return true' );
+		$this->assertTrue( $p->next_tag( array( 'tag_closers' => 'visit' ) ), 'Querying an existing closing tag did not return true' );
+		$this->assertNull( $p->get_attribute( 'class' ), 'Accessing an attribute of a closing tag did not return null' );
+	}
+
 	/**
 	 * @ticket 56299
 	 *
@@ -195,6 +208,87 @@ public function test_set_attribute_is_case_insensitive() {
 		$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
+	 *
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_null_before_finding_tags() {
+		$p = new WP_HTML_Tag_Processor( '<div data-foo="bar">Test</div>' );
+		$this->assertNull( $p->get_attribute_names_with_prefix( 'data-' ) );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_null_when_not_in_open_tag() {
+		$p = new WP_HTML_Tag_Processor( '<div data-foo="bar">Test</div>' );
+		$p->next_tag( 'p' );
+		$this->assertNull( $p->get_attribute_names_with_prefix( 'data-' ), 'Accessing attributes of a non-existing tag did not return null' );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_null_when_in_closing_tag() {
+		$p = new WP_HTML_Tag_Processor( '<div data-foo="bar">Test</div>' );
+		$p->next_tag( 'div' );
+		$p->next_tag( array( 'tag_closers' => 'visit' ) );
+		$this->assertNull( $p->get_attribute_names_with_prefix( 'data-' ), 'Accessing attributes of a closing tag did not return null' );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_empty_array_when_no_attributes_present() {
+		$p = new WP_HTML_Tag_Processor( '<div>Test</div>' );
+		$p->next_tag( 'div' );
+		$this->assertSame( array(), $p->get_attribute_names_with_prefix( 'data-' ), 'Accessing the attributes on a tag without any did not return an empty array' );
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_matching_attribute_names_in_lowercase() {
+		$p = new WP_HTML_Tag_Processor( '<div DATA-enabled class="test" data-test-ID="14">Test</div>' );
+		$p->next_tag();
+		$this->assertSame(
+			array( 'data-enabled', 'data-test-id' ),
+			$p->get_attribute_names_with_prefix( 'data-' )
+		);
+	}
+
+	/**
+	 * @ticket 56299
+	 *
+	 * @covers set_attribute
+	 * @covers get_updated_html
+	 * @covers get_attribute_names_with_prefix
+	 */
+	public function test_get_attribute_names_with_prefix_returns_attribute_added_by_set_attribute() {
+		$p = new WP_HTML_Tag_Processor( '<div data-foo="bar">Test</div>' );
+		$p->next_tag();
+		$p->set_attribute( 'data-test-id', '14' );
+		$this->assertSame(
+			'<div data-test-id="14" data-foo="bar">Test</div>',
+			$p->get_updated_html(),
+			"Updated HTML doesn't include attribute added via set_attribute"
+		);
+		$this->assertSame(
+			array( 'data-test-id', 'data-foo' ),
+			$p->get_attribute_names_with_prefix( 'data-' ),
+			"Accessing attribute names doesn't find attribute added via set_attribute"
+		);
+	}
+
 	/**
 	 * @ticket 56299
 	 *
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index f4934ef20394b0..d0296c0dd6a9d1 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1948,11 +1948,22 @@
 						"css": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"variations": {
+							"$ref": "#/definitions/stylesVariationPropertiesComplete"
 						}
 					},
 					"additionalProperties": false
 				}
 			]
+		},
+		"stylesVariationPropertiesComplete": {
+			"type": "object",
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				}
+			}
 		}
 	},
 	"type": "object",
diff --git a/test/e2e/README.md b/test/e2e/README.md
index c39501e866172c..5c9cb74315c99d 100644
--- a/test/e2e/README.md
+++ b/test/e2e/README.md
@@ -2,114 +2,9 @@
 
 End-To-End (E2E) tests for WordPress.
 
-This directory is the new place for E2E tests in Gutenberg. We expect new tests to be placed here and follow the [best practices](#best-practices) listed below. We use [Playwright](https://playwright.dev/) and its test runner to run the tests in Chromium by default. [`@wordpress/e2e-test-utils-playwright`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/e2e-test-utils-playwright) is used as a helper package to simplify the usages. See the documentation of both for more information.
+This directory is the new place for E2E tests in Gutenberg. We expect new tests to be placed here. We use [Playwright](https://playwright.dev/) and its test runner to run the tests in Chromium by default. [`@wordpress/e2e-test-utils-playwright`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/e2e-test-utils-playwright) is used as a helper package to simplify the usage. See the documentation of both for more information.
 
-See the [migration guide](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/MIGRATION.md) if you're coming from the previous Jest + Puppeteer framework.
+> **Note**
+> See the [migration guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/MIGRATION.md) if you're coming from the previous Jest + Puppeteer framework.
 
-## Best practices
-
-### Forbid `$`, use `locator` instead
-
-In fact, any API that returns `ElementHandle` is [discouraged](https://playwright.dev/docs/api/class-page#page-query-selector). This includes `$`, `$$`, `$eval`, `$$eval`, etc. [`Locator`](https://playwright.dev/docs/api/class-locator) is a much better API and can be used with playwright's [assertions](https://playwright.dev/docs/api/class-locatorassertions). This also works great with Page Object Model since that locator is lazy and doesn't return a promise.
-
-### Use accessible selectors
-
-Use the selector engine [role-selector](https://playwright.dev/docs/selectors#role-selector) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations. The syntax should be straightforward and looks like this:
-
-```js
-// Select a button with the accessible name "Hello World" (case-insensitive).
-page.locator( 'role=button[name="Hello World"i]' );
-
-// Using short-form API, the `name` is case-insensitive by default.
-page.getByRole( 'button', { name: 'Hello World' } );
-```
-
-It's recommended to append `i` to the name attribute to match it case-insensitively wherever it makes sense. It can also be chained with built-in selector engines to perform complex queries:
-
-```js
-// Select a button with a name ends with `Back` and is visible on the screen.
-page.locator( 'role=button[name=/Back$/] >> visible=true' );
-// Select a button with the (exact) name "View options" under `#some-section`.
-page.locator( 'css=#some-section >> role=button[name="View options"]' );
-```
-
-See the [official documentation](https://playwright.dev/docs/selectors#role-selector) for more info on how to use them.
-
-### Selectors are strict by default
-
-To encourage better practices for querying elements, selectors are [strict](https://playwright.dev/docs/api/class-browser#browser-new-page-option-strict-selectors) by default, meaning that it will throw an error if the query returns more than one element.
-
-### Don't overload test-utils, inline simple utils
-
-`e2e-test-utils` are too bloated with too many utils. Most of them are simple enough to be inlined directly in tests. With the help of accessible selectors, simple utils are easier to write now. For utils that only take place on a certain page, use Page Object Model instead (with an exception of clearing states with `requestUtils` which are better placed in `e2e-test-utils`). Otherwise, only create an util if the action is complex and repetitive enough.
-
-### Favor Page Object Model over utils
-
-As mentioned above, [Page Object Model](https://playwright.dev/docs/test-pom) is the preferred way to create reusable utility functions on a certain page.
-
-The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`.
-
-### Restify actions to clear or set states.
-
-It's slow to set states manually before or after tests, especially when they're repeated multiple times between tests. It's recommended to set them via API calls. Use `requestUtils.rest` and `requestUtils.batchRest` instead to call the [REST API](https://developer.wordpress.org/rest-api/reference/) (and add them to `requestUtils` if needed). We should still add a test for manually setting them, but that should only be tested once.
-
-### Avoid global variables
-
-Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed as global variables. This makes it harder to work with when we have multiple pages/tabs in the same test, or if we want to run multiple tests in parallel. `@playwright/test` has the concept of [fixtures](https://playwright.dev/docs/test-fixtures) which allows us to inject `page`, `browser`, and other parameters into the tests.
-
-### Make explicit assertions
-
-We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read.
-
-## Cross-browser testing
-
-By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
-
-```js
-test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
-	// ...
-} );
-
-test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
-	// ...
-} );
-
-test.describe( 'Grouping tests (@webkit, -chromium)', () => {
-	test( 'I will only run in webkit', async ( { page } ) => {
-		// ...
-	} );
-} );
-```
-
-## Commands
-
-```bash
-# Run all available tests.
-npm run test:e2e:playwright
-
-# Run in headed mode.
-npm run test:e2e:playwright -- --headed
-
-# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
-npm run test:e2e:playwright -- --project=webkit --project=firefox
-
-# Run a single test file.
-npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
-
-# Debugging.
-npm run test:e2e:playwright -- --debug
-```
-
-If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
-
-```bash
-# Run all available tests.
-xvfb-run npm run test:e2e:playwright
-
-# Only run webkit tests.
-xvfb-run -- npm run test:e2e:playwright -- --project=webkit
-```
-
-**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
-
-<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+**The [guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md) has been moved to the documentation folder.**
diff --git a/packages/e2e-tests/assets/greeting-reusable-block.json b/test/e2e/assets/greeting-reusable-block.json
similarity index 100%
rename from packages/e2e-tests/assets/greeting-reusable-block.json
rename to test/e2e/assets/greeting-reusable-block.json
diff --git a/test/e2e/specs/editor/blocks/avatar.spec.js b/test/e2e/specs/editor/blocks/avatar.spec.js
index 70c7f7bd681936..53a5c40c4ffff8 100644
--- a/test/e2e/specs/editor/blocks/avatar.spec.js
+++ b/test/e2e/specs/editor/blocks/avatar.spec.js
@@ -52,6 +52,7 @@ test.describe( 'Avatar', () => {
 		);
 
 		await expect( blockInspectorControls ).toBeVisible();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		const userInput = page.locator(
 			'role=region[name="Editor settings"i] >> role=combobox[name="User"i]'
@@ -64,7 +65,8 @@ test.describe( 'Avatar', () => {
 
 		await newUser.click();
 
-		const newSrc = await avatarImage.getAttribute( 'src' );
+		const updatedAvatarImage = avatarBlock.locator( 'img' );
+		const newSrc = await updatedAvatarImage.getAttribute( 'src' );
 
 		expect( newSrc ).not.toBe( originalSrc );
 	} );
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index d88f042ebdf9ff..5ea485b783bb05 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -131,6 +131,7 @@ test.describe( 'Buttons', () => {
 		await editor.insertBlock( { name: 'core/buttons' } );
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.click(
 			'role=group[name="Button width"i] >> role=button[name="25%"i]'
 		);
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
new file mode 100644
index 00000000000000..3388a8f8180125
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -0,0 +1,62 @@
+/**
+ * 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(
+	'As a user I want the navigation block to fallback to the best possible default',
+	() => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'emptytheme' );
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost();
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyone' );
+		} );
+
+		test.afterEach( async ( { requestUtils } ) => {
+			await requestUtils.deleteAllPosts();
+		} );
+
+		test( 'default to a list of pages if there are no menus', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			const pageListBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Page List',
+			} );
+
+			await expect( pageListBlock ).toBeVisible( {
+				// Wait for the Nav and Page List block API requests to resolve.
+				// Note: avoid waiting on network requests as these are not perceivable
+				// to the user.
+				// See: https://github.com/WordPress/gutenberg/pull/45070#issuecomment-1373712007.
+				timeout: 10000,
+			} );
+
+			// Check the markup of the block is correct.
+			await editor.publishPost();
+			const content = await editor.getEditedPostContent();
+			expect( content ).toBe(
+				`<!-- wp:navigation -->
+<!-- wp:page-list /-->
+<!-- /wp:navigation -->`
+			);
+		} );
+	}
+);
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 689682e77b92d0..7d4623c7a328aa 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -77,6 +77,7 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		const headerSwitch = page.locator(
 			'role=checkbox[name="Header section"i]'
@@ -132,11 +133,13 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		// Create the table.
 		await page.click( 'role=button[name="Create Table"i]' );
 
 		// Toggle on the switches and add some content.
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.locator( 'role=checkbox[name="Header section"i]' ).check();
 		await page.locator( 'role=checkbox[name="Footer section"i]' ).check();
 		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
@@ -202,11 +205,12 @@ test.describe( 'Table', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		await editor.openDocumentSettingsSidebar();
+		await editor.switchBlockInspectorTab( 'Settings' );
 
 		// Create the table.
 		await page.click( 'role=button[name="Create Table"i]' );
 
-		// Enable fixed width as it exascerbates the amount of empty space around the RichText.
+		// Enable fixed width as it exacerbates the amount of empty space around the RichText.
 		await page
 			.locator( 'role=checkbox[name="Fixed width table cells"i]' )
 			.check();
diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js
index 47512d32c387f7..eea308f0d08628 100644
--- a/test/e2e/specs/editor/plugins/hooks-api.spec.js
+++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js
@@ -18,10 +18,12 @@ test.describe( 'Using Hooks API', () => {
 	} );
 
 	test( 'Should contain a reset block button on the sidebar', async ( {
+		editor,
 		page,
 	} ) => {
 		await page.click( 'role=button[name="Add default block"i]' );
 		await page.keyboard.type( 'First paragraph' );
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await expect(
 			page.locator( 'role=button[name="Reset Block"i]' )
 		).toBeVisible();
@@ -38,6 +40,7 @@ test.describe( 'Using Hooks API', () => {
 			'role=document[name="Paragraph block"i]'
 		);
 		await expect( paragraphBlock ).toHaveText( 'First paragraph' );
+		await editor.switchBlockInspectorTab( 'Settings' );
 		await page.click( 'role=button[name="Reset Block"i]' );
 		expect( await editor.getEditedPostContent() ).toEqual( '' );
 	} );
diff --git a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js
new file mode 100644
index 00000000000000..64d09dc39af721
--- /dev/null
+++ b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Managing reusable blocks', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitAdminPage( 'edit.php', 'post_type=wp_block' );
+	} );
+
+	test( 'Should import reusable blocks', async ( { page } ) => {
+		const originalEntries = await page.locator( '.hentry' ).count();
+
+		// Import Reusable block.
+		await page.click( 'role=button[name="Import from JSON"i]' );
+
+		// Select the file to upload.
+		const testReusableBlockFile = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'greeting-reusable-block.json'
+		);
+		await page.setInputFiles( 'input[type="file"]', testReusableBlockFile );
+
+		// Submit the form.
+		await page.click( 'role=button[name="Import"i]' );
+
+		// Wait for the success notice.
+		await expect(
+			page.locator( 'text=Reusable block imported successfully!' )
+		).toBeVisible();
+
+		// Refresh the page.
+		await page.reload();
+
+		await expect( page.locator( '.hentry' ) ).toHaveCount(
+			originalEntries + 1
+		);
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
new file mode 100644
index 00000000000000..57a563c37b4f7d
--- /dev/null
+++ b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post visibility', () => {
+	[ 'large', 'small' ].forEach( ( viewport ) => {
+		test( `can be changed when the viewport is ${ viewport }`, async ( {
+			page,
+			admin,
+			pageUtils,
+			editor,
+		} ) => {
+			await pageUtils.setBrowserViewport( viewport );
+
+			await admin.createNewPost();
+
+			await editor.openDocumentSettingsSidebar();
+
+			await page.click(
+				'role=button[name="Select visibility: Public"i]'
+			);
+
+			await page.click( 'role=radio[name="Private"i]' );
+
+			await page.click( 'role=button[name="OK"i]' );
+
+			const currentStatus = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			expect( currentStatus ).toBe( 'private' );
+		} );
+
+		test( `can be canceled when the viewport is ${ viewport }`, async ( {
+			page,
+			pageUtils,
+			admin,
+			editor,
+		} ) => {
+			await pageUtils.setBrowserViewport( viewport );
+
+			await admin.createNewPost();
+
+			await editor.openDocumentSettingsSidebar();
+
+			const initialStatus = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			await page.click(
+				'role=button[name="Select visibility: Public"i]'
+			);
+
+			await page.click( 'role=radio[name="Private"i]' );
+
+			await page.click( 'role=button[name="Cancel"i]' );
+
+			const currentStatus = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			expect( initialStatus ).toBe( currentStatus );
+		} );
+	} );
+
+	test( 'visibility remains private even if the publish date is in the future', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+
+		// Enter a title for this post.
+		await page.type( 'role=textbox[name="Add title"i]', 'Title' );
+
+		await editor.openDocumentSettingsSidebar();
+
+		// Set a publish date for the next month.
+		await page.click( 'role=button[name="Change date: Immediately"i]' );
+
+		await page.click( 'role=button[name="View next month"i]' );
+		await page.click( 'text=15' );
+
+		await page.click( 'role=button[name="Select visibility: Public"i]' );
+
+		await page.click( 'role=radio[name="Private"i]' );
+
+		await page.click( 'role=button[name="OK"i]' );
+
+		const currentStatus = await page.evaluate( () => {
+			return window.wp.data
+				.select( 'core/editor' )
+				.getEditedPostAttribute( 'status' );
+		} );
+
+		expect( currentStatus ).toBe( 'private' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
index e31a06f2c888d4..8745a75f3ad46b 100644
--- a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
+++ b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
@@ -34,8 +34,6 @@ test.describe( 'Block list view', () => {
 
 		await page.reload();
 
-		await siteEditor.enterEditMode();
-
 		// Should display the Preview button.
 		await expect(
 			page.locator( 'role=region[name="List View"i]' )
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index ce854f476e4f9d..a121e07a84daaa 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -52,44 +52,50 @@ test.describe( 'Push to Global Styles button', () => {
 			page.getByRole( 'button', { name: 'Uppercase' } )
 		).toHaveAttribute( 'aria-pressed', 'false' );
 
-		// Go to block settings and open the Advanced panel
+		// Go to block settings, select inner tab, and open the Advanced panel
 		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'tab', { 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',
+				name: 'Apply globally',
 			} )
 		).toBeDisabled();
 
+		// Switch back to the Styles inspector tab to check typography style
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+
 		// Make the Heading block uppercase
 		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
 
+		// Switch back to the Settings inspector tab to check for enabled button
+		await page.getByRole( 'tab', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
 		// Push button should now be enabled
 		await expect(
 			page.getByRole( 'button', {
-				name: 'Push changes to Global Styles',
+				name: 'Apply globally',
 			} )
 		).toBeEnabled();
 
 		// Press the Push button
-		await page
-			.getByRole( 'button', { name: 'Push changes to Global Styles' } )
-			.click();
+		await page.getByRole( 'button', { name: 'Apply globally' } ).click();
 
 		// Snackbar notification should appear
 		await expect(
 			page.getByRole( 'button', {
 				name: 'Dismiss this notice',
-				text: 'Pushed styles to all Heading blocks.',
+				text: 'Heading styles applied.',
 			} )
 		).toBeVisible();
 
 		// Push button should be disabled again
 		await expect(
 			page.getByRole( 'button', {
-				name: 'Push changes to Global Styles',
+				name: 'Apply globally',
 			} )
 		).toBeDisabled();
 
diff --git a/test/native/integration-test-helpers/add-block.js b/test/native/integration-test-helpers/add-block.js
index 5bc4c5a1ee15a5..ec52453bebe34b 100644
--- a/test/native/integration-test-helpers/add-block.js
+++ b/test/native/integration-test-helpers/add-block.js
@@ -11,13 +11,21 @@ import { waitFor } from './wait-for';
 /**
  * Adds a block via the block picker.
  *
- * @param {import('@testing-library/react-native').RenderAPI} screen    A Testing Library screen.
- * @param {string}                                            blockName Name of the block to be inserted as shown in the block picker.
+ * @param {import('@testing-library/react-native').RenderAPI} screen                   A Testing Library screen.
+ * @param {string}                                            blockName                Name of the block to be inserted as shown in the block picker.
+ * @param {Object}                                            options                  Configuration options for adding a block.
+ * @param {boolean}                                           [options.isPickerOpened] Option to skip opening the inserter picker.
  */
-export const addBlock = async ( screen, blockName ) => {
+export const addBlock = async (
+	screen,
+	blockName,
+	{ isPickerOpened } = {}
+) => {
 	const { getByLabelText, getByTestId, getByText } = screen;
 
-	fireEvent.press( getByLabelText( 'Add block' ) );
+	if ( ! isPickerOpened ) {
+		fireEvent.press( getByLabelText( 'Add block' ) );
+	}
 
 	const blockList = getByTestId( 'InserterUI-Blocks' );
 	// onScroll event used to force the FlatList to render all items