From b88fa5f0825112434fef52ff108c1190be018162 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Wed, 29 Mar 2023 17:18:14 +0000
Subject: [PATCH] Merge changes published in the Gutenberg plugin
 "release/15.5" branch

---
 .github/ISSUE_TEMPLATE/New_release.md         |  52 ++
 .github/setup-node/action.yml                 |  46 ++
 .github/workflows/build-plugin-zip.yml        |  14 +-
 .github/workflows/bundle-size.yml             |   4 +-
 .github/workflows/create-block.yml            |  15 +-
 .github/workflows/end2end-test.yml            |  45 +-
 .../workflows/gradle-wrapper-validation.yml   |   2 +-
 .github/workflows/performance.yml             |  40 +-
 .github/workflows/publish-npm-packages.yml    |   6 +-
 .github/workflows/pull-request-automation.yml |   4 +-
 .github/workflows/rnmobile-android-runner.yml |  15 +-
 .github/workflows/rnmobile-ios-runner.yml     |  11 +-
 .github/workflows/static-checks.yml           |   4 +-
 .github/workflows/storybook-pages.yml         |  12 +-
 .github/workflows/unit-test.yml               |  45 +-
 .../upload-release-to-plugin-repo.yml         |   2 +-
 bin/log-performance-results.js                |  11 +-
 bin/plugin/commands/performance.js            | 131 ++--
 bin/plugin/lib/utils.js                       |   1 +
 bin/plugin/utils/.wp-env.performance.json     |  13 -
 changelog.txt                                 | 323 +++++++-
 docs/README.md                                |  26 +-
 docs/explanations/architecture/README.md      |  20 +-
 .../full-site-editing-templates.md            |   2 +-
 .../explanations/architecture/key-concepts.md |  26 +-
 docs/explanations/architecture/styles.md      |  63 +-
 .../data-basics/2-building-a-list-of-pages.md |   2 +-
 .../javascript/versions-and-building.md       |   3 +-
 docs/how-to-guides/themes/theme-json.md       |   2 +-
 docs/manifest.json                            |   2 +-
 .../block-api/block-metadata.md               |  36 +
 .../block-api/block-selectors.md              | 116 +++
 docs/reference-guides/core-blocks.md          |  10 +-
 .../theme-json-reference/theme-json-living.md |   1 +
 gutenberg.php                                 |   2 +-
 lib/block-supports/duotone.php                | 129 +---
 lib/block-supports/elements.php               |  19 +-
 lib/block-supports/layout.php                 |  33 +-
 lib/class-wp-duotone-gutenberg.php            | 389 ++++++++++
 lib/class-wp-theme-json-gutenberg.php         | 324 ++++----
 lib/compat/wordpress-6.1/blocks.php           |   2 +
 .../wordpress-6.1/template-parts-screen.php   |   2 +-
 lib/compat/wordpress-6.2/block-patterns.php   |   2 +-
 lib/compat/wordpress-6.3/blocks.php           |  28 +
 .../get-global-styles-and-settings.php        | 155 ++++
 lib/compat/wordpress-6.3/rest-api.php         |   2 +-
 lib/compat/wordpress-6.3/script-loader.php    |  15 +
 lib/experimental/editor-settings.php          |   3 +
 .../class-wp-fonts-provider-local.php         |   7 +-
 lib/experimental/kses.php                     |  19 +
 lib/experiments-page.php                      |  12 +
 lib/load.php                                  |   6 +
 lib/theme.json                                |  25 +
 package-lock.json                             |  40 +-
 package.json                                  |   8 +-
 packages/api-fetch/README.md                  |  20 +-
 packages/babel-plugin-makepot/index.js        |   2 +-
 packages/babel-preset-default/CHANGELOG.md    |   4 +
 packages/babel-preset-default/bin/index.js    |  15 +-
 packages/base-styles/_z-index.scss            |   5 +
 packages/block-editor/CHANGELOG.md            |   2 +
 packages/block-editor/README.md               |   4 +
 .../components/block-draggable/content.scss   |   2 +-
 .../src/components/block-list/block-html.js   |   2 +-
 .../src/components/block-preview/auto.js      |  19 +-
 .../components/colors-gradients/style.scss    |  16 +-
 .../src/components/editor-styles/index.js     |  30 +-
 .../components/global-styles/color-panel.js   | 706 ++++++++++++++++++
 .../global-styles/dimensions-panel.js         |  55 +-
 .../global-styles/get-block-css-selector.js   | 129 ++++
 .../src/components/global-styles/hooks.js     |  80 ++
 .../src/components/global-styles/index.js     |   3 +-
 .../test/use-global-styles-output.js          |  31 +-
 .../global-styles/typography-panel.js         |  77 +-
 .../global-styles/use-global-styles-output.js | 243 ++++--
 .../src/components/global-styles/utils.js     |   3 +
 .../components/image-size-control/index.js    |   7 +-
 .../image-size-control/test/index.js          |   4 +-
 .../src/components/inner-blocks/README.md     |   2 +-
 .../position-controls-panel.js                |  49 +-
 .../components/line-height-control/index.js   |  11 +-
 .../src/components/list-view/appender.js      | 101 +++
 .../src/components/list-view/block.js         |   9 +-
 .../src/components/list-view/branch.js        |  31 +-
 .../src/components/list-view/index.js         |  53 +-
 .../src/components/list-view/style.scss       |  19 +
 .../components/media-replace-flow/index.js    |  60 +-
 .../components/media-replace-flow/style.scss  |   7 +-
 .../src/components/rich-text/format-edit.js   |  34 +-
 .../src/components/writing-flow/use-input.js  |   9 +-
 packages/block-editor/src/hooks/border.js     |   1 -
 packages/block-editor/src/hooks/color.js      | 416 +++--------
 .../block-editor/src/hooks/content-lock-ui.js |   8 +-
 .../{color-panel.js => contrast-checker.js}   |  56 +-
 packages/block-editor/src/hooks/dimensions.js |   1 -
 packages/block-editor/src/hooks/duotone.js    |  13 +-
 packages/block-editor/src/hooks/position.js   |   6 +-
 packages/block-editor/src/hooks/style.js      |  57 +-
 packages/block-editor/src/hooks/test/utils.js | 104 ---
 packages/block-editor/src/hooks/typography.js |   1 -
 packages/block-editor/src/hooks/utils.js      |  97 +--
 packages/block-editor/src/layouts/grid.js     | 172 +++++
 packages/block-editor/src/layouts/index.js    |   3 +-
 .../block-editor/src/layouts/test/grid.js     |  21 +
 packages/block-editor/src/private-apis.js     |   2 +
 packages/block-editor/src/utils/object.js     |  69 ++
 .../block-editor/src/utils/test/object.js     | 107 +++
 packages/block-library/src/buttons/block.json |   1 +
 .../block-library/src/categories/editor.scss  |   5 +
 .../block-library/src/categories/style.scss   |   4 +
 packages/block-library/src/columns/block.json |   4 +
 packages/block-library/src/columns/edit.js    |   3 +-
 packages/block-library/src/comments/index.php |   1 +
 .../src/cover/edit/inspector-controls.js      |   9 +-
 .../__snapshots__/transforms.native.js.snap   |   4 +-
 .../src/cover/test/block-controls.js          |  62 --
 packages/block-library/src/cover/test/edit.js | 324 ++++++++
 packages/block-library/src/gallery/edit.js    |   7 +-
 .../src/gallery/use-image-sizes.js            |   2 +-
 .../block-library/src/group/deprecated.js     |   6 +-
 packages/block-library/src/group/edit.js      |  36 +-
 .../block-library/src/group/placeholder.js    |  14 +-
 .../block-library/src/group/variations.js     |  15 +-
 .../block-library/src/home-link/index.php     |   4 +-
 packages/block-library/src/image/block.json   |   9 +-
 packages/block-library/src/image/edit.js      |   2 +-
 .../block-library/src/image/edit.native.js    |   2 +-
 packages/block-library/src/image/image.js     |  22 +-
 packages/block-library/src/image/index.php    |   9 +-
 .../__snapshots__/transforms.native.js.snap   |   2 +-
 .../src/latest-comments/style.scss            |   2 +-
 .../block-library/src/latest-posts/edit.js    |   3 +
 .../block-library/src/media-text/block.json   |   2 +-
 .../src/media-text/deprecated.js              | 238 +++++-
 packages/block-library/src/media-text/edit.js |  13 +-
 .../__snapshots__/transforms.native.js.snap   |   8 +-
 .../src/navigation-link/index.php             |   3 +-
 .../src/navigation-submenu/index.php          | 106 +--
 .../block-library/src/navigation/block.json   |   1 -
 .../src/navigation/edit/index.js              |  13 -
 .../src/navigation/edit/inner-blocks.js       |   3 -
 .../block-library/src/navigation/style.scss   |  10 +-
 .../block-library/src/post-author/index.php   |   2 +-
 packages/block-library/src/post-date/edit.js  |   5 +-
 packages/block-library/src/post-date/index.js |   2 +
 .../block-library/src/post-date/variations.js |  20 +
 .../block-library/src/post-excerpt/edit.js    |  64 +-
 .../post-featured-image/dimension-controls.js |   4 +-
 .../src/post-featured-image/editor.scss       |   1 +
 .../src/post-template/block.json              |   2 +-
 .../src/post-template/style.scss              |   2 +-
 .../src/post-time-to-read/block.json          |  18 +-
 .../src/post-time-to-read/style.scss          |   4 +
 .../block-library/src/query-title/index.php   |   7 +-
 packages/block-library/src/quote/block.json   |   1 +
 packages/block-library/src/search/style.scss  |  28 +-
 packages/block-library/src/spacer/edit.js     |  23 +-
 packages/block-library/src/style.scss         |   1 +
 .../__snapshots__/transforms.native.js.snap   |   2 +-
 packages/blocks/src/api/constants.js          |   4 +
 packages/blocks/src/api/registration.js       |  13 +
 packages/blocks/src/api/test/registration.js  |  57 ++
 .../blocks/src/store/private-selectors.js     |   2 +
 .../src/store/test/private-selectors.js       |   6 +
 packages/components/CHANGELOG.md              |  34 +-
 .../src/angle-picker-control/angle-circle.tsx |   1 -
 .../src/angle-picker-control/index.tsx        |  41 +-
 .../styles/angle-picker-control-styles.tsx    |  25 +-
 packages/components/src/animate/index.js      |  60 --
 packages/components/src/animate/index.tsx     |  75 ++
 .../components/src/animate/stories/index.js   |  53 --
 .../components/src/animate/stories/index.tsx  | 102 +++
 packages/components/src/animate/types.ts      |  32 +
 .../src/border-box-control/stories/index.tsx  |   2 +-
 .../src/box-control/axial-input-controls.tsx  |   2 +-
 .../src/circular-option-picker/style.scss     |  10 +
 .../components/src/color-indicator/style.scss |   1 +
 .../components/src/color-picker/README.md     |   4 +-
 .../src/color-picker/color-input.tsx          |  13 +-
 .../components/src/color-picker/component.tsx |  27 +-
 .../components/src/color-picker/hex-input.tsx |   9 +-
 .../components/src/color-picker/hsl-input.tsx |   9 +-
 .../src/color-picker/input-with-slider.tsx    |  10 +-
 .../src/color-picker/legacy-adapter.tsx       |   3 +-
 .../components/src/color-picker/picker.tsx    |  11 +-
 .../components/src/color-picker/rgb-input.tsx |   9 +-
 .../src/color-picker/stories/index.js         |  41 -
 .../src/color-picker/stories/index.tsx        |  51 ++
 .../color-picker/test/{index.js => index.tsx} |  54 +-
 packages/components/src/color-picker/types.ts | 129 +++-
 .../src/color-picker/use-deprecated-props.ts  |  55 +-
 .../src/combobox-control/stories/index.tsx    |   2 +-
 .../{constants.js => constants.ts}            |   4 +-
 .../{constants.js => constants.ts}            |   0
 .../{control-points.js => control-points.tsx} | 305 ++++----
 .../gradient-bar/{index.js => index.tsx}      |  42 +-
 .../gradient-bar/test/{utils.js => utils.ts}  |  89 ++-
 .../gradient-bar/utils.js                     | 189 -----
 .../gradient-bar/utils.ts                     | 193 +++++
 .../{index.js => index.tsx}                   |  85 ++-
 .../src/custom-gradient-picker/serializer.js  |  48 --
 .../src/custom-gradient-picker/serializer.ts  |  82 ++
 .../custom-gradient-picker/stories/index.js   |  33 -
 .../custom-gradient-picker/stories/index.tsx  |  45 ++
 .../src/custom-gradient-picker/style.scss     |  29 +-
 ...s.js => custom-gradient-picker-styles.tsx} |   0
 .../test/{serializer.js => serializer.ts}     |  72 +-
 .../src/custom-gradient-picker/types.ts       | 137 ++++
 .../{utils.js => utils.ts}                    |  59 +-
 .../src/custom-select-control/test/index.js   |  10 +-
 .../color-list-picker/index.tsx               |  13 +-
 .../color-list-picker/style.scss              |   0
 .../color-list-picker/types.ts                |   4 +-
 ...-duotone-bar.js => custom-duotone-bar.tsx} |   8 +-
 .../{duotone-picker.js => duotone-picker.tsx} |  41 +-
 .../{duotone-swatch.js => duotone-swatch.tsx} |   3 +-
 .../src/duotone-picker/{index.js => index.ts} |   0
 .../{duotone-picker.js => duotone-picker.tsx} |  23 +-
 .../{duotone-swatch.js => duotone-swatch.tsx} |  12 +-
 .../components/src/duotone-picker/types.ts    |  61 ++
 .../src/duotone-picker/{utils.js => utils.ts} |  43 +-
 .../components/src/flex/flex-item/README.md   |   2 +-
 .../components/src/form-token-field/README.md |   1 +
 .../components/src/form-token-field/index.tsx |  13 +-
 .../src/form-token-field/style.scss           |   7 -
 .../src/form-token-field/test/index.tsx       |   1 +
 .../components/src/form-token-field/types.ts  |   6 +
 .../components/src/gradient-picker/README.md  |  39 +-
 .../gradient-picker/{index.js => index.tsx}   |  86 ++-
 .../stories/{index.js => index.tsx}           |  27 +-
 .../components/src/gradient-picker/types.ts   |  89 +++
 .../components/src/item-group/test/index.js   |   8 +-
 .../components/src/palette-edit/index.tsx     |   9 +-
 .../src/resizable-box/resize-tooltip/utils.ts |   2 +-
 .../components/src/sandbox/index.native.js    | 149 ++--
 .../components/src/slot-fill/test/slot.js     |  14 +-
 packages/components/src/style.scss            |   2 +-
 packages/components/src/tab-panel/index.tsx   |   9 +-
 .../components/src/tools-panel/test/index.tsx |  86 +++
 .../src/tools-panel/tools-panel/hook.ts       |  48 +-
 packages/components/src/tools-panel/types.ts  |   1 +
 packages/components/src/tooltip/test/index.js | 552 +++++++-------
 .../src/utils/input/input-control.js          |   1 +
 packages/components/tsconfig.json             |   3 +-
 .../src/hooks/use-media-query/index.js        |  65 +-
 .../src/hooks/use-media-query/test/index.js   | 110 +--
 packages/data/CHANGELOG.md                    |   4 +
 .../data/src/components/use-select/index.js   | 144 ++--
 .../src/components/use-select/test/index.js   | 410 ++++++----
 packages/data/src/registry.js                 |  28 +-
 packages/data/src/test/registry.js            |  53 +-
 .../src/request-utils/pages.ts                |   4 +-
 .../e2e-test-utils-playwright/src/test.ts     |   5 +-
 .../e2e-tests/config/performance-reporter.js  |   6 +-
 .../specs/editor/blocks/cover.test.js         |  45 --
 .../performance/front-end-block-theme.test.js |  15 +-
 .../front-end-classic-theme.test.js           |  15 +-
 .../specs/performance/post-editor.test.js     |  50 +-
 .../specs/performance/site-editor.test.js     |  22 +-
 packages/e2e-tests/specs/performance/utils.js |  18 +-
 packages/edit-navigation/src/private-apis.js  |  10 -
 .../components/secondary-sidebar/style.scss   |   6 +
 .../src/components/visual-editor/index.js     |   2 +-
 packages/edit-post/src/store/actions.js       |   2 +-
 packages/edit-post/src/style.scss             |  10 +
 .../add-new-template/new-template-part.js     |   7 +-
 .../add-new-template/new-template.js          |   9 +-
 .../src/components/add-new-template/utils.js  |   2 +-
 .../components/block-editor/editor-canvas.js  |  36 +-
 .../global-styles-renderer/index.js           |   3 +-
 .../components/global-styles/color-utils.js   |  14 -
 .../components/global-styles/context-menu.js  |   4 +-
 .../src/components/global-styles/hooks.js     |  79 +-
 .../src/components/global-styles/preview.js   |   2 +-
 .../global-styles/screen-background-color.js  | 132 ----
 .../global-styles/screen-block-list.js        |   4 +-
 .../global-styles/screen-button-color.js      | 104 ---
 .../components/global-styles/screen-colors.js | 254 +------
 .../global-styles/screen-heading-color.js     | 206 -----
 .../global-styles/screen-link-color.js        | 124 ---
 .../global-styles/screen-text-color.js        |  62 --
 .../screen-typography-element.js              |   4 +
 .../global-styles/screen-typography.js        |   6 +
 .../components/global-styles/stories/index.js | 425 +++++++++++
 .../src/components/global-styles/style.scss   |  22 +-
 .../src/components/global-styles/ui.js        |  37 +-
 .../secondary-sidebar/list-view-sidebar.js    |   7 +-
 .../start-template-options/index.js           |  48 +-
 .../src/components/style-book/index.js        |  26 +-
 .../src/components/style-book/style.scss      |   2 +-
 .../push-changes-to-global-styles/index.js    |   1 +
 .../src/components/post-locked-modal/index.js | 116 ++-
 .../components/post-locked-modal/style.scss   |   6 +-
 .../post-publish-panel/postpublish.js         |   5 +
 .../post-type-support-check/index.js          |   2 +-
 .../components/theme-support-check/index.js   |   2 +-
 packages/editor/src/utils/terms.js            |  24 +-
 packages/element/README.md                    |  72 +-
 .../element/src/create-interpolate-element.js |   6 +-
 packages/element/src/react-platform.js        |  17 +-
 packages/env/README.md                        |   3 +-
 packages/env/lib/config/config.js             |   2 +-
 packages/env/lib/config/test/config.js        |   6 +-
 packages/icons/src/index.js                   |   1 +
 packages/icons/src/library/unseen.js          |  12 +
 packages/plugins/README.md                    |   6 +
 packages/plugins/package.json                 |   1 +
 .../src/components/plugin-area/index.js       | 125 ++--
 .../src/components/test/plugin-area.js        | 117 +++
 packages/private-apis/tsconfig.json           |   3 -
 .../react-native-aztec/android/build.gradle   |   2 +-
 .../ios/RNTAztecView/RCTAztecView.swift       |   2 +-
 packages/react-native-aztec/package.json      |   2 +-
 .../android/react-native-bridge/build.gradle  |   2 +-
 .../ReactNativeGutenbergBridge/RNMedia.kt     |   1 +
 .../wordpress/mobile/WPAndroidGlue/Media.kt   |   8 +-
 .../ios/GutenbergBridgeDelegate.swift         |   8 +-
 ...utenbergWebSingleBlockViewController.swift |   2 +-
 .../ios/RNReactNativeGutenbergBridge.swift    |   3 +-
 packages/react-native-bridge/package.json     |   2 +-
 packages/react-native-editor/CHANGELOG.md     |   3 +
 .../__device-tests__/README.md                |  16 +-
 .../__device-tests__/helpers/utils.js         |  21 +
 .../__device-tests__/pages/editor-page.js     |  37 +-
 .../android/app/build.gradle                  |   4 +-
 .../java/com/gutenberg/MainApplication.java   |  20 +-
 .../GutenbergViewController.swift             |   3 +-
 packages/react-native-editor/ios/Podfile.lock |   8 +-
 packages/react-native-editor/package.json     |   2 +-
 packages/rich-text/src/get-active-format.js   |   2 +-
 packages/rich-text/src/get-active-formats.js  |  57 +-
 .../src/test/__snapshots__/to-dom.js.snap     |   4 +-
 .../rich-text/src/test/get-active-format.js   |  15 +-
 packages/rich-text/src/test/toggle-format.js  |   9 +-
 packages/scripts/CHANGELOG.md                 |   4 +
 .../jest-environment-puppeteer/index.js       |  12 +-
 packages/scripts/package.json                 |   2 +-
 packages/scripts/scripts/test-e2e.js          |   9 +
 packages/style-engine/src/index.ts            |  17 +-
 phpunit/block-supports/duotone-test.php       |  40 -
 .../render-block-navigation-submenu-test.php  | 213 ++++++
 phpunit/bootstrap.php                         |  41 +-
 phpunit/class-wp-duotone-test.php             |  92 +++
 .../class-wp-get-block-css-selectors-test.php | 331 ++++++++
 phpunit/class-wp-theme-json-test.php          |  64 +-
 .../wpFonts/registerProvider-test.php         |   2 +-
 .../wpFonts/removeVariation-test.php          |   2 +-
 readme.txt                                    |   6 +
 schemas/json/block.json                       |  98 +++
 schemas/json/theme.json                       |  22 +-
 storybook/decorators/with-rtl.js              |  22 +-
 storybook/main.js                             |   1 +
 .../package-styles/block-editor-ltr.lazy.scss |   1 +
 .../package-styles/block-editor-rtl.lazy.scss |   1 +
 .../block-library-ltr.lazy.scss               |   3 +
 .../block-library-rtl.lazy.scss               |   3 +
 .../package-styles/components-ltr.lazy.scss   |   1 +
 .../package-styles/components-rtl.lazy.scss   |   1 +
 storybook/package-styles/config.js            |  56 ++
 .../package-styles/edit-site-ltr.lazy.scss    |   1 +
 .../package-styles/edit-site-rtl.lazy.scss    |   1 +
 .../format-library-ltr.lazy.scss              |   1 +
 .../format-library-rtl.lazy.scss              |   1 +
 storybook/style-ltr.lazy.scss                 |   7 -
 storybook/style-rtl.lazy.scss                 |   7 -
 .../specs/editor/blocks/navigation.spec.js    | 464 +++++++-----
 test/e2e/specs/editor/blocks/quote.spec.js    |  18 +
 .../specs/editor/plugins/image-size.spec.js   |   2 +-
 .../editor/various/splitting-merging.spec.js  |  91 ++-
 .../editor/various/switch-to-draft.spec.js    | 111 ++-
 .../site-editor-url-navigation.spec.js        |  78 ++
 .../site-editor/style-variations.spec.js      |   8 +-
 .../specs/site-editor/template-part.spec.js   |  48 ++
 test/e2e/specs/site-editor/title.spec.js      |   9 +-
 .../fixtures/blocks/core__media-text.html     |   2 +-
 .../fixtures/blocks/core__media-text.json     |   2 +-
 .../blocks/core__media-text.parsed.json       |   4 +-
 .../blocks/core__media-text.serialized.html   |   2 +-
 ..._media-text__deprecated-v5.serialized.html |   2 +-
 ...ext__deprecated-v6-wide-default-align.html |  12 +
 ...ext__deprecated-v6-wide-default-align.json |  28 +
 ...precated-v6-wide-default-align.parsed.json |  28 +
 ...ated-v6-wide-default-align.serialized.html |   5 +
 ...a-text__image-alt-no-align.serialized.html |   2 +-
 ...t__image-fill-no-focal-point-selected.json |   2 +-
 ...ll-no-focal-point-selected.serialized.html |   2 +-
 ..._image-fill-with-focal-point-selected.json |   2 +-
 ...-with-focal-point-selected.serialized.html |   2 +-
 ...ore__media-text__is-stacked-on-mobile.json |   4 +-
 ...text__is-stacked-on-mobile.serialized.html |   2 +-
 ...re__media-text__vertical-align-bottom.json |   2 +-
 ...ext__vertical-align-bottom.serialized.html |   2 +-
 .../blocks/core__media-text__video.json       |   4 +-
 .../core__media-text__video.serialized.html   |   2 +-
 .../helpers/integration-test-editor.js        | 125 ++++
 .../helpers/wait-for-store-resolvers.js       |  40 +
 test/integration/helpers/with-fake-timers.js  |  30 +
 397 files changed, 10522 insertions(+), 5250 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/New_release.md
 create mode 100644 .github/setup-node/action.yml
 delete mode 100644 bin/plugin/utils/.wp-env.performance.json
 create mode 100644 docs/reference-guides/block-api/block-selectors.md
 create mode 100644 lib/class-wp-duotone-gutenberg.php
 create mode 100644 lib/compat/wordpress-6.3/blocks.php
 create mode 100644 lib/compat/wordpress-6.3/get-global-styles-and-settings.php
 create mode 100644 lib/compat/wordpress-6.3/script-loader.php
 create mode 100644 packages/block-editor/src/components/global-styles/color-panel.js
 create mode 100644 packages/block-editor/src/components/global-styles/get-block-css-selector.js
 create mode 100644 packages/block-editor/src/components/list-view/appender.js
 rename packages/block-editor/src/hooks/{color-panel.js => contrast-checker.js} (52%)
 create mode 100644 packages/block-editor/src/layouts/grid.js
 create mode 100644 packages/block-editor/src/layouts/test/grid.js
 create mode 100644 packages/block-editor/src/utils/object.js
 create mode 100644 packages/block-editor/src/utils/test/object.js
 delete mode 100644 packages/block-library/src/cover/test/block-controls.js
 create mode 100644 packages/block-library/src/cover/test/edit.js
 create mode 100644 packages/block-library/src/post-date/variations.js
 create mode 100644 packages/block-library/src/post-time-to-read/style.scss
 delete mode 100644 packages/components/src/animate/index.js
 create mode 100644 packages/components/src/animate/index.tsx
 delete mode 100644 packages/components/src/animate/stories/index.js
 create mode 100644 packages/components/src/animate/stories/index.tsx
 create mode 100644 packages/components/src/animate/types.ts
 delete mode 100644 packages/components/src/color-picker/stories/index.js
 create mode 100644 packages/components/src/color-picker/stories/index.tsx
 rename packages/components/src/color-picker/test/{index.js => index.tsx} (76%)
 rename packages/components/src/custom-gradient-picker/{constants.js => constants.ts} (96%)
 rename packages/components/src/custom-gradient-picker/gradient-bar/{constants.js => constants.ts} (100%)
 rename packages/components/src/custom-gradient-picker/gradient-bar/{control-points.js => control-points.tsx} (56%)
 rename packages/components/src/custom-gradient-picker/gradient-bar/{index.js => index.tsx} (82%)
 rename packages/components/src/custom-gradient-picker/gradient-bar/test/{utils.js => utils.ts} (50%)
 delete mode 100644 packages/components/src/custom-gradient-picker/gradient-bar/utils.js
 create mode 100644 packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
 rename packages/components/src/custom-gradient-picker/{index.js => index.tsx} (69%)
 delete mode 100644 packages/components/src/custom-gradient-picker/serializer.js
 create mode 100644 packages/components/src/custom-gradient-picker/serializer.ts
 delete mode 100644 packages/components/src/custom-gradient-picker/stories/index.js
 create mode 100644 packages/components/src/custom-gradient-picker/stories/index.tsx
 rename packages/components/src/custom-gradient-picker/styles/{custom-gradient-picker-styles.js => custom-gradient-picker-styles.tsx} (100%)
 rename packages/components/src/custom-gradient-picker/test/{serializer.js => serializer.ts} (56%)
 create mode 100644 packages/components/src/custom-gradient-picker/types.ts
 rename packages/components/src/custom-gradient-picker/{utils.js => utils.ts} (60%)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/index.tsx (86%)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/style.scss (100%)
 rename packages/components/src/{ => duotone-picker}/color-list-picker/types.ts (91%)
 rename packages/components/src/duotone-picker/{custom-duotone-bar.js => custom-duotone-bar.tsx} (84%)
 rename packages/components/src/duotone-picker/{duotone-picker.js => duotone-picker.tsx} (70%)
 rename packages/components/src/duotone-picker/{duotone-swatch.js => duotone-swatch.tsx} (79%)
 rename packages/components/src/duotone-picker/{index.js => index.ts} (100%)
 rename packages/components/src/duotone-picker/stories/{duotone-picker.js => duotone-picker.tsx} (69%)
 rename packages/components/src/duotone-picker/stories/{duotone-swatch.js => duotone-swatch.tsx} (63%)
 create mode 100644 packages/components/src/duotone-picker/types.ts
 rename packages/components/src/duotone-picker/{utils.js => utils.ts} (63%)
 rename packages/components/src/gradient-picker/{index.js => index.tsx} (70%)
 rename packages/components/src/gradient-picker/stories/{index.js => index.tsx} (78%)
 create mode 100644 packages/components/src/gradient-picker/types.ts
 delete mode 100644 packages/edit-navigation/src/private-apis.js
 delete mode 100644 packages/edit-site/src/components/global-styles/color-utils.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-background-color.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-button-color.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-heading-color.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-link-color.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-text-color.js
 create mode 100644 packages/edit-site/src/components/global-styles/stories/index.js
 create mode 100644 packages/icons/src/library/unseen.js
 create mode 100644 packages/plugins/src/components/test/plugin-area.js
 delete mode 100644 phpunit/block-supports/duotone-test.php
 create mode 100644 phpunit/blocks/render-block-navigation-submenu-test.php
 create mode 100644 phpunit/class-wp-duotone-test.php
 create mode 100644 phpunit/class-wp-get-block-css-selectors-test.php
 create mode 100644 storybook/package-styles/block-editor-ltr.lazy.scss
 create mode 100644 storybook/package-styles/block-editor-rtl.lazy.scss
 create mode 100644 storybook/package-styles/block-library-ltr.lazy.scss
 create mode 100644 storybook/package-styles/block-library-rtl.lazy.scss
 create mode 100644 storybook/package-styles/components-ltr.lazy.scss
 create mode 100644 storybook/package-styles/components-rtl.lazy.scss
 create mode 100644 storybook/package-styles/config.js
 create mode 100644 storybook/package-styles/edit-site-ltr.lazy.scss
 create mode 100644 storybook/package-styles/edit-site-rtl.lazy.scss
 create mode 100644 storybook/package-styles/format-library-ltr.lazy.scss
 create mode 100644 storybook/package-styles/format-library-rtl.lazy.scss
 delete mode 100644 storybook/style-ltr.lazy.scss
 delete mode 100644 storybook/style-rtl.lazy.scss
 create mode 100644 test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
 create mode 100644 test/integration/helpers/integration-test-editor.js
 create mode 100644 test/integration/helpers/wait-for-store-resolvers.js
 create mode 100644 test/integration/helpers/with-fake-timers.js

diff --git a/.github/ISSUE_TEMPLATE/New_release.md b/.github/ISSUE_TEMPLATE/New_release.md
new file mode 100644
index 00000000000000..0b8fffeb26dfe7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/New_release.md
@@ -0,0 +1,52 @@
+---
+name: Gutenberg Release
+about: A checklist for the Gutenberg plugin release process
+---
+
+This issue is to provide visibility on the progress of the release process of Gutenberg VERSION_NUMBER and to centralize any conversations about it. The ultimate goal of this issue is to keep the reference of the steps, resources, work, and conversations about this release so it can be helpful for the next contributors releasing a new Gutenberg version.
+
+-   Gutenberg version to release: VERSION_NUMBER ([milestone](ADD_LINK))
+-   Release Manager (a.k.a. Release Lead):
+-   Release Date VERSION_NUMBER RC: ADD DATE
+-   Release Date VERSION_NUMBER: ADD DATE
+-   Previous version change log (as a reference): [15.3](https://github.com/WordPress/gutenberg/releases/tag/v15.3.0)
+
+## Resources
+
+-   📖 Read: [Gutenberg Release Process](https://developer.wordpress.org/block-editor/contributors/code/release/)
+-   📖 Read: [Leading a Gutenberg Plugin Release](https://codep2.wordpress.com/2021/07/22/leading-a-gutenberg-plugin-release/)
+-   📽 Watch: [Gutenberg Plugin: New Release Workflow](https://www.youtube.com/watch?v=TnSgJd3zpJY)
+-   📽 Watch: [Creating the Gutenberg plugin v12.0 Release Candidate](https://www.youtube.com/watch?v=FLkLHKecxWg)
+-   📽 Watch: [Gutenberg plugin v12.0.0 Release Party!](https://www.youtube.com/watch?v=4SDtpVPDsLc)
+
+## Checklist
+
+### RC Day - Wednesday, March 15
+
+-   [ ] _Optional:_ Attend `#core-editor` meeting (14:00UTC)
+-   [ ] Post a message in `#core-editor` channel to let folks know you are starting the RC release process
+-   [ ] Organize and Label PRs on the relevant milestone
+-   [ ] Start the release process by triggering the `rc` [worklow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
+-   [ ] [Update the created Draft Release accordingly](https://developer.wordpress.org/block-editor/contributors/code/release/#view-the-release-draft)
+-   [ ] Publish Release
+-   [ ] Announce in `#core-editor` channel that RC1 has been released and is ready for testing
+-   [ ] Ping any other relevant channels announcing that the RC is available
+-   [ ] Create Draft of Release post on Make Core blog _(initial draft in [Google doc](https://docs.google.com/document/d/1Hh25EYXSvRd5K45gq0VFN7yfN5l9om2FpX-_KqpVW7g/edit#))_
+
+### Between RC and Release
+
+-   [ ] [Backport to RC](https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+label%3A%22Backport+to+Gutenberg+RC%22+is%3Aclosed)
+-   [ ] [Draft Release Post Highlights and Change Log](https://docs.google.com/document/d/1Hh25EYXSvRd5K45gq0VFN7yfN5l9om2FpX-_KqpVW7g/edit#)
+-   [ ] Get assets from [Design Team](https://make.wordpress.org/design/) for the post
+-   [ ] Reach out to Highlight Authors to draft sections _(if necessary)_
+
+### Release Day - Wednesday, March 22
+
+-   [ ] Post a message in `#core-editor` channel to let folks know you are starting the release process
+-   [ ] Start the release process by triggering the `stable` [worklow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
+-   [ ] Update the created Draft Release accordingly. Typically by copy/pasting the last RC release notes and add any changes/updates as needed.
+-   [ ] Publish Release
+-   [ ] Trigger the update to the plugin directory - SVN _(get approval from member of Core team if necessary)_
+-   [ ] Announce in `#core-editor` channel that the plugin has been released
+-   [ ] Reach out to other contributors to help get the post reviewed
+-   [ ] Publish Release post on Make Core blog
diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml
new file mode 100644
index 00000000000000..22cb81618a1efb
--- /dev/null
+++ b/.github/setup-node/action.yml
@@ -0,0 +1,46 @@
+name: 'Setup Node.js and install npm dependencies'
+description: 'Configure Node.js and install npm dependencies while managing all aspects of caching.'
+inputs:
+    node-version:
+        description: 'Optional. The Node.js version to use. When not specified, the version specified in .nvmrc will be used.'
+        required: false
+        type: string
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Use desired version of Node.js
+          uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+          with:
+              node-version-file: '.nvmrc'
+              node-version: ${{ inputs.node-version }}
+              cache: npm
+
+        - name: Get Node.js and npm version
+          id: node-version
+          run: |
+              echo "NODE_VERSION=$(node -v)" >> $GITHUB_OUTPUT
+          shell: bash
+
+        - name: Cache node_modules
+          id: cache-node_modules
+          uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1
+          with:
+              path: '**/node_modules'
+              key: node_modules-${{ runner.os }}-${{ steps.node-version.outputs.NODE_VERSION }}-${{ hashFiles('package-lock.json') }}
+
+        - name: Install npm dependencies
+          if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
+          run: npm ci
+          shell: bash
+
+        # On cache hit, we run the post-install script to match the native `npm ci` behavior.
+        # An example of this is to patch `node_modules` using patch-package.
+        - name: Post-install
+          if: ${{ steps.cache-node_modules.outputs.cache-hit == 'true' }}
+          run: |
+              # Run the post-install script for the root project.
+              npm run postinstall
+              # Run the post-install scripts for workspaces.
+              npx lerna run postinstall
+          shell: bash
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 6e915d0ffddd27..9052f1689c9216 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -69,7 +69,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
 
@@ -164,11 +164,11 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
 
-            - name: Use desired version of NodeJS
+            - name: Use desired version of Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version-file: '.nvmrc'
@@ -219,7 +219,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   fetch-depth: 2
                   ref: ${{ needs.bump-version.outputs.release_branch }}
@@ -307,13 +307,13 @@ jobs:
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   path: main
                   ref: trunk
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -326,7 +326,7 @@ jobs:
                   git config user.name "Gutenberg Repository Automation"
                   git config user.email gutenberg@wordpress.org
 
-            - name: Setup Node (for CLI)
+            - name: Setup Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version-file: 'main/.nvmrc'
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 9ae0116ef1c79b..c4fdafb422c9b6 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -37,11 +37,11 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   fetch-depth: 1
 
-            - name: Use desired version of NodeJS
+            - name: Use desired version of Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version-file: '.nvmrc'
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 304052d4297b87..8f76c072133d0c 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -20,20 +20,17 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                node: [14]
+                node: ['14']
                 os: [macos-latest, ubuntu-latest, windows-latest]
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
               with:
                   node-version: ${{ matrix.node }}
-                  cache: npm
 
-            - name: npm install, build, format and lint
+            - name: Create block
               shell: bash
-              run: |
-                  npm ci
-                  bash ./bin/test-create-block.sh
+              run: bash ./bin/test-create-block.sh
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 24256e4266a46e..39748288c4d662 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -27,18 +27,13 @@ jobs:
                 totalParts: [4]
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Npm install and build
-              run: |
-                  npm ci
-                  npm run build
+            - name: Npm build
+              run: npm run build
 
             - name: Install WordPress
               run: |
@@ -76,18 +71,13 @@ jobs:
                 totalParts: [2]
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Npm install and build
-              run: |
-                  npm ci
-                  npm run build
+            - name: Npm build
+              run: npm run build
 
             - name: Install Playwright dependencies
               run: |
@@ -125,7 +115,7 @@ jobs:
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   ref: trunk
 
@@ -137,19 +127,14 @@ jobs:
                   name: flaky-tests-report
                   path: flaky-tests
 
-            - name: Use desired version of NodeJS
+            - name: Setup Node.js and install dependencies
               if: ${{ steps.download_artifact.outcome == 'success' }}
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+              uses: ./.github/setup-node
 
-            - name: Npm install and build
+            - name: Npm build
               if: ${{ steps.download_artifact.outcome == 'success' }}
               # TODO: We don't have to build the entire project, just the action itself.
-              run: |
-                  npm ci
-                  npm run build:packages
+              run: npm run build:packages
 
             - name: Report flaky tests
               if: ${{ steps.download_artifact.outcome == 'success' }}
diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index f56a5ecf48e757..e1da61b72e263b 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -6,5 +6,5 @@ jobs:
         name: 'Validation'
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
             - uses: gradle/wrapper-validation-action@v1
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index ed2dac34ddc939..9ced7ce0f4684e 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -28,38 +28,19 @@ jobs:
         name: Run performance tests
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' }}
+        env:
+            WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Npm install
-              run: |
-                  npm ci
-
-            - name: Install specific versions of the themes used in tests
-              run: |
-                  npm run wp-env start
-                  npm run wp-env -- run tests-cli "wp theme update twentytwentyone --version=1.7"
-                  npm run wp-env -- run tests-cli "wp theme update twentytwentythree --version=1.0"
-                  npm run wp-env stop
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - name: Compare performance with trunk
               if: github.event_name == 'pull_request'
               run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA
 
-            - name: Store performance measurements
-              if: github.event_name == 'pull_request'
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              with:
-                  name: perf-test-results
-                  path: ./__test-results/*.json
-
             - name: Compare performance with current WordPress Core and previous Gutenberg versions
               if: github.event_name == 'release'
               env:
@@ -94,6 +75,13 @@ jobs:
               run: |
                   ./bin/plugin/cli.js perf $(echo $BRANCHES | tr ',' ' ') --tests-branch $GITHUB_SHA --wp-version "$WP_VERSION"
 
+            - name: Archive performance results
+              if: success()
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              with:
+                  name: performance-results
+                  path: ${{ env.WP_ARTIFACTS_PATH }}/*.performance-results.json
+
             - name: Publish performance results
               if: github.event_name == 'push'
               env:
@@ -104,8 +92,8 @@ jobs:
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2
-              if: always()
+              if: failure()
               with:
                   name: failures-artifacts
-                  path: ./__test-results/artifacts
+                  path: ${{ env.WP_ARTIFACTS_PATH }}
                   if-no-files-found: ignore
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 6568d46989fe65..a9b36ba7f98b5c 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -30,13 +30,13 @@ jobs:
         environment: WordPress packages
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   path: main
                   ref: trunk
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -49,7 +49,7 @@ jobs:
                   git config user.name "Gutenberg Repository Automation"
                   git config user.email gutenberg@wordpress.org
 
-            - name: Setup Node (for CLI)
+            - name: Setup Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version-file: 'main/.nvmrc'
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index 5d38f7965f7b10..56dce7a2825c9b 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -15,11 +15,11 @@ jobs:
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   ref: trunk
 
-            - name: Use desired version of NodeJS
+            - name: Use desired version of Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version: ${{ matrix.node }}
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 0f1474c824a208..d04f312b9521bb 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -23,7 +23,7 @@ jobs:
 
         steps:
             - name: checkout
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
             - name: Use desired version of Java
               uses: actions/setup-java@3f07048e3d294f56e9b90ac5ea2c6f74e9ad0f98 # v3.10.0
@@ -31,13 +31,8 @@ jobs:
                   distribution: 'temurin'
                   java-version: '11'
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - run: npm ci
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - name: Gradle cache
               uses: gradle/gradle-build-action@6095a76664413da4c8c134ee32e8a8ae900f0f1f # v2.4.0
@@ -53,7 +48,7 @@ jobs:
 
             - name: Create AVD and generate snapshot for caching
               if: steps.avd-cache.outputs.cache-hit != 'true'
-              uses: reactivecircus/android-emulator-runner@50986b1464923454c95e261820bc626f38490ec0 # v2.27.0
+              uses: reactivecircus/android-emulator-runner@d94c3fbe4fe6a29e4a5ba47c12fb47677c73656b # v2.28.0
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
@@ -64,7 +59,7 @@ jobs:
                   script: echo "Generated AVD snapshot for caching."
 
             - name: Run tests
-              uses: reactivecircus/android-emulator-runner@50986b1464923454c95e261820bc626f38490ec0 # v2.27.0
+              uses: reactivecircus/android-emulator-runner@d94c3fbe4fe6a29e4a5ba47c12fb47677c73656b # v2.28.0
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 933b4184957d11..ff2c73e90ac689 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -23,15 +23,10 @@ jobs:
                 native-test-name: [gutenberg-editor-rendering]
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - run: npm ci
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - name: Prepare build cache key
               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
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 00002aaf52f191..3b457401560a8d 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,9 +22,9 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
+            - name: Use desired version of Node.js
               uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
               with:
                   node-version-file: '.nvmrc'
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 616fad4e55b5aa..e21c1f14d8be21 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,18 +12,12 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   ref: trunk
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Install Dependencies
-              run: npm ci
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - name: Build Storybook
               run: npm run storybook:build
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index ca9adb75ebca83..acb7417ac78ffb 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -31,21 +31,18 @@ jobs:
                 node: ['14']
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
               with:
                   node-version: ${{ matrix.node }}
-                  cache: npm
 
-            - name: Npm install and build
+            - name: Npm build
               # It's not necessary to run the full build, since Jest can interpret
               # source files with `babel-jest`. Some packages have their own custom
               # build tasks, however. These must be run.
-              run: |
-                  npm ci
-                  npx lerna run build
+              run: npx lerna run build
 
             - name: Running the tests
               run: npm run test:unit -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
@@ -77,13 +74,10 @@ jobs:
             WP_ENV_PHP_VERSION: ${{ matrix.php }}
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Set up Node.js
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             ##
             # This allows Composer dependencies to be installed using a single step.
@@ -116,10 +110,8 @@ jobs:
               with:
                   custom-cache-suffix: $(/bin/date -u --date='last Mon' "+%F")
 
-            - name: Install npm dependencies
-              run: |
-                  npm ci
-                  npm run build
+            - name: Npm build
+              run: npm run build
 
             - name: Docker debug information
               run: |
@@ -166,7 +158,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
             - name: Set up PHP
               uses: shivammathur/setup-php@d30ad8b1843ace22e6698ab99bbafaa747b6bd0d # v2.24.0
@@ -233,21 +225,16 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+            - uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Npm install and build
+            - name: Npm build
               # It's not necessary to run the full build, since Jest can interpret
               # source files with `babel-jest`. Some packages have their own custom
               # build tasks, however. These must be run.
-              run: |
-                  npm ci
-                  npx lerna run build
+              run: npx lerna run build
 
             - name: Running the tests
               run: npm run native test -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index 5cb432ee837ee3..392cf912e8db54 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -39,7 +39,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3.3.0
+              uses: actions/checkout@8f4b7f84864484a7bf31766abe9204da3cbe65b3 # v3.5.0
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
diff --git a/bin/log-performance-results.js b/bin/log-performance-results.js
index eac2f13d0ac977..9bc7ef9cb99b11 100755
--- a/bin/log-performance-results.js
+++ b/bin/log-performance-results.js
@@ -10,22 +10,25 @@ const [ token, branch, hash, baseHash, timestamp ] = process.argv.slice( 2 );
 
 const resultsFiles = [
 	{
-		file: 'post-editor-performance-results.json',
+		file: 'post-editor.performance-results.json',
 		metricsPrefix: '',
 	},
 	{
-		file: 'front-end-block-theme-performance-results.json',
+		file: 'front-end-block-theme.performance-results.json',
 		metricsPrefix: 'block-theme-',
 	},
 	{
-		file: 'front-end-classic-theme-performance-results.json',
+		file: 'front-end-classic-theme.performance-results.json',
 		metricsPrefix: 'classic-theme-',
 	},
 ];
 
 const performanceResults = resultsFiles.map( ( { file } ) =>
 	JSON.parse(
-		fs.readFileSync( path.join( __dirname, '../' + file ), 'utf8' )
+		fs.readFileSync(
+			path.join( process.env.WP_ARTIFACTS_PATH, file ),
+			'utf8'
+		)
 	)
 );
 
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 75ab95a4cc4a10..0804c794e9d8e7 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -3,7 +3,7 @@
  */
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { mapValues, kebabCase } = require( 'lodash' );
+const { mapValues } = require( 'lodash' );
 const SimpleGit = require( 'simple-git' );
 
 /**
@@ -18,6 +18,9 @@ const {
 } = require( '../lib/utils' );
 const config = require( '../config' );
 
+const ARTIFACTS_PATH =
+	process.env.WP_ARTIFACTS_PATH || path.join( process.cwd(), 'artifacts' );
+
 /**
  * @typedef WPPerformanceCommandOptions
  *
@@ -83,6 +86,17 @@ const config = require( '../config' );
  * @property {number=} maxListViewOpen        Max time to open list view.
  */
 
+/**
+ * Sanitizes branch name to be used in a path or a filename.
+ *
+ * @param {string} branch
+ *
+ * @return {string} Sanitized branch name.
+ */
+function sanitizeBranchName( branch ) {
+	return branch.replace( /[^a-zA-Z0-9-]/g, '-' );
+}
+
 /**
  * Computes the average number from an array numbers.
  *
@@ -182,38 +196,22 @@ function curateResults( testSuite, results ) {
  * @return {Promise<WPPerformanceResults>} Performance results for the branch.
  */
 async function runTestSuite( testSuite, performanceTestDirectory, runKey ) {
-	try {
-		await runShellScript(
-			`npm run test:performance -- packages/e2e-tests/specs/performance/${ testSuite }.test.js`,
-			performanceTestDirectory
-		);
-	} catch ( error ) {
-		fs.mkdirSync( './__test-results/artifacts', { recursive: true } );
-		const artifactsFolder = path.join(
-			performanceTestDirectory,
-			'artifacts/'
-		);
-		await runShellScript(
-			'cp -Rv ' + artifactsFolder + ' ' + './__test-results/artifacts/'
-		);
+	const resultsFilename = `${ runKey }.performance-results.json`;
 
-		throw error;
-	}
-
-	const resultsFile = path.join(
+	await runShellScript(
+		`npm run test:performance -- ${ testSuite }`,
 		performanceTestDirectory,
-		`packages/e2e-tests/specs/performance/${ testSuite }.test.results.json`
-	);
-	fs.mkdirSync( './__test-results', { recursive: true } );
-	fs.copyFileSync( resultsFile, `./__test-results/${ runKey }.results.json` );
-	const rawResults = await readJSONFile(
-		path.join(
-			performanceTestDirectory,
-			`packages/e2e-tests/specs/performance/${ testSuite }.test.results.json`
-		)
+		{
+			...process.env,
+			WP_ARTIFACTS_PATH: ARTIFACTS_PATH,
+			RESULTS_FILENAME: resultsFilename,
+		}
 	);
 
-	return curateResults( testSuite, rawResults );
+	return curateResults(
+		testSuite,
+		await readJSONFile( path.join( ARTIFACTS_PATH, resultsFilename ) )
+	);
 }
 
 /**
@@ -299,8 +297,8 @@ async function runPerformanceTests( branches, options ) {
 	const branchDirectories = {};
 	for ( const branch of branches ) {
 		log( `    >> Branch: ${ branch }` );
-		const environmentDirectory =
-			rootDirectory + '/envs/' + kebabCase( branch );
+		const sanitizedBranch = sanitizeBranchName( branch );
+		const environmentDirectory = rootDirectory + '/envs/' + sanitizedBranch;
 		// @ts-ignore
 		branchDirectories[ branch ] = environmentDirectory;
 		const buildPath = `${ environmentDirectory }/plugin`;
@@ -328,15 +326,41 @@ async function runPerformanceTests( branches, options ) {
 			buildPath
 		);
 
-		await runShellScript(
-			'cp ' +
-				path.resolve(
-					performanceTestDirectory,
-					'bin/plugin/utils/.wp-env.performance.json'
-				) +
-				' ' +
-				environmentDirectory +
-				'/.wp-env.json'
+		// Create the config file for the current env.
+		fs.writeFileSync(
+			path.join( environmentDirectory, '.wp-env.json' ),
+			JSON.stringify(
+				{
+					core: 'WordPress/WordPress',
+					plugins: [ path.join( environmentDirectory, 'plugin' ) ],
+					themes: [
+						path.join(
+							performanceTestDirectory,
+							'test/emptytheme'
+						),
+						'https://downloads.wordpress.org/theme/twentytwentyone.1.7.zip',
+						'https://downloads.wordpress.org/theme/twentytwentythree.1.0.zip',
+					],
+					env: {
+						tests: {
+							mappings: {
+								'wp-content/mu-plugins': path.join(
+									performanceTestDirectory,
+									'packages/e2e-tests/mu-plugins'
+								),
+								'wp-content/plugins/gutenberg-test-plugins':
+									path.join(
+										performanceTestDirectory,
+										'packages/e2e-tests/plugins'
+									),
+							},
+						},
+					},
+				},
+				null,
+				2
+			),
+			'utf8'
 		);
 
 		if ( options.wpVersion ) {
@@ -393,32 +417,39 @@ async function runPerformanceTests( branches, options ) {
 
 	/** @type {Record<string,Record<string, WPPerformanceResults>>} */
 	const results = {};
+	const wpEnvPath = path.join(
+		performanceTestDirectory,
+		'node_modules/.bin/wp-env'
+	);
+
 	for ( const testSuite of testSuites ) {
 		results[ testSuite ] = {};
 		/** @type {Array<Record<string, WPPerformanceResults>>} */
 		const rawResults = [];
-		// Alternate three times between branches.
 		for ( let i = 0; i < TEST_ROUNDS; i++ ) {
+			const roundInfo = `round ${ i + 1 } of ${ TEST_ROUNDS }`;
+			log( `    >> Suite: ${ testSuite } (${ roundInfo })` );
 			rawResults[ i ] = {};
 			for ( const branch of branches ) {
-				const runKey = `${ branch }_${ testSuite }_run-${ i }`;
+				const sanitizedBranch = sanitizeBranchName( branch );
+				const runKey = `${ testSuite }_${ sanitizedBranch }_run-${ i }`;
 				// @ts-ignore
 				const environmentDirectory = branchDirectories[ branch ];
-				log( `    >> Branch: ${ branch }, Suite: ${ testSuite }` );
-				log( '        >> Starting the environment.' );
+				log( `        >> Branch: ${ branch }` );
+				log( '            >> Starting the environment.' );
 				await runShellScript(
-					'../../tests/node_modules/.bin/wp-env start',
+					`${ wpEnvPath } start`,
 					environmentDirectory
 				);
-				log( '        >> Running the test.' );
+				log( '            >> Running the test.' );
 				rawResults[ i ][ branch ] = await runTestSuite(
 					testSuite,
 					performanceTestDirectory,
 					runKey
 				);
-				log( '        >> Stopping the environment' );
+				log( '            >> Stopping the environment' );
 				await runShellScript(
-					'../../tests/node_modules/.bin/wp-env stop',
+					`${ wpEnvPath } stop`,
 					environmentDirectory
 				);
 			}
@@ -481,9 +512,9 @@ async function runPerformanceTests( branches, options ) {
 		);
 		console.table( invertedResult );
 
-		const resultsFilename = testSuite + '-performance-results.json';
+		const resultsFilename = testSuite + '.performance-results.json';
 		fs.writeFileSync(
-			path.resolve( __dirname, '../../../', resultsFilename ),
+			path.join( ARTIFACTS_PATH, resultsFilename ),
 			JSON.stringify( results[ testSuite ], null, 2 )
 		);
 	}
diff --git a/bin/plugin/lib/utils.js b/bin/plugin/lib/utils.js
index 4a75437a60694e..c50094321710ca 100644
--- a/bin/plugin/lib/utils.js
+++ b/bin/plugin/lib/utils.js
@@ -33,6 +33,7 @@ function runShellScript( script, cwd, env = {} ) {
 					NO_CHECKS: 'true',
 					PATH: process.env.PATH,
 					HOME: process.env.HOME,
+					USER: process.env.USER,
 					...env,
 				},
 			},
diff --git a/bin/plugin/utils/.wp-env.performance.json b/bin/plugin/utils/.wp-env.performance.json
deleted file mode 100644
index 112c2684f64a48..00000000000000
--- a/bin/plugin/utils/.wp-env.performance.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-	"core": "WordPress/WordPress",
-	"plugins": [ "./plugin" ],
-	"themes": [ "../../tests/test/emptytheme" ],
-	"env": {
-		"tests": {
-			"mappings": {
-				"wp-content/mu-plugins": "../../tests/packages/e2e-tests/mu-plugins",
-				"wp-content/plugins/gutenberg-test-plugins": "../../tests/packages/e2e-tests/plugins"
-			}
-		}
-	}
-}
diff --git a/changelog.txt b/changelog.txt
index a0ce9ad1790f03..7683dfcb0d3e73 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,326 @@
 == Changelog ==
 
+= 15.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+- Adjust whileHover effect to be a bit subtler and less pronounced. ([48928](https://github.com/WordPress/gutenberg/pull/48928))
+- Go direct to edit from manage all templates list. ([48764](https://github.com/WordPress/gutenberg/pull/48764))
+- Move "Add Template"'s descriptions to tooltips. ([48710](https://github.com/WordPress/gutenberg/pull/48710))
+- Add descriptions to all panels in the Site Editor's dark side. ([48739](https://github.com/WordPress/gutenberg/pull/48739))
+- Add hover animation to site editor canvas. ([48575](https://github.com/WordPress/gutenberg/pull/48575))
+- Fix non-us spelling in sidebar. ([48976](https://github.com/WordPress/gutenberg/pull/48976))
+- Prevent the saving button from showing when renaming templates. ([48399](https://github.com/WordPress/gutenberg/pull/48399))
+- Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar. ([48689](https://github.com/WordPress/gutenberg/pull/48689))
+- Add "Added by" description to template part navigation sidebar. ([48732](https://github.com/WordPress/gutenberg/pull/48732))
+- Add border radius to off canvas navigation menu items. ([48798](https://github.com/WordPress/gutenberg/pull/48798))
+- Add page details when viewing a specific page. ([48650](https://github.com/WordPress/gutenberg/pull/48650))
+- Duotone: Limit SVG filter output to used filters. ([48995](https://github.com/WordPress/gutenberg/pull/48995))
+- Hide navigation screen in site editor. ([49043](https://github.com/WordPress/gutenberg/pull/49043))
+
+#### Block Library
+
+- Open convert to links modal on select of a page item. ([48723](https://github.com/WordPress/gutenberg/pull/48723))
+- Post Featured Image: Remove 16:10. ([48969](https://github.com/WordPress/gutenberg/pull/48969))
+- Cover: Add constrained/flow layout. ([45326](https://github.com/WordPress/gutenberg/pull/45326))
+- Cover: Add text color block support. ([41572](https://github.com/WordPress/gutenberg/pull/41572))
+
+#### Components
+
+- FontSizePicker: Allow custom units. ([48468](https://github.com/WordPress/gutenberg/pull/48468))
+- `Navigator`: Disable initial animation. ([49062](https://github.com/WordPress/gutenberg/pull/49062))
+- Try: Update Tertiary Button appearance. ([48888](https://github.com/WordPress/gutenberg/pull/48888))
+- FormTokenField: Hide suggestions list on blur event if input value is invalid. ([48785](https://github.com/WordPress/gutenberg/pull/48785))
+
+#### Design Tools
+
+- Block Supports: Add text columns (column count) to typography block supports. ([33587](https://github.com/WordPress/gutenberg/pull/33587))
+
+#### Global Styles
+
+- Move the global styles provider to the app level component. ([49011](https://github.com/WordPress/gutenberg/pull/49011))
+- Add support for `:link` and `:Any-link` in `theme.json`. ([48634](https://github.com/WordPress/gutenberg/pull/48634))
+- Add compound class to layout wrapper for global spacing styles. ([47952](https://github.com/WordPress/gutenberg/pull/47952))
+
+#### Block API
+
+- Block Deprecations: Provide extra data for isEligible check. ([48815](https://github.com/WordPress/gutenberg/pull/48815))
+
+#### Post Editor
+
+- Provide static native editor help article slugs. ([48802](https://github.com/WordPress/gutenberg/pull/48802))
+- Try getting Post Content layout on server before editor loads. ([45299](https://github.com/WordPress/gutenberg/pull/45299))
+
+#### Packages
+
+- Introduce prependHTTPS URL util. ([47648](https://github.com/WordPress/gutenberg/pull/47648))
+
+### Bug Fixes
+
+#### Block Library
+
+- Embed Block: Fix Aspect Ratio Classes #29641. ([41141](https://github.com/WordPress/gutenberg/pull/41141))
+- Ensure aspect ratio is applied when Post Featured Image block is linked. ([48495](https://github.com/WordPress/gutenberg/pull/48495))
+- Fix PostContent initial render by waiting for the canEdit request. ([48642](https://github.com/WordPress/gutenberg/pull/48642))
+- Fix classic menu fallback race condition. ([48811](https://github.com/WordPress/gutenberg/pull/48811))
+- Fix navigation block off-canvas appender for empty menus. ([48907](https://github.com/WordPress/gutenberg/pull/48907))
+- Fixes extra UI in navigation block inspector. ([48679](https://github.com/WordPress/gutenberg/pull/48679))
+- Import Classic Menu using the menu name as the block menu title. ([48771](https://github.com/WordPress/gutenberg/pull/48771))
+- Navigation Link: Remove color generation code. ([48927](https://github.com/WordPress/gutenberg/pull/48927))
+- Navigation: Fix missing state for MenuControls. ([48921](https://github.com/WordPress/gutenberg/pull/48921))
+- Update missing translation from label. ([48760](https://github.com/WordPress/gutenberg/pull/48760))
+- Widget Importer: Fix Widget Group block imports. ([48669](https://github.com/WordPress/gutenberg/pull/48669))
+- Query Loop: Show variant patterns even if there are no patterns for the Query Loop block. ([48793](https://github.com/WordPress/gutenberg/pull/48793))
+- Comments: Fix 'sprintf requires more than 1 params' error. ([49054](https://github.com/WordPress/gutenberg/pull/49054))
+- Adjust Post Featured Image PanelBody label to "Settings". ([49076](https://github.com/WordPress/gutenberg/pull/49076))
+- Add help text to Gallery Image Size control. ([49074](https://github.com/WordPress/gutenberg/pull/49074))
+- Comments Block (Legacy): Update missing translation. ([48820](https://github.com/WordPress/gutenberg/pull/48820))
+- I18n of created Navigation menu title. ([48773](https://github.com/WordPress/gutenberg/pull/48773))
+- Make sure the directly inserted block in the Nav block is a Page link. ([48740](https://github.com/WordPress/gutenberg/pull/48740))
+- Navigation Link: Don't remove 'block_core_navigation_link_build_css_colors'. ([49064](https://github.com/WordPress/gutenberg/pull/49064))
+- Navigation: Don't save the level of the link in an attribute. ([48219](https://github.com/WordPress/gutenberg/pull/48219))
+- Refactor away state in Nav menu selector. ([45464](https://github.com/WordPress/gutenberg/pull/45464))
+- Revert: Navigation: Always create a fallback menu. ([48602](https://github.com/WordPress/gutenberg/pull/48602))
+- Tweak Latest Posts block PanelBody labels. ([49079](https://github.com/WordPress/gutenberg/pull/49079))
+- Tweak label for Latest Posts excerpt control. ([49077](https://github.com/WordPress/gutenberg/pull/49077))
+- Page List Block: Show untitled pages on page list on the editor. ([48772](https://github.com/WordPress/gutenberg/pull/48772))
+
+#### Site Editor
+
+- Don't offer Classic block as a recovery action when not registered. ([49051](https://github.com/WordPress/gutenberg/pull/49051))
+- Fix browser history when synchronising state with urls. ([48731](https://github.com/WordPress/gutenberg/pull/48731))
+- Fix lingering insertion point within template parts. ([48913](https://github.com/WordPress/gutenberg/pull/48913))
+- Fix template part actions in List View. ([48905](https://github.com/WordPress/gutenberg/pull/48905))
+- Fix text alignment in the Site Editor sidebar. ([48959](https://github.com/WordPress/gutenberg/pull/48959))
+- Fix typo in template parts description. ([48781](https://github.com/WordPress/gutenberg/pull/48781))
+- Fix browse mode descriptions margin. ([48778](https://github.com/WordPress/gutenberg/pull/48778))
+- Fix scrollbar in site editor. ([48822](https://github.com/WordPress/gutenberg/pull/48822))
+- Site Editor Navigation panel: Update appearance of non-link blocks. ([48933](https://github.com/WordPress/gutenberg/pull/48933))
+- Navigation sidebar shows a wrong submenu popover. ([48941](https://github.com/WordPress/gutenberg/pull/48941))
+- Show creation popover on empty page links in the navigation sidebar. ([48746](https://github.com/WordPress/gutenberg/pull/48746))
+- Site button metrics. ([48918](https://github.com/WordPress/gutenberg/pull/48918))
+- Remove actions from SidebarNavigationScreenWrapper. ([48935](https://github.com/WordPress/gutenberg/pull/48935))
+- Update template descriptions with more detail. ([48934](https://github.com/WordPress/gutenberg/pull/48934))
+
+#### Global Styles
+
+- Fix typo: Use WP_Theme_JSON_Gutenberg instead of WP_Theme_JSON class name. ([48648](https://github.com/WordPress/gutenberg/pull/48648))
+- Fix: Crashes on getNodesWithSettings and getNodesWithStyles. ([49023](https://github.com/WordPress/gutenberg/pull/49023))
+- Fix: Global Styles crash in updateConfigWithSeparator when not block styles are passed. ([49045](https://github.com/WordPress/gutenberg/pull/49045))
+- Fix: Global Styles getNodesWithStyles expects an object with elements. ([49044](https://github.com/WordPress/gutenberg/pull/49044))
+- Fix: Global Styles getPresetsClasses crashes if no selector is passed. ([49024](https://github.com/WordPress/gutenberg/pull/49024))
+- Fix: Global styles forces a white background. ([49042](https://github.com/WordPress/gutenberg/pull/49042))
+- Style Book: Move iframe to root of content area to support styles that overflow block previews. ([48664](https://github.com/WordPress/gutenberg/pull/48664))
+- `WP_Theme_JSON`: Sync indirect properties changes from core. ([48646](https://github.com/WordPress/gutenberg/pull/48646))
+
+#### Components
+
+- Fix HStack and VStack alignment prop. ([47914](https://github.com/WordPress/gutenberg/pull/47914))
+- ResizeTooltip: Use default.fontFamily on tooltip. ([48805](https://github.com/WordPress/gutenberg/pull/48805))
+- ResponsiveWrapper: Use aspect-ratio CSS prop and support SVG elements. ([48573](https://github.com/WordPress/gutenberg/pull/48573))
+
+#### Accessibility
+
+- Make sure useFocusOnMount runs when all the children tabbable elements have mounted. ([42187](https://github.com/WordPress/gutenberg/pull/42187))
+- Manage selection on block sync. ([48979](https://github.com/WordPress/gutenberg/pull/48979))
+
+#### Post Editor
+
+- Distraction Free Mode: Don't show the metaboxes. ([48947](https://github.com/WordPress/gutenberg/pull/48947))
+- Don't add Post Content layout styles to title in the post editor. ([48663](https://github.com/WordPress/gutenberg/pull/48663))
+- Fix animation and browser console error when returning from template edit mode. ([48930](https://github.com/WordPress/gutenberg/pull/48930))
+
+#### Block Editor
+
+- LinkControl: Remove HTML from suggestion title before passing it to TextHighlight component. ([48685](https://github.com/WordPress/gutenberg/pull/48685))
+- Order initial block items in Navigation with PrivateInserter. ([48752](https://github.com/WordPress/gutenberg/pull/48752))
+- BlockInvalidWarning: Prefer `canInsertBlockType` and refactor to hooks. ([49052](https://github.com/WordPress/gutenberg/pull/49052))
+- Fix grouping actions in List View. ([48910](https://github.com/WordPress/gutenberg/pull/48910))
+- Fix typo in the media-categories component. ([49047](https://github.com/WordPress/gutenberg/pull/49047))
+- Custom link UI does appears outside canvas on the sidebar navigation. ([48633](https://github.com/WordPress/gutenberg/pull/48633))
+- Use proper color for block styles control. ([46684](https://github.com/WordPress/gutenberg/pull/46684))
+- Update Welcome Guide article links to avoid redirect. ([48582](https://github.com/WordPress/gutenberg/pull/48582))
+- Columns Block: Don't show the column count change UI when `templateLock` is `all`. ([48691](https://github.com/WordPress/gutenberg/pull/48691))
+- Remove border from quick inserter child elements. ([48794](https://github.com/WordPress/gutenberg/pull/48794))
+
+#### Inspector Controls
+- Fix settings tab active state border in block inspector. ([48945](https://github.com/WordPress/gutenberg/pull/48945))
+
+#### Testing
+
+- Playwright Utils: Fix the 'publishPost' address locator. ([48729](https://github.com/WordPress/gutenberg/pull/48729))
+
+#### CSS & Styling
+- Fix duplication of block classname in feature selectors for style variations. ([48662](https://github.com/WordPress/gutenberg/pull/48662))
+
+#### Experimental
+
+- Fix KSES filter for un-prettified filters. ([49004](https://github.com/WordPress/gutenberg/pull/49004))
+
+#### Packages
+
+- Rich text: Fix range equality checks for Safari. ([48733](https://github.com/WordPress/gutenberg/pull/48733))
+- Preferences Modal: Fix double focus outline in tab item. ([48996](https://github.com/WordPress/gutenberg/pull/48996))
+
+#### Tools
+
+- Scripts: Fix `render.php` isn't copied in Windows OS. ([48735](https://github.com/WordPress/gutenberg/pull/48735))
+
+#### Mobile
+
+- Mobile - Fix parsing of CSS units for null matched values. ([48484](https://github.com/WordPress/gutenberg/pull/48484))
+
+### Performance
+
+#### Block Editor
+
+- Rich text: useAnchor: Remove value dependency. ([48715](https://github.com/WordPress/gutenberg/pull/48715))
+
+#### Post Editor
+
+- Lodash: Refactor away from `_.kebabCase()` in `EditorHelpTopics`. ([48776](https://github.com/WordPress/gutenberg/pull/48776))
+- Lodash: Refactor away from `edit-post` package. ([48786](https://github.com/WordPress/gutenberg/pull/48786))
+
+#### Site Editor
+
+- Improve the Navigation panel's menu query. ([48908](https://github.com/WordPress/gutenberg/pull/48908))
+- Improve Site Editor performance tests. ([48138](https://github.com/WordPress/gutenberg/pull/48138))
+
+#### Testing
+
+- Lodash: Remove from e2e-tests package. ([48775](https://github.com/WordPress/gutenberg/pull/48775))
+
+#### Themes
+
+- Fix: Incorrect selector generated by `append_to_selector` method. ([48759](https://github.com/WordPress/gutenberg/pull/48759))
+
+#### Block Library
+
+- Lodash: Remove `_.get()` from various blocks. ([48491](https://github.com/WordPress/gutenberg/pull/48491))
+
+#### Data Layer
+
+- Lodash: Refactor away from `_.set()` in core-data. ([48784](https://github.com/WordPress/gutenberg/pull/48784))
+
+#### GitHub Actions
+
+- Prefer committer over author date for perf results timestamp. ([48673](https://github.com/WordPress/gutenberg/pull/48673))
+
+### Documentation
+
+- Add links to hook documentation in curation doc. ([48653](https://github.com/WordPress/gutenberg/pull/48653))
+- Add missing playwright end-to-end documentation to toc.json. ([48447](https://github.com/WordPress/gutenberg/pull/48447))
+- Adding examples of how to programmatically remove the panels in Document sidebar. ([48895](https://github.com/WordPress/gutenberg/pull/48895))
+- Adds link to post on the developer blog to the deprecation page. ([49069](https://github.com/WordPress/gutenberg/pull/49069))
+- Add position: Sticky to the Opt-in into UI controls appearanceTools section. ([48763](https://github.com/WordPress/gutenberg/pull/48763))
+- Fix broken Lerna documentation link. ([48890](https://github.com/WordPress/gutenberg/pull/48890))
+- Table of styles keys with since versions. ([48265](https://github.com/WordPress/gutenberg/pull/48265))
+- Fix URL mismatch. ([48931](https://github.com/WordPress/gutenberg/pull/48931))
+- Theme JSON schema: Add sticky position to settings, minHeight to styles. ([48948](https://github.com/WordPress/gutenberg/pull/48948))
+- Update the end-to-end tests documentation. ([48951](https://github.com/WordPress/gutenberg/pull/48951))
+- jest-preset-default: Update README to reflect current status. ([48925](https://github.com/WordPress/gutenberg/pull/48925))
+
+### Code Quality
+
+#### Components
+
+- Autocomplete: Refactor to TypeScript. ([47751](https://github.com/WordPress/gutenberg/pull/47751))
+- Navigation: Refactor to TypeScript. ([48742](https://github.com/WordPress/gutenberg/pull/48742))
+- SelectControl: Improve prop types for single vs multiple selection. ([47390](https://github.com/WordPress/gutenberg/pull/47390))
+- `DimensionControl(Experimental)`: Refactor to TypeScript. ([47351](https://github.com/WordPress/gutenberg/pull/47351))
+- `Guide`: Refactor to TypeScript. ([47493](https://github.com/WordPress/gutenberg/pull/47493))
+- `Icon`: Refactor tests to TypeScript. ([49066](https://github.com/WordPress/gutenberg/pull/49066))
+- `PaletteEdit`: Refactor away from `lodash.kebabCase`. ([48637](https://github.com/WordPress/gutenberg/pull/48637))
+- `QueryControls`: Refactor away from `lodash.groupBy`. ([48779](https://github.com/WordPress/gutenberg/pull/48779))
+- components/utils/font: Refactor away from lodash `.get`. ([48629](https://github.com/WordPress/gutenberg/pull/48629))
+- remove lodash from `context/getStyledClassName`:. ([48688](https://github.com/WordPress/gutenberg/pull/48688))
+- withSpokenMessages: Change js files to typescript. ([48163](https://github.com/WordPress/gutenberg/pull/48163))
+
+#### Block Library
+
+- Add Nav block files to those triggering error for exhaustive deps. ([48821](https://github.com/WordPress/gutenberg/pull/48821))
+- Fix Nav block exhaustive deps warnings. ([48680](https://github.com/WordPress/gutenberg/pull/48680))
+- Media Text: Refactored constants to it's designated file. ([48480](https://github.com/WordPress/gutenberg/pull/48480))
+- Navigation: Simplify the method for finding the fallback menu. ([48916](https://github.com/WordPress/gutenberg/pull/48916))
+- Duotone.php code cleanup. ([48607](https://github.com/WordPress/gutenberg/pull/48607))
+- Revert "Duotone: Limit SVG filter output to used filters". ([49102](https://github.com/WordPress/gutenberg/pull/49102))
+
+#### Block Editor
+
+- Inserter: Remove outer scope values dependencies. ([48961](https://github.com/WordPress/gutenberg/pull/48961))
+- Inserter: Remove unnecessary dependency 'delayedFilterValue'. ([48960](https://github.com/WordPress/gutenberg/pull/48960))
+- Remove unused CSS from LinkControl Apply button. ([48431](https://github.com/WordPress/gutenberg/pull/48431))
+- Custom Classname block support: Update code comments to remove reference to anchor id. ([48709](https://github.com/WordPress/gutenberg/pull/48709))
+- List View: Remove unused selector from the 'useBlockSelection' hook. ([48984](https://github.com/WordPress/gutenberg/pull/48984))
+- Renames parent selection boolean param and improves documentation. ([48677](https://github.com/WordPress/gutenberg/pull/48677))
+- Tests: Cleanup unnecessary jest timers setup. ([49030](https://github.com/WordPress/gutenberg/pull/49030))
+- Avoid declaring a function inside another function. ([49049](https://github.com/WordPress/gutenberg/pull/49049))
+
+#### Global Styles
+
+- Theme JSON: Clarify status of fixed position opt-in in appearance tools. ([48660](https://github.com/WordPress/gutenberg/pull/48660))
+- Extract a BorderPanel component as a reusable component between Global Styles and Block Inspector. ([48636](https://github.com/WordPress/gutenberg/pull/48636))
+
+#### Data Layer
+
+- Data: Use real timers for private APIs tests. ([49029](https://github.com/WordPress/gutenberg/pull/49029))
+
+#### Packages
+
+- Preferences: Remove `types` field from `package.json`. ([49053](https://github.com/WordPress/gutenberg/pull/49053))
+- Upgrade `typescript` to 4.9.5. ([48299](https://github.com/WordPress/gutenberg/pull/48299))
+- Compose: Remove useAsyncList from mobile exports. ([48241](https://github.com/WordPress/gutenberg/pull/48241))
+- Animation: Refactor to TypeScript. ([47042](https://github.com/WordPress/gutenberg/pull/47042))
+- PanelBody: Convert to TypeScript. ([47702](https://github.com/WordPress/gutenberg/pull/47702))
+- Refactor ToolbarContext to TS. ([49002](https://github.com/WordPress/gutenberg/pull/49002))
+- Refactor/toolbar button component to typescript. ([47750](https://github.com/WordPress/gutenberg/pull/47750))
+- `PaletteEdit`: Convert to TypeScript. ([47764](https://github.com/WordPress/gutenberg/pull/47764))
+- navigateRegions: Convert to TypeScript. ([48632](https://github.com/WordPress/gutenberg/pull/48632))
+- withFallbackStyles: Convert to TypeScript. ([48720](https://github.com/WordPress/gutenberg/pull/48720))
+- withFilters: Convert to TypeScript. ([48721](https://github.com/WordPress/gutenberg/pull/48721))
+- withFocusReturn: Convert to TypeScript. ([48748](https://github.com/WordPress/gutenberg/pull/48748))
+- withNotices: Convert to TypeScript. ([49088](https://github.com/WordPress/gutenberg/pull/49088))
+- Packages: Remove completely two deprecated webpack plugins. ([48770](https://github.com/WordPress/gutenberg/pull/48770))
+
+### Tools
+
+- Env: Fix typo / grammar README.md. ([48952](https://github.com/WordPress/gutenberg/pull/48952))
+- ci: Add Rich Text code owner. ([48727](https://github.com/WordPress/gutenberg/pull/48727))
+
+#### Testing
+
+- Add `pageUtils.pressKeys` to playwright utils. ([49009](https://github.com/WordPress/gutenberg/pull/49009))
+- Add artifacts upload for the performance tests. ([48243](https://github.com/WordPress/gutenberg/pull/48243))
+- Fix flaky block hierarchy navigation test by better inserter selection. ([48780](https://github.com/WordPress/gutenberg/pull/48780))
+- Migrate multi-block selection end-to-end tests to Playwright. ([48035](https://github.com/WordPress/gutenberg/pull/48035))
+- Navigation block end-to-end tests: Default to my most recently created menu. ([48132](https://github.com/WordPress/gutenberg/pull/48132))
+- Upgrade Jest from 27 to 29.5.0. ([47388](https://github.com/WordPress/gutenberg/pull/47388))
+- Duotone: Style Engine: Add unit test and associated refactoring. ([49033](https://github.com/WordPress/gutenberg/pull/49033))
+- Query Block: Add tests for `getValueFromObjectPath()` util. ([48956](https://github.com/WordPress/gutenberg/pull/48956))
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @anver: Env: Fix typo / grammar README.md. ([48952](https://github.com/WordPress/gutenberg/pull/48952))
+- @bhavz-10: withSpokenMessages: Change js files to typescript. ([48163](https://github.com/WordPress/gutenberg/pull/48163))
+- @krishneup: Update missing translation from label. ([48760](https://github.com/WordPress/gutenberg/pull/48760))
+- @mike-day: Refactor/toolbar button component to typescript. ([47750](https://github.com/WordPress/gutenberg/pull/47750))
+- @shvlv: FormTokenField: Hide suggestions list on blur event if input value is invalid. ([48785](https://github.com/WordPress/gutenberg/pull/48785))
+- @TylerB24890: Embed Block: Fix Aspect Ratio Classes #29641. ([41141](https://github.com/WordPress/gutenberg/pull/41141))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewserong @anver @aristath @bhavz-10 @brookewp @chad1008 @ciampo @DaisyOlsen @dcalhoun @draganescu @ellatrix @fabiankaegy @felixarntz @flootr @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hideokamoto @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @krishneup @MaggieCabrera @Mamaduka @mburridge @mike-day @mirka @mtias @ndiego @ntsekouras @oandregal @Rahmon @richtabor @ryanwelcher @SavPhill @scruffian @shvlv @SiobhyB @swissspidy @t-hamano @talldan @tellthemachines @tomdevisser @TylerB24890 @tyxla @WunderBart @youknowriad
+
+
 = 15.3.1 =
 
 
@@ -5156,7 +5477,7 @@ The following contributors merged PRs in this release:
 - Docs: Fix required status of `onSelectUrl` prop of `MediaReplaceFlow` component. ([44025](https://github.com/WordPress/gutenberg/pull/44025))
 - Document new global styles filters. ([44111](https://github.com/WordPress/gutenberg/pull/44111))
 - Document template_lock=noContent for Custom Post Types. ([43977](https://github.com/WordPress/gutenberg/pull/43977))
-- InnerBlocks: document that `templateLock:NoContent` cannot be overriden by children. ([43825](https://github.com/WordPress/gutenberg/pull/43825))
+- InnerBlocks: document that `templateLock:NoContent` cannot be overridden by children. ([43825](https://github.com/WordPress/gutenberg/pull/43825))
 - Theme.json: Add default values for settings.spacing.spacingScale. ([43860](https://github.com/WordPress/gutenberg/pull/43860))
 - Theme.json: Fix schema for useRootPaddingAwareAlignments. ([43628](https://github.com/WordPress/gutenberg/pull/43628))
 - Typography block supports: Call tear_down in tests and format PHP doc blocks. ([43968](https://github.com/WordPress/gutenberg/pull/43968))
diff --git a/docs/README.md b/docs/README.md
index 4d5343a76141e9..49e562031f9e51 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,32 +1,34 @@
 # Block Editor Handbook
 
-**Gutenberg** is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. The project is right now in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, **Customization** (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual -- and is focused on a new editing experience, the block editor (which is the topic of the current documentation).
+**Gutenberg** is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. Right now, the project is in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, **Customization** (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual -- and is focused on a new editing experience, the block editor (which is the topic of the current documentation).
 
 ![Quick view of the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/trunk/docs/assets/quick-view-of-the-block-editor.png)
 
-**Legend :**
+**Legend:**
 
-1. Block Inserter
+1. Block inserter
 2. Block editor content area
-3. Settings Sidebar
+3. Settings sidebar
 
-Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created in the unit of blocks instead of freeform text with inserted media, embeds and Shortcodes (there's a Shortcode block though).
+Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created using blocks instead of freeform text with inserted media, embeds and Shortcodes (there's a Shortcode block, though).
 
-Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes. The new editor is designed with progressive enhancement, meaning that it is back-compatible with all legacy content, and it also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls.
+Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes. The new editor is designed with progressive enhancement, meaning that it is backward compatible with all legacy content. It also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls.
 
-The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins.
-
-[Learn to use the block editor](https://wordpress.org/support/article/wordpress-editor/) to create media-rich posts and pages.
+The Editor offers rich new value to users by offering visual, drag-and-drop creation tools and powerful developer enhancements including modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins.
 
 ## Quick links
 
+### Create pages and posts with the block editor
+
+In the Block Editor Handbook, our tutorials will be development-focussed. However, it helps if you have some experience using the block editor the way an end-user would first. If you have no experience building with the block editor yet, we recommend you [learn to use the block editor](https://wordpress.org/support/article/wordpress-editor/) to create posts and pages.
+
 ### Create a Block Tutorial
 
-[Learn how to create your first block](/docs/getting-started/create-block/README.md) for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all what you need to know to get started with the block editor.
+[Learn how to create your first block](/docs/getting-started/create-block/README.md) for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
 
 ### Develop for the block editor
 
-Whether you want to extend the functionality of the block editor, or create a plugin based on it, [see the developer documentation](/docs/how-to-guides/README.md) to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.
+Whether you want to extend the functionality of the block editor, or create a plugin based on it, [see our how-to guides](/docs/how-to-guides/README.md) to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.
 
 -   [Gutenberg Architecture](/docs/explanations/architecture/README.md)
 -   [Block Styles](/docs/reference-guides/block-api/block-styles.md)
@@ -38,4 +40,4 @@ Whether you want to extend the functionality of the block editor, or create a pl
 
 ### Contribute to the block editor
 
-Everything you need to know to [start contributing to the block editor](/docs/contributors/README.md) . Whether you are interested in the design, code, triage, documentation, support or internationalization of the block editor, you will find here guides to help you.
+Everything you need to know to [start contributing to the block editor](/docs/contributors/README.md) . Whether you are interested in the design, code, triage, documentation, support or internationalization of the block editor, you will find guides to help you here.
diff --git a/docs/explanations/architecture/README.md b/docs/explanations/architecture/README.md
index 723bce3ce4e2f4..774df183618d4a 100644
--- a/docs/explanations/architecture/README.md
+++ b/docs/explanations/architecture/README.md
@@ -2,12 +2,16 @@
 
 Let’s look at the big picture and the architectural and UX principles of the block editor and the Gutenberg repository.
 
--   [Key Concepts](/docs/explanations/architecture/key-concepts.md)
--   [Data Format And Data Flow](/docs/explanations/architecture/data-flow.md)
--   [Understand the repository folder structure](/docs/contributors/folder-structure.md).
+## Editor
+
+-   [Key concepts](/docs/explanations/architecture/key-concepts.md).
+-   [Data format and data flow](/docs/explanations/architecture/data-flow.md).
+-   [Site editing templates](/docs/explanations/architecture/full-site-editing-templates.md).
+-   [Styles in the editor](/docs/explanations/architecture/styles.md).
+-   [Performance](/docs/explanations/architecture/performance.md).
+
+## Gutenberg Repository
+
 -   [Modularity and WordPress Packages](/docs/explanations/architecture/modularity.md).
--   [Block Editor Performance](/docs/explanations/architecture/performance.md).
--   What are the decision decisions behind the Data Module?
--   [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
--   [What's the difference between the different editor packages? What's the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
--   [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md)
+-   [Understand the repository folder structure](/docs/contributors/folder-structure.md).
+-   **Outdated!** [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md).
diff --git a/docs/explanations/architecture/full-site-editing-templates.md b/docs/explanations/architecture/full-site-editing-templates.md
index 76bc3a0f5861f2..aa18ad17a18f6f 100644
--- a/docs/explanations/architecture/full-site-editing-templates.md
+++ b/docs/explanations/architecture/full-site-editing-templates.md
@@ -1,4 +1,4 @@
-# Full Site Editing Templates
+# Site Editing Templates
 
 ## Template and template part flows
 
diff --git a/docs/explanations/architecture/key-concepts.md b/docs/explanations/architecture/key-concepts.md
index b246724e5d5838..3af2d6d87a077d 100644
--- a/docs/explanations/architecture/key-concepts.md
+++ b/docs/explanations/architecture/key-concepts.md
@@ -26,11 +26,13 @@ Blocks can be static or dynamic. Static blocks contain rendered content and an o
 
 Each block contains Attributes or configuration settings, which can be sourced from raw HTML in the content via meta or other customizable origins.
 
-### Transformations
+More on [Data format and data flow](/docs/explanations/architecture/data-flow.md).
 
-Blocks have the ability to be transformed into other block types. This allows basic operations like converting a paragraph into a heading, but also more intricate ones like multiple images becoming a gallery. Transformations work for single blocks and for multi-block selections. Internal block variations are also possible transformation targets.
+### Block Transforms
 
-### Variations
+Blocks have the ability to be transformed into other block types. This allows basic operations like converting a paragraph into a heading, but also more intricate ones like multiple images becoming a gallery. Block transforms work for single blocks and for multi-block selections. Internal block variations are also possible transformation targets.
+
+### Block Variations
 
 Given a block type, a block variation is a predefined set of its initial attributes. This API allows creating a single block from which multiple configurations are possible. Variations provide different possible interfaces, including showing up as entirely new blocks in the library, or as presets when inserting a new block. Read [the API documentation](/docs/reference-guides/block-api/block-registration.md#variations-optional) for more details.
 
@@ -41,24 +43,28 @@ Given a block type, a block variation is a predefined set of its initial attribu
 
 ## Reusable Blocks
 
-A reusable blocks is a block (or multiple blocks) that can be inserted and edited globally at once. If a reusable block is edited in one place, those changes are reflected across all posts and pages that block is used. Examples of reusable blocks include a block consisting of a heading whose content and a custom color that would be appear on multiple pages of the site and sidebar widgets that would appear on every page.
+A reusable blocks is **an instance** of a block (or multiple blocks) that can be inserted and edited in multiples places, remaining in sync everywhere. If a reusable block is edited in one place, those changes are reflected across all posts and pages that block is used. Examples of reusable blocks include a block consisting of a heading whose content and a custom color that would be appear on multiple pages of the site and sidebar widgets that would appear on every page.
 
 Any edits to a reusable block will appear on every other use of that block, saving time from having to make the same edit on different posts.
 
-In technical details, reusable blocks are stored as a hidden post type (`wp_block`) and are dynamic blocks that "ref" or reference the `post_id` and return the `post_content` for that block.
+Internally, reusable blocks are stored as a hidden post type (`wp_block`) and are dynamic blocks that "ref" or reference the `post_id` and return the `post_content` for that block.
 
 ## Patterns
 
-A [block pattern](/docs/reference-guides/block-api/block-patterns.md) is a group of blocks that have been combined together creating a design pattern. These design patterns provide a starting point for building more advanced pages and layouts quickly. A block pattern can be as small as a single block or as large as a full page of content. Unlike reusable blocks, once a pattern is inserted it doesn't remain in sync with the original content as the blocks contained are meant to be edited and customized by the user. Underneath the surface, patterns are just regular blocks composed together. Themes can register patterns to offer users quick starting points with a design language familiar to that theme's aesthetics.
+A [block pattern](/docs/reference-guides/block-api/block-patterns.md) is a group of blocks that have been combined together creating a design pattern. These design patterns provide a starting point for building more advanced pages and layouts quickly, instead of inserting individual blocks. A block pattern can be as small as a single block or as large as a full page of content. Unlike reusable blocks, once a pattern is inserted it doesn't remain in sync with the original content as the blocks contained are meant to be edited and customized by the user. Underneath the surface, patterns are just regular blocks composed together. Themes can register patterns to offer users quick starting points with a design language familiar to that theme's aesthetics.
+
+## Templates
 
-## Templates (in progress)
+While the post editor concentrates on the content of a post, the [template](/docs/reference-guides/block-api/block-templates.md) editor allows declaring and editing an entire site using blocks, from header to footer. Templates are broken down between templates (that describe a full page) and template parts (that describe reusable areas within a template, including semantic areas like header, sidebar, and footer).
 
-While the post editor concentrates on the content of a post, the [template](/docs/reference-guides/block-api/block-templates.md) editor allows declaring and editing an entire site using blocks, from header to footer. To support these efforts there's a collection of blocks that interact with different parts of a site (like the site title, description, logo, navigation, etc) as well as semantic areas like header, sidebar, and footer. Templates are broken down between templates (that describe a full page) and template parts (that describe reusable areas within a template). These templates and template parts can be composed together and registered by a theme. They are also entirely editable by users using the block editor. Customized templates are saved in a `wp_template` post type. Block templates include both static pages and dynamic ones, like archives, singular, home, 404, etc.
+These templates and template parts can be composed together and registered by a theme. They are also entirely editable by users using the block editor; a collection of blocks that interact with different properties and settings of the site (like the site title, description, logo, navigation, etc) are especially useful when editing templates and template parts. Customized templates are saved in a `wp_template` post type. Block templates include both static pages and dynamic ones, like archives, singular, home, 404, etc.
 
 Note: custom post types can also be initialized with a starting `post_content` template that should not be confused with the theme template system described above.
 
-## Global Styles
+More on [Site editing templates](/docs/explanations/architecture/full-site-editing-templates.md).
+
+## Styles
 
-Global Styles is both an interface (which users access through the site editor) and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/theme-json.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
+Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/theme-json.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
 
 Learn more about [Global Styles](/docs/explanations/architecture/styles.md#global-styles).
diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md
index 416eef796bec8f..a1ed2c33054bc9 100644
--- a/docs/explanations/architecture/styles.md
+++ b/docs/explanations/architecture/styles.md
@@ -1,23 +1,28 @@
-## Styles in the block editor
+## Styles in the editor
 
 This document introduces the main concepts related to styles that affect the user content in the block editor. It points to the relevant reference guides and tutorials for readers to dig deeper into each one of the ideas presented. It's aimed to block authors and people working in the block editor project.
 
 1. [HTML and CSS](#html-and-css)
 2. [Block styles](#block-styles)
-  - [From UI controls to HTML markup](#from-ui-controls-to-html-markup)
-  - [Block Supports API](#block-supports-api)
-  - [Current limitations of the Block Supports API](#current-limitations-of-the-block-supports-api)
+
+-   [From UI controls to HTML markup](#from-ui-controls-to-html-markup)
+-   [Block Supports API](#block-supports-api)
+-   [Current limitations of the Block Supports API](#current-limitations-of-the-block-supports-api)
+
 3. [Global styles](#global-styles)
-  - [Gather data](#gather-data)
-  - [Consolidate data](#consolidate-data)
-  - [From data to styles](#from-data-to-styles)
-  - [Current limitations of the Global Styles API](#current-limitations-of-the-global-styles-api)
+
+-   [Gather data](#gather-data)
+-   [Consolidate data](#consolidate-data)
+-   [From data to styles](#from-data-to-styles)
+-   [Current limitations of the Global Styles API](#current-limitations-of-the-global-styles-api)
+
 4. [Layout styles](#layout-styles)
-  - [Base layout styles](#base-layout-styles)
-  - [Individual layout styles](#individual-layout-styles)
-  - [Available layout types](#available-layout-types)
-  - [Targeting layout or container blocks from themes](#targeting-layout-or-container-blocks-from-themes)
-  - [Opting out of generated layout styles](#opting-out-of-generated-layout-styles)
+
+-   [Base layout styles](#base-layout-styles)
+-   [Individual layout styles](#individual-layout-styles)
+-   [Available layout types](#available-layout-types)
+-   [Targeting layout or container blocks from themes](#targeting-layout-or-container-blocks-from-themes)
+-   [Opting out of generated layout styles](#opting-out-of-generated-layout-styles)
 
 ### HTML and CSS
 
@@ -524,16 +529,16 @@ Common layout definitions are stored in [the core `theme.json` file](https://git
 
 When a block that opts in to the experimental layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php):
 
-- Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification.
-- Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/).
+-   Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification.
+-   Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/).
 
 #### Available layout types
 
 There are currently three layout types in use:
 
-* Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins.
-* Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
-* Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
+-   Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins.
+-   Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
+-   Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
 
 For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it).
 
@@ -551,17 +556,17 @@ Work is currently underway to expand stable semantic classnames in Layout block
 
 The current semantic class names that can be output by the Layout block support are:
 
-* `is-layout-flow`: Blocks that use the Default/Flow layout type.
-* `is-layout-constrained`: Blocks that use the Constrained layout type.
-* `is-layout-flex`: Blocks that use the Flex layout type.
-* `wp-container-$id`: Where `$id` is a semi-random number. A container class that only exists when the block contains non-default Layout values. This class should not be used directly for any CSS targeting as it may or may not be present.
-* `is-horizontal`: When a block explicitly sets `orientation` to `horizontal`.
-* `is-vertical`: When a block explicitly sets `orientation` to `vertical`.
-* `is-content-justification-left`: When a block explicitly sets `justifyContent` to `left`.
-* `is-content-justification-center`: When a block explicitly sets `justifyContent` to `center`.
-* `is-content-justification-right`: When a block explicitly sets `justifyContent` to `right`.
-* `is-content-justification-space-between`: When a block explicitly sets `justifyContent` to `space-between`.
-* `is-nowrap`: When a block explicitly sets `flexWrap` to `nowrap`.
+-   `is-layout-flow`: Blocks that use the Default/Flow layout type.
+-   `is-layout-constrained`: Blocks that use the Constrained layout type.
+-   `is-layout-flex`: Blocks that use the Flex layout type.
+-   `wp-container-$id`: Where `$id` is a semi-random number. A container class that only exists when the block contains non-default Layout values. This class should not be used directly for any CSS targeting as it may or may not be present.
+-   `is-horizontal`: When a block explicitly sets `orientation` to `horizontal`.
+-   `is-vertical`: When a block explicitly sets `orientation` to `vertical`.
+-   `is-content-justification-left`: When a block explicitly sets `justifyContent` to `left`.
+-   `is-content-justification-center`: When a block explicitly sets `justifyContent` to `center`.
+-   `is-content-justification-right`: When a block explicitly sets `justifyContent` to `right`.
+-   `is-content-justification-space-between`: When a block explicitly sets `justifyContent` to `space-between`.
+-   `is-nowrap`: When a block explicitly sets `flexWrap` to `nowrap`.
 
 #### Opting out of generated layout styles
 
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 2aa91cd1a067e9..282578fbb66dce 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
@@ -247,7 +247,7 @@ Voila! We can now filter the results:
 Let’s take a pause for a moment to consider the downsides of an alternative approach we could have taken - working with the API directly. Imagine we sent the API requests directly:
 
 ```js
-import { apiFetch } from '@wordpress/api-fetch';
+import apiFetch from '@wordpress/api-fetch';
 function MyFirstApp() {
 	// ...
 	const [pages, setPages] = useState( [] );
diff --git a/docs/how-to-guides/javascript/versions-and-building.md b/docs/how-to-guides/javascript/versions-and-building.md
index 257b73c6866f16..ec9f98368ff024 100644
--- a/docs/how-to-guides/javascript/versions-and-building.md
+++ b/docs/how-to-guides/javascript/versions-and-building.md
@@ -4,8 +4,7 @@ The Block Editor Handbook shows JavaScript examples in two syntaxes: JSX and Pla
 
 Plain refers to JavaScript code compatible with WordPress's minimum [target for browser support](https://make.wordpress.org/core/handbook/best-practices/browser-support/) without requiring a transpilation step. This step is commonly referred to as a build process.
 
-"JSX" doesn't refer to a specific version of JavaScript, but refers to the latest language definition plus
-[JSX syntax](https://reactjs.org/docs/introducing-jsx.html), a syntax that blends HTML and JavaScript. JSX makes it easier to read and write markup code, but does require a build step to transpile into code compatible with browsers. Webpack and babel are the tools that perform this transpilation step.
+"JSX" doesn't refer to a specific version of JavaScript, but refers to the latest language definition plus [JSX syntax](https://reactjs.org/docs/introducing-jsx.html), a syntax that blends HTML and JavaScript. JSX makes it easier to read and write markup code, but does require a build step to transpile into code compatible with browsers. Webpack and babel are the tools that perform this transpilation step.
 
 For simplicity, the JavaScript tutorial uses the Plain definition, without JSX. This code can run straight in your browser and does not require an additional build step. In many cases, it is perfectly fine to follow the same approach for simple plugins or experimenting. As your codebase grows in complexity it might be a good idea to switch to JSX. You will find the majority of code and documentation across the block editor uses JSX.
 
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 8833b02d3b1244..efd4820b1adf55 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -1067,7 +1067,7 @@ h3 {
 
 ##### Element pseudo selectors
 
-Pseudo selectors `:hover`, `:focus`, `:visited` are supported by Gutenberg.
+Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link` are supported by Gutenberg.
 
 ```json
 "elements": {
diff --git a/docs/manifest.json b/docs/manifest.json
index 65e3244c544b49..b1dfb002ac3141 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -2028,7 +2028,7 @@
 		"parent": "architecture"
 	},
 	{
-		"title": "Full Site Editing Templates",
+		"title": "Site Editing Templates",
 		"slug": "full-site-editing-templates",
 		"markdown_source": "../docs/explanations/architecture/full-site-editing-templates.md",
 		"parent": "architecture"
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index d78050d79a9a1e..63219182dd1c2c 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -28,6 +28,9 @@ Starting in WordPress 5.8 release, we encourage using the `block.json` metadata
 		"my-plugin/message": "message"
 	},
 	"usesContext": [ "groupId" ],
+	"selectors": {
+		"root": ".wp-block-my-plugin-notice"
+	},
 	"supports": {
 		"align": true
 	},
@@ -379,6 +382,39 @@ See [the block context documentation](/docs/reference-guides/block-api/block-con
 }
 ```
 
+### Selectors
+
+-   Type: `object`
+-   Optional
+-   Localized: No
+-   Property: `selectors`
+-   Default: `{}`
+-   Since: `WordPress 6.3.0`
+
+Any custom CSS selectors, keyed by `root`, feature, or sub-feature, to be used
+when generating block styles for theme.json (global styles) stylesheets.
+Providing custom selectors allows more fine grained control over which styles
+apply to what block elements, e.g. applying typography styles only to an inner
+heading while colors are still applied on the outer block wrapper etc.
+
+
+See the [the selectors documentation](/docs/reference-guides/block-api/block-selectors.md) for more details.
+
+```json
+{
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": {
+			"text": ".my-custom-block-selector p"
+		},
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
 ### Supports
 
 -   Type: `object`
diff --git a/docs/reference-guides/block-api/block-selectors.md b/docs/reference-guides/block-api/block-selectors.md
new file mode 100644
index 00000000000000..9ce605782c628e
--- /dev/null
+++ b/docs/reference-guides/block-api/block-selectors.md
@@ -0,0 +1,116 @@
+# Selectors
+
+Block Selectors is the API that allows blocks to customize the CSS selector used
+when their styles are generated.
+
+A block may customize its CSS selectors at three levels: root, feature, and
+subfeature.
+
+## Root Selector
+
+The root selector is the block's primary CSS selector.
+
+All blocks require a primary CSS selector for their style declarations to be
+included under. If one is not provided through the Block Selectors API, a
+default is generated in the form of `.wp-block-<name>`.
+
+### Example
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector"
+	}
+}
+```
+
+## Feature Selectors
+
+Feature selectors relate to styles for a block support, e.g. border, color,
+typography, etc.
+
+A block may wish to apply the styles for specific features to different
+elements within a block. An example might be using colors on the block's wrapper
+but applying the typography styles to an inner heading only.
+
+### Example
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": ".my-custom-block-selector",
+		"typography": ".my-custom-block-selector > h2"
+	}
+}
+```
+
+## Subfeature Selectors
+
+These selectors relate to individual styles provided by a block support e.g.
+`background-color`
+
+A subfeature can have styles generated under its own unique selector. This is
+especially useful where one block support subfeature can't be applied to the
+same element as the support's other subfeatures.
+
+A great example of this is `text-decoration`. Web browsers render this style
+differently, making it difficult to override if added to a wrapper element. By
+assigning `text-decoration` a custom selector, its style can target only the
+elements to which it should be applied.
+
+### Example
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": ".my-custom-block-selector",
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
+## Shorthand
+
+Rather than specify a CSS selector for every subfeature, you can set a single
+selector as a string value for the relevant feature. This is the approach
+demonstrated for the `color` feature in the earlier examples above.
+
+## Fallbacks
+
+A selector that hasn't been configured for a specific feature will fall back to
+the block's root selector. Similarly, if a subfeature hasn't had a custom
+selector set, it will fall back to its parent feature's selector and, if unavailable, fall back further to the block's root selector.
+
+Rather than repeating selectors for multiple subfeatures, you can set the
+common selector as the parent feature's `root` selector and only define the
+unique selectors for the subfeatures that differ.
+
+### Example
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": {
+			"text": ".my-custom-block-selector p"
+		},
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
+The `color.background-color` subfeature isn't explicitly set in the above
+example. As the `color` feature also doesn't define a `root` selector,
+`color.background-color` would be included under the block's primary root
+selector, `.my-custom-block-selector`.
+
+For a subfeature such as `typography.font-size`, it would fallback to its parent
+feature's selector given that is present, i.e. `.my-custom-block-selector > h2`.
\ No newline at end of file
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 1dee5a7509d7b1..e5b524c6850860 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -59,7 +59,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 
 -	**Name:** core/buttons
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
+-	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** 
 
 ## Calendar
@@ -105,7 +105,7 @@ Display content in multiple columns, with blocks added to each column. ([Source]
 -	**Name:** core/columns
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isStackedOnMobile, verticalAlignment
+-	**Attributes:** isStackedOnMobile, templateLock, verticalAlignment
 
 ## Comment Author Avatar (deprecated)
 
@@ -572,7 +572,7 @@ Contains the block elements used to render a post, like the title, date, feature
 
 -	**Name:** core/post-template
 -	**Category:** theme
--	**Supports:** align, anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Post Terms
@@ -590,7 +590,7 @@ Show minutes required to finish reading the post. ([Source](https://github.com/W
 
 -	**Name:** core/post-time-to-read
 -	**Category:** theme
--	**Supports:** ~~html~~, ~~multiple~~
+-	**Supports:** spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Post Title
@@ -689,7 +689,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
+-	**Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** align, citation, value
 
 ## Read More
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index c7bb892103e004..2342fc0656221f 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -60,6 +60,7 @@ Settings related to shadows.
 
 | Property  | Type   | Default | Props  |
 | ---       | ---    | ---    |---   |
+| defaultPresets | boolean | true |  |
 | presets | array |  | name, shadow, slug |
 
 ---
diff --git a/gutenberg.php b/gutenberg.php
index ce3d4b810f83a5..9b5fbc800dd639 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.0
  * Requires PHP: 5.6
- * Version: 15.4.0-rc.1
+ * Version: 15.5.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
index ef950f80ce9448..1884283c3b150a 100644
--- a/lib/block-supports/duotone.php
+++ b/lib/block-supports/duotone.php
@@ -426,128 +426,12 @@ function gutenberg_register_duotone_support( $block_type ) {
  *
  * @param  string $block_content Rendered block content.
  * @param  array  $block         Block object.
+ * @deprecated    6.3.0          Use WP_Duotone_Gutenberg::render_duotone_support() instead.
  * @return string                Filtered block content.
  */
 function gutenberg_render_duotone_support( $block_content, $block ) {
-	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-
-	$duotone_support = false;
-	if ( $block_type && property_exists( $block_type, 'supports' ) ) {
-		$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
-	}
-
-	$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
-
-	if (
-		! $duotone_support ||
-		! $has_duotone_attribute
-	) {
-		return $block_content;
-	}
-
-	// Possible values for duotone attribute:
-	// 1. Array of colors - e.g. array('#000000', '#ffffff').
-	// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue'.
-	// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
-	$duotone_attr = $block['attrs']['style']['color']['duotone'];
-
-	$is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0;
-	$is_css    = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false;
-	$is_custom = is_array( $duotone_attr );
-
-	// Generate the pieces needed for rendering a duotone to the page.
-	if ( $is_preset ) {
-		// Extract the slug from the preset variable string.
-		$slug = str_replace( 'var:preset|duotone|', '', $duotone_attr );
-
-		// Utilize existing preset CSS custom property.
-		$filter_property = "var(--wp--preset--duotone--$slug)";
-	} elseif ( $is_css ) {
-		// Build a unique slug for the filter based on the CSS value.
-		$slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) );
-
-		// Pass through the CSS value.
-		$filter_property = $duotone_attr;
-	} elseif ( $is_custom ) {
-		// Build a unique slug for the filter based on the array of colors.
-		$slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) );
-
-		// This has the same shape as a preset, so it can be used in place of a
-		// preset when getting the filter property and SVG filter.
-		$filter_data = array(
-			'slug'   => $slug,
-			'colors' => $duotone_attr,
-		);
-
-		// Build a customized CSS filter property for unique slug.
-		$filter_property = gutenberg_get_duotone_filter_property( $filter_data );
-
-		// SVG will be output on the page later.
-		$filter_svg = gutenberg_get_duotone_filter_svg( $filter_data );
-	}
-
-	// - Applied as a class attribute to the block wrapper.
-	// - Used as a selector to apply the filter to the block.
-	$filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) );
-
-	// Build the CSS selectors to which the filter will be applied.
-	$selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support );
-
-	// Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that
-	// the styles are rendered in an inline for block supports because we're
-	// using the `context` option to instruct it so.
-	gutenberg_style_engine_get_stylesheet_from_css_rules(
-		array(
-			array(
-				'selector'     => $selector,
-				'declarations' => array(
-					// !important is needed because these styles
-					// render before global styles,
-					// and they should be overriding the duotone
-					// filters set by global styles.
-					'filter' => $filter_property . ' !important',
-				),
-			),
-		),
-		array(
-			'context' => 'block-supports',
-		)
-	);
-
-	// If we needed to generate an SVG, output it on the page.
-	if ( isset( $filter_svg ) ) {
-		add_action(
-			'wp_footer',
-			static function () use ( $filter_svg, $selector ) {
-				echo $filter_svg;
-
-				/*
-				 * Safari renders elements incorrectly on first paint when the
-				 * SVG filter comes after the content that it is filtering, so
-				 * we force a repaint with a WebKit hack which solves the issue.
-				 */
-				global $is_safari;
-				if ( $is_safari ) {
-					/*
-					 * Simply accessing el.offsetHeight flushes layout and style
-					 * changes in WebKit without having to wait for setTimeout.
-					 */
-					printf(
-						'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
-						wp_json_encode( $selector )
-					);
-				}
-			}
-		);
-	}
-
-	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
-	return preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $filter_id . ' ',
-		$block_content,
-		1
-	);
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::render_duotone_support' );
+	return WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block );
 }
 
 // Register the block support.
@@ -558,6 +442,11 @@ static function () use ( $filter_svg, $selector ) {
 	)
 );
 
+add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_styles_presets' ), 10 );
+add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_style_block_names' ), 10 );
 // Remove WordPress core filter to avoid rendering duplicate support elements.
 remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
-add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );
+add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 );
+add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 );
+add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 );
+add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 );
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 5391478010964a..d4502aaa2e4785 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -39,13 +39,18 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 		$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
 	}
 
+	$hover_link_color = null;
+	if ( ! empty( $block['attrs'] ) ) {
+		$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
+	}
+
 	/*
-	* For now we only care about link color.
+	* For now we only care about link colors.
 	* This code in the future when we have a public API
 	* should take advantage of WP_Theme_JSON_Gutenberg::compute_style_properties
 	* and work for any element and style.
 	*/
-	if ( null === $link_color ) {
+	if ( null === $link_color && null === $hover_link_color ) {
 		return $block_content;
 	}
 
@@ -94,6 +99,16 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 		)
 	);
 
+	if ( isset( $link_block_styles[':hover'] ) ) {
+		gutenberg_style_engine_get_styles(
+			$link_block_styles[':hover'],
+			array(
+				'selector' => ".$class_name a:hover",
+				'context'  => 'block-supports',
+			)
+		);
+	}
+
 	return null;
 }
 
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 70029166ce658c..33f616ac7ee8d2 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -280,6 +280,37 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				);
 			}
 		}
+	} elseif ( 'grid' === $layout_type ) {
+		$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
+
+		$layout_styles[] = array(
+			'selector'     => $selector,
+			'declarations' => array( 'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))' ),
+		);
+
+		if ( $has_block_gap_support && isset( $gap_value ) ) {
+			$combined_gap_value = '';
+			$gap_sides          = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
+
+			foreach ( $gap_sides as $gap_side ) {
+				$process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
+				// Get spacing CSS variable from preset value if provided.
+				if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
+					$index_to_splice = strrpos( $process_value, '|' ) + 1;
+					$slug            = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
+					$process_value   = "var(--wp--preset--spacing--$slug)";
+				}
+				$combined_gap_value .= "$process_value ";
+			}
+			$gap_value = trim( $combined_gap_value );
+
+			if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
+				$layout_styles[] = array(
+					'selector'     => $selector,
+					'declarations' => array( 'gap' => $gap_value ),
+				);
+			}
+		}
 	}
 
 	if ( ! empty( $layout_styles ) ) {
@@ -549,7 +580,7 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
 	if (
 		wp_theme_has_theme_json() ||
 		1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
-		( isset( $block['attrs']['layout']['type'] ) && 'flex' === $block['attrs']['layout']['type'] )
+		( isset( $block['attrs']['layout']['type'] ) && ( 'flex' === $block['attrs']['layout']['type'] || 'grid' === $block['attrs']['layout']['type'] ) )
 	) {
 		return $block_content;
 	}
diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
new file mode 100644
index 00000000000000..ff963f46cb4555
--- /dev/null
+++ b/lib/class-wp-duotone-gutenberg.php
@@ -0,0 +1,389 @@
+<?php
+/**
+ * WP_Duotone_Gutenberg class
+ *
+ * @package gutenberg
+ * @since 6.3.0
+ */
+
+/**
+ * Manages which duotone filters need to be output on the page.
+ *
+ * @access public
+ */
+class WP_Duotone_Gutenberg {
+	/**
+	 * An array of Duotone presets from global, theme, and custom styles.
+	 *
+	 * Example:
+	 * [
+	 *      'blue-orange' =>
+	 *          [
+	 *              'slug'  => 'blue-orange',
+	 *              'colors' => [ '#0000ff', '#ffcc00' ],
+	 *          ]
+	 *      ],
+	 *      …
+	 * ]
+	 *
+	 * @since 6.3.0
+	 * @var array
+	 */
+	private static $global_styles_presets = array();
+
+	/**
+	 * An array of block names from global, theme, and custom styles that have duotone presets. We'll use this to quickly
+	 * check if a block being rendered needs to have duotone applied, and which duotone preset to use.
+	 *
+	 * Example:
+	 *  [
+	 *      'core/featured-image' => 'blue-orange',
+	 *       …
+	 *  ]
+	 *
+	 * @since 6.3.0
+	 * @var array
+	 */
+	private static $global_styles_block_names = array();
+
+	/**
+	 * An array of Duotone SVG and CSS output needed for the frontend duotone rendering based on what is
+	 * being output on the page. Organized by a slug of the preset/color group and the information needed
+	 * to generate the SVG and CSS at render.
+	 *
+	 * Example:
+	 *  [
+	 *      'blue-orange' => [
+	 *          'slug'  => 'blue-orange',
+	 *          'colors' => [ '#0000ff', '#ffcc00' ],
+	 *      ],
+	 *      'wp-duotone-000000-ffffff-2' => [
+	 *          'slug' => 'wp-duotone-000000-ffffff-2',
+	 *          'colors' => [ '#000000', '#ffffff' ],
+	 *      ],
+	 * ]
+	 *
+	 * @since 6.3.0
+	 * @var array
+	 */
+	private static $output = array();
+
+	/**
+	 * Prefix used for generating and referencing duotone CSS custom properties.
+	 */
+	const CSS_VAR_PREFIX = '--wp--preset--duotone--';
+
+	/**
+	 * Get all possible duotone presets from global and theme styles and store as slug => [ colors array ]
+	 * We only want to process this one time. On block render we'll access and output only the needed presets for that page.
+	 */
+	public static function set_global_styles_presets() {
+		// Get the per block settings from the theme.json.
+		$tree              = gutenberg_get_global_settings();
+		$presets_by_origin = _wp_array_get( $tree, array( 'color', 'duotone' ), array() );
+
+		foreach ( $presets_by_origin as $presets ) {
+			foreach ( $presets as $preset ) {
+				self::$global_styles_presets[ _wp_to_kebab_case( $preset['slug'] ) ] = array(
+					'slug'   => $preset['slug'],
+					'colors' => $preset['colors'],
+				);
+			}
+		}
+	}
+
+	/**
+	 * Scrape all block names from global styles and store in self::$global_styles_block_names
+	 */
+	public static function set_global_style_block_names() {
+		// Get the per block settings from the theme.json.
+		$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+		$block_nodes = $tree->get_styles_block_nodes();
+		$theme_json  = $tree->get_raw_data();
+
+		foreach ( $block_nodes as $block_node ) {
+			// This block definition doesn't include any duotone settings. Skip it.
+			if ( empty( $block_node['duotone'] ) ) {
+				continue;
+			}
+
+			// Value looks like this: 'var(--wp--preset--duotone--blue-orange)' or 'var:preset|duotone|default-filter'.
+			$duotone_attr_path = array_merge( $block_node['path'], array( 'filter', 'duotone' ) );
+			$duotone_attr      = _wp_array_get( $theme_json, $duotone_attr_path, array() );
+
+			if ( empty( $duotone_attr ) ) {
+				continue;
+			}
+			// If it has a duotone filter preset, save the block name and the preset slug.
+			$slug = self::gutenberg_get_slug_from_attr( $duotone_attr );
+
+			if ( $slug && $slug !== $duotone_attr ) {
+				self::$global_styles_block_names[ $block_node['name'] ] = $slug;
+			}
+		}
+	}
+
+	/**
+	 * Take the inline CSS duotone variable from a block and return the slug. Handles styles slugs like:
+	 * var:preset|duotone|default-filter
+	 * var(--wp--preset--duotone--blue-orange)
+	 *
+	 * @param string $duotone_attr The duotone attribute from a block.
+	 * @return string The slug of the duotone preset or an empty string if no slug is found.
+	 */
+	private static function gutenberg_get_slug_from_attr( $duotone_attr ) {
+		// Uses Branch Reset Groups `(?|…)` to return one capture group.
+		preg_match( '/(?|var:preset\|duotone\|(\S+)|var\(--wp--preset--duotone--(\S+)\))/', $duotone_attr, $matches );
+
+		return ! empty( $matches[1] ) ? $matches[1] : '';
+	}
+
+	/**
+	 * Check if we have a valid duotone preset.
+	 *
+	 * @param string $duotone_attr The duotone attribute from a block.
+	 * @return bool True if the duotone preset present and valid.
+	 */
+	private static function is_preset( $duotone_attr ) {
+		$slug = self::gutenberg_get_slug_from_attr( $duotone_attr );
+
+		return array_key_exists( $slug, self::$global_styles_presets );
+	}
+
+	/**
+	 * Get the CSS variable name for a duotone preset.
+	 *
+	 * @param string $slug The slug of the duotone preset.
+	 * @return string The CSS variable name.
+	 */
+	private static function get_css_custom_property_name( $slug ) {
+		return self::CSS_VAR_PREFIX . $slug;
+	}
+
+	/**
+	 * Get the CSS variable for a duotone preset.
+	 *
+	 * @param string $slug The slug of the duotone preset.
+	 * @return string The CSS variable.
+	 */
+	private static function get_css_var( $slug ) {
+		return 'var(' . self::get_css_custom_property_name( $slug ) . ')';
+	}
+
+	/**
+	 * Get the CSS declaration for a duotone preset.
+	 * Example: --wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');
+	 *
+	 * @param array $filter_data The duotone data for presets and custom filters.
+	 * @return string The CSS declaration.
+	 */
+	private static function get_css_custom_property_declaration( $filter_data ) {
+		$declaration_value                = gutenberg_get_duotone_filter_property( $filter_data );
+		$duotone_preset_css_property_name = self::get_css_custom_property_name( $filter_data['slug'] );
+		return $duotone_preset_css_property_name . ': ' . $declaration_value . ';';
+	}
+
+	/**
+	 * Outputs all necessary SVG for duotone filters, CSS for classic themes.
+	 */
+	public static function output_footer_assets() {
+		foreach ( self::$output as $filter_data ) {
+
+			// SVG will be output on the page later.
+			$filter_svg = gutenberg_get_duotone_filter_svg( $filter_data );
+
+			echo $filter_svg;
+
+			// This is for classic themes - in block themes, the CSS is added in the head via wp_add_inline_style in the wp_enqueue_scripts action.
+			if ( ! wp_is_block_theme() ) {
+				wp_add_inline_style( 'core-block-supports', 'body{' . self::get_css_custom_property_declaration( $filter_data ) . '}' );
+			}
+		}
+	}
+
+	/**
+	 * Adds the duotone SVGs and CSS custom properties to the editor settings so
+	 * they can be pulled in by the EditorStyles component in JS and rendered in
+	 * the post editor.
+	 *
+	 * @param array $settings The block editor settings from the `block_editor_settings_all` filter.
+	 * @return array The editor settings with duotone SVGs and CSS custom properties.
+	 */
+	public static function add_editor_settings( $settings ) {
+		$duotone_svgs = '';
+		$duotone_css  = 'body{';
+		foreach ( self::$global_styles_presets as $filter_data ) {
+			$duotone_svgs .= gutenberg_get_duotone_filter_svg( $filter_data );
+			$duotone_css  .= self::get_css_custom_property_declaration( $filter_data );
+		}
+		$duotone_css .= '}';
+
+		if ( ! isset( $settings['styles'] ) ) {
+			$settings['styles'] = array();
+		}
+
+		$settings['styles'][] = array(
+			'assets'         => $duotone_svgs,
+			// The 'svgs' type is new in 6.3 and requires the corresponding JS changes in the EditorStyles component to work.
+			'__unstableType' => 'svgs',
+			'isGlobalStyles' => false,
+		);
+
+		$settings['styles'][] = array(
+			'css'            => $duotone_css,
+			// This must be set and must be something other than 'theme' or they will be stripped out in the post editor <Editor> component.
+			'__unstableType' => 'presets',
+			// These styles are no longer generated by global styles, so this must be false or they will be stripped out in gutenberg_get_block_editor_settings.
+			'isGlobalStyles' => false,
+		);
+
+		return $settings;
+	}
+
+	/**
+	 * Appends the used global style duotone filter CSS Vars to the inline global styles CSS
+	 */
+	public static function output_global_styles() {
+
+		if ( empty( self::$output ) ) {
+			return;
+		}
+
+		$duotone_css_vars = '';
+
+		foreach ( self::$output as $filter_data ) {
+			if ( ! array_key_exists( $filter_data['slug'], self::$global_styles_presets ) ) {
+				continue;
+			}
+
+			$duotone_css_vars .= self::get_css_custom_property_declaration( $filter_data );
+		}
+
+		if ( ! empty( $duotone_css_vars ) ) {
+			wp_add_inline_style( 'global-styles', 'body{' . $duotone_css_vars . '}' );
+		}
+	}
+
+	/**
+	 * Render out the duotone CSS styles and SVG.
+	 *
+	 * @param  string $block_content Rendered block content.
+	 * @param  array  $block         Block object.
+	 * @return string                Filtered block content.
+	 */
+	public static function render_duotone_support( $block_content, $block ) {
+		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+
+		$duotone_support  = false;
+		$duotone_selector = null;
+		if ( $block_type ) {
+			$duotone_selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
+			$duotone_support  = (bool) $duotone_selector;
+		}
+
+		// The block should have a duotone attribute or have duotone defined in its theme.json to be processed.
+		$has_duotone_attribute     = isset( $block['attrs']['style']['color']['duotone'] );
+		$has_global_styles_duotone = array_key_exists( $block['blockName'], self::$global_styles_block_names );
+
+		if (
+			empty( $block_content ) ||
+			! $duotone_support ||
+			( ! $has_duotone_attribute && ! $has_global_styles_duotone )
+		) {
+			return $block_content;
+		}
+
+		// Generate the pieces needed for rendering a duotone to the page.
+		if ( $has_duotone_attribute ) {
+
+			// Possible values for duotone attribute:
+			// 1. Array of colors - e.g. array('#000000', '#ffffff').
+			// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''
+			// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
+
+			$duotone_attr = $block['attrs']['style']['color']['duotone'];
+			$is_preset    = is_string( $duotone_attr ) && self::is_preset( $duotone_attr );
+			$is_css       = is_string( $duotone_attr ) && ! $is_preset;
+			$is_custom    = is_array( $duotone_attr );
+
+			if ( $is_preset ) {
+
+				// Extract the slug from the preset variable string.
+				$slug = self::gutenberg_get_slug_from_attr( $duotone_attr );
+
+				// Utilize existing preset CSS custom property.
+				$declaration_value = self::get_css_var( $slug );
+
+				self::$output[ $slug ] = self::$global_styles_presets[ $slug ];
+
+			} elseif ( $is_css ) {
+				// Build a unique slug for the filter based on the CSS value.
+				$slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) );
+
+				// Pass through the CSS value.
+				$declaration_value = $duotone_attr;
+			} elseif ( $is_custom ) {
+				// Build a unique slug for the filter based on the array of colors.
+				$slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) );
+
+				$filter_data = array(
+					'slug'   => $slug,
+					'colors' => $duotone_attr,
+				);
+				// Build a customized CSS filter property for unique slug.
+				$declaration_value = gutenberg_get_duotone_filter_property( $filter_data );
+
+				self::$output[ $slug ] = $filter_data;
+			}
+		} elseif ( $has_global_styles_duotone ) {
+			$slug = self::$global_styles_block_names[ $block['blockName'] ];
+
+			// Utilize existing preset CSS custom property.
+			$declaration_value = self::get_css_var( $slug );
+
+			self::$output[ $slug ] = self::$global_styles_presets[ $slug ];
+		}
+
+		// - Applied as a class attribute to the block wrapper.
+		// - Used as a selector to apply the filter to the block.
+		$filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) );
+
+		// Build the CSS selectors to which the filter will be applied.
+		$selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_selector );
+
+		// We only want to add the selector if we have it in the output already, essentially skipping 'unset'.
+		if ( array_key_exists( $slug, self::$output ) ) {
+			self::$output[ $slug ]['selector'] = $selector;
+		}
+
+		// Pass styles to the block-supports stylesheet via the style engine.
+		// This ensures that Duotone styles are included in a single stylesheet,
+		// avoiding multiple style tags or multiple stylesheets being output to
+		// the site frontend.
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			array(
+				array(
+					'selector'     => $selector,
+					'declarations' => array(
+						// !important is needed because these styles
+						// render before global styles,
+						// and they should be overriding the duotone
+						// filters set by global styles.
+						'filter' => $declaration_value . ' !important',
+					),
+				),
+			),
+			array(
+				'context' => 'block-supports',
+			)
+		);
+
+		// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
+		$tags = new WP_HTML_Tag_Processor( $block_content );
+		if ( $tags->next_tag() ) {
+			$tags->add_class( $filter_id );
+		}
+
+		return $tags->get_updated_html();
+	}
+}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 673e97d2b84e5c..c7e1307f4a0bf0 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -81,8 +81,8 @@ class WP_Theme_JSON_Gutenberg {
 	 * - prevent_override => Disables override of default presets by theme presets.
 	 *                       The relationship between whether to override the defaults
 	 *                       and whether the defaults are enabled is inverse:
-	 *                         - If defaults are enabled  => theme presets should not be overriden
-	 *                         - If defaults are disabled => theme presets should be overriden
+	 *                         - If defaults are enabled  => theme presets should not be overridden
+	 *                         - If defaults are disabled => theme presets should be overridden
 	 *                       For example, a theme sets defaultPalette to false,
 	 *                       making the default palette hidden from the user.
 	 *                       In that case, we want all the theme presets to be present,
@@ -144,8 +144,8 @@ class WP_Theme_JSON_Gutenberg {
 			'path'              => array( 'color', 'duotone' ),
 			'prevent_override'  => array( 'color', 'defaultDuotone' ),
 			'use_default_names' => false,
-			'value_func'        => 'gutenberg_get_duotone_filter_property',
-			'css_vars'          => '--wp--preset--duotone--$slug',
+			'value_func'        => null, // CSS Custom Properties for duotone are handled by block supports in class-wp-duotone-gutenberg.php.
+			'css_vars'          => null,
 			'classes'           => array(),
 			'properties'        => array( 'filter' ),
 		),
@@ -358,6 +358,9 @@ class WP_Theme_JSON_Gutenberg {
 			'duotone'          => null,
 			'gradients'        => null,
 			'link'             => null,
+			'heading'          => null,
+			'button'           => null,
+			'caption'          => null,
 			'palette'          => null,
 			'text'             => null,
 		),
@@ -559,6 +562,9 @@ public static function get_element_class_name( $element ) {
 		array( 'border', 'style' ),
 		array( 'border', 'width' ),
 		array( 'color', 'link' ),
+		array( 'color', 'heading' ),
+		array( 'color', 'button' ),
+		array( 'color', 'caption' ),
 		array( 'dimensions', 'minHeight' ),
 		// BEGIN EXPERIMENTAL.
 		// Allow `position.fixed` to be opted-in by default.
@@ -853,56 +859,22 @@ protected static function get_blocks_metadata() {
 		}
 
 		foreach ( $blocks as $block_name => $block_type ) {
-			if (
-				isset( $block_type->supports['__experimentalSelector'] ) &&
-				is_string( $block_type->supports['__experimentalSelector'] )
-			) {
-				static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
-			} else {
-				static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
-			}
+			$root_selector = wp_get_block_css_selector( $block_type );
 
-			if (
-				isset( $block_type->supports['color']['__experimentalDuotone'] ) &&
-				is_string( $block_type->supports['color']['__experimentalDuotone'] )
-			) {
-				static::$blocks_metadata[ $block_name ]['duotone'] = $block_type->supports['color']['__experimentalDuotone'];
-			}
+			static::$blocks_metadata[ $block_name ]['selector']  = $root_selector;
+			static::$blocks_metadata[ $block_name ]['selectors'] = static::get_block_selectors( $block_type, $root_selector );
 
-			// Generate block support feature level selectors if opted into
-			// for the current block.
-			$features = array();
-			foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
-				if (
-					isset( $block_type->supports[ $key ]['__experimentalSelector'] ) &&
-					$block_type->supports[ $key ]['__experimentalSelector']
-				) {
-					$features[ $feature ] = static::scope_selector(
-						static::$blocks_metadata[ $block_name ]['selector'],
-						$block_type->supports[ $key ]['__experimentalSelector']
-					);
-				}
+			$elements = static::get_block_element_selectors( $root_selector );
+			if ( ! empty( $elements ) ) {
+				static::$blocks_metadata[ $block_name ]['elements'] = $elements;
 			}
 
-			if ( ! empty( $features ) ) {
-				static::$blocks_metadata[ $block_name ]['features'] = $features;
+			// The block may or may not have a duotone selector.
+			$duotone_selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
+			if ( null !== $duotone_selector ) {
+				static::$blocks_metadata[ $block_name ]['duotone'] = $duotone_selector;
 			}
 
-			// Assign defaults, then overwrite those that the block sets by itself.
-			// If the block selector is compounded, will append the element to each
-			// individual block selector.
-			$block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
-			foreach ( static::ELEMENTS as $el_name => $el_selector ) {
-				$element_selector = array();
-				foreach ( $block_selectors as $selector ) {
-					if ( $selector === $el_selector ) {
-						$element_selector = array( $el_selector );
-						break;
-					}
-					$element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
-				}
-				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();
@@ -1342,7 +1314,7 @@ protected function get_layout_styles( $block_metadata ) {
 
 				if (
 					! empty( $class_name ) &&
-					! empty( $base_style_rules )
+					is_array( $base_style_rules )
 				) {
 					// Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
 					if (
@@ -2232,8 +2204,8 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 			}
 
 			$feature_selectors = null;
-			if ( isset( $selectors[ $name ]['features'] ) ) {
-				$feature_selectors = $selectors[ $name ]['features'];
+			if ( isset( $selectors[ $name ]['selectors'] ) ) {
+				$feature_selectors = $selectors[ $name ]['selectors'];
 			}
 
 			$variation_selectors = array();
@@ -2250,8 +2222,8 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 				'name'       => $name,
 				'path'       => array( 'styles', 'blocks', $name ),
 				'selector'   => $selector,
+				'selectors'  => $feature_selectors,
 				'duotone'    => $duotone_selector,
-				'features'   => $feature_selectors,
 				'variations' => $variation_selectors,
 			);
 
@@ -2297,90 +2269,39 @@ public function get_styles_for_block( $block_metadata ) {
 		$selector         = $block_metadata['selector'];
 		$settings         = _wp_array_get( $this->theme_json, array( 'settings' ) );
 
-		/*
-		 * Process style declarations for block support features the current
-		 * block contains selectors for. Values for a feature with a custom
-		 * selector are filtered from the theme.json node before it is
-		 * processed as normal.
-		*/
-		$feature_declarations = array();
-
-		if ( ! empty( $block_metadata['features'] ) ) {
-			foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
-				if ( ! empty( $node[ $feature_name ] ) ) {
-					// Create temporary node containing only the feature data
-					// to leverage existing `compute_style_properties` function.
-					$feature = array( $feature_name => $node[ $feature_name ] );
-					// Generate the feature's declarations only.
-					$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
-
-					// Merge new declarations with any that already exist for
-					// the feature selector. This may occur when multiple block
-					// support features use the same custom selector.
-					if ( isset( $feature_declarations[ $feature_selector ] ) ) {
-						foreach ( $new_feature_declarations as $new_feature_declaration ) {
-							$feature_declarations[ $feature_selector ][] = $new_feature_declaration;
-						}
-					} else {
-						$feature_declarations[ $feature_selector ] = $new_feature_declarations;
-					}
-
-					// Remove the feature from the block's node now the
-					// styles will be included under the feature level selector.
-					unset( $node[ $feature_name ] );
-				}
-			}
-		}
+		$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
 
 		// 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'] ) ) {
-					$clean_style_variation_selector = trim( $style_variation_selector );
-					foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
-						if ( empty( $style_variation_node[ $feature_name ] ) ) {
-							continue;
-						}
-						// If feature selector includes block classname, remove it but leave the whitespace in.
-						$shortened_feature_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $feature_selector );
-						// Prepend the variation selector to the feature selector.
-						$split_feature_selectors    = explode( ',', $shortened_feature_selector );
-						$feature_selectors          = array_map(
-							static function( $split_feature_selector ) use ( $clean_style_variation_selector ) {
-								return $clean_style_variation_selector . $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;
-						}
+				$style_variation_node           = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
+				$clean_style_variation_selector = trim( $style_variation['selector'] );
+
+				// Generate any feature/subfeature style declarations for the current style variation.
+				$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );
+
+				// Combine selectors with style variation's selector and add to overall style variation declarations.
+				foreach ( $variation_declarations as $current_selector => $new_declarations ) {
+					// If current selector includes block classname, remove it but leave the whitespace in.
+					$shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
+
+					// Prepend the variation selector to the current selector.
+					$split_selectors    = explode( ',', $shortened_selector );
+					$updated_selectors  = array_map(
+						static function( $split_selector ) use ( $clean_style_variation_selector ) {
+							return $clean_style_variation_selector . $split_selector;
+						},
+						$split_selectors
+					);
+					$combined_selectors = implode( ',', $updated_selectors );
 
-						/*
-						 * 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 ] );
-					}
+					// Add the new declarations to the overall results under the modified selector.
+					$style_variation_declarations[ $combined_selectors ] = $new_declarations;
 				}
+
 				// 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 );
+				$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
 			}
 		}
 
@@ -3480,4 +3401,151 @@ public function set_spacing_sizes() {
 
 		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
 	}
+
+	/**
+	 * Returns the selectors metadata for a block.
+	 *
+	 * @param object $block_type    The block type.
+	 * @param string $root_selector The block's root selector.
+	 *
+	 * @return object The custom selectors set by the block.
+	 */
+	protected static function get_block_selectors( $block_type, $root_selector ) {
+		if ( ! empty( $block_type->selectors ) ) {
+			return $block_type->selectors;
+		}
+
+		$selectors = array( 'root' => $root_selector );
+		foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
+			$feature_selector = wp_get_block_css_selector( $block_type, $key );
+			if ( null !== $feature_selector ) {
+				$selectors[ $feature ] = array( 'root' => $feature_selector );
+			}
+		}
+
+		return $selectors;
+	}
+
+	/**
+	 * Generates all the element selectors for a block.
+	 *
+	 * @param string $root_selector The block's root CSS selector.
+	 * @return array The block's element selectors.
+	 */
+	protected static function get_block_element_selectors( $root_selector ) {
+		// Assign defaults, then override those that the block sets by itself.
+		// If the block selector is compounded, will append the element to each
+		// individual block selector.
+		$block_selectors   = explode( ',', $root_selector );
+		$element_selectors = array();
+
+		foreach ( static::ELEMENTS as $el_name => $el_selector ) {
+			$element_selector = array();
+			foreach ( $block_selectors as $selector ) {
+				if ( $selector === $el_selector ) {
+					$element_selector = array( $el_selector );
+					break;
+				}
+				$element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
+			}
+			$element_selectors[ $el_name ] = implode( ',', $element_selector );
+		}
+
+		return $element_selectors;
+	}
+
+	/**
+	 * Generates style declarations for a node's features e.g. color, border,
+	 * typography etc, that have custom selectors in their related block's
+	 * metadata.
+	 *
+	 * @param object $metadata The related block metadata containing selectors.
+	 * @param object $node     A merged theme.json node for block or variation.
+	 *
+	 * @return array The style declarations for the node's features with custom
+	 * selectors.
+	 */
+	protected function get_feature_declarations_for_node( $metadata, &$node ) {
+		$declarations = array();
+
+		if ( ! isset( $metadata['selectors'] ) ) {
+			return $declarations;
+		}
+
+		$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
+
+		foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
+			// Skip if this is the block's root selector or the block doesn't
+			// have any styles for the feature.
+			if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
+				continue;
+			}
+
+			if ( is_array( $feature_selectors ) ) {
+				foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
+					if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
+						continue;
+					}
+
+					// Create temporary node containing only the subfeature data
+					// to leverage existing `compute_style_properties` function.
+					$subfeature_node = array(
+						$feature => array(
+							$subfeature => $node[ $feature ][ $subfeature ],
+						),
+					);
+
+					// Generate style declarations.
+					$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );
+
+					// Merge subfeature declarations into feature declarations.
+					if ( isset( $declarations[ $subfeature_selector ] ) ) {
+						foreach ( $new_declarations as $new_declaration ) {
+							$declarations[ $subfeature_selector ][] = $new_declaration;
+						}
+					} else {
+						$declarations[ $subfeature_selector ] = $new_declarations;
+					}
+
+					// Remove the subfeature from the block's node now its
+					// styles will be included under its own selector not the
+					// block's.
+					unset( $node[ $feature ][ $subfeature ] );
+				}
+			}
+
+			// Now subfeatures have been processed and removed we can process
+			// feature root selector or simple string selector.
+			if (
+				is_string( $feature_selectors ) ||
+				( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
+			) {
+				$feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];
+
+				// Create temporary node containing only the feature data
+				// to leverage existing `compute_style_properties` function.
+				$feature_node = array( $feature => $node[ $feature ] );
+
+				// Generate the style declarations.
+				$new_declarations = static::compute_style_properties( $feature_node, $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( $declarations[ $feature_selector ] ) ) {
+					foreach ( $new_declarations as $new_declaration ) {
+						$declarations[ $feature_selector ][] = $new_declaration;
+					}
+				} else {
+					$declarations[ $feature_selector ] = $new_declarations;
+				}
+
+				// Remove the feature from the block's node now its styles
+				// will be included under its own selector not the block's.
+				unset( $node[ $feature ] );
+			}
+		}
+
+		return $declarations;
+	}
 }
diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php
index 8ee0acba6b6cfe..908cf3f088eb95 100644
--- a/lib/compat/wordpress-6.1/blocks.php
+++ b/lib/compat/wordpress-6.1/blocks.php
@@ -16,6 +16,8 @@
 function gutenberg_safe_style_attrs_6_1( $attrs ) {
 	$attrs[] = 'flex-wrap';
 	$attrs[] = 'gap';
+	$attrs[] = 'column-gap';
+	$attrs[] = 'row-gap';
 	$attrs[] = 'margin-block-start';
 	$attrs[] = 'margin-block-end';
 	$attrs[] = 'margin-inline-start';
diff --git a/lib/compat/wordpress-6.1/template-parts-screen.php b/lib/compat/wordpress-6.1/template-parts-screen.php
index 1555b6ab1e250b..7c370635fe2ba0 100644
--- a/lib/compat/wordpress-6.1/template-parts-screen.php
+++ b/lib/compat/wordpress-6.1/template-parts-screen.php
@@ -133,7 +133,7 @@ static function( $classes ) {
 		}
 	}
 
-	$active_global_styles_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
+	$active_global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
 	$active_theme            = get_stylesheet();
 	$preload_paths           = array(
 		array( '/wp/v2/media', 'OPTIONS' ),
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
index 9a61041ee291b4..2112a8c2c890f1 100644
--- a/lib/compat/wordpress-6.2/block-patterns.php
+++ b/lib/compat/wordpress-6.2/block-patterns.php
@@ -433,7 +433,7 @@ function gutenberg_register_remote_theme_patterns() {
 		return;
 	}
 
-	$pattern_settings = WP_Theme_JSON_Resolver::get_theme_data()->get_patterns();
+	$pattern_settings = gutenberg_get_remote_theme_patterns();
 	if ( empty( $pattern_settings ) ) {
 		return;
 	}
diff --git a/lib/compat/wordpress-6.3/blocks.php b/lib/compat/wordpress-6.3/blocks.php
new file mode 100644
index 00000000000000..5f017997f52b58
--- /dev/null
+++ b/lib/compat/wordpress-6.3/blocks.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Ensure the selectors, set via block.json metadata, are included within the
+ * block type's settings.
+ *
+ * Note: This should be removed when the minimum required WP version is >= 6.3.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46496
+ *
+ * @param array $settings Current block type settings.
+ * @param array $metadata Block metadata as read in via block.json.
+ *
+ * @return array Filtered block type settings.
+ */
+function gutenberg_add_selectors_property_to_block_type_settings( $settings, $metadata ) {
+	if ( ! isset( $settings['selectors'] ) && isset( $metadata['selectors'] ) ) {
+		$settings['selectors'] = $metadata['selectors'];
+	}
+
+	return $settings;
+}
+add_filter( 'block_type_metadata_settings', 'gutenberg_add_selectors_property_to_block_type_settings', 10, 2 );
diff --git a/lib/compat/wordpress-6.3/get-global-styles-and-settings.php b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php
new file mode 100644
index 00000000000000..c213e50d64ae7b
--- /dev/null
+++ b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php
@@ -0,0 +1,155 @@
+<?php
+/**
+ * API to interact with global settings & styles.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'wp_get_block_css_selector' ) ) {
+	/**
+	 * Determine the CSS selector for the block type and property provided,
+	 * returning it if available.
+	 *
+	 * @since WordPress 6.3.0
+	 *
+	 * @param WP_Block_Type $block_type The block's type.
+	 * @param string|array  $target     The desired selector's target, `root` or array path.
+	 * @param boolean       $fallback   Whether or not to fallback to broader selector.
+	 *
+	 * @return string|null CSS selector or `null` if no selector available.
+	 */
+	function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = false ) {
+		if ( empty( $target ) ) {
+			return null;
+		}
+
+		$has_selectors = ! empty( $block_type->selectors );
+
+		// Duotone (No fallback selectors for Duotone).
+		if ( 'filter.duotone' === $target || array( 'filter', 'duotone' ) === $target ) {
+			// If selectors API in use, only use it's value or null.
+			if ( $has_selectors ) {
+				return _wp_array_get( $block_type->selectors, array( 'filter', 'duotone' ), null );
+			}
+
+			// Selectors API, not available, check for old experimental selector.
+			return _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), null );
+		}
+
+		// Root Selector.
+
+		// Calculated before returning as it can be used as fallback for
+		// feature selectors later on.
+		$root_selector = null;
+
+		if ( $has_selectors && isset( $block_type->selectors['root'] ) ) {
+			// Use the selectors API if available.
+			$root_selector = $block_type->selectors['root'];
+		} elseif ( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) {
+			// Use the old experimental selector supports property if set.
+			$root_selector = $block_type->supports['__experimentalSelector'];
+		} else {
+			// If no root selector found, generate default block class selector.
+			$block_name    = str_replace( '/', '-', str_replace( 'core/', '', $block_type->name ) );
+			$root_selector = ".wp-block-{$block_name}";
+		}
+
+		// Return selector if it's the root target we are looking for.
+		if ( 'root' === $target ) {
+			return $root_selector;
+		}
+
+		// If target is not `root` or `duotone` we have a feature or subfeature
+		// as the target. If the target is a string convert to an array.
+		if ( is_string( $target ) ) {
+			$target = explode( '.', $target );
+		}
+
+		// Feature Selectors ( May fallback to root selector ).
+		if ( 1 === count( $target ) ) {
+			$fallback_selector = $fallback ? $root_selector : null;
+
+			// Prefer the selectors API if available.
+			if ( $has_selectors ) {
+				// Look for selector under `feature.root`.
+				$path             = array_merge( $target, array( 'root' ) );
+				$feature_selector = _wp_array_get( $block_type->selectors, $path, null );
+
+				if ( $feature_selector ) {
+					return $feature_selector;
+				}
+
+				// Check if feature selector is set via shorthand.
+				$feature_selector = _wp_array_get( $block_type->selectors, $target, null );
+
+				return is_string( $feature_selector ) ? $feature_selector : $fallback_selector;
+			}
+
+			// Try getting old experimental supports selector value.
+			$path             = array_merge( $target, array( '__experimentalSelector' ) );
+			$feature_selector = _wp_array_get( $block_type->supports, $path, null );
+
+			// Nothing to work with, provide fallback or null.
+			if ( null === $feature_selector ) {
+				return $fallback_selector;
+			}
+
+			// Scope the feature selector by the block's root selector.
+			$scopes    = explode( ',', $root_selector );
+			$selectors = explode( ',', $feature_selector );
+
+			$selectors_scoped = array();
+			foreach ( $scopes as $outer ) {
+				foreach ( $selectors as $inner ) {
+					$outer = trim( $outer );
+					$inner = trim( $inner );
+					if ( ! empty( $outer ) && ! empty( $inner ) ) {
+						$selectors_scoped[] = $outer . ' ' . $inner;
+					} elseif ( empty( $outer ) ) {
+						$selectors_scoped[] = $inner;
+					} elseif ( empty( $inner ) ) {
+						$selectors_scoped[] = $outer;
+					}
+				}
+			}
+
+			return implode( ', ', $selectors_scoped );
+		}
+
+		// Subfeature selector
+		// This may fallback either to parent feature or root selector.
+		$subfeature_selector = null;
+
+		// Use selectors API if available.
+		if ( $has_selectors ) {
+			$subfeature_selector = _wp_array_get( $block_type->selectors, $target, null );
+		}
+
+		// Only return if we have a subfeature selector.
+		if ( $subfeature_selector ) {
+			return $subfeature_selector;
+		}
+
+		// To this point we don't have a subfeature selector. If a fallback
+		// has been requested, remove subfeature from target path and return
+		// results of a call for the parent feature's selector.
+		if ( $fallback ) {
+			return wp_get_block_css_selector( $block_type, $target[0], $fallback );
+		}
+
+		// We tried...
+		return null;
+	}
+}
+
+/**
+ * Returns the current theme's wanted patterns(slugs) to be
+ * registered from Pattern Directory.
+ *
+ * @since 6.3.0
+ *
+ * @return string[]
+ */
+function gutenberg_get_remote_theme_patterns() {
+	return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
+}
diff --git a/lib/compat/wordpress-6.3/rest-api.php b/lib/compat/wordpress-6.3/rest-api.php
index 93422289100dfa..f8f5fc91fed3d3 100644
--- a/lib/compat/wordpress-6.3/rest-api.php
+++ b/lib/compat/wordpress-6.3/rest-api.php
@@ -22,7 +22,7 @@ function gutenberg_register_rest_pattern_directory() {
  * @param string $post_type Post type key.
  */
 function gutenberg_update_templates_template_parts_rest_controller( $args, $post_type ) {
-	if ( in_array( $post_type, array( 'wp_template', 'wp_template-part' ), true ) ) {
+	if ( in_array( $post_type, array( 'wp_template', 'wp_template_part' ), true ) ) {
 		$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_3';
 	}
 	return $args;
diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php
new file mode 100644
index 00000000000000..8a8e41ef2be919
--- /dev/null
+++ b/lib/compat/wordpress-6.3/script-loader.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Removes the actions that output all duotone SVG filter presets.
+ * WP_Duotone_Gutenberg now handles which SVG filters should be output
+ * depending on the block content.
+ */
+remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
+remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
+
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 03e7d6f1b97e09..c3afb1d3414e76 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -83,6 +83,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-group-grid-variation', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experimental/fonts-api/class-wp-fonts-provider-local.php b/lib/experimental/fonts-api/class-wp-fonts-provider-local.php
index cea74c16a95f47..a5dbdb707e41ff 100644
--- a/lib/experimental/fonts-api/class-wp-fonts-provider-local.php
+++ b/lib/experimental/fonts-api/class-wp-fonts-provider-local.php
@@ -179,7 +179,7 @@ private function build_font_face_css( array $font ) {
 
 			// Compile the "src" parameter.
 			if ( 'src' === $key ) {
-				$value = $this->compile_src( $font['font-family'], $value );
+				$value = $this->compile_src( $value );
 			}
 
 			// If font-variation-settings is an array, convert it to a string.
@@ -200,11 +200,10 @@ private function build_font_face_css( array $font ) {
 	 *
 	 * @since X.X.X
 	 *
-	 * @param string $font_family Font family.
-	 * @param array  $value       Value to process.
+	 * @param array $value Value to process.
 	 * @return string The CSS.
 	 */
-	private function compile_src( $font_family, array $value ) {
+	private function compile_src( array $value ) {
 		$src = '';
 
 		foreach ( $value as $item ) {
diff --git a/lib/experimental/kses.php b/lib/experimental/kses.php
index a79ef5dbdce42a..1138aa67933ef0 100644
--- a/lib/experimental/kses.php
+++ b/lib/experimental/kses.php
@@ -87,3 +87,22 @@ function allow_filter_in_styles( $allow_css, $css_test_string ) {
 }
 
 add_filter( 'safecss_filter_attr_allow_css', 'allow_filter_in_styles', 10, 2 );
+
+/**
+ * Mark CSS safe if it contains grid functions
+ *
+ * This function should not be backported to core.
+ *
+ * @param bool   $allow_css Whether the CSS is allowed.
+ * @param string $css_test_string The CSS to test.
+ */
+function allow_grid_functions_in_styles( $allow_css, $css_test_string ) {
+	if ( preg_match(
+		'/^grid-template-columns:\s*repeat\([0-9,a-z-\s\(\)]*\)$/',
+		$css_test_string
+	) ) {
+		return true;
+	}
+	return $allow_css;
+}
+add_filter( 'safecss_filter_attr_allow_css', 'allow_grid_functions_in_styles', 10, 2 );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 0304b851c19e5a..0e9fc89aca1559 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -65,6 +65,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-group-grid-variation',
+		__( 'Grid variation for Group block ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Grid layout type as a new variation of Group block.', 'gutenberg' ),
+			'id'    => 'gutenberg-group-grid-variation',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/load.php b/lib/load.php
index a5be015320652f..e281aebd0d1411 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -93,6 +93,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/widgets.php';
 require __DIR__ . '/compat/wordpress-6.2/menu.php';
 
+// WordPress 6.3 compat.
+require __DIR__ . '/compat/wordpress-6.3/get-global-styles-and-settings.php';
+
 if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
 	require __DIR__ . '/compat/wordpress-6.2/html-api/class-wp-html-attribute-token.php';
 	require __DIR__ . '/compat/wordpress-6.2/html-api/class-wp-html-span.php';
@@ -102,6 +105,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.3 compat.
 require __DIR__ . '/compat/wordpress-6.3/html-api/class-gutenberg-html-tag-processor-6-3.php';
+require __DIR__ . '/compat/wordpress-6.3/script-loader.php';
+require __DIR__ . '/compat/wordpress-6.3/blocks.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
@@ -131,6 +136,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 // Plugin specific code.
 require __DIR__ . '/class-wp-theme-json-gutenberg.php';
 require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
+require __DIR__ . '/class-wp-duotone-gutenberg.php';
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
diff --git a/lib/theme.json b/lib/theme.json
index fa3a872518adc7..8928c1f0d8d89f 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -11,6 +11,8 @@
 		},
 		"color": {
 			"background": true,
+			"button": true,
+			"caption": true,
 			"custom": true,
 			"customDuotone": true,
 			"customGradient": true,
@@ -121,6 +123,7 @@
 					"slug": "midnight"
 				}
 			],
+			"heading": true,
 			"link": false,
 			"palette": [
 				{
@@ -352,6 +355,28 @@
 							}
 						}
 					]
+				},
+				"grid": {
+					"name": "grid",
+					"slug": "grid",
+					"className": "is-layout-grid",
+					"displayMode": "grid",
+					"baseStyles": [
+						{
+							"selector": " > *",
+							"rules": {
+								"margin": "0"
+							}
+						}
+					],
+					"spacingStyles": [
+						{
+							"selector": "",
+							"rules": {
+								"gap": null
+							}
+						}
+					]
 				}
 			}
 		},
diff --git a/package-lock.json b/package-lock.json
index 0ad5466ceb1068..6b7971a895f459 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "15.4.0-rc.1",
+	"version": "15.5.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -6857,19 +6857,20 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.30.0",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.30.0.tgz",
-			"integrity": "sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz",
+			"integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==",
 			"dev": true,
 			"requires": {
 				"@types/node": "*",
-				"playwright-core": "1.30.0"
+				"fsevents": "2.3.2",
+				"playwright-core": "1.32.0"
 			},
 			"dependencies": {
 				"playwright-core": {
-					"version": "1.30.0",
-					"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.30.0.tgz",
-					"integrity": "sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==",
+					"version": "1.32.0",
+					"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz",
+					"integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==",
 					"dev": true
 				}
 			}
@@ -15260,6 +15261,11 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/gradient-parser": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.2.tgz",
+			"integrity": "sha512-e2s1svCYJY8JDr2t/OoB/H4aWZy4sXUOAZ0NdSSHjKACw1jeU54gf4xj38di0AgVIObgzN1JSikJ5oSo3vxwgA=="
+		},
 		"@types/hammerjs": {
 			"version": "2.0.41",
 			"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
@@ -17534,6 +17540,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/hooks": "file:packages/hooks",
 				"@wordpress/icons": "file:packages/icons",
+				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"memize": "^1.1.0"
 			}
 		},
@@ -17903,7 +17910,7 @@
 				"npm-packlist": "^3.0.0",
 				"postcss": "^8.4.5",
 				"postcss-loader": "^6.2.1",
-				"prettier": "npm:wp-prettier@2.6.2",
+				"prettier": "npm:wp-prettier@2.8.5",
 				"puppeteer-core": "^13.2.0",
 				"react-refresh": "^0.10.0",
 				"read-pkg-up": "^7.0.1",
@@ -42983,6 +42990,15 @@
 				}
 			}
 		},
+		"mock-match-media": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/mock-match-media/-/mock-match-media-0.4.2.tgz",
+			"integrity": "sha512-1Q/Z7cfqWVTZd5Iz0bLxqzl6/8vaPl4KxxciRSRu+TCeGxRlxGDgjwWre0KkHlfS01r1iGCUWuF0n3ftvS/C/A==",
+			"dev": true,
+			"requires": {
+				"css-mediaquery": "^0.1.2"
+			}
+		},
 		"modify-values": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
@@ -47023,9 +47039,9 @@
 			"dev": true
 		},
 		"prettier": {
-			"version": "npm:wp-prettier@2.6.2",
-			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.6.2.tgz",
-			"integrity": "sha512-AV33EzqiFJ3fj+mPlKABN59YFPReLkDxQnj067Z3uEOeRQf3g05WprL0RDuqM7UBhSRo9W1rMSC2KvZmjE5UOA==",
+			"version": "npm:wp-prettier@2.8.5",
+			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.8.5.tgz",
+			"integrity": "sha512-gkphzYtVksWV6D7/V530bTehKkhrABUru/Gy4reOLOHJoKH4i9lcE1SxqU2VDxC3gCOx/Nk9alZmWk6xL/IBCw==",
 			"dev": true
 		},
 		"prettier-linter-helpers": {
diff --git a/package.json b/package.json
index 16b1e5478354cd..4b2cc41d2f566f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "15.4.0-rc.1",
+	"version": "15.5.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -22,6 +22,7 @@
 		"IS_GUTENBERG_PLUGIN": true
 	},
 	"dependencies": {
+		"@types/gradient-parser": "0.1.2",
 		"@wordpress/a11y": "file:packages/a11y",
 		"@wordpress/annotations": "file:packages/annotations",
 		"@wordpress/api-fetch": "file:packages/api-fetch",
@@ -98,7 +99,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.6.0",
-		"@playwright/test": "1.30.0",
+		"@playwright/test": "1.32.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.2",
 		"@storybook/addon-a11y": "6.5.7",
 		"@storybook/addon-actions": "6.5.7",
@@ -206,6 +207,7 @@
 		"metro-react-native-babel-preset": "0.70.3",
 		"metro-react-native-babel-transformer": "0.70.3",
 		"mkdirp": "0.5.1",
+		"mock-match-media": "0.4.2",
 		"nock": "12.0.3",
 		"node-fetch": "2.6.1",
 		"node-watch": "0.7.0",
@@ -213,7 +215,7 @@
 		"patch-package": "6.2.2",
 		"postcss": "8.4.16",
 		"postcss-loader": "6.2.1",
-		"prettier": "npm:wp-prettier@2.6.2",
+		"prettier": "npm:wp-prettier@2.8.5",
 		"progress": "2.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
diff --git a/packages/api-fetch/README.md b/packages/api-fetch/README.md
index ae7b1a500aa4f8..9fd172cdd9f9b9 100644
--- a/packages/api-fetch/README.md
+++ b/packages/api-fetch/README.md
@@ -14,15 +14,29 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ## Usage
 
+### GET
 ```js
 import apiFetch from '@wordpress/api-fetch';
 
-// GET
 apiFetch( { path: '/wp/v2/posts' } ).then( ( posts ) => {
 	console.log( posts );
 } );
+```
+
+### GET with Query Args
+```js
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+const queryParams = { include: [1,2,3] }; // Return posts with ID = 1,2,3.
 
-// POST
+apiFetch( { path: addQueryArgs( '/wp/v2/posts', queryParams } ).then( ( posts ) => {
+	console.log( posts );
+} );
+```
+
+### POST
+```js
 apiFetch( {
 	path: '/wp/v2/posts/1',
 	method: 'POST',
@@ -52,7 +66,7 @@ Unlike `fetch`, the `Promise` return value of `apiFetch` will resolve to the par
 
 #### `data` (`object`)
 
-Shorthand to be used in place of `body`, accepts an object value to be stringified to JSON.
+Sent on `POST` or `PUT` requests only. Shorthand to be used in place of `body`, accepts an object value to be stringified to JSON.
 
 ### Aborting a request
 
diff --git a/packages/babel-plugin-makepot/index.js b/packages/babel-plugin-makepot/index.js
index 846a29a7955b34..0ae8a763d03359 100644
--- a/packages/babel-plugin-makepot/index.js
+++ b/packages/babel-plugin-makepot/index.js
@@ -342,7 +342,7 @@ module.exports = () => {
 								if (
 									isSameTranslation(
 										translation,
-										memo[ msgctxt ][ msgid ]
+										memo[ msgctxt ][ msgid ] ?? {}
 									)
 								) {
 									translation.comments.reference = [
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 61974d2d8b47f6..39c375ef48a1e5 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Exclude IE-only `setImmediate`/`clearImmediate` from list of polyfills.
+
 ## 7.13.0 (2023-03-15)
 
 ## 7.12.0 (2023-03-01)
diff --git a/packages/babel-preset-default/bin/index.js b/packages/babel-preset-default/bin/index.js
index 594ae4744a8a34..a2d86233565138 100755
--- a/packages/babel-preset-default/bin/index.js
+++ b/packages/babel-preset-default/bin/index.js
@@ -9,11 +9,16 @@ const { writeFile } = require( 'fs' ).promises;
 
 builder( {
 	modules: [ 'es', 'web' ],
-	// core-js is extremely conservative in which polyfills to include.
-	// Knowing about tiny browser implementation bugs that anyone rarely cares about,
-	// we prevent some features from having the full polyfill included.
-	// @see https://github.com/WordPress/gutenberg/pull/31279
-	exclude: [ 'es.promise' ],
+	exclude: [
+		// core-js is extremely conservative in which polyfills to include.
+		// Since we don't care about the tiny browser implementation bugs behind its decision
+		// to polyfill these features, we forcefully prevent them from being included.
+		// @see https://github.com/WordPress/gutenberg/pull/31279
+		'es.promise',
+		// This is an IE-only feature which we don't use, and don't want to polyfill.
+		// @see https://github.com/WordPress/gutenberg/pull/49234
+		'web.immediate',
+	],
 	targets: require( '@wordpress/browserslist-config' ),
 	filename: './build/polyfill.js',
 } )
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 97427da1fd525e..d61403d7027073 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -170,6 +170,11 @@ $z-layers: (
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
 	".components-circular-option-picker__option.is-pressed + svg": 2,
 
+	// The following two indexes are needed so that the swatches (and their tooltips)
+	// always render on top of the rest of the component's UI.
+	".components-circular-option-picker__swatches": 1,
+	"> *:not(.components-circular-option-picker__swatches)": 0,
+
 	// Appear under the customizer heading UI, but over anything else.
 	".customize-widgets__topbar": 8,
 
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index e33f743838286f..7aa68696cc0b99 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   `ImageSizeControl`: Update image size label ([#49112](https://github.com/WordPress/gutenberg/pull/49112)).
+
 ## 11.6.0 (2023-03-15)
 
 ## 11.5.0 (2023-03-01)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 18c2c2cfbce521..980d70b4108736 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -76,6 +76,10 @@ registerCoreBlocks();
 
 ## API
 
+Any components in this package that have a counterpart in [@wordpress/components](/packages/components/README.md) are an extension of those components.
+
+Unless you're [creating an editor](docs/how-to-guides/platform/custom-block-editor/README.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context.
+
 <!-- START TOKEN(Autogenerated API docs) -->
 
 ### AlignmentControl
diff --git a/packages/block-editor/src/components/block-draggable/content.scss b/packages/block-editor/src/components/block-draggable/content.scss
index 46bd879806d785..f1318daebd5a04 100644
--- a/packages/block-editor/src/components/block-draggable/content.scss
+++ b/packages/block-editor/src/components/block-draggable/content.scss
@@ -1,5 +1,5 @@
 // This creates a "slot" where the block you're dragging appeared.
-// We use !important as one of the rules are meant to be overriden.
+// We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
 	background-color: currentColor !important;
 	opacity: 0.05 !important;
diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js
index ef38df983740a0..5d9e7bfeb7bf77 100644
--- a/packages/block-editor/src/components/block-list/block-html.js
+++ b/packages/block-editor/src/components/block-list/block-html.js
@@ -59,7 +59,7 @@ function BlockHTML( { clientId } ) {
 
 		// Ensure the state is updated if we reset so it displays the default content.
 		if ( ! html ) {
-			setHtml( { content } );
+			setHtml( content );
 		}
 	};
 
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 287bcd5b185662..ef7aa76e5af02e 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -12,7 +12,6 @@ import { Disabled } from '@wordpress/components';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -32,11 +31,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, duotone } = useSelect( ( select ) => {
+	const { styles } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -56,10 +54,6 @@ function ScaledBlockPreview( {
 		return styles;
 	}, [ styles, additionalStyles ] );
 
-	const svgFilters = useMemo( () => {
-		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
-	}, [ duotone ] );
-
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
@@ -76,7 +70,6 @@ function ScaledBlockPreview( {
 			} }
 		>
 			<Iframe
-				head={ <EditorStyles styles={ editorStyles } /> }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
@@ -108,16 +101,8 @@ function ScaledBlockPreview( {
 							: minHeight,
 				} }
 			>
+				<EditorStyles styles={ editorStyles } />
 				{ contentResizeListener }
-				{
-					/* Filters need to be rendered before children to avoid Safari rendering issues. */
-					svgFilters.map( ( preset ) => (
-						<PresetDuotoneFilter
-							preset={ preset }
-							key={ preset.slug }
-						/>
-					) )
-				}
 				<MemoizedBlockList renderAppender={ false } />
 			</Iframe>
 		</Disabled>
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 5d86252105acfe..8b36f04b835526 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -73,20 +73,20 @@ $swatch-gap: 12px;
 	max-width: 100%;
 
 	// Border styles.
-	border-left: 1px solid rgba(0, 0, 0, 0.1);
-	border-right: 1px solid rgba(0, 0, 0, 0.1);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-left: 1px solid $gray-300;
+	border-right: 1px solid $gray-300;
+	border-bottom: 1px solid $gray-300;
 
 	&.first {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: 2px;
-		border-top-right-radius: 2px;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-top-left-radius: $radius-block-ui;
+		border-top-right-radius: $radius-block-ui;
+		border-top: 1px solid $gray-300;
 	}
 
 	&.last {
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
 	}
 
 	> div,
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index b6288f1afb452d..819efe5721127a 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -8,6 +8,7 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
+import { SVG } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -68,7 +69,20 @@ function useDarkThemeBodyClassName( styles ) {
 
 export default function EditorStyles( { styles } ) {
 	const transformedStyles = useMemo(
-		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
+		() =>
+			transformStyles(
+				styles.filter( ( style ) => style?.css ),
+				EDITOR_STYLES_SELECTOR
+			),
+		[ styles ]
+	);
+
+	const transformedSvgs = useMemo(
+		() =>
+			styles
+				.filter( ( style ) => style.__unstableType === 'svgs' )
+				.map( ( style ) => style.assets )
+				.join( '' ),
 		[ styles ]
 	);
 
@@ -80,6 +94,20 @@ export default function EditorStyles( { styles } ) {
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
+			/>
 		</>
 	);
 }
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
new file mode 100644
index 00000000000000..ba8a97b1708584
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -0,0 +1,706 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	TabPanel,
+	ColorIndicator,
+	Flex,
+	FlexItem,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from '../colors-gradients/control';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
+
+export function useHasColorPanel( settings ) {
+	const hasTextPanel = useHasTextPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	const hasLinkPanel = useHasLinkPanel( settings );
+	const hasHeadingPanel = useHasHeadingPanel( settings );
+	const hasButtonPanel = useHasHeadingPanel( settings );
+	const hasCaptionPanel = useHasCaptionPanel( settings );
+
+	return (
+		hasTextPanel ||
+		hasBackgroundPanel ||
+		hasLinkPanel ||
+		hasHeadingPanel ||
+		hasButtonPanel ||
+		hasCaptionPanel
+	);
+}
+
+export function useHasTextPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.text &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasLinkPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.link &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasCaptionPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.caption &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasHeadingPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.heading &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+export function useHasButtonPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.button &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+export function useHasBackgroundPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.background &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+function ColorToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Color' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			hasInnerWrapper
+			className="color-block-support-panel"
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
+		>
+			<div className="color-block-support-panel__inner-wrapper">
+				{ children }
+			</div>
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	text: true,
+	background: true,
+	link: true,
+	heading: true,
+	button: true,
+	caption: true,
+};
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+};
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					<ColorIndicator colorValue={ indicator } />
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem
+			className="block-editor-panel-color-gradient-settings__color-name"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
+	</HStack>
+);
+
+function ColorPanelTab( {
+	isGradient,
+	inheritedValue,
+	userValue,
+	setValue,
+	colorGradientControlSettings,
+} ) {
+	return (
+		<ColorGradientControl
+			{ ...colorGradientControlSettings }
+			showTitle={ false }
+			enableAlpha
+			__experimentalIsRenderedInSidebar
+			colorValue={ isGradient ? undefined : inheritedValue }
+			gradientValue={ isGradient ? inheritedValue : undefined }
+			onColorChange={ isGradient ? undefined : setValue }
+			onGradientChange={ isGradient ? setValue : undefined }
+			clearable={ inheritedValue === userValue }
+			headingLevel={ 3 }
+		/>
+	);
+}
+
+function ColorPanelDropdown( {
+	label,
+	hasValue,
+	resetValue,
+	isShownByDefault,
+	indicators,
+	tabs,
+	colorGradientControlSettings,
+	panelId,
+} ) {
+	const tabConfigs = tabs.map( ( { key, label: tabLabel } ) => {
+		return {
+			name: key,
+			title: tabLabel,
+		};
+	} );
+
+	return (
+		<ToolsPanelItem
+			className="block-editor-tools-panel-color-gradient-settings__item"
+			hasValue={ hasValue }
+			label={ label }
+			onDeselect={ resetValue }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="block-editor-tools-panel-color-gradient-settings__dropdown"
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					const toggleProps = {
+						onClick: onToggle,
+						className: classnames(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						),
+						'aria-expanded': isOpen,
+					};
+
+					return (
+						<Button { ...toggleProps }>
+							<LabeledColorIndicators
+								indicators={ indicators }
+								label={ label }
+							/>
+						</Button>
+					);
+				} }
+				renderContent={ () => (
+					<DropdownContentWrapper paddingSize="none">
+						<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+							{ tabs.length === 1 && (
+								<ColorPanelTab
+									{ ...tabs[ 0 ] }
+									colorGradientControlSettings={
+										colorGradientControlSettings
+									}
+								/>
+							) }
+							{ tabs.length > 1 && (
+								<TabPanel tabs={ tabConfigs }>
+									{ ( tab ) => {
+										const selectedTab = tabs.find(
+											( t ) => t.key === tab.name
+										);
+
+										if ( ! selectedTab ) {
+											return null;
+										}
+
+										return (
+											<ColorPanelTab
+												{ ...selectedTab }
+												colorGradientControlSettings={
+													colorGradientControlSettings
+												}
+											/>
+										);
+									} }
+								</TabPanel>
+							) }
+						</div>
+					</DropdownContentWrapper>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
+export default function ColorPanel( {
+	as: Wrapper = ColorToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+	children,
+} ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		onChange(
+			immutableSet(
+				value,
+				[ 'color', 'text' ],
+				encodeColorValue( newColor )
+			)
+		);
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const userBackgroundColor = decodeValue( value?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const userGradient = decodeValue( value?.color?.gradient );
+	const hasBackground = () => !! userBackgroundColor || !! userGradient;
+	const setBackgroundColor = ( newColor ) => {
+		const newValue = immutableSet(
+			value,
+			[ 'color', 'background' ],
+			encodeColorValue( newColor )
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+	const setGradient = ( newGradient ) => {
+		const newValue = immutableSet(
+			value,
+			[ 'color', 'gradient' ],
+			encodeGradientValue( newGradient )
+		);
+		newValue.color.background = undefined;
+		onChange( newValue );
+	};
+	const resetBackground = () => {
+		const newValue = immutableSet(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+
+	// Links
+	const showLinkPanel = useHasLinkPanel( settings );
+	const linkColor = decodeValue(
+		inheritedValue?.elements?.link?.color?.text
+	);
+	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
+	const setLinkColor = ( newColor ) => {
+		onChange(
+			immutableSet(
+				value,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			)
+		);
+	};
+	const hoverLinkColor = decodeValue(
+		inheritedValue?.elements?.link?.[ ':hover' ]?.color?.text
+	);
+	const userHoverLinkColor = decodeValue(
+		value?.elements?.link?.[ ':hover' ]?.color?.text
+	);
+	const setHoverLinkColor = ( newColor ) => {
+		onChange(
+			immutableSet(
+				value,
+				[ 'elements', 'link', ':hover', 'color', 'text' ],
+				encodeColorValue( newColor )
+			)
+		);
+	};
+	const hasLink = () => !! userLinkColor || !! userHoverLinkColor;
+	const resetLink = () => {
+		let newValue = immutableSet(
+			value,
+			[ 'elements', 'link', ':hover', 'color', 'text' ],
+			undefined
+		);
+		newValue = immutableSet(
+			newValue,
+			[ 'elements', 'link', 'color', 'text' ],
+			undefined
+		);
+		onChange( newValue );
+	};
+
+	// Elements
+	const elements = [
+		{
+			name: 'caption',
+			label: __( 'Captions' ),
+			showPanel: useHasCaptionPanel( settings ),
+		},
+		{
+			name: 'button',
+			label: __( 'Button' ),
+			showPanel: useHasButtonPanel( settings ),
+		},
+		{
+			name: 'heading',
+			label: __( 'Heading' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h1',
+			label: __( 'H1' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h2',
+			label: __( 'H2' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h3',
+			label: __( 'H3' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h4',
+			label: __( 'H4' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h5',
+			label: __( 'H5' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h6',
+			label: __( 'H6' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+	];
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			color: undefined,
+			elements: {
+				...previousValue?.elements,
+				link: {
+					...previousValue?.elements?.link,
+					color: undefined,
+					':hover': {
+						color: undefined,
+					},
+				},
+				...elements.reduce( ( acc, element ) => {
+					return {
+						...acc,
+						[ element.name ]: {
+							...previousValue?.elements?.[ element.name ],
+							color: undefined,
+						},
+					};
+				}, {} ),
+			},
+		};
+	}, [] );
+
+	const items = [
+		showTextPanel && {
+			key: 'text',
+			label: __( 'Text' ),
+			hasValue: hasTextColor,
+			resetValue: resetTextColor,
+			isShownByDefault: defaultControls.text,
+			indicators: [ textColor ],
+			tabs: [
+				{
+					key: 'text',
+					label: __( 'Text' ),
+					inheritedValue: textColor,
+					setValue: setTextColor,
+					userValue: userTextColor,
+				},
+			],
+		},
+		showBackgroundPanel && {
+			key: 'background',
+			label: __( 'Background' ),
+			hasValue: hasBackground,
+			resetValue: resetBackground,
+			isShownByDefault: defaultControls.background,
+			indicators: [ gradient ?? backgroundColor ],
+			tabs: [
+				{
+					key: 'background',
+					label: __( 'Solid' ),
+					inheritedValue: backgroundColor,
+					setValue: setBackgroundColor,
+					userValue: userBackgroundColor,
+				},
+				{
+					key: 'gradient',
+					label: __( 'Gradient' ),
+					inheritedValue: gradient,
+					setValue: setGradient,
+					userValue: userGradient,
+					isGradient: true,
+				},
+			],
+		},
+		showLinkPanel && {
+			key: 'link',
+			label: __( 'Link' ),
+			hasValue: hasLink,
+			resetValue: resetLink,
+			isShownByDefault: defaultControls.link,
+			indicators: [ linkColor, hoverLinkColor ],
+			tabs: [
+				{
+					key: 'link',
+					label: __( 'Default' ),
+					inheritedValue: linkColor,
+					setValue: setLinkColor,
+					userValue: userLinkColor,
+				},
+				{
+					key: 'hover',
+					label: __( 'Hover' ),
+					inheritedValue: hoverLinkColor,
+					setValue: setHoverLinkColor,
+					userValue: userHoverLinkColor,
+				},
+			],
+		},
+	].filter( Boolean );
+
+	elements.forEach( ( { name, label, showPanel } ) => {
+		if ( ! showPanel ) return;
+
+		const elementBackgroundColor = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.background
+		);
+		const elementGradient = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.gradient
+		);
+		const elementTextColor = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.text
+		);
+		const elementBackgroundUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.background
+		);
+		const elementGradientUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.gradient
+		);
+		const elementTextUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.text
+		);
+		const hasElement = () =>
+			!! (
+				elementTextUserColor ||
+				elementBackgroundUserColor ||
+				elementGradientUserColor
+			);
+		const resetElement = () => {
+			const newValue = immutableSet(
+				value,
+				[ 'elements', name, 'color', 'background' ],
+				undefined
+			);
+			newValue.elements[ name ].color.gradient = undefined;
+			newValue.elements[ name ].color.text = undefined;
+			onChange( newValue );
+		};
+
+		const setElementTextColor = ( newTextColor ) => {
+			onChange(
+				immutableSet(
+					value,
+					[ 'elements', name, 'color', 'text' ],
+					encodeColorValue( newTextColor )
+				)
+			);
+		};
+		const setElementBackgroundColor = ( newBackgroundColor ) => {
+			const newValue = immutableSet(
+				value,
+				[ 'elements', name, 'color', 'background' ],
+				encodeColorValue( newBackgroundColor )
+			);
+			newValue.elements[ name ].color.gradient = undefined;
+			onChange( newValue );
+		};
+		const setElementGradient = ( newGradient ) => {
+			const newValue = immutableSet(
+				value,
+				[ 'elements', name, 'color', 'gradient' ],
+				encodeGradientValue( newGradient )
+			);
+			newValue.elements[ name ].color.background = undefined;
+			onChange( newValue );
+		};
+		const supportsTextColor = true;
+		// Background color is not supported for `caption`
+		// as there isn't yet a way to set padding for the element.
+		const supportsBackground = name !== 'caption';
+
+		items.push( {
+			key: name,
+			label,
+			hasValue: hasElement,
+			resetValue: resetElement,
+			isShownByDefault: defaultControls[ name ],
+			indicators:
+				supportsTextColor && supportsBackground
+					? [
+							elementTextColor,
+							elementGradient ?? elementBackgroundColor,
+					  ]
+					: [
+							supportsTextColor
+								? elementTextColor
+								: elementGradient ?? elementBackgroundColor,
+					  ],
+			tabs: [
+				hasSolidColors &&
+					supportsTextColor && {
+						key: 'text',
+						label: __( 'Text' ),
+						inheritedValue: elementTextColor,
+						setValue: setElementTextColor,
+						userValue: elementTextUserColor,
+					},
+				hasSolidColors &&
+					supportsBackground && {
+						key: 'background',
+						label: __( 'Background' ),
+						inheritedValue: elementBackgroundColor,
+						setValue: setElementBackgroundColor,
+						userValue: elementBackgroundUserColor,
+					},
+				hasGradientColors &&
+					supportsBackground && {
+						key: 'gradient',
+						label: __( 'Gradient' ),
+						inheritedValue: elementGradient,
+						setValue: setElementGradient,
+						userValue: elementGradientUserColor,
+						isGradient: true,
+					},
+			].filter( Boolean ),
+		} );
+	} );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ items.map( ( item ) => (
+				<ColorPanelDropdown
+					key={ item.key }
+					{ ...item }
+					colorGradientControlSettings={ {
+						colors,
+						disableCustomColors: ! areCustomSolidsEnabled,
+						gradients,
+						disableCustomGradients: ! areCustomGradientsEnabled,
+					} }
+					panelId={ panelId }
+				/>
+			) ) }
+			{ children }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index b63d9c5d063739..c876ca2d1c1b66 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -28,6 +28,7 @@ import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { immutableSet } from '../../utils/object';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -223,13 +224,9 @@ export default function DimensionsPanel( {
 		useHasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				contentSize: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'layout', 'contentSize' ], newValue )
+		);
 	};
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
@@ -239,13 +236,7 @@ export default function DimensionsPanel( {
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				wideSize: newValue,
-			},
-		} );
+		onChange( immutableSet( value, [ 'layout', 'wideSize' ], newValue ) );
 	};
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
@@ -262,13 +253,7 @@ export default function DimensionsPanel( {
 		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				padding,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
 		!! value?.spacing?.padding &&
@@ -288,13 +273,7 @@ export default function DimensionsPanel( {
 		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				margin,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
 		!! value?.spacing?.margin &&
@@ -312,13 +291,9 @@ export default function DimensionsPanel( {
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setGapValue = ( newGapValue ) => {
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				blockGap: newGapValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'spacing', 'blockGap' ], newGapValue )
+		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -341,13 +316,9 @@ export default function DimensionsPanel( {
 	const showMinHeightControl = useHasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
-		onChange( {
-			...value,
-			dimensions: {
-				...value?.dimensions,
-				minHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'dimensions', 'minHeight' ], newValue )
+		);
 	};
 	const resetMinHeightValue = () => {
 		setMinHeightValue( undefined );
diff --git a/packages/block-editor/src/components/global-styles/get-block-css-selector.js b/packages/block-editor/src/components/global-styles/get-block-css-selector.js
new file mode 100644
index 00000000000000..db58709fe79aae
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/get-block-css-selector.js
@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import { get, isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { scopeSelector } from './utils';
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {import('@wordpress/blocks').Block} blockType        The block's type.
+ * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}                            options          Options object.
+ * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+export function getBlockCSSSelector(
+	blockType,
+	target = 'root',
+	options = {}
+) {
+	if ( ! target ) {
+		return null;
+	}
+
+	const { fallback = false } = options;
+	const { name, selectors, supports } = blockType;
+
+	const hasSelectors = ! isEmpty( selectors );
+	const path = Array.isArray( target ) ? target.join( '.' ) : target;
+
+	// Duotone ( no fallback selectors for Duotone ).
+	if ( path === 'filter.duotone' ) {
+		// If selectors API in use, only use its value or null.
+		if ( hasSelectors ) {
+			return get( selectors, path, null );
+		}
+
+		// Selectors API, not available, check for old experimental selector.
+		return get( supports, 'color.__experimentalDuotone', null );
+	}
+
+	// Root selector.
+
+	// Calculated before returning as it can be used as a fallback for feature
+	// selectors later on.
+	let rootSelector = null;
+
+	if ( hasSelectors && selectors.root ) {
+		// Use the selectors API if available.
+		rootSelector = selectors?.root;
+	} else if ( supports?.__experimentalSelector ) {
+		// Use the old experimental selector supports property if set.
+		rootSelector = supports.__experimentalSelector;
+	} else {
+		// If no root selector found, generate default block class selector.
+		rootSelector =
+			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+	}
+
+	// Return selector if it's the root target we are looking for.
+	if ( path === 'root' ) {
+		return rootSelector;
+	}
+
+	// If target is not `root` or `duotone` we have a feature or subfeature
+	// as the target. If the target is a string convert to an array.
+	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
+
+	// Feature selectors ( may fallback to root selector );
+	if ( pathArray.length === 1 ) {
+		const fallbackSelector = fallback ? rootSelector : null;
+
+		// Prefer the selectors API if available.
+		if ( hasSelectors ) {
+			// Get selector from either `feature.root` or shorthand path.
+			const featureSelector =
+				get( selectors, `${ path }.root`, null ) ||
+				get( selectors, path, null );
+
+			// Return feature selector if found or any available fallback.
+			return featureSelector || fallbackSelector;
+		}
+
+		// Try getting old experimental supports selector value.
+		const featureSelector = get(
+			supports,
+			`${ path }.__experimentalSelector`,
+			null
+		);
+
+		// If nothing to work with, provide fallback selector if available.
+		if ( ! featureSelector ) {
+			return fallbackSelector;
+		}
+
+		// Scope the feature selector by the block's root selector.
+		return scopeSelector( rootSelector, featureSelector );
+	}
+
+	// Subfeature selector.
+	// This may fallback either to parent feature or root selector.
+	let subfeatureSelector;
+
+	// Use selectors API if available.
+	if ( hasSelectors ) {
+		subfeatureSelector = get( selectors, path, null );
+	}
+
+	// Only return if we have a subfeature selector.
+	if ( subfeatureSelector ) {
+		return subfeatureSelector;
+	}
+
+	// To this point we don't have a subfeature selector. If a fallback has been
+	// requested, remove subfeature from target path and return results of a
+	// call for the parent feature's selector.
+	if ( fallback ) {
+		return getBlockCSSSelector( blockType, pathArray[ 0 ], options );
+	}
+
+	// We tried.
+	return null;
+}
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index c169cb03a60836..69ce0634847a9c 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -31,6 +31,8 @@ const VALID_SETTINGS = [
 	'shadow.presets',
 	'shadow.defaultPresets',
 	'color.background',
+	'color.button',
+	'color.caption',
 	'color.custom',
 	'color.customDuotone',
 	'color.customGradient',
@@ -39,6 +41,7 @@ const VALID_SETTINGS = [
 	'color.defaultPalette',
 	'color.duotone',
 	'color.gradients',
+	'color.heading',
 	'color.link',
 	'color.palette',
 	'color.text',
@@ -251,6 +254,35 @@ export function useSettingsForBlockElement(
 			};
 		}
 
+		updatedSettings.color = {
+			...updatedSettings.color,
+			text:
+				updatedSettings.color?.text &&
+				supportedStyles.includes( 'color' ),
+			background:
+				updatedSettings.color?.background &&
+				( supportedStyles.includes( 'background' ) ||
+					supportedStyles.includes( 'backgroundColor' ) ),
+			button:
+				updatedSettings.color?.button &&
+				supportedStyles.includes( 'buttonColor' ),
+			heading:
+				updatedSettings.color?.heading &&
+				supportedStyles.includes( 'headingColor' ),
+			link:
+				updatedSettings.color?.link &&
+				supportedStyles.includes( 'linkColor' ),
+			caption:
+				updatedSettings.color?.caption &&
+				supportedStyles.includes( 'captionColor' ),
+		};
+
+		// Some blocks can enable background colors but disable gradients.
+		if ( ! supportedStyles.includes( 'background' ) ) {
+			updatedSettings.color.gradients = [];
+			updatedSettings.color.customGradient = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',
@@ -379,3 +411,51 @@ export function useColorsPerOrigin( settings ) {
 		shouldDisplayDefaultColors,
 	] );
 }
+
+export function useGradientsPerOrigin( settings ) {
+	const customGradients = settings?.color?.gradients?.custom;
+	const themeGradients = settings?.color?.gradients?.theme;
+	const defaultGradients = settings?.color?.gradients?.default;
+	const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+}
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 372f56fcead0d4..97238de17a212c 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -3,8 +3,8 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
-	useColorsPerOrigin,
 } from './hooks';
+export { getBlockCSSSelector } from './get-block-css-selector';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
@@ -16,3 +16,4 @@ export {
 	useHasDimensionsPanel,
 } from './dimensions-panel';
 export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export { default as ColorPanel, useHasColorPanel } from './color-panel';
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
index 1848906ed1fcde..a826c562044789 100644
--- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -480,7 +480,7 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
 					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
@@ -668,6 +668,34 @@ describe( 'global styles renderer', () => {
 
 	describe( 'getBlockSelectors', () => {
 		it( 'should return block selectors data', () => {
+			const imageSelectors = {
+				root: '.my-image',
+				border: '.my-image img, .my-image .crop-area',
+				filter: { duotone: 'img' },
+			};
+			const imageBlock = {
+				name: 'core/image',
+				selectors: imageSelectors,
+			};
+			const blockTypes = [ imageBlock ];
+
+			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
+				'core/image': {
+					name: imageBlock.name,
+					selector: imageSelectors.root,
+					duotoneSelector: imageSelectors.filter.duotone,
+					fallbackGapValue: undefined,
+					featureSelectors: {
+						root: '.my-image',
+						border: '.my-image img, .my-image .crop-area',
+						filter: { duotone: 'img' },
+					},
+					hasLayoutSupport: false,
+				},
+			} );
+		} );
+
+		it( 'should return block selectors data with old experimental selectors', () => {
 			const imageSupports = {
 				__experimentalBorder: {
 					radius: true,
@@ -688,6 +716,7 @@ describe( 'global styles renderer', () => {
 					duotoneSelector: imageSupports.color.__experimentalDuotone,
 					fallbackGapValue: undefined,
 					featureSelectors: {
+						root: '.my-image',
 						border: '.my-image img, .my-image .crop-area',
 					},
 					hasLayoutSupport: false,
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 1c3c253c7b69db..cdaa6826ddd431 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -20,6 +20,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -161,15 +162,13 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontFamily: slug
-					? `var:preset|font-family|${ slug }`
-					: newValue,
-			},
-		} );
+		onChange(
+			immutableSet(
+				value,
+				[ 'typography', 'fontFamily' ],
+				slug ? `var:preset|font-family|${ slug }` : newValue
+			)
+		);
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -188,13 +187,9 @@ export default function TypographyPanel( {
 			? `var:preset|font-size|${ metadata?.slug }`
 			: newValue;
 
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontSize: actualValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'fontSize' ], actualValue )
+		);
 	};
 	const hasFontSize = () => !! value?.typography?.fontSize;
 	const resetFontSize = () => setFontSize( undefined );
@@ -229,13 +224,9 @@ export default function TypographyPanel( {
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
 	const setLineHeight = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				lineHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'lineHeight' ], newValue )
+		);
 	};
 	const hasLineHeight = () => !! value?.typography?.lineHeight;
 	const resetLineHeight = () => setLineHeight( undefined );
@@ -246,13 +237,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.letterSpacing
 	);
 	const setLetterSpacing = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				letterSpacing: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'letterSpacing' ], newValue )
+		);
 	};
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
@@ -261,13 +248,9 @@ export default function TypographyPanel( {
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
 	const setTextColumns = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textColumns: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textColumns' ], newValue )
+		);
 	};
 	const hasTextColumns = () => !! value?.typography?.textColumns;
 	const resetTextColumns = () => setTextColumns( undefined );
@@ -278,13 +261,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.textTransform
 	);
 	const setTextTransform = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textTransform: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textTransform' ], newValue )
+		);
 	};
 	const hasTextTransform = () => !! value?.typography?.textTransform;
 	const resetTextTransform = () => setTextTransform( undefined );
@@ -295,13 +274,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.textDecoration
 	);
 	const setTextDecoration = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textDecoration: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textDecoration' ], newValue )
+		);
 	};
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index cce2b61f0786e7..2f68312b76c6b3 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -13,13 +13,14 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
+import { renderToString, useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
  */
 import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
 import { useGlobalSetting } from './hooks';
@@ -144,13 +145,16 @@ function getPresetsSvgFilters( blockPresets = {} ) {
 		return [ 'default', 'theme' ]
 			.filter( ( origin ) => presetByOrigin[ origin ] )
 			.flatMap( ( origin ) =>
-				presetByOrigin[ origin ].map( ( preset ) => (
-					<PresetDuotoneFilter
-						preset={ preset }
-						key={ preset.slug }
-					/>
-				) )
-			);
+				presetByOrigin[ origin ].map( ( preset ) =>
+					renderToString(
+						<PresetDuotoneFilter
+							preset={ preset }
+							key={ preset.slug }
+						/>
+					)
+				)
+			)
+			.join( '' );
 	} );
 }
 
@@ -193,6 +197,89 @@ function concatFeatureVariationSelectorString(
 	return combinedSelectors.join( ', ' );
 }
 
+/**
+ * Generate style declarations for a block's custom feature and subfeature
+ * selectors.
+ *
+ * NOTE: The passed `styles` object will be mutated by this function.
+ *
+ * @param {Object} selectors Custom selectors object for a block.
+ * @param {Object} styles    A block's styles object.
+ *
+ * @return {Object} Style declarations.
+ */
+const getFeatureDeclarations = ( selectors, styles ) => {
+	const declarations = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		// We're only processing features/subfeatures that have styles.
+		if ( feature === 'root' || ! styles?.[ feature ] ) {
+			return;
+		}
+
+		const isShorthand = typeof selector === 'string';
+
+		// If we have a selector object instead of shorthand process it.
+		if ( ! isShorthand ) {
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					// Don't process root feature selector yet or any
+					// subfeature that doesn't have a style.
+					if (
+						subfeature === 'root' ||
+						! styles?.[ feature ][ subfeature ]
+					) {
+						return;
+					}
+
+					// Create a temporary styles object and build
+					// declarations for subfeature.
+					const subfeatureStyles = {
+						[ feature ]: {
+							[ subfeature ]: styles[ feature ][ subfeature ],
+						},
+					};
+					const newDeclarations =
+						getStylesDeclarations( subfeatureStyles );
+
+					// Merge new declarations in with any others that
+					// share the same selector.
+					declarations[ subfeatureSelector ] = [
+						...( declarations[ subfeatureSelector ] || [] ),
+						...newDeclarations,
+					];
+
+					// Remove the subfeature's style now it will be
+					// included under its own selector not the block's.
+					delete styles[ feature ][ subfeature ];
+				}
+			);
+		}
+
+		// Now subfeatures have been processed and removed, we can
+		// process root, or shorthand, feature selectors.
+		if ( isShorthand || selector.root ) {
+			const featureSelector = isShorthand ? selector : selector.root;
+
+			// Create temporary style object and build declarations for feature.
+			const featureStyles = { [ feature ]: styles[ feature ] };
+			const newDeclarations = getStylesDeclarations( featureStyles );
+
+			// Merge new declarations with any others that share the selector.
+			declarations[ featureSelector ] = [
+				...( declarations[ featureSelector ] || [] ),
+				...newDeclarations,
+			];
+
+			// Remove the feature from the block's styles now as it will be
+			// included under its own selector not the block's.
+			delete styles[ feature ];
+		}
+	} );
+
+	return declarations;
+};
+
 /**
  * Transform given style tree into a set of style declarations.
  *
@@ -692,23 +779,16 @@ export const toStyles = (
 			// Process styles for block support features with custom feature level
 			// CSS selectors set.
 			if ( featureSelectors ) {
-				Object.entries( featureSelectors ).forEach(
-					( [ featureName, featureSelector ] ) => {
-						if ( styles?.[ featureName ] ) {
-							const featureStyles = {
-								[ featureName ]: styles[ featureName ],
-							};
-							const featureDeclarations =
-								getStylesDeclarations( featureStyles );
-							delete styles[ featureName ];
-
-							if ( !! featureDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ featureSelector }{${ featureDeclarations.join(
-										';'
-									) } }`;
-							}
+				const featureDeclarations = getFeatureDeclarations(
+					featureSelectors,
+					styles
+				);
+
+				Object.entries( featureDeclarations ).forEach(
+					( [ cssSelector, declarations ] ) => {
+						if ( !! declarations.length ) {
+							const rules = declarations.join( ';' );
+							ruleset = ruleset + `${ cssSelector }{${ rules }}`;
 						}
 					}
 				);
@@ -720,43 +800,32 @@ export const toStyles = (
 						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
+								const featureDeclarations =
+									getFeatureDeclarations(
+										featureSelectors,
+										styles?.variations?.[
+											styleVariationName
+										]
+									);
+
+								Object.entries( featureDeclarations ).forEach(
+									( [ baseSelector, declarations ] ) => {
+										if ( !! declarations.length ) {
+											const cssSelector =
+												concatFeatureVariationSelectorString(
+													baseSelector,
+													styleVariationSelector
 												);
-											delete styles.variations[
-												styleVariationName
-											][ featureName ];
-
-											if (
-												!! featureDeclarations.length
-											) {
-												ruleset =
-													ruleset +
-													`${ concatFeatureVariationSelectorString(
-														featureSelector,
-														styleVariationSelector
-													) }{${ featureDeclarations.join(
-														';'
-													) } }`;
-											}
+											const rules =
+												declarations.join( ';' );
+											ruleset =
+												ruleset +
+												`${ cssSelector }{${ rules }}`;
 										}
 									}
 								);
 							}
+
 							// Otherwise add regular selectors.
 							const styleVariationDeclarations =
 								getStylesDeclarations(
@@ -907,15 +976,37 @@ export function toSvgFilters( tree, blockSelectors ) {
 	} );
 }
 
+const getSelectorsConfig = ( blockType, rootSelector ) => {
+	if ( ! isEmpty( blockType?.selectors ) ) {
+		return blockType.selectors;
+	}
+
+	const config = { root: rootSelector };
+	Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+		( [ featureKey, featureName ] ) => {
+			const featureSelector = getBlockCSSSelector(
+				blockType,
+				featureKey
+			);
+
+			if ( featureSelector ) {
+				config[ featureName ] = featureSelector;
+			}
+		}
+	);
+
+	return config;
+};
+
 export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
-		const selector =
-			blockType?.supports?.__experimentalSelector ??
-			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
-		const duotoneSelector =
-			blockType?.supports?.color?.__experimentalDuotone ?? null;
+		const selector = getBlockCSSSelector( blockType, 'root' );
+		const duotoneSelector = getBlockCSSSelector(
+			blockType,
+			'filter.duotone'
+		);
 		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
@@ -930,20 +1021,7 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 			} );
 		}
 		// For each block support feature add any custom selectors.
-		const featureSelectors = {};
-		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
-			( [ featureKey, featureName ] ) => {
-				const featureSelector =
-					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
-
-				if ( featureSelector ) {
-					featureSelectors[ featureName ] = scopeSelector(
-						selector,
-						featureSelector
-					);
-				}
-			}
-		);
+		const featureSelectors = getSelectorsConfig( blockType, selector );
 
 		result[ name ] = {
 			duotoneSelector,
@@ -1049,9 +1127,9 @@ export function useGlobalStylesOutput() {
 			hasFallbackGapSupport,
 			disableLayoutStyles
 		);
+		const svgs = toSvgFilters( mergedConfig, blockSelectors );
 
-		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		const stylesheets = [
+		const styles = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -1065,6 +1143,11 @@ export function useGlobalStylesOutput() {
 				css: mergedConfig.styles.css ?? '',
 				isGlobalStyles: true,
 			},
+			{
+				assets: svgs,
+				__unstableType: 'svg',
+				isGlobalStyles: true,
+			},
 		];
 
 		// Loop through the blocks to check if there are custom CSS values.
@@ -1073,7 +1156,7 @@ export function useGlobalStylesOutput() {
 		getBlockTypes().forEach( ( blockType ) => {
 			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
-				stylesheets.push( {
+				styles.push( {
 					css: processCSSNesting(
 						mergedConfig.styles.blocks[ blockType.name ]?.css,
 						selector
@@ -1083,7 +1166,7 @@ export function useGlobalStylesOutput() {
 			}
 		} );
 
-		return [ stylesheets, mergedConfig.settings, filters ];
+		return [ styles, mergedConfig.settings ];
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index e8ca27d4b97e4d..d1abd0a57dbc2d 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -16,7 +16,9 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
+	'headingColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -103,6 +105,7 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.typography.fontSize': 'font-size',
 	'elements.button.color.text': 'color',
 	'elements.button.color.background': 'color',
+	'elements.caption.color.text': 'color',
 	'elements.button.typography.fontFamily': 'font-family',
 	'elements.button.typography.fontSize': 'font-size',
 	'elements.heading.color': 'color',
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 db2ad3c3de14f5..46e87de60f2fc8 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -38,17 +38,16 @@ export default function ImageSizeControl( {
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
+					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p>{ __( 'Image dimensions' ) }</p>
-
 					<HStack align="baseline" spacing="3">
 						<NumberControl
 							className="block-editor-image-size-control__width"
@@ -58,6 +57,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
+							size="__unstable-large"
 						/>
 						<NumberControl
 							className="block-editor-image-size-control__height"
@@ -67,6 +67,7 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
+							size="__unstable-large"
 						/>
 					</HStack>
 					<HStack>
diff --git a/packages/block-editor/src/components/image-size-control/test/index.js b/packages/block-editor/src/components/image-size-control/test/index.js
index 3033e07147e394..c36be27971e694 100644
--- a/packages/block-editor/src/components/image-size-control/test/index.js
+++ b/packages/block-editor/src/components/image-size-control/test/index.js
@@ -334,7 +334,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Image size' } )
+				screen.getByRole( 'combobox', { name: 'Resolution' } )
 			).toHaveValue( 'medium' );
 		} );
 
@@ -351,7 +351,7 @@ describe( 'ImageSizeControl', () => {
 			);
 
 			await user.selectOptions(
-				screen.getByRole( 'combobox', { name: 'Image size' } ),
+				screen.getByRole( 'combobox', { name: 'Resolution' } ),
 				'thumbnail'
 			);
 
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index ce4eacb5e09954..eb42da998f0d0c 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -130,7 +130,7 @@ _Options:_
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overriden: it's present, the `templateLock` value of any children is ignored.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overridden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 
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
index f145d961e1f303..9a3670b5deb286 100644
--- 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
@@ -5,6 +5,8 @@ import {
 	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -12,26 +14,55 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
+import { store as blockEditorStore } from '../../store';
 
-const PositionControls = () => {
-	const fills = useSlotFills(
-		InspectorControlsGroups.position.Slot.__unstableName
-	);
-	const hasFills = Boolean( fills && fills.length );
+const PositionControlsPanel = () => {
+	const [ initialOpen, setInitialOpen ] = useState();
 
-	if ( ! hasFills ) {
-		return null;
-	}
+	// Determine whether the panel should be expanded.
+	const { multiSelectedBlocks } = useSelect( ( select ) => {
+		const { getBlocksByClientId, getSelectedBlockClientIds } =
+			select( blockEditorStore );
+		const clientIds = getSelectedBlockClientIds();
+		return {
+			multiSelectedBlocks: getBlocksByClientId( clientIds ),
+		};
+	}, [] );
+
+	useLayoutEffect( () => {
+		// If any selected block has a position set, open the panel by default.
+		// The first block's value will still be used within the control though.
+		if ( initialOpen === undefined ) {
+			setInitialOpen(
+				multiSelectedBlocks.some(
+					( { attributes } ) => !! attributes?.style?.position?.type
+				)
+			);
+		}
+	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
 
 	return (
 		<PanelBody
 			className="block-editor-block-inspector__position"
 			title={ __( 'Position' ) }
-			initialOpen={ false }
+			initialOpen={ initialOpen ?? false }
 		>
 			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };
 
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return <PositionControlsPanel />;
+};
+
 export default PositionControls;
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 670d6fac37e8df..61e0c4a3f32893 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -84,6 +84,15 @@ const LineHeightControl = ( {
 		? undefined
 		: { marginBottom: 24 };
 
+	const handleOnChange = ( nextValue, { event } ) => {
+		if ( event.type === 'click' ) {
+			onChange( adjustNextValue( nextValue, false ) );
+			return;
+		}
+
+		onChange( nextValue );
+	};
+
 	return (
 		<div
 			className="block-editor-line-height-control"
@@ -93,7 +102,7 @@ const LineHeightControl = ( {
 				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
-				onChange={ onChange }
+				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js
new file mode 100644
index 00000000000000..a006b91e860c20
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/appender.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
+import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import Inserter from '../inserter';
+
+export const Appender = forwardRef(
+	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
+		const [ insertedBlock, setInsertedBlock ] = useState( null );
+
+		const instanceId = useInstanceId( Appender );
+		const { hideInserter } = useSelect(
+			( select ) => {
+				const { getTemplateLock, __unstableGetEditorMode } =
+					select( blockEditorStore );
+
+				return {
+					hideInserter:
+						!! getTemplateLock( clientId ) ||
+						__unstableGetEditorMode() === 'zoom-out',
+				};
+			},
+			[ clientId ]
+		);
+
+		const blockTitle = useBlockDisplayTitle( {
+			clientId,
+			context: 'list-view',
+		} );
+
+		const insertedBlockTitle = useBlockDisplayTitle( {
+			clientId: insertedBlock?.clientId,
+			context: 'list-view',
+		} );
+
+		useEffect( () => {
+			if ( ! insertedBlockTitle?.length ) {
+				return;
+			}
+
+			speak(
+				sprintf(
+					// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
+					__( '%s block inserted' ),
+					insertedBlockTitle
+				),
+				'assertive'
+			);
+		}, [ insertedBlockTitle ] );
+
+		if ( hideInserter ) {
+			return null;
+		}
+
+		const descriptionId = `list-view-appender__${ instanceId }`;
+		const description = sprintf(
+			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
+			__( 'Append to %1$s block at position %2$d, Level %3$d' ),
+			blockTitle,
+			blockCount + 1,
+			nestingLevel
+		);
+
+		return (
+			<div className="list-view-appender">
+				<Inserter
+					ref={ ref }
+					rootClientId={ clientId }
+					position="bottom right"
+					isAppender
+					selectBlockOnInsert={ false }
+					shouldDirectInsert={ false }
+					__experimentalIsQuick
+					{ ...props }
+					toggleProps={ { 'aria-describedby': descriptionId } }
+					onSelectOrClose={ ( maybeInsertedBlock ) => {
+						if ( maybeInsertedBlock?.clientId ) {
+							setInsertedBlock( maybeInsertedBlock );
+						}
+					} }
+				/>
+				<div
+					className="list-view-appender__description"
+					id={ descriptionId }
+				>
+					{ description }
+				</div>
+			</div>
+		);
+	}
+);
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 7034bb92ecffd5..976323eb195e7c 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -33,7 +33,6 @@ import {
 	BlockMoverDownButton,
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
-import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -135,7 +134,8 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
+		useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -321,14 +321,15 @@ function ListViewBlock( {
 				</>
 			) }
 
-			{ showBlockActions && (
+			{ showBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected || forceSelectionContentLock }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
+						<BlockSettingsMenu
 							clientIds={ dropdownClientIds }
+							block={ block }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							toggleProps={ {
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index 83fc99dca24504..4438b57c70d69e 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -1,12 +1,17 @@
 /**
  * WordPress dependencies
  */
+import {
+	__experimentalTreeGridRow as TreeGridRow,
+	__experimentalTreeGridCell as TreeGridCell,
+} from '@wordpress/components';
 import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
@@ -93,6 +98,7 @@ function ListViewBranch( props ) {
 		parentId,
 		shouldShowInnerBlocks = true,
 		isSyncedBranch = false,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const parentBlockInformation = useBlockDisplayInformation( parentId );
@@ -120,8 +126,12 @@ function ListViewBranch( props ) {
 		return null;
 	}
 
+	// Only show the appender at the first level.
+	const showAppender = showAppenderProp && level === 1;
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
+	// The appender means an extra row in List View, so add 1 to the row count.
+	const rowCount = showAppender ? blockCount + 1 : blockCount;
 	let nextPosition = listPosition;
 
 	return (
@@ -175,7 +185,7 @@ function ListViewBranch( props ) {
 								isDragged={ isDragged }
 								level={ level }
 								position={ position }
-								rowCount={ blockCount }
+								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
@@ -209,6 +219,25 @@ function ListViewBranch( props ) {
 					</AsyncModeProvider>
 				);
 			} ) }
+			{ showAppender && (
+				<TreeGridRow
+					level={ level }
+					setSize={ rowCount }
+					positionInSet={ rowCount }
+					isExpanded={ true }
+				>
+					<TreeGridCell>
+						{ ( treeGridCellProps ) => (
+							<Appender
+								clientId={ parentId }
+								nestingLevel={ level }
+								blockCount={ blockCount }
+								{ ...treeGridCellProps }
+							/>
+						) }
+					</TreeGridCell>
+				</TreeGridRow>
+			) }
 		</>
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 5425290809a18b..aff471e18fa1ae 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -28,6 +28,7 @@ import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
+import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -47,18 +48,30 @@ const expanded = ( state, action ) => {
 
 export const BLOCK_LIST_ITEM_HEIGHT = 36;
 
+/** @typedef {import('react').ComponentType} ComponentType */
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @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 {Object}  ref                   Forwarded ref
+ * @param {Object}         props                   Components props.
+ * @param {string}         props.id                An HTML element id for the root element of ListView.
+ * @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. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {Ref}            ref                     Forwarded ref
  */
-function ListView(
-	{ id, blocks, showBlockMovers = false, isExpanded = false },
+function ListViewComponent(
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		showAppender = false,
+		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
+	},
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -170,8 +183,16 @@ function ListView(
 			expandedState,
 			expand,
 			collapse,
+			BlockSettingsMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			BlockSettingsMenu,
+		]
 	);
 
 	// If there are no blocks to show, do not render the list view.
@@ -204,10 +225,22 @@ function ListView(
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
 						shouldShowInnerBlocks={ shouldShowInnerBlocks }
+						showAppender={ showAppender }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>
 		</AsyncModeProvider>
 	);
 }
-export default forwardRef( ListView );
+export const PrivateListView = forwardRef( ListViewComponent );
+
+export default forwardRef( ( props, ref ) => {
+	return (
+		<PrivateListView
+			ref={ ref }
+			{ ...props }
+			showAppender={ false }
+			blockSettingsMenu={ BlockSettingsDropdown }
+		/>
+	);
+} );
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 0bedb39061af4c..9a1b2f501d4dca 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -410,3 +410,22 @@ $block-navigation-max-indent: 8;
 	height: 36px;
 }
 
+.list-view-appender .block-editor-inserter__toggle {
+	background-color: #1e1e1e;
+	color: #fff;
+	margin: $grid-unit-10 0 0 24px;
+	border-radius: 2px;
+	height: 24px;
+	min-width: 24px;
+	padding: 0;
+
+	&:hover,
+	&:focus {
+		background: var(--wp-admin-theme-color);
+		color: #fff;
+	}
+}
+
+.list-view-appender__description {
+	display: none;
+}
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index a2fb5f36036aaa..29790419af1317 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -58,6 +63,7 @@ const MediaReplaceFlow = ( {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
+	const canUpload = !! mediaUpload;
 	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
@@ -152,7 +158,7 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<>
+						<MediaUploadCheck>
 							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
@@ -171,28 +177,26 @@ const MediaReplaceFlow = ( {
 									</MenuItem>
 								) }
 							/>
-							<MediaUploadCheck>
-								<FormFileUpload
-									onChange={ ( event ) => {
-										uploadFiles( event, onClose );
-									} }
-									accept={ accept }
-									multiple={ multiple }
-									render={ ( { openFileDialog } ) => {
-										return (
-											<MenuItem
-												icon={ upload }
-												onClick={ () => {
-													openFileDialog();
-												} }
-											>
-												{ __( 'Upload' ) }
-											</MenuItem>
-										);
-									} }
-								/>
-							</MediaUploadCheck>
-						</>
+							<FormFileUpload
+								onChange={ ( event ) => {
+									uploadFiles( event, onClose );
+								} }
+								accept={ accept }
+								multiple={ multiple }
+								render={ ( { openFileDialog } ) => {
+									return (
+										<MenuItem
+											icon={ upload }
+											onClick={ () => {
+												openFileDialog();
+											} }
+										>
+											{ __( 'Upload' ) }
+										</MenuItem>
+									);
+								} }
+							/>
+						</MediaUploadCheck>
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
@@ -206,7 +210,15 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form className="block-editor-media-flow__url-input">
+						<form
+							className={ classnames(
+								'block-editor-media-flow__url-input',
+								{
+									'has-siblings':
+										canUpload || onToggleFeaturedImage,
+								}
+							) }
+						>
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index 81484cbf806623..dd3b0563c3ca8a 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -10,12 +10,15 @@
 }
 
 .block-editor-media-flow__url-input {
-	border-top: $border-width solid $gray-900;
-	margin-top: $grid-unit-10;
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
+	&.has-siblings {
+		border-top: $border-width solid $gray-900;
+		margin-top: $grid-unit-10;
+	}
+
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;
diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
index 3ab3f47d226aec..75b077ab321d43 100644
--- a/packages/block-editor/src/components/rich-text/format-edit.js
+++ b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	getActiveFormat,
-	getActiveObject,
-	isCollapsed,
-} from '@wordpress/rich-text';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -22,37 +18,11 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		let isActive = activeFormat !== undefined;
+		const isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
-		// Edge case: un-collapsed link formats.
-		// If there is a missing link format at either end of the selection
-		// then we shouldn't show the Edit UI because the selection has exceeded
-		// the bounds of the link format.
-		// Also if the format objects don't match then we're dealing with two separate
-		// links so we should not allow the link to be modified over the top.
-		if ( name === 'core/link' && ! isCollapsed( value ) ) {
-			const formats = value.formats;
-
-			const linkFormatAtStart = formats[ value.start ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			const linkFormatAtEnd = formats[ value.end - 1 ]?.find(
-				( { type } ) => type === 'core/link'
-			);
-
-			if (
-				! linkFormatAtStart ||
-				! linkFormatAtEnd ||
-				linkFormatAtStart !== linkFormatAtEnd
-			) {
-				isActive = false;
-			}
-		}
-
 		return (
 			<Edit
 				key={ name }
diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js
index de68fa1ded943f..f9baf216885ecf 100644
--- a/packages/block-editor/src/components/writing-flow/use-input.js
+++ b/packages/block-editor/src/components/writing-flow/use-input.js
@@ -31,11 +31,10 @@ export default function useInput() {
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			if ( ! hasMultiSelection() ) {
-				return;
-			}
-			// Prevent the browser to format something when we have multiselection.
-			if ( event.inputType?.startsWith( 'format' ) ) {
+			// If writing flow is editable, NEVER allow the browser to alter the
+			// DOM. This will cause React errors (and the DOM should only be
+			// altered in a controlled fashion).
+			if ( node.contentEditable === 'true' ) {
 				event.preventDefault();
 			}
 		}
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index a5f08b64515b01..de6aa349898645 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -163,7 +163,6 @@ export function BorderPanel( props ) {
 		<StylesBorderPanel
 			as={ BordersInspectorControl }
 			panelId={ clientId }
-			name={ name }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index cd94b6b1bcaa3f..09c65285c8df4d 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -8,8 +8,7 @@ import classnames from 'classnames';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
+import { useMemo, Platform, useCallback } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -17,22 +16,22 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  */
 import {
 	getColorClassName,
-	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
-import {
-	__experimentalGetGradientClass,
-	getGradientValueBySlug,
-	getGradientSlugByValue,
-} from '../components/gradients';
+import { __experimentalGetGradientClass } from '../components/gradients';
 import {
 	cleanEmptyObject,
 	transformStyles,
-	immutableSet,
 	shouldSkipSerialization,
+	useBlockSettings,
 } from './utils';
-import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
+import InspectorControls from '../components/inspector-controls';
+import {
+	useHasColorPanel,
+	default as StylesColorPanel,
+} from '../components/global-styles/color-panel';
+import BlockColorContrastChecker from './contrast-checker';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -83,60 +82,6 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
-/**
- * Clears a single color property from a style object.
- *
- * @param {Array}  path  Path to color property to clear within styles object.
- * @param {Object} style Block attributes style object.
- * @return {Object} Styles with the color property omitted.
- */
-const clearColorFromStyles = ( path, style ) =>
-	cleanEmptyObject( immutableSet( style, path, undefined ) );
-
-/**
- * Clears text color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with text color properties omitted.
- */
-const resetAllTextFilter = ( attributes ) => ( {
-	textColor: undefined,
-	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-} );
-
-/**
- * Clears link color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with link color properties omitted.
- */
-const resetAllLinkFilter = ( attributes ) => ( {
-	style: clearColorFromStyles(
-		[ 'elements', 'link', 'color', 'text' ],
-		attributes.style
-	),
-} );
-
-/**
- * Clears all background color related properties including gradients from
- * supplied block attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Block attributes with background and gradient omitted.
- */
-const clearBackgroundAndGradient = ( attributes ) => ( {
-	backgroundColor: undefined,
-	gradient: undefined,
-	style: {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			background: undefined,
-			gradient: undefined,
-		},
-	},
-} );
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -273,194 +218,112 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const getLinkColorFromAttributeValue = ( colors, value ) => {
-	const attributeParsed = /var:preset\|color\|(.+)/.exec( value );
-	if ( attributeParsed && attributeParsed[ 1 ] ) {
-		return getColorObjectByAttributeValues( colors, attributeParsed[ 1 ] )
-			.color;
-	}
-	return value;
-};
-
-/**
- * Inspector control panel containing the color related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Color edit element.
- */
-export function ColorEdit( props ) {
-	const { name: blockName, attributes } = props;
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' );
-	const themePalette = useSetting( 'color.palette.theme' );
-	const defaultPalette = useSetting( 'color.palette.default' );
-	const allSolids = useMemo(
-		() => [
-			...( userPalette || [] ),
-			...( themePalette || [] ),
-			...( defaultPalette || [] ),
-		],
-		[ userPalette, themePalette, defaultPalette ]
-	);
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
-	const allGradients = useMemo(
-		() => [
-			...( userGradientPalette || [] ),
-			...( themeGradientPalette || [] ),
-			...( defaultGradientPalette || [] ),
-		],
-		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
-	);
-	const areCustomSolidsEnabled = useSetting( 'color.custom' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-
-	const solidsEnabled =
-		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
-
-	const gradientsEnabled =
-		areCustomGradientsEnabled ||
-		! themeGradientPalette ||
-		themeGradientPalette?.length > 0;
-
-	// Shouldn't be needed but right now the ColorGradientsPanel
-	// can trigger both onChangeColor and onChangeBackground
-	// synchronously causing our two callbacks to override changes
-	// from each other.
-	const localAttributes = useRef( attributes );
-	useEffect( () => {
-		localAttributes.current = attributes;
-	}, [ attributes ] );
-
-	if ( ! hasColorSupport( blockName ) ) {
-		return null;
-	}
-
-	const hasLinkColor =
-		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
-	const hasTextColor =
-		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
-	const hasBackgroundColor =
-		hasBackgroundColorSupport( blockName ) &&
-		isBackgroundEnabled &&
-		solidsEnabled;
-	const hasGradientColor =
-		hasGradientSupport( blockName ) && gradientsEnabled;
-
-	if (
-		! hasLinkColor &&
-		! hasTextColor &&
-		! hasBackgroundColor &&
-		! hasGradientColor
-	) {
-		return null;
-	}
+function styleToAttributes( style ) {
+	const textColorValue = style?.color?.text;
+	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
+		? textColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const backgroundColorValue = style?.color?.background;
+	const backgroundColorSlug = backgroundColorValue?.startsWith(
+		'var:preset|color|'
+	)
+		? backgroundColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const gradientValue = style?.color?.gradient;
+	const gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )
+		? gradientValue.substring( 'var:preset|gradient|'.length )
+		: undefined;
+	const updatedStyle = { ...style };
+	updatedStyle.color = {
+		...updatedStyle.color,
+		text: textColorSlug ? undefined : textColorValue,
+		background: backgroundColorSlug ? undefined : backgroundColorValue,
+		gradient: gradientSlug ? undefined : gradientValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		textColor: textColorSlug,
+		backgroundColor: backgroundColorSlug,
+		gradient: gradientSlug,
+	};
+}
 
-	const { style, textColor, backgroundColor, gradient } = attributes;
-	let gradientValue;
-	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( allGradients, gradient );
-	} else if ( hasGradientColor ) {
-		gradientValue = style?.color?.gradient;
-	}
+function attributesToStyle( attributes ) {
+	return {
+		...attributes.style,
+		color: {
+			...attributes.style?.color,
+			text: attributes.textColor
+				? 'var:preset|color|' + attributes.textColor
+				: attributes.style?.color?.text,
+			background: attributes.backgroundColor
+				? 'var:preset|color|' + attributes.backgroundColor
+				: attributes.style?.color?.background,
+			gradient: attributes.gradient
+				? 'var:preset|gradient|' + attributes.gradient
+				: attributes.style?.color?.gradient,
+		},
+	};
+}
 
-	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const attributeName = name + 'Color';
-		const newStyle = {
-			...localAttributes.current.style,
-			color: {
-				...localAttributes.current?.style?.color,
-				[ name ]: colorObject?.slug ? undefined : value,
-			},
-		};
+function ColorInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
 
-		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
-		const newAttributes = {
-			style: cleanEmptyObject( newStyle ),
-			[ attributeName ]: newNamedColor,
-		};
+	return (
+		<InspectorControls
+			group="color"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
-	};
+export function ColorEdit( props ) {
+	const { clientId, name, attributes, setAttributes } = props;
+	const settings = useBlockSettings( name );
+	const isEnabled = useHasColorPanel( settings );
+	const value = useMemo( () => {
+		return attributesToStyle( {
+			style: attributes.style,
+			textColor: attributes.textColor,
+			backgroundColor: attributes.backgroundColor,
+			gradient: attributes.gradient,
+		} );
+	}, [
+		attributes.style,
+		attributes.textColor,
+		attributes.backgroundColor,
+		attributes.gradient,
+	] );
 
-	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( allGradients, value );
-		let newAttributes;
-		if ( slug ) {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: undefined,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: slug,
-			};
-		} else {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: value,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: undefined,
-			};
-		}
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
-	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const newLinkColorValue = colorObject?.slug
-			? `var:preset|color|${ colorObject.slug }`
-			: value;
-
-		const newStyle = cleanEmptyObject(
-			immutableSet(
-				localAttributes.current?.style,
-				[ 'elements', 'link', 'color', 'text' ],
-				newLinkColorValue
-			)
-		);
-		props.setAttributes( { style: newStyle } );
-		localAttributes.current = {
-			...localAttributes.current,
-			...{ style: newStyle },
-		};
-	};
+	if ( ! isEnabled ) {
+		return null;
+	}
 
-	const defaultColorControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( props.name, [
 		COLOR_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
 	const enableContrastChecking =
 		Platform.OS === 'web' &&
-		! gradient &&
-		! style?.color?.gradient &&
-		hasBackgroundColor &&
-		( hasLinkColor || hasTextColor ) &&
+		! value?.color?.gradient &&
+		( settings?.color?.text || settings?.color?.link ) &&
 		// Contrast checking is enabled by default.
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.
@@ -471,64 +334,25 @@ export function ColorEdit( props ) {
 			] );
 
 	return (
-		<ColorPanel
-			enableContrastChecking={ enableContrastChecking }
-			clientId={ props.clientId }
-			enableAlpha={ true }
-			settings={ [
-				...( hasTextColor
-					? [
-							{
-								label: __( 'Text' ),
-								onColorChange: onChangeColor( 'text' ),
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									textColor,
-									style?.color?.text
-								).color,
-								isShownByDefault: defaultColorControls?.text,
-								resetAllFilter: resetAllTextFilter,
-							},
-					  ]
-					: [] ),
-				...( hasBackgroundColor || hasGradientColor
-					? [
-							{
-								label: __( 'Background' ),
-								onColorChange: hasBackgroundColor
-									? onChangeColor( 'background' )
-									: undefined,
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									backgroundColor,
-									style?.color?.background
-								).color,
-								gradientValue,
-								onGradientChange: hasGradientColor
-									? onChangeGradient
-									: undefined,
-								isShownByDefault:
-									defaultColorControls?.background,
-								resetAllFilter: clearBackgroundAndGradient,
-							},
-					  ]
-					: [] ),
-				...( hasLinkColor
-					? [
-							{
-								label: __( 'Link' ),
-								onColorChange: onChangeLinkColor,
-								colorValue: getLinkColorFromAttributeValue(
-									allSolids,
-									style?.elements?.link?.color?.text
-								),
-								isShownByDefault: defaultColorControls?.link,
-								resetAllFilter: resetAllLinkFilter,
-							},
-					  ]
-					: [] ),
-			] }
-		/>
+		<StylesColorPanel
+			as={ ColorInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+			enableContrastChecker={
+				false !==
+				getBlockSupport( props.name, [
+					COLOR_SUPPORT_KEY,
+					'enableContrastChecker',
+				] )
+			}
+		>
+			{ enableContrastChecking && (
+				<BlockColorContrastChecker clientId={ clientId } />
+			) }
+		</StylesColorPanel>
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 1fa8ffc29c8586..568da7974925a1 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -104,9 +104,13 @@ export const withBlockControls = createHigherOrderComponent(
 			return <BlockEdit { ...props } />;
 		}
 
+		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
+		const showStartEditingAsBlocks =
+			! isEditingAsBlocks && isContentLocked && props.isSelected;
+
 		return (
 			<>
-				{ isEditingAsBlocks && ! isContentLocked && (
+				{ showStopEditingAsBlocks && (
 					<>
 						<StopEditingAsBlocksOnOutsideSelect
 							clientId={ props.clientId }
@@ -123,7 +127,7 @@ export const withBlockControls = createHigherOrderComponent(
 						</BlockControls>
 					</>
 				) }
-				{ ! isEditingAsBlocks && isContentLocked && props.isSelected && (
+				{ showStartEditingAsBlocks && (
 					<BlockSettingsMenuControls>
 						{ ( { onClose } ) => (
 							<MenuItem
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/contrast-checker.js
similarity index 52%
rename from packages/block-editor/src/hooks/color-panel.js
rename to packages/block-editor/src/hooks/contrast-checker.js
index 97113b5a060f0c..ef04da63e4946b 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/contrast-checker.js
@@ -6,45 +6,23 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
 
-export default function ColorPanel( {
-	enableAlpha = false,
-	settings,
-	clientId,
-	enableContrastChecking = true,
-} ) {
+export default function BlockColorContrastChecker( { clientId } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
-	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
+	// There are so many things that can change the color of a block
+	// So we perform this check on every render.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
-		if ( ! enableContrastChecking ) {
-			return;
-		}
-		if ( ! definedColors.length ) {
-			if ( detectedBackgroundColor ) {
-				setDetectedBackgroundColor();
-			}
-			if ( detectedColor ) {
-				setDetectedColor();
-			}
-			if ( detectedLinkColor ) {
-				setDetectedColor();
-			}
-			return;
-		}
-
 		if ( ! ref.current ) {
 			return;
 		}
@@ -72,26 +50,12 @@ export default function ColorPanel( {
 		setDetectedBackgroundColor( backgroundColor );
 	} );
 
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-
 	return (
-		<InspectorControls group="color">
-			<ColorGradientSettingsDropdown
-				enableAlpha={ enableAlpha }
-				panelId={ clientId }
-				settings={ settings }
-				__experimentalIsItemGroup={ false }
-				__experimentalIsRenderedInSidebar
-				{ ...colorGradientSettings }
-			/>
-			{ enableContrastChecking && (
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-					enableAlphaChecker={ enableAlpha }
-					linkColor={ detectedLinkColor }
-				/>
-			) }
-		</InspectorControls>
+		<ContrastChecker
+			backgroundColor={ detectedBackgroundColor }
+			textColor={ detectedColor }
+			enableAlphaChecker
+			linkColor={ detectedLinkColor }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 046800bf0144de..02c3931ef9850d 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -105,7 +105,6 @@ export function DimensionsPanel( props ) {
 			<StylesDimensionsPanel
 				as={ DimensionsInspectorControl }
 				panelId={ clientId }
-				name={ name }
 				settings={ settings }
 				value={ value }
 				onChange={ onChange }
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index b56d9f64b4e832..a05e188d507e1a 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -8,7 +8,11 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockSupport,
+	getBlockType,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
@@ -269,10 +273,9 @@ function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
 		colors = getColorsFromDuotonePreset( colors, duotonePalette );
 	}
 
-	const duotoneSupportSelectors = getBlockSupport(
-		name,
-		'color.__experimentalDuotone'
-	);
+	const duotoneSupportSelectors =
+		getBlockType( name ).selectors?.filter?.duotone ||
+		getBlockSupport( name, 'color.__experimentalDuotone' );
 
 	// Extra .editor-styles-wrapper specificity is needed in the editor
 	// since we're not using inline styles to apply the filter. We need to
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 2c5589c1920bbd..64577a271a56df 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import {
 	BaseControl,
@@ -49,7 +49,7 @@ const DEFAULT_OPTION = {
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
-	name: __( 'Sticky' ),
+	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will stick to the top of the window instead of scrolling.'
@@ -59,7 +59,7 @@ const STICKY_OPTION = {
 const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
-	name: __( 'Fixed' ),
+	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
 	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will not move when the page is scrolled.'
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index b6fe7b8188c2be..1d1e1f1e14df90 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -384,39 +384,40 @@ const withElementsStyles = createHigherOrderComponent(
 		);
 
 		const styles = useMemo( () => {
-			const rawElementsStyles = props.attributes.style?.elements;
+			// The .editor-styles-wrapper selector is required on elements styles. As it is
+			// added to all other editor styles, not providing it causes reset and global
+			// styles to override element styles because of higher specificity.
+			const elements = [
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }`,
+				},
+				{
+					styles: ! skipLinkColorSerialization
+						? props.attributes.style?.elements?.link?.[ ':hover' ]
+						: undefined,
+					selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS.link }:hover`,
+				},
+			];
 			const elementCssRules = [];
-			if (
-				rawElementsStyles &&
-				Object.keys( rawElementsStyles ).length > 0
-			) {
-				// Remove values based on whether serialization has been skipped for a specific style.
-				const filteredElementsStyles = {
-					...rawElementsStyles,
-					link: {
-						...rawElementsStyles.link,
-						color: ! skipLinkColorSerialization
-							? rawElementsStyles.link?.color
-							: undefined,
-					},
-				};
-
-				for ( const [ elementName, elementStyles ] of Object.entries(
-					filteredElementsStyles
-				) ) {
+			for ( const { styles: elementStyles, selector } of elements ) {
+				if ( elementStyles ) {
 					const cssRule = compileCSS( elementStyles, {
-						// The .editor-styles-wrapper selector is required on elements styles. As it is
-						// added to all other editor styles, not providing it causes reset and global
-						// styles to override element styles because of higher specificity.
-						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+						selector,
 					} );
-					if ( !! cssRule ) {
-						elementCssRules.push( cssRule );
-					}
+					elementCssRules.push( cssRule );
 				}
 			}
-			return elementCssRules.length > 0 ? elementCssRules : undefined;
-		}, [ props.attributes.style?.elements ] );
+			return elementCssRules.length > 0
+				? elementCssRules.join( '' )
+				: undefined;
+		}, [
+			props.attributes.style?.elements,
+			blockElementsContainerIdentifier,
+			skipLinkColorSerialization,
+		] );
 
 		const element = useContext( BlockList.__unstableElementContext );
 
diff --git a/packages/block-editor/src/hooks/test/utils.js b/packages/block-editor/src/hooks/test/utils.js
index bfbced3195b7fb..a919fad575312e 100644
--- a/packages/block-editor/src/hooks/test/utils.js
+++ b/packages/block-editor/src/hooks/test/utils.js
@@ -7,113 +7,9 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../anchor';
-import { immutableSet } from '../utils';
 
 const noop = () => {};
 
-describe( 'immutableSet', () => {
-	describe( 'handling falsy values properly', () => {
-		it( 'should create a new object if `undefined` is passed', () => {
-			const result = immutableSet( undefined, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `null` is passed', () => {
-			const result = immutableSet( null, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `false` is passed', () => {
-			const result = immutableSet( false, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if `0` is passed', () => {
-			const result = immutableSet( 0, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if an empty string is passed', () => {
-			const result = immutableSet( '', 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'should create a new object if a NaN is passed', () => {
-			const result = immutableSet( NaN, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-	} );
-
-	describe( 'manages data assignment properly', () => {
-		it( 'assigns value properly when it does not exist', () => {
-			const result = immutableSet( {}, 'test', 1 );
-
-			expect( result ).toEqual( { test: 1 } );
-		} );
-
-		it( 'overrides existing values', () => {
-			const result = immutableSet( { test: 1 }, 'test', 2 );
-
-			expect( result ).toEqual( { test: 2 } );
-		} );
-
-		describe( 'with array notation access', () => {
-			it( 'assigns values at deeper levels', () => {
-				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'overrides existing values at deeper levels', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'baz' ],
-					5
-				);
-
-				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
-			} );
-
-			it( 'keeps other properties intact', () => {
-				const result = immutableSet(
-					{ foo: { bar: { baz: 1 } } },
-					[ 'foo', 'bar', 'test' ],
-					5
-				);
-
-				expect( result ).toEqual( {
-					foo: { bar: { baz: 1, test: 5 } },
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'does not mutate the original object', () => {
-		it( 'clones the object at the first level', () => {
-			const input = {};
-			const result = immutableSet( input, 'test', 1 );
-
-			expect( result ).not.toBe( input );
-		} );
-
-		it( 'clones the object at deeper levels', () => {
-			const input = { foo: { bar: { baz: 1 } } };
-			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
-
-			expect( result ).not.toBe( input );
-			expect( result.foo ).not.toBe( input.foo );
-			expect( result.foo.bar ).not.toBe( input.foo.bar );
-			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
-		} );
-	} );
-} );
-
 describe( 'anchor', () => {
 	const blockSettings = {
 		save: noop,
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 00e1c348f57c80..cb98c4098c4774 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -138,7 +138,6 @@ export function TypographyPanel( {
 		<StylesTypographyPanel
 			as={ TypographyInspectorControl }
 			panelId={ clientId }
-			name={ name }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index f324bd99bc6eac..c7748ef85a7a0e 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -14,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import { useSetting } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
+import { immutableSet } from '../utils/object';
 
 /**
  * Removed falsy values from nested object.
@@ -37,76 +38,6 @@ export const cleanEmptyObject = ( object ) => {
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
 
-/**
- * Converts a path to an array of its fragments.
- * Supports strings, numbers and arrays:
- *
- * 'foo' => [ 'foo' ]
- * 2 => [ '2' ]
- * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
- *
- * @param {string|number|Array} path Path
- * @return {Array} Normalized path.
- */
-function normalizePath( path ) {
-	if ( Array.isArray( path ) ) {
-		return path;
-	} else if ( typeof path === 'number' ) {
-		return [ path.toString() ];
-	}
-
-	return [ path ];
-}
-
-/**
- * Clones an object.
- * Non-object values are returned unchanged.
- *
- * @param {*} object Object to clone.
- * @return {*} Cloned object, or original literal non-object value.
- */
-function cloneObject( object ) {
-	if ( typeof object === 'object' ) {
-		return {
-			...Object.fromEntries(
-				Object.entries( object ).map( ( [ key, value ] ) => [
-					key,
-					cloneObject( value ),
-				] )
-			),
-		};
-	}
-
-	return object;
-}
-
-/**
- * Perform an immutable set.
- * Handles nullish initial values.
- * Clones all nested objects in the specified object.
- *
- * @param {Object}              object Object to set a value in.
- * @param {number|string|Array} path   Path in the object to modify.
- * @param {*}                   value  New value to set.
- * @return {Object} Cloned object with the new value set.
- */
-export function immutableSet( object, path, value ) {
-	const normalizedPath = normalizePath( path );
-	const newObject = object ? cloneObject( object ) : {};
-
-	normalizedPath.reduce( ( acc, key, i ) => {
-		if ( acc[ key ] === undefined ) {
-			acc[ key ] = {};
-		}
-		if ( i === normalizedPath.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, newObject );
-
-	return newObject;
-}
-
 export function transformStyles(
 	activeSupports,
 	migrationPaths,
@@ -222,6 +153,14 @@ export function useBlockSettings( name, parentLayout ) {
 	const themeColors = useSetting( 'color.palette.theme' );
 	const defaultColors = useSetting( 'color.palette.default' );
 	const defaultPalette = useSetting( 'color.defaultPalette' );
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const defaultGradients = useSetting( 'color.defaultGradients' );
+	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
+	const isBackgroundEnabled = useSetting( 'color.background' );
+	const isLinkEnabled = useSetting( 'color.link' );
+	const isTextEnabled = useSetting( 'color.text' );
 
 	const rawSettings = useMemo( () => {
 		return {
@@ -231,8 +170,18 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeColors,
 					default: defaultColors,
 				},
+				gradients: {
+					custom: userGradientPalette,
+					theme: themeGradientPalette,
+					default: defaultGradientPalette,
+				},
+				defaultGradients,
 				defaultPalette,
 				custom: customColorsEnabled,
+				customGradient: areCustomGradientsEnabled,
+				background: isBackgroundEnabled,
+				link: isLinkEnabled,
+				text: isTextEnabled,
 			},
 			typography: {
 				fontFamilies: {
@@ -299,6 +248,14 @@ export function useBlockSettings( name, parentLayout ) {
 		themeColors,
 		defaultColors,
 		defaultPalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
new file mode 100644
index 00000000000000..69347123fd4213
--- /dev/null
+++ b/packages/block-editor/src/layouts/grid.js
@@ -0,0 +1,172 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	BaseControl,
+	Flex,
+	FlexItem,
+	RangeControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { appendSelectors, getBlockGapCSS } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
+
+const RANGE_CONTROL_MAX_VALUES = {
+	px: 600,
+	'%': 100,
+	vw: 100,
+	vh: 100,
+	em: 38,
+	rem: 38,
+};
+
+export default {
+	name: 'grid',
+	label: __( 'Grid' ),
+	inspectorControls: function GridLayoutInspectorControls( {
+		layout = {},
+		onChange,
+	} ) {
+		return (
+			<GridLayoutMinimumWidthControl
+				layout={ layout }
+				onChange={ onChange }
+			/>
+		);
+	},
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout,
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions,
+	} ) {
+		const { minimumColumnWidth = '12rem' } = layout;
+
+		// If a block's block.json skips serialization for spacing or spacing.blockGap,
+		// don't apply the user-defined value to the styles.
+		const blockGapValue =
+			style?.spacing?.blockGap &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
+				: undefined;
+
+		let output = '';
+		const rules = [];
+
+		if ( minimumColumnWidth ) {
+			rules.push(
+				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
+			);
+		}
+
+		if ( rules.length ) {
+			// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
+			// eslint-disable-next-line prettier/prettier
+			output = `${ appendSelectors( selector ) } { ${ rules.join(
+				'; '
+			) }; }`;
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'grid',
+				blockGapValue
+			);
+		}
+		return output;
+	},
+	getOrientation() {
+		return 'horizontal';
+	},
+	getAlignments() {
+		return [];
+	},
+};
+
+// Enables setting minimum width of grid items.
+function GridLayoutMinimumWidthControl( { layout, onChange } ) {
+	const { minimumColumnWidth: value = '12rem' } = layout;
+	const [ quantity, unit ] = parseQuantityAndUnitFromRawValue( value );
+
+	const handleSliderChange = ( next ) => {
+		onChange( {
+			...layout,
+			minimumColumnWidth: [ next, unit ].join( '' ),
+		} );
+	};
+
+	// Mostly copied from HeightControl.
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		let newValue;
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && unit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			newValue = ( quantity / 16 ).toFixed( 2 ) + newUnit;
+		} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {
+			// Convert to pixel value assuming a root size of 16px.
+			newValue = Math.round( quantity * 16 ) + newUnit;
+		} else if (
+			[ 'vh', 'vw', '%' ].includes( newUnit ) &&
+			quantity > 100
+		) {
+			// When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
+			newValue = 100 + newUnit;
+		}
+
+		onChange( {
+			...layout,
+			minimumColumnWidth: newValue,
+		} );
+	};
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Minimum column width' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<UnitControl
+						size={ '__unstable-large' }
+						onChange={ ( newValue ) => {
+							onChange( {
+								...layout,
+								minimumColumnWidth: newValue,
+							} );
+						} }
+						onUnitChange={ handleUnitChange }
+						value={ value }
+						min={ 0 }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						onChange={ handleSliderChange }
+						value={ quantity }
+						min={ 0 }
+						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
+						withInputField={ false }
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}
diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js
index 4ec1ff6f331911..1d30ac3ad36833 100644
--- a/packages/block-editor/src/layouts/index.js
+++ b/packages/block-editor/src/layouts/index.js
@@ -4,8 +4,9 @@
 import flex from './flex';
 import flow from './flow';
 import constrained from './constrained';
+import grid from './grid';
 
-const layoutTypes = [ flow, flex, constrained ];
+const layoutTypes = [ flow, flex, constrained, grid ];
 
 /**
  * Retrieves a layout type by name.
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
new file mode 100644
index 00000000000000..634457670f0dfa
--- /dev/null
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import grid from '../grid';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return a single `grid-template-columns` property if no non-default params are provided', () => {
+		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index b34f35adc5c911..567849f66f019e 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
+import { PrivateListView } from './components/list-view';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -18,4 +19,5 @@ lock( privateApis, {
 	LeafMoreMenu,
 	OffCanvasEditor,
 	PrivateInserter,
+	PrivateListView,
 } );
diff --git a/packages/block-editor/src/utils/object.js b/packages/block-editor/src/utils/object.js
new file mode 100644
index 00000000000000..5c6afbc7ba4ff2
--- /dev/null
+++ b/packages/block-editor/src/utils/object.js
@@ -0,0 +1,69 @@
+/**
+ * Converts a path to an array of its fragments.
+ * Supports strings, numbers and arrays:
+ *
+ * 'foo' => [ 'foo' ]
+ * 2 => [ '2' ]
+ * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
+ *
+ * @param {string|number|Array} path Path
+ * @return {Array} Normalized path.
+ */
+function normalizePath( path ) {
+	if ( Array.isArray( path ) ) {
+		return path;
+	} else if ( typeof path === 'number' ) {
+		return [ path.toString() ];
+	}
+
+	return [ path ];
+}
+
+/**
+ * Clones an object.
+ * Non-object values are returned unchanged.
+ *
+ * @param {*} object Object to clone.
+ * @return {*} Cloned object, or original literal non-object value.
+ */
+function cloneObject( object ) {
+	if ( typeof object === 'object' ) {
+		return {
+			...Object.fromEntries(
+				Object.entries( object ).map( ( [ key, value ] ) => [
+					key,
+					cloneObject( value ),
+				] )
+			),
+		};
+	}
+
+	return object;
+}
+
+/**
+ * Perform an immutable set.
+ * Handles nullish initial values.
+ * Clones all nested objects in the specified object.
+ *
+ * @param {Object}              object Object to set a value in.
+ * @param {number|string|Array} path   Path in the object to modify.
+ * @param {*}                   value  New value to set.
+ * @return {Object} Cloned object with the new value set.
+ */
+export function immutableSet( object, path, value ) {
+	const normalizedPath = normalizePath( path );
+	const newObject = object ? cloneObject( object ) : {};
+
+	normalizedPath.reduce( ( acc, key, i ) => {
+		if ( acc[ key ] === undefined ) {
+			acc[ key ] = {};
+		}
+		if ( i === normalizedPath.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, newObject );
+
+	return newObject;
+}
diff --git a/packages/block-editor/src/utils/test/object.js b/packages/block-editor/src/utils/test/object.js
new file mode 100644
index 00000000000000..be5360064ac08b
--- /dev/null
+++ b/packages/block-editor/src/utils/test/object.js
@@ -0,0 +1,107 @@
+/**
+ * Internal dependencies
+ */
+import { immutableSet } from '../object';
+
+describe( 'immutableSet', () => {
+	describe( 'handling falsy values properly', () => {
+		it( 'should create a new object if `undefined` is passed', () => {
+			const result = immutableSet( undefined, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `null` is passed', () => {
+			const result = immutableSet( null, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `false` is passed', () => {
+			const result = immutableSet( false, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `0` is passed', () => {
+			const result = immutableSet( 0, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if an empty string is passed', () => {
+			const result = immutableSet( '', 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if a NaN is passed', () => {
+			const result = immutableSet( NaN, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+	} );
+
+	describe( 'manages data assignment properly', () => {
+		it( 'assigns value properly when it does not exist', () => {
+			const result = immutableSet( {}, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'overrides existing values', () => {
+			const result = immutableSet( { test: 1 }, 'test', 2 );
+
+			expect( result ).toEqual( { test: 2 } );
+		} );
+
+		describe( 'with array notation access', () => {
+			it( 'assigns values at deeper levels', () => {
+				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'overrides existing values at deeper levels', () => {
+				const result = immutableSet(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'baz' ],
+					5
+				);
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'keeps other properties intact', () => {
+				const result = immutableSet(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'test' ],
+					5
+				);
+
+				expect( result ).toEqual( {
+					foo: { bar: { baz: 1, test: 5 } },
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'does not mutate the original object', () => {
+		it( 'clones the object at the first level', () => {
+			const input = {};
+			const result = immutableSet( input, 'test', 1 );
+
+			expect( result ).not.toBe( input );
+		} );
+
+		it( 'clones the object at deeper levels', () => {
+			const input = { foo: { bar: { baz: 1 } } };
+			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
+
+			expect( result ).not.toBe( input );
+			expect( result.foo ).not.toBe( input.foo );
+			expect( result.foo.bar ).not.toBe( input.foo.bar );
+			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index 266646d96bcee5..71d5aa302cfc9b 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -10,6 +10,7 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
 		"spacing": {
 			"blockGap": true,
diff --git a/packages/block-library/src/categories/editor.scss b/packages/block-library/src/categories/editor.scss
index cf112b6fc5ff63..773a65296c06ec 100644
--- a/packages/block-library/src/categories/editor.scss
+++ b/packages/block-library/src/categories/editor.scss
@@ -5,3 +5,8 @@
 		margin-top: 6px;
 	}
 }
+
+/* Center alignment for classic themes. */
+[data-align="center"] .wp-block-categories {
+	text-align: center;
+}
diff --git a/packages/block-library/src/categories/style.scss b/packages/block-library/src/categories/style.scss
index 8cf1252800b438..b87e28a80f0f36 100644
--- a/packages/block-library/src/categories/style.scss
+++ b/packages/block-library/src/categories/style.scss
@@ -10,4 +10,8 @@
 		/*rtl:ignore*/
 		margin-left: 2em;
 	}
+	/* Only apply the text align on dropdowns, not lists. */
+	&.wp-block-categories-dropdown.aligncenter {
+		text-align: center;
+	}
 }
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index aaaa72263e309f..df7245939986db 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -13,6 +13,10 @@
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index e995729099961b..270ddded6cfabd 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -58,7 +58,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
+	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
 
 	const { count, canInsertColumnBlock } = useSelect(
 		( select ) => {
@@ -84,6 +84,7 @@ function ColumnsEditContainer( {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
 		renderAppender: false,
+		templateLock,
 	} );
 
 	return (
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index a5e51cfbf4e793..807c0c3ead2b8f 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -212,6 +212,7 @@ function register_legacy_post_comments_block() {
 	 * like `_wp_multiple_block_styles`, which is required in this case because
 	 * the block has multiple styles.
 	 */
+	/** This filter is documented in wp-includes/blocks.php */
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index fcacf44e1c6851..f99180d7601fdd 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -206,9 +206,7 @@ export default function CoverInspectorControls( {
 							isImgElement && (
 								<TextareaControl
 									__nextHasNoMarginBottom
-									label={ __(
-										'Alt text (alternative text)'
-									) }
+									label={ __( 'Alternative text' ) }
 									value={ alt }
 									onChange={ ( newAlt ) =>
 										setAttributes( { alt: newAlt } )
@@ -217,11 +215,12 @@ export default function CoverInspectorControls( {
 										<>
 											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 												{ __(
-													'Describe the purpose of the image'
+													'Describe the purpose of the image.'
 												) }
 											</ExternalLink>
+											<br />
 											{ __(
-												'Leave empty if the image is purely decorative.'
+												'Leave empty if decorative.'
 											) }
 										</>
 									}
diff --git a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
index 252edf24172231..dc4ba0fbb2b1f8 100644
--- a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
@@ -30,7 +30,7 @@ exports[`Cover block transformations with Image to Image block 1`] = `
 
 exports[`Cover block transformations with Image to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"
@@ -60,7 +60,7 @@ exports[`Cover block transformations with Video to Group block 1`] = `
 
 exports[`Cover block transformations with Video to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
 <p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"
diff --git a/packages/block-library/src/cover/test/block-controls.js b/packages/block-library/src/cover/test/block-controls.js
deleted file mode 100644
index ea14dfb38d7b73..00000000000000
--- a/packages/block-library/src/cover/test/block-controls.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent } from '@testing-library/react';
-
-// Need to mock the BlockControls wrapper as this requires a slot to run
-// so can't be easily unit tested.
-jest.mock( '@wordpress/block-editor', () => ( {
-	...jest.requireActual( '@wordpress/block-editor' ),
-	BlockControls: ( { children } ) => <div>{ children }</div>,
-} ) );
-
-/**
- * Internal dependencies
- */
-import CoverBlockControls from '../edit/block-controls';
-
-const setAttributes = jest.fn();
-const onSelectMedia = jest.fn();
-
-const currentSettings = { hasInnerBlocks: true, url: undefined };
-const defaultAttributes = {
-	contentPosition: undefined,
-	id: 1,
-	useFeaturedImage: false,
-	dimRatio: 50,
-	minHeight: 300,
-	minHeightUnit: 'px',
-};
-const defaultProps = {
-	attributes: defaultAttributes,
-	currentSettings,
-	setAttributes,
-	onSelectMedia,
-};
-
-beforeEach( () => {
-	setAttributes.mockClear();
-	onSelectMedia.mockClear();
-} );
-
-describe( 'Cover block controls', () => {
-	describe( 'Full height toggle', () => {
-		test( 'displays toggle full height button toggled off if minHeight not 100vh', () => {
-			render( <CoverBlockControls { ...defaultProps } /> );
-			expect(
-				screen.getByRole( 'button', {
-					pressed: false,
-					name: 'Toggle full height',
-				} )
-			).toBeInTheDocument();
-		} );
-		test( 'sets minHeight attributes to 100vh when clicked', () => {
-			render( <CoverBlockControls { ...defaultProps } /> );
-			fireEvent.click( screen.getByLabelText( 'Toggle full height' ) );
-			expect( setAttributes ).toHaveBeenCalledWith( {
-				minHeight: 100,
-				minHeightUnit: 'vh',
-			} );
-		} );
-	} );
-} );
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
new file mode 100644
index 00000000000000..c2510dcb666b6c
--- /dev/null
+++ b/packages/block-library/src/cover/test/edit.js
@@ -0,0 +1,324 @@
+/**
+ * External dependencies
+ */
+import { screen, fireEvent, act, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import {
+	initializeEditor,
+	selectBlock,
+} from 'test/integration/helpers/integration-test-editor';
+
+async function setup( attributes ) {
+	const testBlock = { name: 'core/cover', attributes };
+	return initializeEditor( testBlock );
+}
+
+async function createAndSelectBlock() {
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Color: Black',
+		} )
+	);
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Select Cover',
+		} )
+	);
+}
+
+describe( 'Cover block', () => {
+	describe( 'Editor canvas', () => {
+		test( 'shows placeholder if background image and color not set', async () => {
+			await setup();
+
+			expect(
+				screen.getByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		test( 'can set overlay color using color picker on block placeholder', async () => {
+			const { container } = await setup();
+			const colorPicker = screen.getByRole( 'button', {
+				name: 'Color: Black',
+			} );
+			await userEvent.click( colorPicker );
+			const color = colorPicker.style.backgroundColor;
+			expect(
+				screen.queryByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).not.toBeInTheDocument();
+
+			// eslint-disable-next-line testing-library/no-node-access
+			const overlay = container.getElementsByClassName(
+				'wp-block-cover__background'
+			);
+			expect( overlay[ 0 ] ).toHaveStyle(
+				`background-color: ${ color }`
+			);
+		} );
+
+		test( 'can have the title edited', async () => {
+			await setup();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Color: Black',
+				} )
+			);
+
+			const title = screen.getByLabelText( 'Empty block;', {
+				exact: false,
+			} );
+			await userEvent.click( title );
+			await userEvent.keyboard( 'abc' );
+			expect( title ).toHaveTextContent( 'abc' );
+		} );
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
+				'min-height: 100vh;'
+			);
+
+			await userEvent.click(
+				screen.getByLabelText( 'Toggle full height' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+				'min-height: 100vh;'
+			);
+		} );
+
+		test( 'content position button sets content position', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			await userEvent.click(
+				screen.getByLabelText( 'Change content position' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-custom-content-position'
+			);
+
+			await act( async () =>
+				within( screen.getByRole( 'grid' ) )
+					.getByRole( 'gridcell', {
+						name: 'top left',
+					} )
+					.focus()
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-custom-content-position'
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-position-top-left'
+			);
+		} );
+	} );
+
+	describe( 'Inspector controls', () => {
+		describe( 'Media settings', () => {
+			test( 'does not display media settings panel if url is not set', async () => {
+				await setup();
+				expect(
+					screen.queryByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).not.toBeInTheDocument();
+			} );
+			test( 'displays media settings panel if url is set', async () => {
+				await setup( {
+					url: 'http://localhost/my-image.jpg',
+				} );
+
+				await selectBlock( 'Block: Cover' );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Media settings',
+					} )
+				).toBeInTheDocument();
+			} );
+		} );
+
+		test( 'sets hasParallax attribute to true if fixed background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-parallax'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Fixed background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-parallax'
+			);
+		} );
+
+		test( 'sets isRepeated attribute to true if repeated background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'is-repeated'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Repeated background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-repeated'
+			);
+		} );
+
+		test( 'sets left focalPoint attribute when focal point values changed', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toHaveStyle( 'object-position: 100% 50%;' );
+		} );
+
+		test( 'sets alt attribute if text entered in alt text box', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.type(
+				screen.getByLabelText( 'Alt text (alternative text)' ),
+				'Me'
+			);
+			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
+		} );
+
+		test( 'clears media  when clear media button clicked', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toBeInTheDocument();
+
+			await userEvent.click(
+				screen.getByRole( 'button', {
+					name: 'Clear Media',
+				} )
+			);
+			expect(
+				within( screen.queryByLabelText( 'Block: Cover' ) ).queryByRole(
+					'img'
+				)
+			).not.toBeInTheDocument();
+		} );
+
+		describe( 'Color panel', () => {
+			test( 'applies selected opacity to block when number control value changed', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'spinbutton', {
+						name: 'Overlay opacity',
+					} ),
+					{
+						target: { value: '40' },
+					}
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
+			} );
+
+			test( 'applies selected opacity to block when slider moved', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				fireEvent.change(
+					screen.getByRole( 'slider', {
+						name: 'Overlay opacity',
+					} ),
+					{ target: { value: 30 } }
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
+			} );
+		} );
+
+		describe( 'Dimensions panel', () => {
+			test( 'sets minHeight attribute when number control value changed', async () => {
+				await setup();
+				await createAndSelectBlock();
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+				await userEvent.clear(
+					screen.getByLabelText( 'Minimum height of cover' )
+				);
+				await userEvent.type(
+					screen.getByLabelText( 'Minimum height of cover' ),
+					'300'
+				);
+
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+					'min-height: 300px;'
+				);
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 7ab1b1307056f5..64a6dae10ec90f 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -562,6 +562,7 @@ function GalleryEdit( props ) {
 							max={ Math.min( MAX_COLUMNS, images.length ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
+							size="__unstable-large"
 						/>
 					) }
 					<ToggleControl
@@ -578,6 +579,7 @@ function GalleryEdit( props ) {
 						onChange={ setLinkTo }
 						options={ linkOptions }
 						hideCancelButton={ true }
+						size="__unstable-large"
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
@@ -590,7 +592,7 @@ function GalleryEdit( props ) {
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
 							__nextHasNoMarginBottom
-							label={ __( 'Image size' ) }
+							label={ __( 'Resolution' ) }
 							help={ __(
 								'Select the size of the source images.'
 							) }
@@ -598,12 +600,13 @@ function GalleryEdit( props ) {
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
 							hideCancelButton={ true }
+							size="__unstable-large"
 						/>
 					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
-								{ __( 'Image size' ) }
+								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
 							<View className={ 'gallery-image-sizes__loading' }>
 								<Spinner />
diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
index 133b421cfa12e9..c96cd8dbaf5781 100644
--- a/packages/block-library/src/gallery/use-image-sizes.js
+++ b/packages/block-library/src/gallery/use-image-sizes.js
@@ -5,7 +5,7 @@ import { useMemo } from '@wordpress/element';
 
 /**
  * Calculates the image sizes that are avaible for the current gallery images in order to
- * populate the 'Image size' selector.
+ * populate the 'Resolution' selector.
  *
  * @param {Array}    images      Basic image block data taken from current gallery innerBlock
  * @param {boolean}  isSelected  Is the block currently selected in the editor.
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index dc523d9d512a32..af52b14c7c5e6e 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -50,7 +50,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
@@ -135,7 +136,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 452da6e7f32386..04c9e71ca853b8 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -12,6 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -97,7 +98,8 @@ function GroupEdit( {
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
+	const layoutSupportEnabled =
+		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
 	const blockProps = useBlockProps( {
@@ -108,15 +110,28 @@ function GroupEdit( {
 		usedLayoutType: usedLayout?.type,
 		hasInnerBlocks,
 	} );
+
+	// Default to the regular appender being rendered.
+	let renderAppender;
+	if ( showPlaceholder ) {
+		// In the placeholder state, ensure the appender is not rendered.
+		// This is needed because `...innerBlocksProps` is used in the placeholder
+		// state so that blocks can dragged onto the placeholder area
+		// from both the list view and in the editor canvas.
+		renderAppender = false;
+	} else if ( ! hasInnerBlocks ) {
+		// When there is no placeholder, but the block is also empty,
+		// use the larger button appender.
+		renderAppender = InnerBlocks.ButtonBlockAppender;
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
 			templateLock,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
+			renderAppender,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
@@ -138,11 +153,14 @@ function GroupEdit( {
 				}
 			/>
 			{ showPlaceholder && (
-				<GroupPlaceHolder
-					clientId={ clientId }
-					name={ name }
-					onSelect={ selectVariation }
-				/>
+				<View { ...innerBlocksProps }>
+					{ innerBlocksProps.children }
+					<GroupPlaceHolder
+						clientId={ clientId }
+						name={ name }
+						onSelect={ selectVariation }
+					/>
+				</View>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index daf535df8bf607..16a99a9287338d 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -47,6 +47,17 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
 			</SVG>
 		),
+		'group-grid': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
+				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+			</SVG>
+		),
 	};
 	return icons?.[ name ];
 };
@@ -85,7 +96,8 @@ export function useShouldShowPlaceHolder( {
 			! fontSize &&
 			! textColor &&
 			! style &&
-			usedLayoutType !== 'flex'
+			usedLayoutType !== 'flex' &&
+			usedLayoutType !== 'grid'
 	);
 
 	useEffect( () => {
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 2b64d794dd4cc2..3f5dcc0a45a9e4 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 
 const variations = [
 	{
@@ -44,4 +44,17 @@ const variations = [
 	},
 ];
 
+if ( window?.__experimentalEnableGroupGridVariation ) {
+	variations.push( {
+		name: 'group-grid',
+		title: __( 'Grid' ),
+		description: __( 'Arrange blocks in a grid.' ),
+		attributes: { layout: { type: 'grid' } },
+		scope: [ 'block', 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'grid',
+		icon: grid,
+	} );
+}
+
 export default variations;
diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php
index 33f41057c936bb..459979b0d43893 100644
--- a/packages/block-library/src/home-link/index.php
+++ b/packages/block-library/src/home-link/index.php
@@ -98,12 +98,12 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
+	$classes[]       = 'wp-block-navigation-item';
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes,
+			'class' => implode( ' ', $classes ),
 			'style' => $style_attribute,
 		)
 	);
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 62edb882be0c93..b54358fc48d6a4 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -85,7 +85,7 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder",
+			"__experimentalDuotone": true,
 			"text": false,
 			"background": false
 		},
@@ -93,7 +93,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -102,6 +101,12 @@
 			}
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
+		"filter": {
+			"duotone": "img, .components-placeholder"
+		}
+	},
 	"styles": [
 		{
 			"name": "default",
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index d69fbd1c9638df..175c0b8bcf21a7 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -211,7 +211,7 @@ export function ImageEdit( {
 					: 'full',
 			};
 		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
+			// Keep the same url when selecting the same file, so "Resolution"
 			// option is not changed.
 			additionalAttributes = { url };
 		}
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 3ffd377005af92..804ae9e1671f6e 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -578,7 +578,7 @@ export class ImageEdit extends Component {
 				footerNote={
 					<>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
+							'Describe the purpose of the image. Leave empty if decorative.'
 						) }{ ' ' }
 						<FooterMessageLink
 							href={
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 69a8f7492f904b..c513ede8b9fe29 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -170,12 +170,18 @@ export default function Image( {
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
 		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
+	const canUploadMedia = !! mediaUpload;
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
 	// we can enable a button in the toolbar to upload the image.
 	useEffect( () => {
-		if ( ! isExternalImage( id, url ) || ! isSelected || externalBlob ) {
+		if (
+			! isExternalImage( id, url ) ||
+			! isSelected ||
+			! canUploadMedia ||
+			externalBlob
+		) {
 			return;
 		}
 
@@ -185,7 +191,7 @@ export default function Image( {
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSelected, externalBlob ] );
+	}, [ id, url, isSelected, externalBlob, canUploadMedia ] );
 
 	// We need to show the caption when changes come from
 	// history navigation(undo/redo).
@@ -401,19 +407,18 @@ export default function Image( {
 					{ ! multiImageSelection && (
 						<TextareaControl
 							__nextHasNoMarginBottom
-							label={ __( 'Alt text (alternative text)' ) }
+							label={ __( 'Alternative text' ) }
 							value={ alt }
 							onChange={ updateAlt }
 							help={
 								<>
 									<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
 										{ __(
-											'Describe the purpose of the image'
+											'Describe the purpose of the image.'
 										) }
 									</ExternalLink>
-									{ __(
-										'Leave empty if the image is purely decorative.'
-									) }
+									<br />
+									{ __( 'Leave empty if decorative.' ) }
 								</>
 							}
 						/>
@@ -428,6 +433,9 @@ export default function Image( {
 						isResizable={ isResizable }
 						imageWidth={ naturalWidth }
 						imageHeight={ naturalHeight }
+						imageSizeHelp={ __(
+							'Select the size of the source image.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 4f373558ed4373..e05939a4d0feac 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -14,13 +14,18 @@
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
+	$processor = new WP_HTML_Tag_Processor( $content );
+	$processor->next_tag( 'img' );
+
+	if ( $processor->get_attribute( 'src' ) === null ) {
+		return '';
+	}
+
 	if ( isset( $attributes['data-id'] ) ) {
 		// Add the data-id="$id" attribute to the img element
 		// to provide backwards compatibility for the Gallery Block,
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
-		$processor = new WP_HTML_Tag_Processor( $content );
-		$processor->next_tag( 'img' );
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 		$content = $processor->get_updated_html();
 	}
diff --git a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
index 61c8de02bd03a2..56a5fe3c259120 100644
--- a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
@@ -42,7 +42,7 @@ exports[`Image block transformations to Group block 1`] = `
 
 exports[`Image block transformations to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaId":1,"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"
diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
index 604729f763caa0..8759da8c73d94d 100644
--- a/packages/block-library/src/latest-comments/style.scss
+++ b/packages/block-library/src/latest-comments/style.scss
@@ -1,7 +1,7 @@
 // Lower specificity - target list element.
 ol.wp-block-latest-comments {
 	// Removes left spacing in Customizer Widgets screen.
-	// Due to low specificity this will be safely overriden
+	// Due to low specificity this will be safely overridden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
 
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 2e10cb19de0685..45266f6ab94c4e 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -289,6 +289,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							imageWidth={ defaultImageWidth }
 							imageHeight={ defaultImageHeight }
 							imageSizeOptions={ imageSizeOptions }
+							imageSizeHelp={ __(
+								'Select the size of the source image.'
+							) }
 							onChangeImage={ ( value ) =>
 								setAttributes( {
 									featuredImageSizeSlug: value,
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 1c9fc0b6820f1e..ded230a2eb1006 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -10,7 +10,7 @@
 	"attributes": {
 		"align": {
 			"type": "string",
-			"default": "wide"
+			"default": "none"
 		},
 		"mediaAlt": {
 			"type": "string",
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 95595f8da6424b..2d061213dface8 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -13,6 +13,7 @@ import {
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +31,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
+const v6ImageFillStyles = ( url, focalPoint ) => {
+	return url
+		? {
+				backgroundImage: `url(${ url })`,
+				backgroundPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+};
+
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
 
@@ -49,6 +63,20 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
+// After align attribute's default was updated this function explicitly sets
+// the align value for deprecated blocks to the `wide` value which was default
+// for their versions of this block.
+const migrateDefaultAlign = ( attributes ) => {
+	if ( attributes.align ) {
+		return attributes;
+	}
+
+	return {
+		...attributes,
+		align: 'wide',
+	};
+};
+
 const baseAttributes = {
 	align: {
 		type: 'string',
@@ -133,6 +161,40 @@ const v4ToV5BlockAttributes = {
 	},
 };
 
+const v6Attributes = {
+	...v4ToV5BlockAttributes,
+	mediaAlt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure img',
+		attribute: 'alt',
+		default: '',
+		__experimentalRole: 'content',
+	},
+	mediaId: {
+		type: 'number',
+		__experimentalRole: 'content',
+	},
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+		__experimentalRole: 'content',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'href',
+		__experimentalRole: 'content',
+	},
+	mediaType: {
+		type: 'string',
+		__experimentalRole: 'content',
+	},
+};
+
 const v4ToV5Supports = {
 	anchor: true,
 	align: [ 'wide', 'full' ],
@@ -143,6 +205,166 @@ const v4ToV5Supports = {
 	},
 };
 
+const v6Supports = {
+	...v4ToV5Supports,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	spacing: {
+		margin: true,
+		padding: true,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+};
+
+// Version with wide as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/48404
+const v6 = {
+	attributes: v6Attributes,
+	supports: v6Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		const imageClasses = classnames( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+	migrate: migrateDefaultAlign,
+	isEligible( attributes, innerBlocks, { block } ) {
+		const { attributes: finalizedAttributes } = block;
+		// When the align attribute defaults to none, valid block markup should
+		// not contain any alignment CSS class. Unfortunately, this
+		// deprecation's version of the block won't be invalidated due to the
+		// alignwide class still being in the markup. That is because the custom
+		// CSS classname support picks it up and adds it to the className
+		// attribute. At the time of parsing, the className attribute won't
+		// contain the alignwide class, hence the need to check the finalized
+		// block attributes.
+		return (
+			attributes.align === undefined &&
+			!! finalizedAttributes.className?.includes( 'alignwide' )
+		);
+	},
+};
+
+// Version with non-rounded background position attribute for focal point.
+// See: https://github.com/WordPress/gutenberg/pull/33915
 const v5 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -252,9 +474,11 @@ const v5 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
 // Version with CSS grid
+// See: https://github.com/WordPress/gutenberg/pull/40806
 const v4 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -348,8 +572,11 @@ const v4 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
+// Version with ad-hoc color attributes
+// See: https://github.com/WordPress/gutenberg/pull/21169
 const v3 = {
 	attributes: {
 		...baseAttributes,
@@ -399,7 +626,7 @@ const v3 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -496,6 +723,8 @@ const v3 = {
 	},
 };
 
+// Version with stack on mobile off by default
+// See: https://github.com/WordPress/gutenberg/pull/14364
 const v2 = {
 	attributes: {
 		...baseAttributes,
@@ -521,7 +750,7 @@ const v2 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -596,6 +825,8 @@ const v2 = {
 	},
 };
 
+// Version without the wp-image-#### class on image
+// See: https://github.com/WordPress/gutenberg/pull/11922
 const v1 = {
 	attributes: {
 		...baseAttributes,
@@ -612,6 +843,7 @@ const v1 = {
 			attribute: 'src',
 		},
 	},
+	migrate: migrateDefaultAlign,
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -663,4 +895,4 @@ const v1 = {
 	},
 };
 
-export default [ v5, v4, v3, v2, v1 ];
+export default [ v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 9df9d0c7a90c97..7f46febcef5179 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -270,17 +270,16 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			{ mediaType === 'image' && (
 				<TextareaControl
 					__nextHasNoMarginBottom
-					label={ __( 'Alt text (alternative text)' ) }
+					label={ __( 'Alternative text' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>
 							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-								{ __( 'Describe the purpose of the image' ) }
+								{ __( 'Describe the purpose of the image.' ) }
 							</ExternalLink>
-							{ __(
-								'Leave empty if the image is purely decorative.'
-							) }
+							<br />
+							{ __( 'Leave empty if decorative.' ) }
 						</>
 					}
 				/>
@@ -291,7 +290,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					slug={ mediaSizeSlug }
 					imageSizeOptions={ imageSizeOptions }
 					isResizable={ false }
-					imageSizeHelp={ __( 'Select which image size to load.' ) }
+					imageSizeHelp={ __(
+						'Select the size of the source image.'
+					) }
 				/>
 			) }
 			{ mediaUrl && (
diff --git a/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap
index a5731d607fa318..07e18768ec9c2c 100644
--- a/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap
@@ -3,7 +3,7 @@
 exports[`Media & Text block transformations with Image to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
@@ -22,7 +22,7 @@ exports[`Media & Text block transformations with Image to Cover block 1`] = `
 
 exports[`Media & Text block transformations with Image to Group block 1`] = `
 "<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
@@ -39,7 +39,7 @@ exports[`Media & Text block transformations with Image to Image block 1`] = `
 exports[`Media & Text block transformations with Video to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Cloudup</p>
 <!-- /wp:paragraph --></div></div>
@@ -58,7 +58,7 @@ exports[`Media & Text block transformations with Video to Cover block 1`] = `
 
 exports[`Media & Text block transformations with Video to Group block 1`] = `
 "<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"><!-- wp:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Cloudup</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index ab384f8349158c..5333ab6ea3dc9e 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -181,7 +181,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index cf1364f81f113c..748613193bc709 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -14,66 +14,6 @@
  * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
@@ -129,7 +69,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -144,17 +83,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -249,14 +184,33 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
-		$classes     = array_merge(
-			array( 'wp-block-navigation__submenu-container' ),
-			$colors['css_classes']
-		);
-		$css_classes = trim( implode( ' ', $classes ) );
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
 
-		$style_attribute = $colors['inline_styles'];
+		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
 
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index 16b0e57505c69d..ce2bed0d8837f6 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -87,7 +87,6 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation",
 		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 9fb672e5c557d1..16cc4c014cf90f 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -477,19 +477,6 @@ function Navigation( {
 		showClassicMenuConversionNotice,
 	] );
 
-	// Spacer block needs orientation from context. This is a patch until
-	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
-	useEffect( () => {
-		if ( orientation ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { orientation } );
-		}
-	}, [
-		orientation,
-		__unstableMarkNextChangeAsNotPersistent,
-		setAttributes,
-	] );
-
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;
diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
index 0ac56a711cc4cd..7ad9667bb98d9e 100644
--- a/packages/block-library/src/navigation/edit/inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -29,9 +29,6 @@ const ALLOWED_BLOCKS = [
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
-	attributes: {
-		type: 'page',
-	},
 };
 
 export default function NavigationInnerBlocks( {
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 946472ef95caa4..b0c8748075bdd7 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -689,10 +689,12 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-close {
 	width: 100%;
 
-	// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
-	max-width: var(--wp--style--global--wide-size, 100%);
-	margin-left: auto;
-	margin-right: auto;
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
 
 	// This element is not keyboard accessible, and is focusable only using the mouse.
 	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index 7e6a9e6a0bd852..898d9478283bc8 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -32,7 +32,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	$link        = get_author_posts_url( $author_id );
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
-		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s">%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 6ce9144023e6e7..d6b8cb2b15ae57 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -76,12 +76,15 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
+	const dateLabel =
+		displayType === 'date' ? __( 'Post Date' ) : __( 'Post Modified Date' );
+
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
 			{ dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
-		__( 'Post Date' )
+		dateLabel
 	);
 
 	if ( isLink && date ) {
diff --git a/packages/block-library/src/post-date/index.js b/packages/block-library/src/post-date/index.js
index fddae539acfa34..232b715c3795b6 100644
--- a/packages/block-library/src/post-date/index.js
+++ b/packages/block-library/src/post-date/index.js
@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-date/variations.js b/packages/block-library/src/post-date/variations.js
new file mode 100644
index 00000000000000..0b99b9d5136883
--- /dev/null
+++ b/packages/block-library/src/post-date/variations.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { postDate } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'post-date-modified',
+		title: __( 'Post Modified Date' ),
+		description: __( "Display a post's last updated date." ),
+		attributes: { displayType: 'modified' },
+		scope: [ 'block', 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.displayType === 'modified',
+		icon: postDate,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 378aa34cd00baa..c88a4ab9368829 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
@@ -18,12 +18,15 @@ import {
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
+const ELLIPSIS = '…';
+
 export default function PostExcerptEditor( {
 	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
@@ -32,13 +35,41 @@ export default function PostExcerptEditor( {
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
-	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
-
 	const [
 		rawExcerpt,
 		setExcerpt,
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
+
+	/**
+	 * Check if the post type supports excerpts.
+	 * Add an exception and return early for the "page" post type,
+	 * which is registered without support for the excerpt UI,
+	 * but supports saving the excerpt to the database.
+	 * See: https://core.trac.wordpress.org/browser/branches/6.1/src/wp-includes/post.php#L65
+	 * Without this exception, users that have excerpts saved to the database will
+	 * not be able to edit the excerpts.
+	 */
+	const postTypeSupportsExcerpts = useSelect(
+		( select ) => {
+			if ( postType === 'page' ) {
+				return true;
+			}
+			return !! select( coreStore ).getPostType( postType )?.supports
+				.excerpt;
+		},
+		[ postType ]
+	);
+
+	/**
+	 * The excerpt is editable if:
+	 * - The user can edit the post
+	 * - It is not a descendent of a Query Loop block
+	 * - The post type supports excerpts
+	 */
+	const isEditable =
+		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -65,6 +96,7 @@ export default function PostExcerptEditor( {
 		);
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
+
 	if ( ! postType || ! postId ) {
 		return (
 			<>
@@ -123,14 +155,13 @@ export default function PostExcerptEditor( {
 	 * The excerpt length setting needs to be applied to both
 	 * the raw and the rendered excerpt depending on which is being used.
 	 */
-	const rawOrRenderedExcerpt = !! renderedExcerpt
-		? strippedRenderedExcerpt
-		: rawExcerpt;
+	const rawOrRenderedExcerpt = (
+		rawExcerpt || strippedRenderedExcerpt
+	).trim();
 
 	let trimmedExcerpt = '';
 	if ( wordCountType === 'words' ) {
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( ' ', excerptLength )
 			.join( ' ' );
 	} else if ( wordCountType === 'characters_excluding_spaces' ) {
@@ -143,7 +174,6 @@ export default function PostExcerptEditor( {
 		 * so that the spaces are excluded from the word count.
 		 */
 		const excerptWithSpaces = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength )
 			.join( '' );
 
@@ -152,14 +182,15 @@ export default function PostExcerptEditor( {
 			excerptWithSpaces.replaceAll( ' ', '' ).length;
 
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.trim()
 			.split( '', excerptLength + numberOfSpaces )
 			.join( '' );
 	} else if ( wordCountType === 'characters_including_spaces' ) {
-		trimmedExcerpt = rawOrRenderedExcerpt.trim().split( '', excerptLength );
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( '', excerptLength )
+			.join( '' );
 	}
 
-	trimmedExcerpt = trimmedExcerpt + '...';
+	const isTrimmed = trimmedExcerpt !== rawOrRenderedExcerpt;
 
 	const excerptContent = isEditable ? (
 		<RichText
@@ -168,7 +199,9 @@ export default function PostExcerptEditor( {
 			value={
 				isSelected
 					? rawOrRenderedExcerpt
-					: ( trimmedExcerpt !== '...' ? trimmedExcerpt : '' ) ||
+					: ( ! isTrimmed
+							? rawOrRenderedExcerpt
+							: trimmedExcerpt + ELLIPSIS ) ||
 					  __( 'No post excerpt found' )
 			}
 			onChange={ setExcerpt }
@@ -176,9 +209,9 @@ export default function PostExcerptEditor( {
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ trimmedExcerpt !== '...'
-				? trimmedExcerpt
-				: __( 'No post excerpt found' ) }
+			{ ! isTrimmed
+				? rawOrRenderedExcerpt || __( 'No post excerpt found' )
+				: trimmedExcerpt + ELLIPSIS }
 		</p>
 	);
 	return (
@@ -208,7 +241,6 @@ export default function PostExcerptEditor( {
 						value={ excerptLength }
 						onChange={ ( value ) => {
 							setAttributes( { excerptLength: value } );
-							setExcerpt();
 						} }
 						min="10"
 						max="100"
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 f10872c178b5cc..729d1c331a2c6d 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -204,7 +204,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -216,7 +216,7 @@ const DimensionControls = ( {
 				>
 					<SelectControl
 						__nextHasNoMarginBottom
-						label={ __( 'Image size' ) }
+						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
 						onChange={ ( nextSizeSlug ) =>
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index 1af6e63e1be4a2..6318a2837ba95f 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -12,6 +12,7 @@
 		justify-content: center;
 		align-items: center;
 		padding: 0;
+		display: flex;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index c0fc0d6ff8e7ea..6c2056368d6449 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -18,7 +18,7 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true,
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"__experimentalLayout": {
 			"allowEditing": false
diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss
index 9db5c808db1a79..b1cdcf385e223c 100644
--- a/packages/block-library/src/post-template/style.scss
+++ b/packages/block-library/src/post-template/style.scss
@@ -16,7 +16,7 @@
 		flex-wrap: wrap;
 		gap: 1.25em;
 
-		li {
+		> li {
 			margin: 0;
 			width: 100%;
 		}
diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json
index 33cd4674d77535..20313744c343ed 100644
--- a/packages/block-library/src/post-time-to-read/block.json
+++ b/packages/block-library/src/post-time-to-read/block.json
@@ -15,6 +15,22 @@
 	},
 	"supports": {
 		"html": false,
-		"multiple": false
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }
diff --git a/packages/block-library/src/post-time-to-read/style.scss b/packages/block-library/src/post-time-to-read/style.scss
new file mode 100644
index 00000000000000..9d10408a599ed2
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-time-to-read {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/query-title/index.php b/packages/block-library/src/query-title/index.php
index d781de3826b1dc..29793e5227a79f 100644
--- a/packages/block-library/src/query-title/index.php
+++ b/packages/block-library/src/query-title/index.php
@@ -28,12 +28,9 @@ function render_block_core_query_title( $attributes ) {
 	if ( $is_archive ) {
 		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
 		if ( ! $show_prefix ) {
-			$filter_title = function( $title, $original_title ) {
-				return $original_title;
-			};
-			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			add_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 			$title = get_the_archive_title();
-			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			remove_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 		} else {
 			$title = get_the_archive_title();
 		}
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index adb9fddca78731..485774ceb0a9cf 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -29,6 +29,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 9a713804603ba3..fcbf558a192304 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -1,5 +1,8 @@
+$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
+$button-spacing-y: math.div($grid-unit-15, 2); // 6px
+
 .wp-block-search__button {
-	margin-left: 0.625em;
+	margin-left: $button-spacing-x;
 	word-break: normal;
 
 	&.has-icon {
@@ -7,8 +10,8 @@
 	}
 
 	svg {
-		min-width: 1.5em;
-		min-height: 1.5em;
+		min-width: $grid-unit-30;
+		min-height: $grid-unit-30;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}
@@ -17,8 +20,8 @@
 // These rules are set to zero specificity to keep the default styles for search buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-search__button) {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
+	border: 1px solid $gray-400;
+	padding: $button-spacing-y $button-spacing-x;
 }
 
 .wp-block-search__inside-wrapper {
@@ -33,12 +36,12 @@
 }
 
 .wp-block-search__input {
-	padding: 8px;
+	padding: $grid-unit-10;
 	flex-grow: 1;
 	margin-left: 0;
 	margin-right: 0;
-	min-width: 3em;
-	border: 1px solid #949494;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
@@ -52,13 +55,14 @@
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: 4px;
-	border: 1px solid #949494;
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;
 		border: none;
-		padding: 0 0 0 0.25em;
+		padding: 0 $grid-unit-05;
 
 		&:focus {
 			outline: none;
@@ -67,7 +71,7 @@
 
 	// For lower specificity.
 	:where(.wp-block-search__button) {
-		padding: 0.125em 0.5em;
+		padding: $grid-unit-05 $grid-unit-10;
 	}
 }
 
diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
index bdda226fdf9277..2e9876aa0f6d06 100644
--- a/packages/block-library/src/spacer/edit.js
+++ b/packages/block-library/src/spacer/edit.js
@@ -78,8 +78,16 @@ const SpacerEdit = ( {
 	setAttributes,
 	toggleSelection,
 	context,
+	__unstableParentLayout: parentLayout,
 } ) => {
 	const { orientation } = context;
+	const { orientation: parentOrientation, type } = parentLayout || {};
+	// If the spacer is inside a flex container, it should either inherit the orientation
+	// of the parent or use the flex default orientation.
+	const inheritedOrientation =
+		! parentOrientation && type === 'flex'
+			? 'horizontal'
+			: parentOrientation || orientation;
 	const { height, width } = attributes;
 
 	const [ isResizing, setIsResizing ] = useState( false );
@@ -104,13 +112,18 @@ const SpacerEdit = ( {
 
 	const style = {
 		height:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? 24
 				: temporaryHeight || height || undefined,
 		width:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? temporaryWidth || width || undefined
 				: undefined,
+		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
+		minWidth:
+			inheritedOrientation === 'vertical' && type === 'flex'
+				? 48
+				: undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
@@ -166,7 +179,7 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
-		if ( orientation === 'horizontal' && ! width ) {
+		if ( inheritedOrientation === 'horizontal' && ! width ) {
 			setAttributes( {
 				height: '0px',
 				width: '72px',
@@ -177,13 +190,13 @@ const SpacerEdit = ( {
 	return (
 		<>
 			<View { ...useBlockProps( { style } ) }>
-				{ resizableBoxWithOrientation( orientation ) }
+				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
 			<SpacerControls
 				setAttributes={ setAttributes }
 				height={ temporaryHeight || height }
 				width={ temporaryWidth || width }
-				orientation={ orientation }
+				orientation={ inheritedOrientation }
 				isResizing={ isResizing }
 			/>
 		</>
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index a7f12e74ea2f58..96884f9887df94 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -32,6 +32,7 @@
 @import "./post-featured-image/style.scss";
 @import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
+@import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
diff --git a/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap
index 7833f8bf6ff5fe..c0ea73eadc4754 100644
--- a/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap
@@ -34,7 +34,7 @@ exports[`Video block transforms to Group block 1`] = `
 
 exports[`Video block transforms to Media & Text block 1`] = `
 "<!-- wp:media-text {"mediaType":"video"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->"
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 1ab0b26448c1a5..5a1383eadb17f3 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -136,6 +136,10 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'elements', 'link', 'color', 'text' ],
 		support: [ 'color', 'link' ],
 	},
+	captionColor: {
+		value: [ 'elements', 'caption', 'color', 'text' ],
+		support: [ 'color', 'caption' ],
+	},
 	buttonColor: {
 		value: [ 'elements', 'button', 'color', 'text' ],
 		support: [ 'color', 'button' ],
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 8605fa4838abee..597081f6203e03 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -169,6 +169,17 @@ export function unstable__bootstrapServerSideBlockDefinitions( definitions ) {
 				serverSideBlockDefinitions[ blockName ].ancestor =
 					definitions[ blockName ].ancestor;
 			}
+			// The `selectors` prop is not yet included in the server provided
+			// definitions. Polyfill it as well. This can be removed when the
+			// minimum supported WordPress is >= 6.3.
+			if (
+				serverSideBlockDefinitions[ blockName ].selectors ===
+					undefined &&
+				definitions[ blockName ].selectors
+			) {
+				serverSideBlockDefinitions[ blockName ].selectors =
+					definitions[ blockName ].selectors;
+			}
 			continue;
 		}
 
@@ -203,6 +214,7 @@ function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
 		'attributes',
 		'providesContext',
 		'usesContext',
+		'selectors',
 		'supports',
 		'styles',
 		'example',
@@ -290,6 +302,7 @@ export function registerBlockType( blockNameOrMetadata, settings ) {
 		attributes: {},
 		providesContext: {},
 		usesContext: [],
+		selectors: {},
 		supports: {},
 		styles: [],
 		variations: [],
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
index 58bf57726a3b9b..dbb11e4d23001a 100644
--- a/packages/blocks/src/api/test/registration.js
+++ b/packages/blocks/src/api/test/registration.js
@@ -134,6 +134,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -280,6 +281,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -316,6 +318,7 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
@@ -348,6 +351,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -382,6 +386,7 @@ describe( 'blocks', () => {
 				},
 				usesContext: [ 'textColor' ],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -418,6 +423,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -454,6 +460,43 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
+				supports: {},
+				styles: [],
+				variations: [],
+			} );
+		} );
+
+		// This can be removed once polyfill adding selectors has been removed.
+		it( 'should apply selectors on the client when not set on the server', () => {
+			const blockName = 'core/test-block-with-selectors';
+			unstable__bootstrapServerSideBlockDefinitions( {
+				[ blockName ]: {
+					category: 'widgets',
+				},
+			} );
+			unstable__bootstrapServerSideBlockDefinitions( {
+				[ blockName ]: {
+					selectors: { root: '.wp-block-custom-selector' },
+					category: 'ignored',
+				},
+			} );
+
+			const blockType = {
+				title: 'block title',
+			};
+			registerBlockType( blockName, blockType );
+			expect( getBlockType( blockName ) ).toEqual( {
+				name: blockName,
+				save: expect.any( Function ),
+				title: 'block title',
+				category: 'widgets',
+				icon: { src: BLOCK_ICON_DEFAULT },
+				attributes: {},
+				providesContext: {},
+				usesContext: [],
+				keywords: [],
+				selectors: { root: '.wp-block-custom-selector' },
 				supports: {},
 				styles: [],
 				variations: [],
@@ -522,6 +565,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -553,6 +597,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -598,6 +643,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -657,6 +703,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -683,6 +730,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -769,6 +817,7 @@ describe( 'blocks', () => {
 										providesContext: {},
 										usesContext: [],
 										keywords: [],
+										selectors: {},
 										supports: {},
 										styles: [],
 										variations: [],
@@ -908,6 +957,7 @@ describe( 'blocks', () => {
 				attributes: {},
 				providesContext: {},
 				usesContext: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [
@@ -974,6 +1024,7 @@ describe( 'blocks', () => {
 				attributes: {},
 				providesContext: {},
 				usesContext: [],
+				selectors: {},
 				supports: {},
 				styles: [
 					{
@@ -1039,6 +1090,7 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
@@ -1056,6 +1108,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -1135,6 +1188,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -1160,6 +1214,7 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
@@ -1192,6 +1247,7 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
@@ -1207,6 +1263,7 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 9e38194cd11cb0..08739e5f9ef1e5 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -15,7 +15,9 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'captionColor',
 	'buttonColor',
+	'headingColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js
index 55cc270976ca0b..ada2bd7c8cbcfe 100644
--- a/packages/blocks/src/store/test/private-selectors.js
+++ b/packages/blocks/src/store/test/private-selectors.js
@@ -30,7 +30,9 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
+				'headingColor',
 				'fontFamily',
 				'fontSize',
 				'fontStyle',
@@ -51,7 +53,9 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
+				'headingColor',
 				'fontFamily',
 				'fontSize',
 				'fontStyle',
@@ -77,7 +81,9 @@ describe( 'private selectors', () => {
 				'backgroundColor',
 				'color',
 				'linkColor',
+				'captionColor',
 				'buttonColor',
+				'headingColor',
 				'fontFamily',
 				'fontStyle',
 				'fontWeight',
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index eae4f3355741a0..4e5599d9eade76 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,32 @@
 
 ## Unreleased
 
+-   `ImageSizeControl`: Remove the "Image Dimensions" label ([#49414](https://github.com/WordPress/gutenberg/pull/49414)).
+
+### Internal
+
+-   `Animate`: Convert to TypeScript ([#49243](https://github.com/WordPress/gutenberg/pull/49243)).
+-   `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)).
+-   `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)).
+-   `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)).
+-   `FormTokenField`: Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles ([48609](https://github.com/WordPress/gutenberg/pull/48609)).
+
+### Enhancements
+
+-   `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)).
+-	`AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)).
+-   `ImageSizeControl`: Use large 40px sizes ([#49113](https://github.com/WordPress/gutenberg/pull/49113)).
+
+### Bug Fix
+
+-  `CircularOptionPicker`: force swatches to visually render on top of the rest of the component's content ([#49245](https://github.com/WordPress/gutenberg/pull/49245)).
+-  `InputControl`: Fix misaligned textarea input control ([#49116](https://github.com/WordPress/gutenberg/pull/49116)).
+-  `ToolsPanel`: Ensure consistency in menu item order ([#49222](https://github.com/WordPress/gutenberg/pull/49222)).
+
+### Internal
+
+-   `DuotonePicker`, `DuotoneSwatch`: Convert to TypeScript ([#49060](https://github.com/WordPress/gutenberg/pull/49060)).
+
 ## 23.6.0 (2023-03-15)
 
 ### Enhancements
@@ -12,8 +38,8 @@
 
 ### Bug Fix
 
--  `ResponsiveWrapper`: use `aspect-ratio` CSS prop, add support for `SVG` elements ([#48573](https://github.com/WordPress/gutenberg/pull/48573).
--  `ResizeTooltip`: Use `default.fontFamily` on tooltip ([#48805](https://github.com/WordPress/gutenberg/pull/48805).
+-   `ResponsiveWrapper`: use `aspect-ratio` CSS prop, add support for `SVG` elements ([#48573](https://github.com/WordPress/gutenberg/pull/48573).
+-   `ResizeTooltip`: Use `default.fontFamily` on tooltip ([#48805](https://github.com/WordPress/gutenberg/pull/48805).
 
 ### Internal
 
@@ -37,7 +63,7 @@
 
 ### Enhancements
 
--  `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123)).
+-   `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123)).
 
 ### Internal
 
@@ -862,7 +888,7 @@
 ### Bug Fix
 
 -   Use `Object.assign` instead of `{ ...spread }` syntax to avoid errors in the code generated by TypeScript ([#39932](https://github.com/WordPress/gutenberg/pull/39932)).
--   `ItemGroup`: Ensure that the Item's text color is not overriden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
+-   `ItemGroup`: Ensure that the Item's text color is not overridden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
 -   `Surface`: Use updated UI text color `#1e1e1e` instead of `#000` ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
 -   `CustomSelectControl`: Make chevron consistent with `SelectControl` ([#40049](https://github.com/WordPress/gutenberg/pull/40049)).
 
diff --git a/packages/components/src/angle-picker-control/angle-circle.tsx b/packages/components/src/angle-picker-control/angle-circle.tsx
index 2b80705432c410..77518efb21bc1a 100644
--- a/packages/components/src/angle-picker-control/angle-circle.tsx
+++ b/packages/components/src/angle-picker-control/angle-circle.tsx
@@ -91,7 +91,6 @@ function AngleCircle( {
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
 			className="components-angle-picker-control__angle-circle"
-			style={ isDragging ? { cursor: 'grabbing' } : undefined }
 			{ ...props }
 		>
 			<CircleIndicatorWrapper
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
index fb5c00dfe50670..1fb17f86acfd2d 100644
--- a/packages/components/src/angle-picker-control/index.tsx
+++ b/packages/components/src/angle-picker-control/index.tsx
@@ -9,19 +9,16 @@ import classnames from 'classnames';
  */
 import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { FlexBlock, FlexItem } from '../flex';
+import { FlexBlock } from '../flex';
+import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root } from './styles/angle-picker-control-styles';
-import { space } from '../ui/utils/space';
-import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { COLORS } from '../utils/colors-values';
+import { Root, UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../ui/context';
 import type { AnglePickerControlProps } from './types';
@@ -64,13 +61,18 @@ function UnforwardedAnglePickerControl(
 
 	const classes = classnames( 'components-angle-picker-control', className );
 
+	const unitText = <UnitText>°</UnitText>;
+	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
+		? [ unitText, null ]
+		: [ null, unitText ];
+
 	return (
 		<Root
 			{ ...restProps }
 			ref={ ref }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
-			gap={ 4 }
+			gap={ 2 }
 		>
 			<FlexBlock>
 				<NumberControl
@@ -83,32 +85,17 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					suffix={
-						<Spacer
-							as={ Text }
-							marginBottom={ 0 }
-							marginRight={ space( 3 ) }
-							style={ {
-								color: COLORS.ui.theme,
-							} }
-						>
-							°
-						</Spacer>
-					}
+					prefix={ prefixedUnitText }
+					suffix={ suffixedUnitText }
 				/>
 			</FlexBlock>
-			<FlexItem
-				style={ {
-					marginBottom: space( 1 ),
-					marginTop: 'auto',
-				} }
-			>
+			<Spacer marginBottom="1" marginTop="auto">
 				<AngleCircle
 					aria-hidden="true"
 					value={ value }
 					onChange={ onChange }
 				/>
-			</FlexItem>
+			</Spacer>
 		</Root>
 	);
 }
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
index 7d97903adf5c92..f08756f33bccf8 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -10,12 +10,13 @@ import styled from '@emotion/styled';
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
+import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
 import type { AnglePickerControlProps } from '../types';
 
 const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 3;
+const INNER_CIRCLE_SIZE = 6;
 
 const deprecatedBottomMargin = ( {
 	__nextHasNoMarginBottom,
@@ -39,6 +40,10 @@ export const CircleRoot = styled.div`
 	height: ${ CIRCLE_SIZE }px;
 	overflow: hidden;
 	width: ${ CIRCLE_SIZE }px;
+
+	:active {
+		cursor: grabbing;
+	}
 `;
 
 export const CircleIndicatorWrapper = styled.div`
@@ -55,15 +60,17 @@ export const CircleIndicatorWrapper = styled.div`
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
-	bottom: 0;
 	box-sizing: border-box;
 	display: block;
-	height: 0px;
-	left: 0;
-	margin: auto;
+	left: 50%;
+	top: 4px;
+	transform: translateX( -50% );
 	position: absolute;
-	right: 0;
-	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 0px;
+	width: ${ INNER_CIRCLE_SIZE }px;
+	height: ${ INNER_CIRCLE_SIZE }px;
+`;
+
+export const UnitText = styled( Text )`
+	color: ${ COLORS.ui.theme };
+	margin-right: ${ space( 3 ) };
 `;
diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js
deleted file mode 100644
index f648b00ed3a640..00000000000000
--- a/packages/components/src/animate/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin
- * @typedef {'left' | 'right'} SlideInOrigin
- * @typedef {{ type: 'appear'; origin?: AppearOrigin }} AppearOptions
- * @typedef {{ type: 'slide-in'; origin?: SlideInOrigin }} SlideInOptions
- * @typedef {{ type: 'loading' }} LoadingOptions
- * @typedef {AppearOptions | SlideInOptions | LoadingOptions} GetAnimateOptions
- */
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param {GetAnimateOptions['type']} type The animation type
- * @return {'top' | 'left'} Default origin
- */
-function getDefaultOrigin( type ) {
-	return type === 'appear' ? 'top' : 'left';
-}
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @param {GetAnimateOptions} options
- *
- * @return {string | undefined} ClassName that applies the animations
- */
-export function getAnimateClassName( options ) {
-	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
-	}
-
-	const { type, origin = getDefaultOrigin( type ) } = options;
-
-	if ( type === 'appear' ) {
-		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
-			[ 'is-from-' + xAxis ]: xAxis !== 'center',
-			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
-		} );
-	}
-
-	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
-	}
-
-	return undefined;
-}
-
-// @ts-ignore Reason: Planned for deprecation
-export default function Animate( { type, options = {}, children } ) {
-	return children( {
-		className: getAnimateClassName( { type, ...options } ),
-	} );
-}
diff --git a/packages/components/src/animate/index.tsx b/packages/components/src/animate/index.tsx
new file mode 100644
index 00000000000000..f73090bf85dba9
--- /dev/null
+++ b/packages/components/src/animate/index.tsx
@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { AnimateProps, GetAnimateOptions } from './types';
+
+/**
+ * @param type The animation type
+ * @return Default origin
+ */
+function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
+	return type === 'appear' ? 'top' : 'left';
+}
+
+/**
+ * @param options
+ *
+ * @return ClassName that applies the animations
+ */
+export function getAnimateClassName( options: GetAnimateOptions ) {
+	if ( options.type === 'loading' ) {
+		return classnames( 'components-animate__loading' );
+	}
+
+	const { type, origin = getDefaultOrigin( type ) } = options;
+
+	if ( type === 'appear' ) {
+		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
+		return classnames( 'components-animate__appear', {
+			[ 'is-from-' + xAxis ]: xAxis !== 'center',
+			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
+		} );
+	}
+
+	if ( type === 'slide-in' ) {
+		return classnames(
+			'components-animate__slide-in',
+			'is-from-' + origin
+		);
+	}
+
+	return undefined;
+}
+
+/**
+ * Simple interface to introduce animations to components.
+ *
+ * ```jsx
+ * import { Animate, Notice } from '@wordpress/components';
+ *
+ * const MyAnimatedNotice = () => (
+ * 	<Animate type="slide-in" options={ { origin: 'top' } }>
+ * 		{ ( { className } ) => (
+ * 			<Notice className={ className } status="success">
+ * 				<p>Animation finished.</p>
+ * 			</Notice>
+ * 		) }
+ * 	</Animate>
+ * );
+ * ```
+ */
+export function Animate( { type, options = {}, children }: AnimateProps ) {
+	return children( {
+		className: getAnimateClassName( {
+			type,
+			...options,
+		} as GetAnimateOptions ),
+	} );
+}
+
+export default Animate;
diff --git a/packages/components/src/animate/stories/index.js b/packages/components/src/animate/stories/index.js
deleted file mode 100644
index 0f0e83b8cbcec8..00000000000000
--- a/packages/components/src/animate/stories/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import Animate from '../';
-import Notice from '../../notice';
-
-export default { title: 'Components/Animate', component: Animate };
-
-export const _default = () => (
-	<Animate>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-// Unexported helper for different origins.
-const Appear = ( { origin } ) => (
-	<Animate type="appear" options={ { origin } }>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Appear animation. Origin: { origin }.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const appearTopLeft = () => <Appear origin="top left" />;
-export const appearTopRight = () => <Appear origin="top right" />;
-export const appearBottomLeft = () => <Appear origin="bottom left" />;
-export const appearBottomRight = () => <Appear origin="bottom right" />;
-
-export const loading = () => (
-	<Animate type="loading">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Loading animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const slideIn = () => (
-	<Animate type="slide-in">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Slide-in animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);
diff --git a/packages/components/src/animate/stories/index.tsx b/packages/components/src/animate/stories/index.tsx
new file mode 100644
index 00000000000000..11537cea450e4d
--- /dev/null
+++ b/packages/components/src/animate/stories/index.tsx
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Animate } from '..';
+import Notice from '../../notice';
+
+const meta: ComponentMeta< typeof Animate > = {
+	title: 'Components/Animate',
+	component: Animate,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
+
+export const Default: ComponentStory< typeof Animate > = Template.bind( {} );
+Default.args = {
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
+		</Notice>
+	),
+};
+
+export const AppearTopLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopLeft.args = {
+	type: 'appear',
+	options: { origin: 'top left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top left.</p>
+		</Notice>
+	),
+};
+export const AppearTopRight: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopRight.args = {
+	type: 'appear',
+	options: { origin: 'top right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top right.</p>
+		</Notice>
+	),
+};
+export const AppearBottomLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearBottomLeft.args = {
+	type: 'appear',
+	options: { origin: 'bottom left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom left.</p>
+		</Notice>
+	),
+};
+export const AppearBottomRight: ComponentStory< typeof Animate > =
+	Template.bind( {} );
+AppearBottomRight.args = {
+	type: 'appear',
+	options: { origin: 'bottom right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom right.</p>
+		</Notice>
+	),
+};
+
+export const Loading: ComponentStory< typeof Animate > = Template.bind( {} );
+Loading.args = {
+	type: 'loading',
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Loading animation.</p>
+		</Notice>
+	),
+};
+
+export const SlideIn: ComponentStory< typeof Animate > = Template.bind( {} );
+SlideIn.args = {
+	type: 'slide-in',
+	options: { origin: 'left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Slide-in animation.</p>
+		</Notice>
+	),
+};
diff --git a/packages/components/src/animate/types.ts b/packages/components/src/animate/types.ts
new file mode 100644
index 00000000000000..aedebf34be70fe
--- /dev/null
+++ b/packages/components/src/animate/types.ts
@@ -0,0 +1,32 @@
+export type AppearOptions = {
+	type: 'appear';
+	origin?:
+		| 'top'
+		| 'top left'
+		| 'top right'
+		| 'middle'
+		| 'middle left'
+		| 'middle right'
+		| 'bottom'
+		| 'bottom left'
+		| 'bottom right';
+};
+type SlideInOptions = { type: 'slide-in'; origin?: 'left' | 'right' };
+type LoadingOptions = { type: 'loading'; origin?: never };
+type NoAnimationOptions = { type?: never; origin?: never };
+
+export type GetAnimateOptions =
+	| AppearOptions
+	| SlideInOptions
+	| LoadingOptions
+	| NoAnimationOptions;
+
+// Create a new type that and distributes the `Pick` operator separately to
+// every individual type of a union, thus preserving that same union.
+type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
+	? Pick< T, 'type' > & { options?: Omit< T, 'type' > }
+	: never;
+
+export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
+	children: ( props: { className?: string } ) => JSX.Element;
+};
diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx
index b391c2f00f592b..01d8f39c615c2a 100644
--- a/packages/components/src/border-box-control/stories/index.tsx
+++ b/packages/components/src/border-box-control/stories/index.tsx
@@ -43,7 +43,7 @@ const colors = [
 
 const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
-	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
+	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
 	const onChangeMerged: ComponentProps<
 		typeof BorderBoxControl
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
index 627cfce408583a..bc8a4bd420bbd2 100644
--- a/packages/components/src/box-control/axial-input-controls.tsx
+++ b/packages/components/src/box-control/axial-input-controls.tsx
@@ -8,7 +8,7 @@ import { Layout } from './styles/box-control-styles';
 import type { BoxControlInputControlProps } from './types';
 
 const groupedSides = [ 'vertical', 'horizontal' ] as const;
-type GroupedSide = typeof groupedSides[ number ];
+type GroupedSide = ( typeof groupedSides )[ number ];
 
 export default function AxialInputControls( {
 	onChange,
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index e63cbd5b3ff92a..56c48f63372a19 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -16,6 +16,16 @@ $color-palette-circle-spacing: 12px;
 		display: flex;
 		flex-wrap: wrap;
 		gap: $color-palette-circle-spacing;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__swatches");
+	}
+
+	// Make sure that the .components-circular-option-picker__swatches element
+	// renders visually on top of its siblings. This is necessary to make sure
+	// that the tooltip rendered when hovering an `Option` always appears on top.
+	> *:not(.components-circular-option-picker__swatches) {
+		position: relative;
+		z-index: z-index("> *:not(.components-circular-option-picker__swatches)");
 	}
 }
 
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index 68abd0808f42fb..e70b8a09ca5bf5 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -5,4 +5,5 @@
 	border-radius: 50%;
 	display: inline-block;
 	padding: 0;
+	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
index 05ebf9a1abfac6..91656ca32851a9 100644
--- a/packages/components/src/color-picker/README.md
+++ b/packages/components/src/color-picker/README.md
@@ -31,13 +31,13 @@ The current color value to display in the picker. Must be a hex or hex8 string.
 
 ### `onChange`: `(hex8Color: string) => void`
 
-Fired when the color changes. Always passes a hex8 color string.
+Fired when the color changes. Always passes a hex or hex8 color string.
 
 - Required: No
 
 ### `enableAlpha`: `boolean`
 
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
 - Required: No
 - Default: `false`
diff --git a/packages/components/src/color-picker/color-input.tsx b/packages/components/src/color-picker/color-input.tsx
index c57077bb3e5fe6..486e1ea319c917 100644
--- a/packages/components/src/color-picker/color-input.tsx
+++ b/packages/components/src/color-picker/color-input.tsx
@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
 /**
  * Internal dependencies
  */
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-
-interface ColorInputProps {
-	colorType: 'hsl' | 'hex' | 'rgb';
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 
 export const ColorInput = ( {
 	colorType,
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index bb5caedb8082a0..852e0756b3cf16 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -15,11 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import { useContextSystem, contextConnect } from '../ui/context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,26 +28,18 @@ import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
 
-import type { ColorType } from './types';
+import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
-export interface ColorPickerProps {
-	enableAlpha?: boolean;
-	color?: string;
-	onChange?: ( color: string ) => void;
-	defaultValue?: string;
-	copyFormat?: ColorType;
-}
-
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const ColorPicker = (
-	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+const UnconnectedColorPicker = (
+	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
@@ -124,6 +112,9 @@ const ColorPicker = (
 	);
 };
 
-const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+export const ColorPicker = contextConnect(
+	UnconnectedColorPicker,
+	'ColorPicker'
+);
 
-export default ConnectedColorPicker;
+export default ColorPicker;
diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index b7c7032b284511..8107144aeea8b8 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -17,12 +17,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
-
-interface HexInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
diff --git a/packages/components/src/color-picker/hsl-input.tsx b/packages/components/src/color-picker/hsl-input.tsx
index c9766244665fb1..3331a97b3d4de6 100644
--- a/packages/components/src/color-picker/hsl-input.tsx
+++ b/packages/components/src/color-picker/hsl-input.tsx
@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const { h, s, l, a } = color.toHsl();
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index f28c7307c07727..5f249b03475f6f 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -7,15 +7,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
-
-interface InputWithSliderProps {
-	min: number;
-	max: number;
-	value: number;
-	label: string;
-	abbreviation: string;
-	onChange: ( value: number ) => void;
-}
+import type { InputWithSliderProps } from './types';
 
 export const InputWithSlider = ( {
 	min,
diff --git a/packages/components/src/color-picker/legacy-adapter.tsx b/packages/components/src/color-picker/legacy-adapter.tsx
index ef119f263d92dc..4da460bc12bb78 100644
--- a/packages/components/src/color-picker/legacy-adapter.tsx
+++ b/packages/components/src/color-picker/legacy-adapter.tsx
@@ -2,10 +2,9 @@
  * Internal dependencies
  */
 import ColorPicker from './component';
+import type { LegacyAdapterProps } from './types';
 import { useDeprecatedProps } from './use-deprecated-props';
 
-type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
-
 export const LegacyAdapter = ( props: LegacyAdapterProps ) => {
 	return <ColorPicker { ...useDeprecatedProps( props ) } />;
 };
diff --git a/packages/components/src/color-picker/picker.tsx b/packages/components/src/color-picker/picker.tsx
index f48050a468d9e0..f2d7a84a485565 100644
--- a/packages/components/src/color-picker/picker.tsx
+++ b/packages/components/src/color-picker/picker.tsx
@@ -2,17 +2,16 @@
  * External dependencies
  */
 import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-interface PickerProps {
-	color: Colord;
-	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 	const Component = enableAlpha
diff --git a/packages/components/src/color-picker/rgb-input.tsx b/packages/components/src/color-picker/rgb-input.tsx
index e2c51a32fd0635..21872db8472072 100644
--- a/packages/components/src/color-picker/rgb-input.tsx
+++ b/packages/components/src/color-picker/rgb-input.tsx
@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface RgbInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = color.toRgb();
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
deleted file mode 100644
index b3dfb21fb1c489..00000000000000
--- a/packages/components/src/color-picker/stories/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-
-export default {
-	component: ColorPicker,
-	title: 'Components/ColorPicker',
-	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 Template = ( { onChange, ...props } ) => {
-	const [ color, setColor ] = useState();
-
-	return (
-		<ColorPicker
-			{ ...props }
-			color={ color }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setColor( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
diff --git a/packages/components/src/color-picker/stories/index.tsx b/packages/components/src/color-picker/stories/index.tsx
new file mode 100644
index 00000000000000..419c7195714b69
--- /dev/null
+++ b/packages/components/src/color-picker/stories/index.tsx
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+
+const meta: ComponentMeta< typeof ColorPicker > = {
+	component: ColorPicker,
+	title: 'Components/ColorPicker',
+	argTypes: {
+		as: { control: { type: null } },
+		color: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >();
+
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange?.( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.tsx
similarity index 76%
rename from packages/components/src/color-picker/test/index.js
rename to packages/components/src/color-picker/test/index.tsx
index a04a114e1276bf..f531455f734e7e 100644
--- a/packages/components/src/color-picker/test/index.js
+++ b/packages/components/src/color-picker/test/index.tsx
@@ -9,34 +9,37 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ColorPicker } from '..';
 
 /**
- * Ordinarily we'd try to select the compnoent by role but the silder role appears
+ * Ordinarily we'd try to select the component by role but the slider role appears
  * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the classname
+ * trying to select the appropriate element. We might as well just use the class name
  * on the container which will be more durable if, for example, the order changes.
- *
- * @param {HTMLElement} container
- * @return {HTMLElement} The saturation element
  */
-function getSaturation( container ) {
+function getSaturation( container: HTMLElement ) {
 	return container.querySelector(
 		'.react-colorful__saturation .react-colorful__interactive'
 	);
 }
 
+type PageXPageY = { pageX: number; pageY: number };
+
 // Fix to pass `pageX` and `pageY`
 // See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends window.MouseEvent {
-	constructor( type, values = {} ) {
+class FakeMouseEvent extends MouseEvent {
+	constructor( type: MouseEvent[ 'type' ], values?: PageXPageY ) {
 		super( type, { buttons: 1, bubbles: true, ...values } );
 
 		Object.assign( this, {
-			pageX: values.pageX || 0,
-			pageY: values.pageY || 0,
+			pageX: values?.pageX ?? 0,
+			pageY: values?.pageY ?? 0,
 		} );
 	}
 }
 
-function moveReactColorfulSlider( sliderElement, from, to ) {
+function moveReactColorfulSlider(
+	sliderElement: Element,
+	from: PageXPageY,
+	to: PageXPageY
+) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
@@ -81,6 +84,13 @@ describe( 'ColorPicker', () => {
 			);
 
 			const saturation = getSaturation( container );
+
+			if ( saturation === null ) {
+				throw new Error( 'The saturation slider could not be found' );
+			}
+
+			expect( saturation ).toBeInTheDocument();
+
 			moveReactColorfulSlider(
 				saturation,
 				{ pageX: 0, pageY: 0 },
@@ -106,6 +116,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },
@@ -121,13 +138,7 @@ describe( 'ColorPicker', () => {
 
 	it( 'should fire onChange with the HSL value', async () => {
 		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			// Add alpha to prove it's ignored.
-			a: 0.5,
-		};
+		const color = 'hsla(125, 20%, 50%, 0.5)';
 
 		const { container } = render(
 			<ColorPicker
@@ -138,6 +149,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },
diff --git a/packages/components/src/color-picker/types.ts b/packages/components/src/color-picker/types.ts
index b2f9d2bc3739f4..83f1f1621a76ba 100644
--- a/packages/components/src/color-picker/types.ts
+++ b/packages/components/src/color-picker/types.ts
@@ -1,10 +1,137 @@
 /**
  * External dependencies
  */
-import type { Colord } from 'colord';
+import type {
+	Colord,
+	HslColor,
+	HsvaColor,
+	HsvColor,
+	RgbaColor,
+	RgbColor,
+} from 'colord';
+import type { HslaColor } from 'react-colorful';
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { useDeprecatedProps } from './use-deprecated-props';
 
 export type ColorType = 'rgb' | 'hsl' | 'hex';
 export type ColorCopyButtonProps = {
 	color: Colord;
 	colorType: ColorType;
 };
+
+export type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
+
+export type ColorPickerProps = WordPressComponentProps<
+	{
+		/**
+		 * When `true` the color picker will display the alpha channel both in
+		 * the bottom inputs as well as in the color picker itself.
+		 *
+		 * @default false
+		 */
+		enableAlpha?: boolean;
+		/**
+		 * The current color value to display in the picker.
+		 * Must be a hex or hex8 string.
+		 */
+		color?: string;
+		/**
+		 * Fired when the color changes. Always passes a hex or hex8 color string.
+		 */
+		onChange?: ( color: string ) => void;
+		/**
+		 * An optional default value to use for the color picker.
+		 */
+		defaultValue?: string;
+		/**
+		 * The format to copy when clicking the displayed color format.
+		 */
+		copyFormat?: ColorType;
+	},
+	'div',
+	false
+>;
+
+export interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export interface ColorInputProps {
+	colorType: 'hsl' | 'hex' | 'rgb';
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface InputWithSliderProps {
+	min: number;
+	max: number;
+	value: number;
+	label: string;
+	abbreviation: string;
+	onChange: ( value: number ) => void;
+}
+
+export interface HexInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface HslInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface RgbInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+/**
+ * @deprecated
+ */
+export type LegacyColor =
+	| string
+	| {
+			hex: string;
+			hsl: HslColor | HslaColor;
+			hsv: HsvColor | HsvaColor;
+			rgb: RgbColor | RgbaColor;
+			/**
+			 * @deprecated
+			 */
+			oldHue: number;
+			/**
+			 * @deprecated
+			 */
+			source: 'hex';
+	  };
+
+/**
+ * @deprecated
+ */
+export interface LegacyProps {
+	color?: LegacyColor;
+	/**
+	 * @deprecated
+	 */
+	onChangeComplete: ( colors: LegacyColor ) => void;
+	/**
+	 * @deprecated
+	 */
+	oldHue: string;
+	className: string;
+	/**
+	 * @deprecated
+	 */
+	disableAlpha: boolean;
+	onChange?: never;
+}
diff --git a/packages/components/src/color-picker/use-deprecated-props.ts b/packages/components/src/color-picker/use-deprecated-props.ts
index a2cae51d202f19..cc835d68fd10ba 100644
--- a/packages/components/src/color-picker/use-deprecated-props.ts
+++ b/packages/components/src/color-picker/use-deprecated-props.ts
@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	colord,
-	HslColor,
-	HslaColor,
-	HsvColor,
-	HsvaColor,
-	RgbColor,
-	RgbaColor,
-} from 'colord';
-import type { ComponentProps } from 'react';
+import { colord } from 'colord';
 import memoize from 'memize';
 
 /**
@@ -21,49 +12,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type ColorPicker from './component';
-
-type ColorPickerProps = ComponentProps< typeof ColorPicker >;
-
-/**
- * @deprecated
- */
-type LegacyColor =
-	| string
-	| {
-			hex: string;
-			hsl: HslColor | HslaColor;
-			hsv: HsvColor | HsvaColor;
-			rgb: RgbColor | RgbaColor;
-			/**
-			 * @deprecated
-			 */
-			oldHue: number;
-			/**
-			 * @deprecated
-			 */
-			source: 'hex';
-	  };
-
-/**
- * @deprecated
- */
-export interface LegacyProps {
-	color?: LegacyColor;
-	/**
-	 * @deprecated
-	 */
-	onChangeComplete: ( colors: LegacyColor ) => void;
-	/**
-	 * @deprecated
-	 */
-	oldHue: string;
-	className: string;
-	/**
-	 * @deprecated
-	 */
-	disableAlpha: boolean;
-}
+import type { ColorPickerProps, LegacyColor, LegacyProps } from './types';
 
 function isLegacyProps( props: any ): props is LegacyProps {
 	return (
diff --git a/packages/components/src/combobox-control/stories/index.tsx b/packages/components/src/combobox-control/stories/index.tsx
index b722d8245921de..ca30b62d2d2889 100644
--- a/packages/components/src/combobox-control/stories/index.tsx
+++ b/packages/components/src/combobox-control/stories/index.tsx
@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof ComboboxControl > = {
 };
 export default meta;
 
-const mapCountryOption = ( country: typeof countries[ number ] ) => ( {
+const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 	value: country.code,
 	label: country.name,
 } );
diff --git a/packages/components/src/custom-gradient-picker/constants.js b/packages/components/src/custom-gradient-picker/constants.ts
similarity index 96%
rename from packages/components/src/custom-gradient-picker/constants.js
rename to packages/components/src/custom-gradient-picker/constants.ts
index 9924ff2b3d6860..842aea9dcb638d 100644
--- a/packages/components/src/custom-gradient-picker/constants.js
+++ b/packages/components/src/custom-gradient-picker/constants.ts
@@ -10,8 +10,8 @@ export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
 
 export const HORIZONTAL_GRADIENT_ORIENTATION = {
 	type: 'angular',
-	value: 90,
-};
+	value: '90',
+} as const;
 
 export const GRADIENT_OPTIONS = [
 	{ value: 'linear-gradient', label: __( 'Linear' ) },
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/constants.js b/packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
similarity index 100%
rename from packages/components/src/custom-gradient-picker/gradient-bar/constants.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
similarity index 56%
rename from packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index 6b964d047b2a59..e761df24823b99 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -36,8 +34,21 @@ import {
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
 } from './constants';
+import type { WordPressComponentProps } from '../../ui/context';
+import type {
+	ControlPointButtonProps,
+	ControlPointMoveState,
+	ControlPointsProps,
+	InsertPointProps,
+} from '../types';
+import type { CustomColorPickerDropdownProps } from '../../color-palette/types';
 
-function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
+function ControlPointButton( {
+	isOpen,
+	position,
+	color,
+	...additionalProps
+}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {
 	const instanceId = useInstanceId( ControlPointButton );
 	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
 	return (
@@ -75,13 +86,14 @@ function GradientColorPickerDropdown( {
 	isRenderedInSidebar,
 	className,
 	...props
-} ) {
+}: CustomColorPickerDropdownProps ) {
 	// Open the popover below the gradient control/insertion point
 	const popoverProps = useMemo(
-		() => ( {
-			placement: 'bottom',
-			offset: 8,
-		} ),
+		() =>
+			( {
+				placement: 'bottom',
+				offset: 8,
+			} as const ),
 		[]
 	);
 
@@ -110,16 +122,25 @@ function ControlPoints( {
 	onStartControlPointChange,
 	onStopControlPointChange,
 	__experimentalIsRenderedInSidebar,
-} ) {
-	const controlPointMoveState = useRef();
+}: ControlPointsProps ) {
+	const controlPointMoveState = useRef< ControlPointMoveState >();
+
+	const onMouseMove = ( event: MouseEvent ) => {
+		if (
+			controlPointMoveState.current === undefined ||
+			gradientPickerDomRef.current === null
+		) {
+			return;
+		}
 
-	const onMouseMove = ( event ) => {
 		const relativePosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
 			gradientPickerDomRef.current
 		);
+
 		const { initialPosition, index, significantMoveHappened } =
 			controlPointMoveState.current;
+
 		if (
 			! significantMoveHappened &&
 			Math.abs( initialPosition - relativePosition ) >=
@@ -150,142 +171,158 @@ function ControlPoints( {
 	// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
 	// This memoization would prevent the event listeners from being properly cleaned.
 	// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
-	const cleanEventListenersRef = useRef();
+	const cleanEventListenersRef = useRef< () => void >();
 	cleanEventListenersRef.current = cleanEventListeners;
 
 	useEffect( () => {
 		return () => {
-			cleanEventListenersRef.current();
+			cleanEventListenersRef.current?.();
 		};
 	}, [] );
 
-	return controlPoints.map( ( point, index ) => {
-		const initialPosition = point?.position;
-		return (
-			ignoreMarkerPosition !== initialPosition && (
-				<GradientColorPickerDropdown
-					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
-					key={ index }
-					onClose={ onStopControlPointChange }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<ControlPointButton
+	return (
+		<>
+			{ controlPoints.map( ( point, index ) => {
+				const initialPosition = point?.position;
+				return (
+					ignoreMarkerPosition !== initialPosition && (
+						<GradientColorPickerDropdown
+							isRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							key={ index }
-							onClick={ () => {
-								if (
-									controlPointMoveState.current &&
-									controlPointMoveState.current
-										.significantMoveHappened
-								) {
-									return;
-								}
-								if ( isOpen ) {
-									onStopControlPointChange();
-								} else {
-									onStartControlPointChange();
-								}
-								onToggle();
-							} }
-							onMouseDown={ () => {
-								if ( window && window.addEventListener ) {
-									controlPointMoveState.current = {
-										initialPosition,
-										index,
-										significantMoveHappened: false,
-										listenersActivated: true,
-									};
-									onStartControlPointChange();
-									window.addEventListener(
-										'mousemove',
-										onMouseMove
-									);
-									window.addEventListener(
-										'mouseup',
-										cleanEventListeners
-									);
-								}
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.code === 'ArrowLeft' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position -
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								} else if ( event.code === 'ArrowRight' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position +
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								}
-							} }
-							isOpen={ isOpen }
-							position={ point.position }
-							color={ point.color }
-						/>
-					) }
-					renderContent={ ( { onClose } ) => (
-						<>
-							<ColorPicker
-								enableAlpha={ ! disableAlpha }
-								color={ point.color }
-								onChange={ ( color ) => {
-									onChange(
-										updateControlPointColor(
-											controlPoints,
-											index,
-											colord( color ).toRgbString()
-										)
-									);
-								} }
-							/>
-							{ ! disableRemove && controlPoints.length > 2 && (
-								<HStack
-									className="components-custom-gradient-picker__remove-control-point-wrapper"
-									alignment="center"
-								>
-									<Button
-										onClick={ () => {
+							onClose={ onStopControlPointChange }
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<ControlPointButton
+									key={ index }
+									onClick={ () => {
+										if (
+											controlPointMoveState.current &&
+											controlPointMoveState.current
+												.significantMoveHappened
+										) {
+											return;
+										}
+										if ( isOpen ) {
+											onStopControlPointChange();
+										} else {
+											onStartControlPointChange();
+										}
+										onToggle();
+									} }
+									onMouseDown={ () => {
+										if (
+											window &&
+											window.addEventListener
+										) {
+											controlPointMoveState.current = {
+												initialPosition,
+												index,
+												significantMoveHappened: false,
+												listenersActivated: true,
+											};
+											onStartControlPointChange();
+											window.addEventListener(
+												'mousemove',
+												onMouseMove
+											);
+											window.addEventListener(
+												'mouseup',
+												cleanEventListeners
+											);
+										}
+									} }
+									onKeyDown={ ( event ) => {
+										if ( event.code === 'ArrowLeft' ) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
 											onChange(
-												removeControlPoint(
+												updateControlPointPosition(
 													controlPoints,
-													index
+													index,
+													clampPercent(
+														point.position -
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										} else if (
+											event.code === 'ArrowRight'
+										) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
+											onChange(
+												updateControlPointPosition(
+													controlPoints,
+													index,
+													clampPercent(
+														point.position +
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										}
+									} }
+									isOpen={ isOpen }
+									position={ point.position }
+									color={ point.color }
+								/>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<>
+									<ColorPicker
+										enableAlpha={ ! disableAlpha }
+										color={ point.color }
+										onChange={ ( color ) => {
+											onChange(
+												updateControlPointColor(
+													controlPoints,
+													index,
+													colord(
+														color
+													).toRgbString()
 												)
 											);
-											onClose();
 										} }
-										variant="link"
-									>
-										{ __( 'Remove Control Point' ) }
-									</Button>
-								</HStack>
+									/>
+									{ ! disableRemove &&
+										controlPoints.length > 2 && (
+											<HStack
+												className="components-custom-gradient-picker__remove-control-point-wrapper"
+												alignment="center"
+											>
+												<Button
+													onClick={ () => {
+														onChange(
+															removeControlPoint(
+																controlPoints,
+																index
+															)
+														);
+														onClose();
+													} }
+													variant="link"
+												>
+													{ __(
+														'Remove Control Point'
+													) }
+												</Button>
+											</HStack>
+										) }
+								</>
 							) }
-						</>
-					) }
-					style={ {
-						left: `${ point.position }%`,
-						transform: 'translateX( -50% )',
-					} }
-				/>
-			)
-		);
-	} );
+							style={ {
+								left: `${ point.position }%`,
+								transform: 'translateX( -50% )',
+							} }
+						/>
+					)
+				);
+			} ) }
+		</>
+	);
 }
 
 function InsertPoint( {
@@ -296,7 +333,7 @@ function InsertPoint( {
 	insertPosition,
 	disableAlpha,
 	__experimentalIsRenderedInSidebar,
-} ) {
+}: InsertPointProps ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
 		<GradientColorPickerDropdown
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.js b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
similarity index 82%
rename from packages/components/src/custom-gradient-picker/gradient-bar/index.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
index 19b5746847e4b8..53589aa1d3efd8 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/index.js
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -16,8 +14,18 @@ import { useRef, useReducer } from '@wordpress/element';
 import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
+import type {
+	CustomGradientBarProps,
+	CustomGradientBarReducerState,
+	CustomGradientBarReducerAction,
+	CustomGradientBarIdleState,
+} from '../types';
+import type { MouseEventHandler } from 'react';
 
-function customGradientBarReducer( state, action ) {
+const customGradientBarReducer = (
+	state: CustomGradientBarReducerState,
+	action: CustomGradientBarReducerAction
+): CustomGradientBarReducerState => {
 	switch ( action.type ) {
 		case 'MOVE_INSERTER':
 			if ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {
@@ -65,8 +73,10 @@ function customGradientBarReducer( state, action ) {
 			break;
 	}
 	return state;
-}
-const customGradientBarReducerInitialState = { id: 'IDLE' };
+};
+const customGradientBarReducerInitialState: CustomGradientBarIdleState = {
+	id: 'IDLE',
+};
 
 export default function CustomGradientBar( {
 	background,
@@ -75,15 +85,21 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const gradientMarkersContainerDomRef = useRef();
+	__experimentalIsRenderedInSidebar = false,
+}: CustomGradientBarProps ) {
+	const gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );
 
 	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
 		customGradientBarReducer,
 		customGradientBarReducerInitialState
 	);
-	const onMouseEnterAndMove = ( event ) => {
+	const onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (
+		event
+	) => {
+		if ( ! gradientMarkersContainerDomRef.current ) {
+			return;
+		}
+
 		const insertPosition = getHorizontalRelativeGradientPosition(
 			event.clientX,
 			gradientMarkersContainerDomRef.current
@@ -123,9 +139,15 @@ export default function CustomGradientBar( {
 			) }
 			onMouseEnter={ onMouseEnterAndMove }
 			onMouseMove={ onMouseEnterAndMove }
-			style={ { background } }
 			onMouseLeave={ onMouseLeave }
 		>
+			<div
+				className="components-custom-gradient-picker__gradient-bar-background"
+				style={ {
+					background,
+					opacity: hasGradient ? 1 : 0.4,
+				} }
+			/>
 			<div
 				ref={ gradientMarkersContainerDomRef }
 				className="components-custom-gradient-picker__markers-container"
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js b/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts
similarity index 50%
rename from packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts
index 525d075a0fd0a7..01396d94f0581d 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts
@@ -5,38 +5,54 @@ import { getHorizontalRelativeGradientPosition } from '../utils';
 
 describe( 'getHorizontalRelativeGradientPosition', () => {
 	it( 'should return relative percentage position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} as DOMRect )
+		);
 
+		const containerElement = document.createElement( 'div' );
 		expect(
 			getHorizontalRelativeGradientPosition( 500, containerElement )
 		).toBe( 50 );
 	} );
 
 	it( 'should subtract the x position of the container from the mouse position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
 
+		const containerElement = document.createElement( 'div' );
 		expect(
 			getHorizontalRelativeGradientPosition( 550, containerElement )
 		).toBe( 50 );
 	} );
 
 	it( 'should clamp to a whole percentage number', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} as DOMRect )
+		);
+
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 333, containerElement )
@@ -44,12 +60,17 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to zero when mouse position is less the x position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 2, containerElement )
@@ -57,12 +78,18 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to 100 when mouse position is greater than width', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} as DOMRect )
+		);
+
+		const containerElement = document.createElement( 'div' );
 
 		expect(
 			getHorizontalRelativeGradientPosition( 1500, containerElement )
@@ -70,7 +97,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should return undefined if no containerElement is provided', () => {
-		const containerElement = undefined;
+		const containerElement = null;
 
 		expect(
 			getHorizontalRelativeGradientPosition( 1500, containerElement )
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js b/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
deleted file mode 100644
index 24b552e0c149fd..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
+++ /dev/null
@@ -1,189 +0,0 @@
-// @ts-nocheck
-
-/**
- * Internal dependencies
- */
-import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-
-/**
- * Control point for the gradient bar.
- *
- * @typedef {Object} ControlPoint
- * @property {string} color    Color of the control point.
- * @property {number} position Integer position of the control point as a percentage.
- */
-
-/**
- * Color as parsed from the gradient by gradient-parser.
- *
- * @typedef {Object} Color
- * @property {string} r   Red component.
- * @property {string} g   Green component.
- * @property {string} b   Green component.
- * @property {string} [a] Optional alpha component.
- */
-
-/**
- * Clamps a number between 0 and 100.
- *
- * @param {number} value Value to clamp.
- *
- * @return {number} Value clamped between 0 and 100.
- */
-export function clampPercent( value ) {
-	return Math.max( 0, Math.min( 100, value ) );
-}
-
-/**
- * Check if a control point is overlapping with another.
- *
- * @param {ControlPoint[]} value        Array of control points.
- * @param {number}         initialIndex Index of the position to test.
- * @param {number}         newPosition  New position of the control point.
- * @param {number}         minDistance  Distance considered to be overlapping.
- *
- * @return {boolean} True if the point is overlapping.
- */
-export function isOverlapping(
-	value,
-	initialIndex,
-	newPosition,
-	minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS
-) {
-	const initialPosition = value[ initialIndex ].position;
-	const minPosition = Math.min( initialPosition, newPosition );
-	const maxPosition = Math.max( initialPosition, newPosition );
-
-	return value.some( ( { position }, index ) => {
-		return (
-			index !== initialIndex &&
-			( Math.abs( position - newPosition ) < minDistance ||
-				( minPosition < position && position < maxPosition ) )
-		);
-	} );
-}
-
-/**
- * Adds a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position to insert the new point.
- * @param {Color}          color    Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function addControlPoint( points, position, color ) {
-	const nextIndex = points.findIndex(
-		( point ) => point.position > position
-	);
-	const newPoint = { color, position };
-	const newPoints = points.slice();
-	newPoints.splice( nextIndex - 1, 0, newPoint );
-	return newPoints;
-}
-
-/**
- * Removes a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number}         index  Index to remove.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function removeControlPoint( points, index ) {
-	return points.filter( ( point, pointIndex ) => {
-		return pointIndex !== index;
-	} );
-}
-
-/**
- * Updates a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {ControlPoint[]} newPoint New control point to replace the index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPoint( points, index, newPoint ) {
-	const newValue = points.slice();
-	newValue[ index ] = newPoint;
-	return newValue;
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points      Array of control points.
- * @param {number}         index       Index to update.
- * @param {number}         newPosition Position to move the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointPosition( points, index, newPosition ) {
-	if ( isOverlapping( points, index, newPosition ) ) {
-		return points;
-	}
-	const newPoint = {
-		...points[ index ],
-		position: newPosition,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {Color}          newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColor( points, index, newColor ) {
-	const newPoint = {
-		...points[ index ],
-		color: newColor,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position of the color stop.
- * @param {string}         newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColorByPosition(
-	points,
-	position,
-	newColor
-) {
-	const index = points.findIndex( ( point ) => point.position === position );
-	return updateControlPointColor( points, index, newColor );
-}
-
-/**
- * Gets the horizontal coordinate when dragging a control point with the mouse.
- *
- * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
- * @param {Element} containerElement Container for the gradient picker.
- *
- * @return {number | undefined} Whole number percentage from the left.
- */
-export function getHorizontalRelativeGradientPosition(
-	mouseXCoordinate,
-	containerElement
-) {
-	if ( ! containerElement ) {
-		return;
-	}
-	const { x, width } = containerElement.getBoundingClientRect();
-	const absolutePositionValue = mouseXCoordinate - x;
-	return Math.round(
-		clampPercent( ( absolutePositionValue * 100 ) / width )
-	);
-}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
new file mode 100644
index 00000000000000..88daf2b2c19d6c
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
@@ -0,0 +1,193 @@
+/**
+ * Internal dependencies
+ */
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
+import type { ControlPoint } from '../types';
+
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+export function clampPercent( value: number ) {
+	return Math.max( 0, Math.min( 100, value ) );
+}
+
+/**
+ * Check if a control point is overlapping with another.
+ *
+ * @param value        Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition  New position of the control point.
+ * @param minDistance  Distance considered to be overlapping.
+ *
+ * @return True if the point is overlapping.
+ */
+export function isOverlapping(
+	value: ControlPoint[],
+	initialIndex: number,
+	newPosition: number,
+	minDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS
+) {
+	const initialPosition = value[ initialIndex ].position;
+	const minPosition = Math.min( initialPosition, newPosition );
+	const maxPosition = Math.max( initialPosition, newPosition );
+
+	return value.some( ( { position }, index ) => {
+		return (
+			index !== initialIndex &&
+			( Math.abs( position - newPosition ) < minDistance ||
+				( minPosition < position && position < maxPosition ) )
+		);
+	} );
+}
+
+/**
+ * Adds a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position to insert the new point.
+ * @param color    Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function addControlPoint(
+	points: ControlPoint[],
+	position: number,
+	color: ControlPoint[ 'color' ]
+) {
+	const nextIndex = points.findIndex(
+		( point ) => point.position > position
+	);
+	const newPoint = { color, position };
+	const newPoints = points.slice();
+	newPoints.splice( nextIndex - 1, 0, newPoint );
+	return newPoints;
+}
+
+/**
+ * Removes a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index  Index to remove.
+ *
+ * @return New array of control points.
+ */
+export function removeControlPoint( points: ControlPoint[], index: number ) {
+	return points.filter( ( _point, pointIndex ) => {
+		return pointIndex !== index;
+	} );
+}
+/**
+ * Updates a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newPoint New control point to replace the index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPoint(
+	points: ControlPoint[],
+	index: number,
+	newPoint: ControlPoint
+) {
+	const newValue = points.slice();
+	newValue[ index ] = newPoint;
+	return newValue;
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points      Array of control points.
+ * @param index       Index to update.
+ * @param newPosition Position to move the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointPosition(
+	points: ControlPoint[],
+	index: number,
+	newPosition: ControlPoint[ 'position' ]
+) {
+	if ( isOverlapping( points, index, newPosition ) ) {
+		return points;
+	}
+	const newPoint = {
+		...points[ index ],
+		position: newPosition,
+	};
+	return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColor(
+	points: ControlPoint[],
+	index: number,
+	newColor: ControlPoint[ 'color' ]
+) {
+	const newPoint = {
+		...points[ index ],
+		color: newColor,
+	};
+	return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColorByPosition(
+	points: ControlPoint[],
+	position: ControlPoint[ 'position' ],
+	newColor: ControlPoint[ 'color' ]
+) {
+	const index = points.findIndex( ( point ) => point.position === position );
+	return updateControlPointColor( points, index, newColor );
+}
+
+/**
+ * Gets the horizontal coordinate when dragging a control point with the mouse.
+ *
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
+ *
+ * @return Whole number percentage from the left.
+ */
+export function getHorizontalRelativeGradientPosition(
+	mouseXcoordinate: number,
+	containerElement: HTMLDivElement
+): number;
+export function getHorizontalRelativeGradientPosition(
+	mouseXcoordinate: number,
+	containerElement: null
+): undefined;
+export function getHorizontalRelativeGradientPosition(
+	mouseXCoordinate: number,
+	containerElement: HTMLDivElement | null
+) {
+	if ( ! containerElement ) {
+		return;
+	}
+	const { x, width } = containerElement.getBoundingClientRect();
+	const absolutePositionValue = mouseXCoordinate - x;
+	return Math.round(
+		clampPercent( ( absolutePositionValue * 100 ) / width )
+	);
+}
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.tsx
similarity index 69%
rename from packages/components/src/custom-gradient-picker/index.js
rename to packages/components/src/custom-gradient-picker/index.tsx
index db47f25c88d948..19cfd8f740df7d 100644
--- a/packages/components/src/custom-gradient-picker/index.js
+++ b/packages/components/src/custom-gradient-picker/index.tsx
@@ -1,9 +1,8 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type gradientParser from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -30,23 +29,31 @@ import {
 	DEFAULT_LINEAR_GRADIENT_ANGLE,
 	HORIZONTAL_GRADIENT_ORIENTATION,
 	GRADIENT_OPTIONS,
-	DEFAULT_GRADIENT,
 } from './constants';
 import {
 	AccessoryWrapper,
 	SelectWrapper,
 } from './styles/custom-gradient-picker-styles';
+import type {
+	CustomGradientPickerProps,
+	GradientAnglePickerProps,
+	GradientTypePickerProps,
+} from './types';
 
-const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
+const GradientAnglePicker = ( {
+	gradientAST,
+	hasGradient,
+	onChange,
+}: GradientAnglePickerProps ) => {
 	const angle =
 		gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
-	const onAngleChange = ( newAngle ) => {
+	const onAngleChange = ( newAngle: number ) => {
 		onChange(
 			serializeGradient( {
 				...gradientAST,
 				orientation: {
 					type: 'angular',
-					value: newAngle,
+					value: `${ newAngle }`,
 				},
 			} )
 		);
@@ -60,17 +67,22 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	);
 };
 
-const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
+const GradientTypePicker = ( {
+	gradientAST,
+	hasGradient,
+	onChange,
+}: GradientTypePickerProps ) => {
 	const { type } = gradientAST;
+
 	const onSetLinearGradient = () => {
 		onChange(
 			serializeGradient( {
 				...gradientAST,
-				...( gradientAST.orientation
-					? {}
-					: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),
+				orientation: gradientAST.orientation
+					? undefined
+					: HORIZONTAL_GRADIENT_ORIENTATION,
 				type: 'linear-gradient',
-			} )
+			} as gradientParser.LinearGradientNode )
 		);
 	};
 
@@ -84,7 +96,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		);
 	};
 
-	const handleOnChange = ( next ) => {
+	const handleOnChange = ( next: string ) => {
 		if ( next === 'linear-gradient' ) {
 			onSetLinearGradient();
 		}
@@ -102,30 +114,57 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
 			size="__unstable-large"
-			value={ hasGradient && type }
+			value={ hasGradient ? type : undefined }
 		/>
 	);
 };
 
-export default function CustomGradientPicker( {
+/**
+ * CustomGradientPicker is a React component that renders a UI for specifying
+ * linear or radial gradients. Radial gradients are displayed in the picker as
+ * a slice of the gradient from the center to the outside.
+ *
+ * ```jsx
+ * import { CustomGradientPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCustomGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState();
+ *
+ *   return (
+ *     <CustomGradientPicker
+ *			value={ gradient }
+ *			onChange={ setGradient }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function CustomGradientPicker( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMargin = false,
 	value,
 	onChange,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const gradientAST = getGradientAstWithDefault( value );
+	__experimentalIsRenderedInSidebar = false,
+}: CustomGradientPickerProps ) {
+	const { gradientAST, hasGradient } = getGradientAstWithDefault( value );
+
 	// On radial gradients the bar should display a linear gradient.
 	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
 	// On liner gradients the bar represents the color stops from left to right independently of the angle.
 	const background = getLinearGradientRepresentation( gradientAST );
-	const hasGradient = gradientAST.value !== DEFAULT_GRADIENT;
+
 	// Control points color option may be hex from presets, custom colors will be rgb.
 	// The position should always be a percentage.
-	const controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {
-		color: getStopCssColor( colorStop ),
-		position: parseInt( colorStop.length.value ),
-	} ) );
+	const controlPoints = gradientAST.colorStops.map( ( colorStop ) => {
+		return {
+			color: getStopCssColor( colorStop ),
+			// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
+			// TypeScript doesn't know that `colorStop.length` is not undefined here.
+			// @ts-expect-error
+			position: parseInt( colorStop.length.value ),
+		};
+	} );
 
 	if ( ! __nextHasNoMargin ) {
 		deprecated(
@@ -187,3 +226,5 @@ export default function CustomGradientPicker( {
 		</VStack>
 	);
 }
+
+export default CustomGradientPicker;
diff --git a/packages/components/src/custom-gradient-picker/serializer.js b/packages/components/src/custom-gradient-picker/serializer.js
deleted file mode 100644
index 934cf392ddd1e3..00000000000000
--- a/packages/components/src/custom-gradient-picker/serializer.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// @ts-nocheck
-
-export function serializeGradientColor( { type, value } ) {
-	if ( type === 'literal' ) {
-		return value;
-	}
-	if ( type === 'hex' ) {
-		return `#${ value }`;
-	}
-	return `${ type }(${ value.join( ',' ) })`;
-}
-
-export function serializeGradientPosition( position ) {
-	if ( ! position ) {
-		return '';
-	}
-	const { value, type } = position;
-	return `${ value }${ type }`;
-}
-
-export function serializeGradientColorStop( { type, value, length } ) {
-	return `${ serializeGradientColor( {
-		type,
-		value,
-	} ) } ${ serializeGradientPosition( length ) }`;
-}
-
-export function serializeGradientOrientation( orientation ) {
-	if ( ! orientation || orientation.type !== 'angular' ) {
-		return;
-	}
-	return `${ orientation.value }deg`;
-}
-
-export function serializeGradient( { type, orientation, colorStops } ) {
-	const serializedOrientation = serializeGradientOrientation( orientation );
-	const serializedColorStops = colorStops
-		.sort( ( colorStop1, colorStop2 ) => {
-			return (
-				( colorStop1?.length?.value ?? 0 ) -
-				( colorStop2?.length?.value ?? 0 )
-			);
-		} )
-		.map( serializeGradientColorStop );
-	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
-		.filter( Boolean )
-		.join( ',' ) })`;
-}
diff --git a/packages/components/src/custom-gradient-picker/serializer.ts b/packages/components/src/custom-gradient-picker/serializer.ts
new file mode 100644
index 00000000000000..226348dadc66c1
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/serializer.ts
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+/**
+ * Internal dependencies
+ */
+import type { ColorStopTypeAndValue } from './types';
+
+export function serializeGradientColor( {
+	type,
+	value,
+}: ColorStopTypeAndValue ) {
+	if ( type === 'literal' ) {
+		return value;
+	}
+	if ( type === 'hex' ) {
+		return `#${ value }`;
+	}
+	return `${ type }(${ value.join( ',' ) })`;
+}
+
+export function serializeGradientPosition(
+	position: gradientParser.ColorStop[ 'length' ]
+) {
+	if ( ! position ) {
+		return '';
+	}
+	const { value, type } = position;
+	return `${ value }${ type }`;
+}
+
+export function serializeGradientColorStop( {
+	type,
+	value,
+	length,
+}: gradientParser.ColorStop ) {
+	return `${ serializeGradientColor( {
+		type,
+		value,
+	} as ColorStopTypeAndValue ) } ${ serializeGradientPosition( length ) }`;
+}
+
+export function serializeGradientOrientation(
+	orientation: gradientParser.GradientNode[ 'orientation' ]
+) {
+	if (
+		Array.isArray( orientation ) ||
+		! orientation ||
+		orientation.type !== 'angular'
+	) {
+		return;
+	}
+	return `${ orientation.value }deg`;
+}
+
+export function serializeGradient( {
+	type,
+	orientation,
+	colorStops,
+}: gradientParser.GradientNode ) {
+	const serializedOrientation = serializeGradientOrientation( orientation );
+	const serializedColorStops = colorStops
+		.sort( ( colorStop1, colorStop2 ) => {
+			const getNumericStopValue = (
+				colorStop: gradientParser.ColorStop
+			) => {
+				return colorStop?.length?.value === undefined
+					? 0
+					: parseInt( colorStop.length.value );
+			};
+
+			return (
+				getNumericStopValue( colorStop1 ) -
+				getNumericStopValue( colorStop2 )
+			);
+		} )
+		.map( serializeGradientColorStop );
+	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
+		.filter( Boolean )
+		.join( ',' ) })`;
+}
diff --git a/packages/components/src/custom-gradient-picker/stories/index.js b/packages/components/src/custom-gradient-picker/stories/index.js
deleted file mode 100644
index 9e56d1534955d0..00000000000000
--- a/packages/components/src/custom-gradient-picker/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CustomGradientPicker from '../';
-
-export default {
-	title: 'Components/CustomGradientPicker',
-	component: CustomGradientPicker,
-	argTypes: {
-		__nextHasNoMargin: { control: { type: 'boolean' } },
-	},
-};
-
-const CustomGradientPickerWithState = ( props ) => {
-	const [ gradient, setGradient ] = useState();
-	return (
-		<CustomGradientPicker
-			{ ...props }
-			value={ gradient }
-			onChange={ setGradient }
-		/>
-	);
-};
-
-export const Default = CustomGradientPickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-};
diff --git a/packages/components/src/custom-gradient-picker/stories/index.tsx b/packages/components/src/custom-gradient-picker/stories/index.tsx
new file mode 100644
index 00000000000000..3648db3abe571e
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/stories/index.tsx
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomGradientPicker from '../';
+
+const meta: ComponentMeta< typeof CustomGradientPicker > = {
+	title: 'Components/CustomGradientPicker',
+	component: CustomGradientPicker,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const CustomGradientPickerWithState: ComponentStory<
+	typeof CustomGradientPicker
+> = ( { onChange, ...props } ) => {
+	const [ gradient, setGradient ] = useState< string >();
+	return (
+		<CustomGradientPicker
+			{ ...props }
+			value={ gradient }
+			onChange={ ( newGradient ) => {
+				setGradient( newGradient );
+				onChange( newGradient );
+			} }
+		/>
+	);
+};
+
+export const Default = CustomGradientPickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMargin: true,
+};
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index c3c236f2367058..a5ee7831296d87 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -7,14 +7,30 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	}
 }
 
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
-	opacity: 0.4;
-}
-
 .components-custom-gradient-picker__gradient-bar {
 	border-radius: $radius-block-ui;
 	width: 100%;
 	height: $grid-unit-60;
+	position: relative;
+	z-index: 1;
+
+	&.has-gradient {
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 12px 12px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 12px) calc(2 * 12px);
+	}
+
+	.components-custom-gradient-picker__gradient-bar-background {
+		position: absolute;
+		inset: 0;
+	}
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -109,3 +125,8 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		}
 	}
 }
+
+.components-custom-gradient-picker__ui-line {
+	position: relative;
+	z-index: 0;
+}
diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
similarity index 100%
rename from packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
rename to packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
diff --git a/packages/components/src/custom-gradient-picker/test/serializer.js b/packages/components/src/custom-gradient-picker/test/serializer.ts
similarity index 56%
rename from packages/components/src/custom-gradient-picker/test/serializer.js
rename to packages/components/src/custom-gradient-picker/test/serializer.ts
index 3b11e41f7c91d3..3c14194fc7279f 100644
--- a/packages/components/src/custom-gradient-picker/test/serializer.js
+++ b/packages/components/src/custom-gradient-picker/test/serializer.ts
@@ -12,24 +12,30 @@ import {
 describe( 'It should serialize a gradient', () => {
 	test( 'serializeGradientColor', () => {
 		expect(
-			serializeGradientColor( { type: 'rgba', value: [ 1, 2, 3, 0.5 ] } )
+			serializeGradientColor( {
+				type: 'rgba',
+				value: [ '1', '2', '3', '0.5' ],
+			} )
 		).toBe( 'rgba(1,2,3,0.5)' );
 
 		expect(
-			serializeGradientColor( { type: 'rgb', value: [ 255, 0, 0 ] } )
+			serializeGradientColor( {
+				type: 'rgb',
+				value: [ '255', '0', '0' ],
+			} )
 		).toBe( 'rgb(255,0,0)' );
 	} );
 
 	test( 'serializeGradientPosition', () => {
-		expect( serializeGradientPosition( { type: '%', value: 70 } ) ).toBe(
+		expect( serializeGradientPosition( { type: '%', value: '70' } ) ).toBe(
 			'70%'
 		);
 
-		expect( serializeGradientPosition( { type: '%', value: 0 } ) ).toBe(
+		expect( serializeGradientPosition( { type: '%', value: '0' } ) ).toBe(
 			'0%'
 		);
 
-		expect( serializeGradientPosition( { type: 'px', value: 4 } ) ).toBe(
+		expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
 			'4px'
 		);
 	} );
@@ -38,35 +44,35 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: '%', value: 70 },
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: '%', value: '70' },
 			} )
 		).toBe( 'rgba(1,2,3,0.5) 70%' );
 
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgb',
-				value: [ 255, 0, 0 ],
-				length: { type: '%', value: 0 },
+				value: [ '255', '0', '0' ],
+				length: { type: '%', value: '0' },
 			} )
 		).toBe( 'rgb(255,0,0) 0%' );
 
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: 'px', value: 100 },
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: 'px', value: '100' },
 			} )
 		).toBe( 'rgba(1,2,3,0.5) 100px' );
 	} );
 
 	test( 'serializeGradientOrientation', () => {
 		expect(
-			serializeGradientOrientation( { type: 'angular', value: 40 } )
+			serializeGradientOrientation( { type: 'angular', value: '40' } )
 		).toBe( '40deg' );
 
 		expect(
-			serializeGradientOrientation( { type: 'angular', value: 0 } )
+			serializeGradientOrientation( { type: 'angular', value: '0' } )
 		).toBe( '0deg' );
 	} );
 
@@ -74,17 +80,17 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradient( {
 				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 40 },
+				orientation: { type: 'angular', value: '40' },
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -98,13 +104,13 @@ describe( 'It should serialize a gradient', () => {
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -117,12 +123,12 @@ describe( 'It should serialize a gradient', () => {
 					{
 						type: 'hex',
 						value: '000',
-						length: { type: '%', value: 70 },
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'hex',
 						value: 'fff',
-						length: { type: '%', value: 40 },
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -131,27 +137,27 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradient( {
 				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 0 },
+				orientation: { type: 'angular', value: '0' },
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 0 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '0' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 100 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '100' },
 					},
 					{
 						type: 'rgba',
-						value: [ 10, 20, 30, 0.5 ],
-						length: { type: '%', value: 20 },
+						value: [ '10', '20', '30', '0.5' ],
+						length: { type: '%', value: '20' },
 					},
 				],
 			} )
diff --git a/packages/components/src/custom-gradient-picker/types.ts b/packages/components/src/custom-gradient-picker/types.ts
new file mode 100644
index 00000000000000..93407fd77ddcf8
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/types.ts
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+
+export type CustomGradientPickerProps = {
+	/**
+	 * Start opting in to 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.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: string | null;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string ) => void;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type GradientAnglePickerProps = {
+	gradientAST:
+		| gradientParser.LinearGradientNode
+		| gradientParser.RepeatingLinearGradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type GradientTypePickerProps = {
+	gradientAST: gradientParser.GradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type ControlPoint = { color: string; position: number };
+
+// When dealing with unions of objects, using `Pick` will result
+// in a new type where each desired prop is a union of the values for that prop
+// across all of the original union members. This does not maintain the specific
+// combinations of props present in the original union.
+// To avoid this, the `DistributivePick` type will
+// "distribute" the `Pick` across the union. This allows the `Pick`
+// to act on each member individually, maintaining the relationships between the
+// resulting props.
+// https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s
+type DistributivePick< T, K extends keyof T > = T extends any
+	? Pick< T, K >
+	: never;
+
+export type ColorStopTypeAndValue = DistributivePick<
+	gradientParser.ColorStop,
+	'type' | 'value'
+>;
+
+export type CustomGradientBarProps = {
+	background: React.CSSProperties[ 'background' ];
+	hasGradient: boolean;
+	value: ControlPoint[];
+	onChange: ( newControlPoints: ControlPoint[] ) => void;
+	disableInserter?: boolean;
+	disableAlpha?: boolean;
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type CustomGradientBarIdleState = { id: 'IDLE' };
+type CustomGradientBarMovingInserterState = {
+	id: 'MOVING_INSERTER';
+	insertPosition: number;
+};
+type CustomGradientBarInsertingControlPointState = {
+	id: 'INSERTING_CONTROL_POINT';
+	insertPosition: number;
+};
+type CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };
+
+export type CustomGradientBarReducerState =
+	| CustomGradientBarIdleState
+	| CustomGradientBarMovingInserterState
+	| CustomGradientBarInsertingControlPointState
+	| CustomGradientBarMovingControlPointState;
+
+export type CustomGradientBarReducerAction =
+	| { type: 'MOVE_INSERTER'; insertPosition: number }
+	| { type: 'STOP_INSERTER_MOVE' }
+	| { type: 'OPEN_INSERTER' }
+	| { type: 'CLOSE_INSERTER' }
+	| { type: 'START_CONTROL_CHANGE' }
+	| { type: 'STOP_CONTROL_CHANGE' };
+
+export type ControlPointButtonProps = {
+	isOpen: boolean;
+	position: ControlPoint[ 'position' ];
+	color: string;
+};
+
+export type ControlPointsProps = {
+	disableRemove: boolean;
+	disableAlpha: boolean;
+	gradientPickerDomRef: React.RefObject< HTMLDivElement >;
+	ignoreMarkerPosition?: number;
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onStartControlPointChange: () => void;
+	onStopControlPointChange: () => void;
+	__experimentalIsRenderedInSidebar: boolean;
+};
+
+export type ControlPointMoveState = {
+	initialPosition: number;
+	index: number;
+	significantMoveHappened: boolean;
+	listenersActivated: boolean;
+};
+
+export type InsertPointProps = {
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onOpenInserter: () => void;
+	onCloseInserter: () => void;
+	insertPosition: number;
+	disableAlpha: boolean;
+	__experimentalIsRenderedInSidebar: boolean;
+};
diff --git a/packages/components/src/custom-gradient-picker/utils.js b/packages/components/src/custom-gradient-picker/utils.ts
similarity index 60%
rename from packages/components/src/custom-gradient-picker/utils.js
rename to packages/components/src/custom-gradient-picker/utils.ts
index 69d8223fbdb877..e52c5220a6e759 100644
--- a/packages/components/src/custom-gradient-picker/utils.js
+++ b/packages/components/src/custom-gradient-picker/utils.ts
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -16,10 +14,13 @@ import {
 	DIRECTIONAL_ORIENTATION_ANGLE_MAP,
 } from './constants';
 import { serializeGradient } from './serializer';
+import type { ControlPoint } from './types';
 
 extend( [ namesPlugin ] );
 
-export function getLinearGradientRepresentation( gradientAST ) {
+export function getLinearGradientRepresentation(
+	gradientAST: gradientParser.GradientNode
+) {
 	return serializeGradient( {
 		type: 'linear-gradient',
 		orientation: HORIZONTAL_GRADIENT_ORIENTATION,
@@ -27,29 +28,41 @@ export function getLinearGradientRepresentation( gradientAST ) {
 	} );
 }
 
-function hasUnsupportedLength( item ) {
+function hasUnsupportedLength( item: gradientParser.ColorStop ) {
 	return item.length === undefined || item.length.type !== '%';
 }
 
-export function getGradientAstWithDefault( value ) {
+export function getGradientAstWithDefault( value?: string | null ) {
 	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
 	// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
-	let gradientAST;
+	let gradientAST: gradientParser.GradientNode | undefined;
+	let hasGradient = !! value;
+
+	const valueToParse = value ?? DEFAULT_GRADIENT;
 
 	try {
-		gradientAST = gradientParser.parse( value )[ 0 ];
-		gradientAST.value = value;
+		gradientAST = gradientParser.parse( valueToParse )[ 0 ];
 	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'wp.components.CustomGradientPicker failed to parse the gradient with error',
+			error
+		);
+
 		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
-		gradientAST.value = DEFAULT_GRADIENT;
+		hasGradient = false;
 	}
 
-	if ( gradientAST.orientation?.type === 'directional' ) {
-		gradientAST.orientation.type = 'angular';
-		gradientAST.orientation.value =
-			DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+	if (
+		! Array.isArray( gradientAST.orientation ) &&
+		gradientAST.orientation?.type === 'directional'
+	) {
+		gradientAST.orientation = {
+			type: 'angular',
+			value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[
 				gradientAST.orientation.value
-			].toString();
+			].toString(),
+		};
 	}
 
 	if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {
@@ -57,19 +70,18 @@ export function getGradientAstWithDefault( value ) {
 		const step = 100 / ( colorStops.length - 1 );
 		colorStops.forEach( ( stop, index ) => {
 			stop.length = {
-				value: step * index,
+				value: `${ step * index }`,
 				type: '%',
 			};
 		} );
-		gradientAST.value = serializeGradient( gradientAST );
 	}
 
-	return gradientAST;
+	return { gradientAST, hasGradient };
 }
 
 export function getGradientAstWithControlPoints(
-	gradientAST,
-	newControlPoints
+	gradientAST: gradientParser.GradientNode,
+	newControlPoints: ControlPoint[]
 ) {
 	return {
 		...gradientAST,
@@ -81,13 +93,16 @@ export function getGradientAstWithControlPoints(
 					value: position?.toString(),
 				},
 				type: a < 1 ? 'rgba' : 'rgb',
-				value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],
+				value:
+					a < 1
+						? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]
+						: [ `${ r }`, `${ g }`, `${ b }` ],
 			};
 		} ),
-	};
+	} as gradientParser.GradientNode;
 }
 
-export function getStopCssColor( colorStop ) {
+export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
 	switch ( colorStop.type ) {
 		case 'hex':
 			return `#${ colorStop.value }`;
diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js
index 3ef6d52ab1f6ec..150afe4aa75f51 100644
--- a/packages/components/src/custom-select-control/test/index.js
+++ b/packages/components/src/custom-select-control/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,7 +10,8 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import CustomSelectControl from '..';
 
 describe( 'CustomSelectControl', () => {
-	it( 'Captures the keypress event and does not let it propagate', () => {
+	it( 'Captures the keypress event and does not let it propagate', async () => {
+		const user = userEvent.setup();
 		const onKeyDown = jest.fn();
 		const options = [
 			{
@@ -39,10 +41,10 @@ describe( 'CustomSelectControl', () => {
 			</div>
 		);
 		const toggleButton = screen.getByRole( 'button' );
-		fireEvent.click( toggleButton );
+		await user.click( toggleButton );
 
 		const customSelect = screen.getByRole( 'listbox' );
-		fireEvent.keyDown( customSelect );
+		await user.type( customSelect, '{enter}' );
 
 		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
 	} );
diff --git a/packages/components/src/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx
similarity index 86%
rename from packages/components/src/color-list-picker/index.tsx
rename to packages/components/src/duotone-picker/color-list-picker/index.tsx
index 48f56ca9abac6d..95ed02c639e632 100644
--- a/packages/components/src/color-list-picker/index.tsx
+++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx
@@ -7,11 +7,11 @@ import { swatch } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import { HStack } from '../../h-stack';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
 
 function ColorOption( {
@@ -75,7 +75,8 @@ function ColorListPicker( {
 					disableCustomColors={ disableCustomColors }
 					enableAlpha={ enableAlpha }
 					onChange={ ( newColor ) => {
-						const newColors = value.slice();
+						const newColors: ( string | undefined )[] =
+							value.slice();
 						newColors[ index ] = newColor;
 						onChange( newColors );
 					} }
diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/duotone-picker/color-list-picker/style.scss
similarity index 100%
rename from packages/components/src/color-list-picker/style.scss
rename to packages/components/src/duotone-picker/color-list-picker/style.scss
diff --git a/packages/components/src/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
similarity index 91%
rename from packages/components/src/color-list-picker/types.ts
rename to packages/components/src/duotone-picker/color-list-picker/types.ts
index becfc405b2b955..5c42e6c9371b62 100644
--- a/packages/components/src/color-list-picker/types.ts
+++ b/packages/components/src/duotone-picker/color-list-picker/types.ts
@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
 
 export type ColorListPickerProps = {
 	/**
-	 * A list of predifened colors. Each color is an object with a `name` and a
+	 * A list of predefined colors. Each color is an object with a `name` and a
 	 * `color` value.
 	 * The `name` is a string used to identify the color in the UI.
 	 * The `color` is a valid CSS color string.
@@ -21,7 +21,7 @@ export type ColorListPickerProps = {
 	/**
 	 * An array containing the currently selected colors.
 	 */
-	value?: Array< string | undefined >;
+	value?: Array< string >;
 	/**
 	 * Controls whether the custom color picker is displayed.
 	 */
diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.js b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
similarity index 84%
rename from packages/components/src/duotone-picker/custom-duotone-bar.js
rename to packages/components/src/duotone-picker/custom-duotone-bar.tsx
index 8aef83f8a4bfab..f72db529ebd481 100644
--- a/packages/components/src/duotone-picker/custom-duotone-bar.js
+++ b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
@@ -11,7 +11,13 @@ import {
 
 const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
 
-export default function CustomDuotoneBar( { value, onChange } ) {
+export default function CustomDuotoneBar( {
+	value,
+	onChange,
+}: {
+	value?: string[];
+	onChange: ( value?: string[] ) => void;
+} ) {
 	const hasGradient = !! value;
 	const values = hasGradient ? value : PLACEHOLDER_VALUES;
 	const background = getGradientFromCSSColors( values );
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.tsx
similarity index 70%
rename from packages/components/src/duotone-picker/duotone-picker.js
rename to packages/components/src/duotone-picker/duotone-picker.tsx
index 4f9e5ea7b23ce6..2daacb15c9159c 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -12,14 +12,48 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ColorListPicker from '../color-list-picker';
+import ColorListPicker from './color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
+import type { DuotonePickerProps } from './types';
 
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 function DuotonePicker( {
 	clearable = true,
 	unsetable = true,
@@ -29,7 +63,7 @@ function DuotonePicker( {
 	disableCustomDuotone,
 	value,
 	onChange,
-} ) {
+}: DuotonePickerProps ) {
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
@@ -125,6 +159,9 @@ function DuotonePicker( {
 									newColors.length >= 2
 										? newColors
 										: undefined;
+								// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+								// but it's currently typed as a string[].
+								// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
 								onChange( newValue );
 							} }
 						/>
diff --git a/packages/components/src/duotone-picker/duotone-swatch.js b/packages/components/src/duotone-picker/duotone-swatch.tsx
similarity index 79%
rename from packages/components/src/duotone-picker/duotone-swatch.js
rename to packages/components/src/duotone-picker/duotone-swatch.tsx
index d98671affbbd13..1a40bb68f1c51f 100644
--- a/packages/components/src/duotone-picker/duotone-swatch.js
+++ b/packages/components/src/duotone-picker/duotone-swatch.tsx
@@ -9,8 +9,9 @@ import { swatch } from '@wordpress/icons';
 import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
+import type { DuotoneSwatchProps } from './types';
 
-function DuotoneSwatch( { values } ) {
+function DuotoneSwatch( { values }: DuotoneSwatchProps ) {
 	return values ? (
 		<ColorIndicator
 			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
diff --git a/packages/components/src/duotone-picker/index.js b/packages/components/src/duotone-picker/index.ts
similarity index 100%
rename from packages/components/src/duotone-picker/index.js
rename to packages/components/src/duotone-picker/index.ts
diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.js b/packages/components/src/duotone-picker/stories/duotone-picker.tsx
similarity index 69%
rename from packages/components/src/duotone-picker/stories/duotone-picker.js
rename to packages/components/src/duotone-picker/stories/duotone-picker.tsx
index 6186dd1b3ad37f..a8a1111720d369 100644
--- a/packages/components/src/duotone-picker/stories/duotone-picker.js
+++ b/packages/components/src/duotone-picker/stories/duotone-picker.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,23 +11,22 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DuotonePicker } from '../';
+import { DuotonePicker } from '..';
+import type { DuotonePickerProps } from '../types';
 
-export default {
+const meta: ComponentMeta< typeof DuotonePicker > = {
 	title: 'Components/DuotonePicker',
 	component: DuotonePicker,
 	argTypes: {
-		clearable: { control: { type: 'boolean' } },
-		disableCustomColors: { control: { type: 'boolean' } },
-		disableCustomDuotone: { control: { type: 'boolean' } },
 		onChange: { action: 'onChange' },
-		unsetable: { control: { type: 'boolean' } },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
 const DUOTONE_PALETTE = [
 	{
@@ -44,8 +48,11 @@ const COLOR_PALETTE = [
 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
 ];
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
+const Template: ComponentStory< typeof DuotonePicker > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
 
 	return (
 		<DuotonePicker
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.js b/packages/components/src/duotone-picker/stories/duotone-swatch.tsx
similarity index 63%
rename from packages/components/src/duotone-picker/stories/duotone-swatch.js
rename to packages/components/src/duotone-picker/stories/duotone-swatch.tsx
index e64b3e3c2c295f..1485bca10e1d8f 100644
--- a/packages/components/src/duotone-picker/stories/duotone-swatch.js
+++ b/packages/components/src/duotone-picker/stories/duotone-swatch.tsx
@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import { DuotoneSwatch } from '../';
+import { DuotoneSwatch } from '..';
 
-export default {
+const meta: ComponentMeta< typeof DuotoneSwatch > = {
 	title: 'Components/DuotoneSwatch',
 	component: DuotoneSwatch,
 	parameters: {
@@ -11,8 +16,9 @@ export default {
 		docs: { source: { state: 'open' } },
 	},
 };
+export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof DuotoneSwatch > = ( args ) => {
 	return <DuotoneSwatch { ...args } />;
 };
 
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
new file mode 100644
index 00000000000000..3d5927675f542f
--- /dev/null
+++ b/packages/components/src/duotone-picker/types.ts
@@ -0,0 +1,61 @@
+export type DuotonePickerProps = {
+	/**
+	 * Whether there should be a button to clear the duotone value.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Whether there should be an `unset` option.
+	 *
+	 * @default true
+	 */
+	unsetable?: boolean;
+	/**
+	 * Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`.
+	 */
+	colorPalette: Color[];
+	/**
+	 * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
+	 */
+	duotonePalette: DuotoneColor[];
+	/**
+	 * Whether custom colors should be disabled.
+	 *
+	 * @default false
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether custom duotone values should be disabled.
+	 *
+	 * @default false
+	 */
+	disableCustomDuotone?: boolean;
+	/**
+	 * An array of colors for the duotone effect.
+	 */
+	value?: string[] | 'unset';
+	/**
+	 * Callback which is called when the duotone colors change.
+	 */
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+};
+
+type Color = {
+	color: string;
+	name: string;
+	slug: string;
+};
+
+type DuotoneColor = {
+	colors: string[];
+	name: string;
+	slug: string;
+};
+
+export type DuotoneSwatchProps = {
+	/**
+	 * An array of colors to show or `null` to show the placeholder swatch icon.
+	 */
+	values?: string[] | null;
+};
diff --git a/packages/components/src/duotone-picker/utils.js b/packages/components/src/duotone-picker/utils.ts
similarity index 63%
rename from packages/components/src/duotone-picker/utils.js
rename to packages/components/src/duotone-picker/utils.ts
index f33aff4f965d52..06d371902f882b 100644
--- a/packages/components/src/duotone-picker/utils.js
+++ b/packages/components/src/duotone-picker/utils.ts
@@ -4,6 +4,11 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
+/**
+ * Internal dependencies
+ */
+import type { DuotonePickerProps } from './types';
+
 extend( [ namesPlugin ] );
 
 /**
@@ -18,11 +23,13 @@ extend( [ namesPlugin ] );
 /**
  * Calculate the brightest and darkest values from a color palette.
  *
- * @param {Object[]} palette Color palette for the theme.
+ * @param palette Color palette for the theme.
  *
- * @return {string[]} Tuple of the darkest color and brightest color.
+ * @return Tuple of the darkest color and brightest color.
  */
-export function getDefaultColors( palette ) {
+export function getDefaultColors(
+	palette: DuotonePickerProps[ 'colorPalette' ]
+) {
 	// A default dark and light color are required.
 	if ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];
 
@@ -38,7 +45,10 @@ export function getDefaultColors( palette ) {
 					current.brightness >= max.brightness ? current : max,
 				];
 			},
-			[ { brightness: 1 }, { brightness: 0 } ]
+			[
+				{ brightness: 1, color: '' },
+				{ brightness: 0, color: '' },
+			]
 		)
 		.map( ( { color } ) => color );
 }
@@ -46,12 +56,15 @@ export function getDefaultColors( palette ) {
 /**
  * Generate a duotone gradient from a list of colors.
  *
- * @param {string[]} colors CSS color strings.
- * @param {string}   angle  CSS gradient angle.
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
  *
- * @return {string} CSS gradient string for the duotone swatch.
+ * @return  CSS gradient string for the duotone swatch.
  */
-export function getGradientFromCSSColors( colors = [], angle = '90deg' ) {
+export function getGradientFromCSSColors(
+	colors: string[] = [],
+	angle = '90deg'
+) {
 	const l = 100 / colors.length;
 
 	const stops = colors
@@ -64,11 +77,11 @@ export function getGradientFromCSSColors( colors = [], angle = '90deg' ) {
 /**
  * Convert a color array to an array of color stops.
  *
- * @param {string[]} colors CSS colors array
+ * @param colors CSS colors array
  *
- * @return {Object[]} Color stop information.
+ * @return Color stop information.
  */
-export function getColorStopsFromColors( colors ) {
+export function getColorStopsFromColors( colors: string[] ) {
 	return colors.map( ( color, i ) => ( {
 		position: ( i * 100 ) / ( colors.length - 1 ),
 		color,
@@ -78,10 +91,12 @@ export function getColorStopsFromColors( colors ) {
 /**
  * Convert a color stop array to an array colors.
  *
- * @param {Object[]} colorStops Color stop information.
+ * @param colorStops Color stop information.
  *
- * @return {string[]} CSS colors array.
+ * @return CSS colors array.
  */
-export function getColorsFromColorStops( colorStops = [] ) {
+export function getColorsFromColorStops(
+	colorStops: { position: number; color: string }[] = []
+) {
 	return colorStops.map( ( { color } ) => color );
 }
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
index 1ae3ddbc870f18..6c5a04b1bdeb40 100644
--- a/packages/components/src/flex/flex-item/README.md
+++ b/packages/components/src/flex/flex-item/README.md
@@ -16,7 +16,7 @@ The CSS display property of `FlexItem`.
 
 ### `isBlock`: `boolean`
 
-Determins if `FlexItem` should render as an adaptive full-width block.
+Determines if `FlexItem` should render as an adaptive full-width block.
 
 -   Required: No
 -   Default: `false`
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3b5bd7e46bf21e..90fe84e56f2ee6 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -61,6 +61,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
+-   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.)
 
 ## Usage
 
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index 980376e905e782..5c87db86514b7e 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -22,7 +22,11 @@ import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
 import { FlexItem } from '../flex';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
+import {
+	StyledHelp,
+	StyledLabel,
+} from '../base-control/styles/base-control-styles';
+import { Spacer } from '../spacer';
 
 const identity = ( value: string ) => value;
 
@@ -67,6 +71,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalShowHowTo = true,
 		__next36pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
+		__nextHasNoMarginBottom = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -716,17 +721,19 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					/>
 				) }
 			</div>
+			{ ! __nextHasNoMarginBottom && <Spacer marginBottom={ 2 } /> }
 			{ __experimentalShowHowTo && (
-				<p
+				<StyledHelp
 					id={ `components-form-token-suggestions-howto-${ instanceId }` }
 					className="components-form-token-field__help"
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ tokenizeOnSpace
 						? __(
 								'Separate with commas, spaces, or the Enter key.'
 						  )
 						: __( 'Separate with commas or the Enter key.' ) }
-				</p>
+				</StyledHelp>
 			) }
 		</div>
 	);
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 52d118d5d99bdc..775999c1d01246 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -1,7 +1,6 @@
 .components-form-token-field__input-container {
 	@include input-control();
 	width: 100%;
-	margin: 0 0 $grid-unit-10 0;
 	padding: 0;
 	cursor: text;
 
@@ -48,12 +47,6 @@
 	}
 }
 
-.components-form-token-field__help {
-	font-size: $helptext-font-size;
-	font-style: normal;
-	color: $gray-700;
-}
-
 // Tokens
 .components-form-token-field__token {
 	font-size: $default-font-size;
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index a10677f3c10aa1..e62e851f1cf226 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -44,6 +44,7 @@ const FormTokenFieldWithState = ( {
 				setSelectedValue( tokens );
 				onChange?.( tokens );
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index bdc67d725489b4..44c11d6461859c 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -169,6 +169,12 @@ export interface FormTokenFieldProps
 	 * Custom renderer for suggestions.
 	 */
 	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
+	/**
+	 * Start opting into the new margin-free styles that will become the default in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
 }
 
 /**
diff --git a/packages/components/src/gradient-picker/README.md b/packages/components/src/gradient-picker/README.md
index 33cb159b89056b..0901d14043eab8 100644
--- a/packages/components/src/gradient-picker/README.md
+++ b/packages/components/src/gradient-picker/README.md
@@ -49,63 +49,56 @@ const myGradientPicker = () => {
 
 The component accepts the following props:
 
-### value
+### `className`: `string`
+
+The class name added to the wrapper.
+
+-   Required: No
+
+### `value`: `string`
 
 The current value of the gradient. Pass a css gradient like `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`. Optionally pass in a `null` value to specify no gradient is currently selected.
 
--   Type: `string`
 -   Required: No
 -   Default: `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`
 
-### onChange
+### `onChange`: `( currentGradient: string | undefined ) => void`
 
 The function called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
 
--   Type: `Function`
 -   Required: Yes
 
-### gradients
+### `gradients`: `GradientsProp[]`
 
-An array of objects of predefined gradients which show up as `CircularOptionPicker` above the gradient selector.
+An array of objects of predefined gradients displayed above the gradient selector.
 
--   Type: `array`
 -   Required: No
+-   Default: `[]`
 
-### clearable
+### `clearable`: `boolean`
 
 Whether the palette should have a clearing button or not.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: true
 
-### clearGradient
-
-Called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
-
--   Type: `Function`
--   Required: No
-
-### disableCustomGradients
+### `disableCustomGradients`: `boolean`
 
 If true, the gradient picker will not be displayed and only defined gradients from `gradients` are available.
 
--   Type: `Boolean`
 -   Required: No
 -   Default: false
 
-### __nextHasNoMargin
+### `__nextHasNoMargin`: `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.)
 
--   Type: `Boolean`
 -   Required: No
 -   Default: `false`
 
-### headingLevel
+### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
-The heading level.
+The heading level. Only applies in cases where gradients are provided from multiple origins (ie. when the array passed as the `gradients` prop contains two or more items).
 
--   Type: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 -   Required: No
 -   Default: `2`
diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.tsx
similarity index 70%
rename from packages/components/src/gradient-picker/index.js
rename to packages/components/src/gradient-picker/index.tsx
index 626c8d0667e5b3..70ff9fcf4802a9 100644
--- a/packages/components/src/gradient-picker/index.js
+++ b/packages/components/src/gradient-picker/index.tsx
@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -15,13 +13,21 @@ import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
 import { Spacer } from '../spacer';
+import type {
+	GradientPickerComponentProps,
+	PickerProps,
+	OriginObject,
+	GradientObject,
+} from './types';
 
 // The Multiple Origin Gradients have a `gradients` property (an array of
 // gradient objects), while Single Origin ones have a `gradient` property.
-const isMultipleOriginObject = ( obj ) =>
+const isMultipleOriginObject = (
+	obj: Record< string, any >
+): obj is OriginObject =>
 	Array.isArray( obj.gradients ) && ! ( 'gradient' in obj );
 
-const isMultipleOriginArray = ( arr ) => {
+const isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {
 	return (
 		arr.length > 0 &&
 		arr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )
@@ -35,7 +41,7 @@ function SingleOrigin( {
 	onChange,
 	value,
 	actions,
-} ) {
+}: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
 		return gradients.map( ( { gradient, name }, index ) => (
 			<CircularOptionPicker.Option
@@ -80,7 +86,7 @@ function MultipleOrigin( {
 	value,
 	actions,
 	headingLevel,
-} ) {
+}: PickerProps< OriginObject > ) {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
@@ -107,25 +113,72 @@ function MultipleOrigin( {
 	);
 }
 
-export default function GradientPicker( {
+function Component( props: PickerProps< any > ) {
+	if ( isMultipleOriginArray( props.gradients ) ) {
+		return <MultipleOrigin { ...props } />;
+	}
+	return <SingleOrigin { ...props } />;
+}
+
+/**
+ *  GradientPicker is a React component that renders a color gradient picker to
+ * define a multi step gradient. There's either a _linear_ or a _radial_ type
+ * available.
+ *
+ * ```jsx
+ *import { GradientPicker } from '@wordpress/components';
+ *import { useState } from '@wordpress/element';
+ *
+ *const myGradientPicker = () => {
+ *	const [ gradient, setGradient ] = useState( null );
+ *
+ *	return (
+ *		<GradientPicker
+ *			__nextHasNoMargin
+ *			value={ gradient }
+ *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ *			gradients={ [
+ *				{
+ *					name: 'JShine',
+ *					gradient:
+ *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ *					slug: 'jshine',
+ *				},
+ *				{
+ *					name: 'Moonlit Asteroid',
+ *					gradient:
+ *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ *					slug: 'moonlit-asteroid',
+ *				},
+ *				{
+ *					name: 'Rastafarie',
+ *					gradient:
+ *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ *					slug: 'rastafari',
+ *				},
+ *			] }
+ *		/>
+ *	);
+ *};
+ *```
+ *
+ */
+export function GradientPicker( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMargin = false,
 	className,
-	gradients,
+	gradients = [],
 	onChange,
 	value,
 	clearable = true,
 	disableCustomGradients = false,
 	__experimentalIsRenderedInSidebar,
 	headingLevel = 2,
-} ) {
+}: GradientPickerComponentProps ) {
 	const clearGradient = useCallback(
 		() => onChange( undefined ),
 		[ onChange ]
 	);
-	const Component = isMultipleOriginArray( gradients )
-		? MultipleOrigin
-		: SingleOrigin;
 
 	if ( ! __nextHasNoMargin ) {
 		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
@@ -137,7 +190,7 @@ export default function GradientPicker( {
 
 	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
 		? {
-				marginTop: ! gradients?.length ? 3 : undefined,
+				marginTop: ! gradients.length ? 3 : undefined,
 				marginBottom: ! clearable ? 6 : 0,
 		  }
 		: {};
@@ -145,7 +198,7 @@ export default function GradientPicker( {
 	return (
 		// Outmost Spacer wrapper can be removed when deprecation period is over
 		<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
-			<VStack spacing={ gradients?.length ? 4 : 0 }>
+			<VStack spacing={ gradients.length ? 4 : 0 }>
 				{ ! disableCustomGradients && (
 					<CustomGradientPicker
 						__nextHasNoMargin
@@ -156,10 +209,9 @@ export default function GradientPicker( {
 						onChange={ onChange }
 					/>
 				) }
-				{ ( gradients?.length || clearable ) && (
+				{ ( gradients.length || clearable ) && (
 					<Component
 						className={ className }
-						clearable={ clearable }
 						clearGradient={ clearGradient }
 						gradients={ gradients }
 						onChange={ onChange }
@@ -181,3 +233,5 @@ export default function GradientPicker( {
 		</Spacer>
 	);
 }
+
+export default GradientPicker;
diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.tsx
similarity index 78%
rename from packages/components/src/gradient-picker/stories/index.js
rename to packages/components/src/gradient-picker/stories/index.tsx
index c365e4741b6cdc..0f34d65d5eb621 100644
--- a/packages/components/src/gradient-picker/stories/index.js
+++ b/packages/components/src/gradient-picker/stories/index.tsx
@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -6,18 +10,21 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import GradientPicker from '../';
+import GradientPicker from '..';
 
-export default {
+const meta: ComponentMeta< typeof GradientPicker > = {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+		actions: { argTypesRegex: '^on.*' },
+	},
 	argTypes: {
-		__nextHasNoMargin: { control: { type: 'boolean' } },
-		clearable: { control: { type: 'boolean' } },
-		disableCustomGradients: { control: { type: 'boolean' } },
-		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
 	},
 };
+export default meta;
 
 const GRADIENTS = [
 	{
@@ -58,8 +65,12 @@ const GRADIENTS = [
 	},
 ];
 
-const Template = ( { onChange, ...props } ) => {
-	const [ gradient, setGradient ] = useState();
+const Template: ComponentStory< typeof GradientPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ gradient, setGradient ] =
+		useState< ( typeof props )[ 'value' ] >( null );
 	return (
 		<GradientPicker
 			{ ...props }
diff --git a/packages/components/src/gradient-picker/types.ts b/packages/components/src/gradient-picker/types.ts
new file mode 100644
index 00000000000000..ad38f152abbfd7
--- /dev/null
+++ b/packages/components/src/gradient-picker/types.ts
@@ -0,0 +1,89 @@
+/**
+ * Internal dependencies
+ */
+import type { HeadingSize } from '../heading/types';
+
+export type GradientObject = {
+	gradient: string;
+	name: string;
+	slug: string;
+};
+export type OriginObject = { name: string; gradients: GradientObject[] };
+export type GradientsProp = GradientObject[] | OriginObject[];
+
+type GradientPickerBaseProps = {
+	/**
+	 * The class name added to the wrapper.
+	 */
+	className?: string;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string | undefined ) => void;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: GradientObject[ 'gradient' ] | null;
+	/**
+	 * Whether the palette should have a clearing button or not.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * The heading level. Only applies in cases where gradients are provided
+	 * from multiple origins (ie. when the array passed as the `gradients` prop
+	 * contains two or more items).
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
+};
+
+export type GradientPickerComponentProps = GradientPickerBaseProps & {
+	/**
+	 * An array of objects as predefined gradients displayed above the gradient
+	 * selector. Alternatively, if there are multiple sets (or 'origins') of
+	 * gradients, you can pass an array of objects each with a `name` and a
+	 * `gradients` array which will in turn contain the predefined gradient objects.
+	 *
+	 * @default []
+	 */
+	gradients?: GradientsProp;
+	/**
+	 * Start opting in to 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.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * If true, the gradient picker will not be displayed and only defined
+	 * gradients from `gradients` will be shown.
+	 *
+	 * @default false
+	 */
+	disableCustomGradients?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type PickerProps< TOriginType extends GradientObject | OriginObject > =
+	GradientPickerBaseProps & {
+		clearGradient: () => void;
+		onChange: (
+			currentGradient: string | undefined,
+			index: number
+		) => void;
+		actions?: React.ReactNode;
+		gradients: TOriginType[];
+	};
diff --git a/packages/components/src/item-group/test/index.js b/packages/components/src/item-group/test/index.js
index e0471661c2c277..dba3c26d88411a 100644
--- a/packages/components/src/item-group/test/index.js
+++ b/packages/components/src/item-group/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -72,7 +73,8 @@ describe( 'ItemGroup', () => {
 	} );
 
 	describe( 'Item', () => {
-		it( 'should render as a `button` if the `onClick` handler is specified', () => {
+		it( 'should render as a `button` if the `onClick` handler is specified', async () => {
+			const user = userEvent.setup();
 			const spy = jest.fn();
 			render( <Item onClick={ spy }>Code is poetry</Item> );
 
@@ -80,7 +82,7 @@ describe( 'ItemGroup', () => {
 
 			expect( button ).toBeInTheDocument();
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( spy ).toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 7882950431bbab..bd9818d5d8db2f 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -133,7 +133,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 						__nextHasNoMargin
 						__experimentalIsRenderedInSidebar
 						value={ element.gradient }
-						onChange={ ( newGradient: Gradient[ 'gradient' ] ) => {
+						onChange={ ( newGradient ) => {
 							onChange( {
 								...element,
 								gradient: newGradient,
@@ -532,7 +532,7 @@ export function PaletteEdit( {
 			{ hasElements && (
 				<>
 					{ isEditing && (
-						<PaletteEditListView< typeof elements[ number ] >
+						<PaletteEditListView< ( typeof elements )[ number ] >
 							canOnlyChangeValues={ canOnlyChangeValues }
 							elements={ elements }
 							// @ts-expect-error TODO: Don't know how to resolve
@@ -548,13 +548,13 @@ export function PaletteEdit( {
 							isGradient={ isGradient }
 							onClose={ () => setEditingElement( null ) }
 							onChange={ (
-								newElement: typeof elements[ number ]
+								newElement: ( typeof elements )[ number ]
 							) => {
 								debounceOnChange(
 									// @ts-expect-error TODO: Don't know how to resolve
 									elements.map(
 										(
-											currentElement: typeof elements[ number ],
+											currentElement: ( typeof elements )[ number ],
 											currentIndex: number
 										) => {
 											if (
@@ -572,7 +572,6 @@ export function PaletteEdit( {
 					) }
 					{ ! isEditing &&
 						( isGradient ? (
-							// @ts-expect-error TODO: Remove when GradientPicker is typed.
 							<GradientPicker
 								__nextHasNoMargin
 								gradients={ gradients }
diff --git a/packages/components/src/resizable-box/resize-tooltip/utils.ts b/packages/components/src/resizable-box/resize-tooltip/utils.ts
index cb8c8c7274b294..7daf1b77aa382f 100644
--- a/packages/components/src/resizable-box/resize-tooltip/utils.ts
+++ b/packages/components/src/resizable-box/resize-tooltip/utils.ts
@@ -13,7 +13,7 @@ export const POSITIONS = {
 	corner: 'corner',
 } as const;
 
-export type Position = typeof POSITIONS[ keyof typeof POSITIONS ];
+export type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];
 
 interface UseResizeLabelProps {
 	/** The label value. */
diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js
index 173a81efaaac2c..12125c31edf67b 100644
--- a/packages/components/src/sandbox/index.native.js
+++ b/packages/components/src/sandbox/index.native.js
@@ -22,85 +22,85 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = function () {
-	// Hermes requires a special directive to preserve the original source code
-	// when using `Function.prototype.toString()` below.
-	// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
-	'show source';
-	const { MutationObserver } = window;
-
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
 
-	function sendResize() {
-		const clientBoundingRect = document.body.getBoundingClientRect();
-
-		// The function postMessage is exposed by the react-native-webview library
-		// to communicate between React Native and the WebView, in this case,
-		// we use it for notifying resize changes.
-		window.ReactNativeWebView.postMessage(
-			JSON.stringify( {
-				action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			} )
-		);
-	}
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+		function sendResize() {
+			const clientBoundingRect = document.body.getBoundingClientRect();
+
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
+			// we use it for notifying resize changes.
+			window.ReactNativeWebView.postMessage(
+				JSON.stringify( {
+					action: 'resize',
+					width: clientBoundingRect.width,
+					height: clientBoundingRect.height,
+				} )
+			);
+		}
 
-	window.addEventListener( 'load', sendResize, true );
-
-	// 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 ) {
-		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
-				if (
-					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+		const observer = new MutationObserver( sendResize );
+		observer.observe( document.body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
+
+		window.addEventListener( 'load', sendResize, true );
+
+		// 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 ) {
+			if ( ruleOrNode.style ) {
+				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+					style
 				) {
-					ruleOrNode.style[ style ] = '';
-				}
-			} );
+					if (
+						/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
 		}
-	}
 
-	Array.prototype.forEach.call(
-		document.querySelectorAll( '[style]' ),
-		removeViewportStyles
-	);
-	Array.prototype.forEach.call(
-		document.styleSheets,
-		function ( stylesheet ) {
-			Array.prototype.forEach.call(
-				stylesheet.cssRules || stylesheet.rules,
-				removeViewportStyles
-			);
-		}
-	);
+		Array.prototype.forEach.call(
+			document.querySelectorAll( '[style]' ),
+			removeViewportStyles
+		);
+		Array.prototype.forEach.call(
+			document.styleSheets,
+			function ( stylesheet ) {
+				Array.prototype.forEach.call(
+					stylesheet.cssRules || stylesheet.rules,
+					removeViewportStyles
+				);
+			}
+		);
 
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+		document.body.style.position = 'absolute';
+		document.body.style.width = '100%';
+		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-	sendResize();
+		sendResize();
 
-	// Resize events can change the width of elements with 100% width, but we don't
-	// get an DOM mutations for that, so do the resize when the window is resized, too.
-	window.addEventListener( 'resize', sendResize, true );
-};
+		// Resize events can change the width of elements with 100% width, but we don't
+		// get an DOM mutations for that, so do the resize when the window is resized, too.
+		window.addEventListener( 'resize', sendResize, true );
+		window.addEventListener( 'orientationchange', sendResize, true );
+		widow.addEventListener( 'click', sendResize, true );
+	})();
+`;
 
 const style = `
 	body {
@@ -230,14 +230,6 @@ function Sandbox( {
 					className={ type }
 				>
 					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html:
-								customJS ||
-								`(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
 					{ scripts.map( ( src ) => (
 						<script key={ src } src={ src } />
 					) ) }
@@ -322,6 +314,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
+			injectedJavaScript={ customJS || observeAndResizeJS }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }
diff --git a/packages/components/src/slot-fill/test/slot.js b/packages/components/src/slot-fill/test/slot.js
index 941ba278aadc78..99836a94463526 100644
--- a/packages/components/src/slot-fill/test/slot.js
+++ b/packages/components/src/slot-fill/test/slot.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -92,9 +93,9 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
+	it( 'calls the functions passed as the Slot’s fillProps in the Fill', async () => {
 		const onClose = jest.fn();
-
+		const user = userEvent.setup();
 		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
@@ -108,7 +109,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( screen.getByText( 'Click me' ) );
+		await user.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -149,7 +150,8 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render Slot when not bubbling virtually', () => {
+	it( 'should re-render Slot when not bubbling virtually', async () => {
+		const user = userEvent.setup();
 		const { container } = render(
 			<Provider>
 				<div>
@@ -161,7 +163,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( screen.getByRole( 'button' ) );
+		await user.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 1cb363cb6d50c2..1c19336552aba4 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -11,7 +11,6 @@
 @import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
-@import "./color-list-picker/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
@@ -21,6 +20,7 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
+@import "./duotone-picker/color-list-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index bcd815ba8886d5..b2af12b90c85f5 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -104,7 +109,7 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	// Handle selecting the initial tab.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// If there's a selected tab, don't override it.
 		if ( selectedTab ) {
 			return;
diff --git a/packages/components/src/tools-panel/test/index.tsx b/packages/components/src/tools-panel/test/index.tsx
index 2a4fdbdf0aa96e..04f93c2f0ba814 100644
--- a/packages/components/src/tools-panel/test/index.tsx
+++ b/packages/components/src/tools-panel/test/index.tsx
@@ -954,6 +954,92 @@ describe( 'ToolsPanel', () => {
 			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
 		} );
 
+		it( 'should maintain menu item order', async () => {
+			const InconsistentItems = () => (
+				<ToolsPanelItems>
+					<ToolsPanelItem
+						label="Item 1"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 1</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label="Item 2"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 2</div>
+					</ToolsPanelItem>
+				</ToolsPanelItems>
+			);
+
+			const { rerender } = render(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-1" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Open dropdown menu.
+			const user = userEvent.setup();
+			let menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm all the existing menu items are present and in the
+			// expected order.
+			let menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+
+			// Close the dropdown menu.
+			await user.click( menuButton );
+
+			rerender(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-2" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Reopen dropdown menu.
+			menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm the menu item order has been maintained.
+			menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+		} );
+
 		it( 'should not trigger callback when fill has not updated yet when panel has', () => {
 			// Fill provided controls can update independently to the panel.
 			// A `panelId` prop was added to both panels and items
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 65e1e7bd761b45..35d4c06279419d 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -30,7 +30,9 @@ const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
 	currentMenuItems,
+	menuItemOrder,
 }: ToolsPanelMenuItemsConfig ) => {
+	const newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
 	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
@@ -42,7 +44,31 @@ const generateMenuItems = ( {
 		const existingItemValue = currentMenuItems?.[ group ]?.[ label ];
 		const value = existingItemValue ? existingItemValue : hasValue();
 
-		menuItems[ group ][ label ] = shouldReset ? false : value;
+		newMenuItems[ group ][ label ] = shouldReset ? false : value;
+	} );
+
+	// Loop the known, previously registered items first to maintain menu order.
+	menuItemOrder.forEach( ( key ) => {
+		if ( newMenuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+
+		if ( newMenuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
+	} );
+
+	// Loop newMenuItems object adding any that aren't in the known items order.
+	Object.keys( newMenuItems.default ).forEach( ( key ) => {
+		if ( ! menuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+	} );
+
+	Object.keys( newMenuItems.optional ).forEach( ( key ) => {
+		if ( ! menuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
 	} );
 
 	return menuItems;
@@ -82,12 +108,14 @@ export function useToolsPanel(
 
 	// Allow panel items to register themselves.
 	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
+	const [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
 	const [ resetAllFilters, setResetAllFilters ] = useState<
 		ResetAllFilter[]
 	>( [] );
 
 	const registerPanelItem = useCallback(
 		( item: ToolsPanelItem ) => {
+			// Add item to panel items.
 			setPanelItems( ( items ) => {
 				const newItems = [ ...items ];
 				// If an item with this label has already been registered, remove it
@@ -101,8 +129,18 @@ export function useToolsPanel(
 				}
 				return [ ...newItems, item ];
 			} );
+
+			// Track the initial order of item registration. This is used for
+			// maintaining menu item order later.
+			setMenuItemOrder( ( items ) => {
+				if ( items.includes( item.label ) ) {
+					return items;
+				}
+
+				return [ ...items, item.label ];
+			} );
 		},
-		[ setPanelItems ]
+		[ setPanelItems, setMenuItemOrder ]
 	);
 
 	// Panels need to deregister on unmount to avoid orphans in menu state.
@@ -160,10 +198,11 @@ export function useToolsPanel(
 				panelItems,
 				shouldReset: false,
 				currentMenuItems: prevState,
+				menuItemOrder,
 			} );
 			return items;
 		} );
-	}, [ panelItems, setMenuItems ] );
+	}, [ panelItems, setMenuItems, menuItemOrder ] );
 
 	// Force a menu item to be checked.
 	// This is intended for use with default panel items. They are displayed
@@ -267,10 +306,11 @@ export function useToolsPanel(
 		// Turn off display of all non-default items.
 		const resetMenuItems = generateMenuItems( {
 			panelItems,
+			menuItemOrder,
 			shouldReset: true,
 		} );
 		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAllFilters, resetAll, setMenuItems ] );
+	}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
index 2657175caad7a5..183ed3254fe80a 100644
--- a/packages/components/src/tools-panel/types.ts
+++ b/packages/components/src/tools-panel/types.ts
@@ -187,4 +187,5 @@ export type ToolsPanelMenuItemsConfig = {
 	panelItems: ToolsPanelItem[];
 	shouldReset: boolean;
 	currentMenuItems?: ToolsPanelMenuItems;
+	menuItemOrder: string[];
 };
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
index 69e160823456e4..fea2a90b49764b 100644
--- a/packages/components/src/tooltip/test/index.js
+++ b/packages/components/src/tooltip/test/index.js
@@ -1,373 +1,323 @@
 /**
  * External dependencies
  */
-import { render, screen, act, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Tooltip from '../';
+import Button from '../../button';
+import { TOOLTIP_DELAY } from '../index.js';
+
 /**
  * WordPress dependencies
  */
-import { TOOLTIP_DELAY } from '../index.js';
+import { shortcutAriaLabel } from '@wordpress/keycodes';
 
-jest.useFakeTimers();
+const props = {
+	text: 'tooltip text',
+	delay: TOOLTIP_DELAY,
+};
 
 function getWrappingPopoverElement( element ) {
 	return element.closest( '.components-popover' );
 }
 
 describe( 'Tooltip', () => {
-	describe( '#render()', () => {
-		it( 'should not render the tooltip if multiple children are passed', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Button 1</button>
-					<button>Button 2</button>
-				</Tooltip>
-			);
+	it( 'should not render the tooltip if multiple children are passed', async () => {
+		const user = userEvent.setup();
 
-			const button = screen.getByText( 'Button 1' );
-			act( () => button.focus() );
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		render(
+			<Tooltip { ...props }>
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+			</Tooltip>
+		);
 
-		it( 'should render children', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+		await user.tab();
 
-			expect(
-				screen.getByRole( 'button', { name: 'Hover Me!' } )
-			).toBeVisible();
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should render children with additional tooltip when focused', async () => {
-			const mockOnFocus = jest.fn();
+	it( 'should not render the tooltip if there is no focus', () => {
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Hover Me!' } )
+		).toBeVisible();
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
-
-			// Before focus, the tooltip is not shown.
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			act( () => button.focus() );
-
-			// Tooltip is shown after focusing the anchor.
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should render children with additional tooltip when hovered', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+	it( 'should render the tooltip when focusing the tooltip anchor via tab', async () => {
+		const user = userEvent.setup();
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			await user.hover( button );
+		await user.tab();
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { name: /Hover me!/i } )
+		).toHaveFocus();
 
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip shows after the delay
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+		const user = userEvent.setup();
 
-		it( 'should not show tooltip on focus as result of mouse click', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const mockOnFocus = jest.fn();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
+		const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
 
-			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		await user.hover( button );
 
-			await user.click( button );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
 
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		await user.unhover( button );
 
-			// Tooltip still hasn't appeared yet, even though the component was focused
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-		} );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+	it( 'should not show tooltip on focus as result of mouse click', async () => {
+		const user = userEvent.setup();
 
-			const TEST_DELAY = TOOLTIP_DELAY * 2;
-			const mockOnMouseEnter = jest.fn();
-			const mockOnFocus = jest.fn();
+		render(
+			<Tooltip { ...props }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			render(
-				<Tooltip text="Help text" delay={ TEST_DELAY }>
-					<button
-						onMouseEnter={ mockOnMouseEnter }
-						onFocus={ mockOnFocus }
-					>
-						<span>Hover Me!</span>
-					</button>
-				</Tooltip>
-			);
+		await user.click( screen.getByRole( 'button', { text: 'Hover Me!' } ) );
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeVisible();
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-			await user.hover( button );
+	it( 'should respect custom delay prop when showing tooltip', async () => {
+		const user = userEvent.setup( { delay: TOOLTIP_DELAY } );
+		const CUSTOM_DELAY = TOOLTIP_DELAY + 25;
 
-			// Tooltip hasn't appeared yet
-			expect( mockOnMouseEnter ).toHaveBeenCalledTimes( 1 );
+		render(
+			<Tooltip { ...props } delay={ CUSTOM_DELAY }>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			// Advance by the usual TOOLTIP_DELAY
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
 
-			// Tooltip hasn't appeared yet after the usual delay
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
+		await user.hover( button );
 
-			// Advance time again, so that we reach the full TEST_DELAY time
-			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
 
-			// Tooltip shows after TEST_DELAY time
-			const tooltip = screen.getByText( 'Help text' );
-			expect( tooltip ).toBeVisible();
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			expect( mockOnFocus ).not.toHaveBeenCalled();
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+	it( 'should show tooltip when an element is disabled', async () => {
+		const user = userEvent.setup();
 
-		it( 'should show tooltip when an element is disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+		render(
+			<Tooltip { ...props }>
+				<Button disabled>Click me</Button>
+			</Tooltip>
+		);
 
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled>Click me</button>
-				</Tooltip>
-			);
+		const button = screen.getByRole( 'button', { name: /Click me/i } );
 
-			const button = screen.getByRole( 'button', { name: 'Click me' } );
-			expect( button ).toBeVisible();
-			expect( button ).toBeDisabled();
+		expect( button ).toBeVisible();
+		expect( button ).toBeDisabled();
 
-			// Note: this is testing for implementation details,
-			// but couldn't find a better way.
-			const buttonRect = button.getBoundingClientRect();
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			const eventCatcher = container.querySelector( '.event-catcher' );
-			const eventCatcherRect = eventCatcher.getBoundingClientRect();
-			expect( buttonRect ).toEqual( eventCatcherRect );
+		await user.hover( button );
 
-			await user.hover( eventCatcher );
+		await waitFor( () =>
+			expect( screen.getByText( 'tooltip text' ) ).toBeVisible()
+		);
 
-			// Tooltip hasn't appeared yet
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
 			expect(
-				screen.queryByText( 'Show helpful text here' )
-			).not.toBeInTheDocument();
-
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip shows after the delay
-			const tooltip = screen.getByText( 'Show helpful text here' );
-			expect( tooltip ).toBeVisible();
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should not emit events back to children when they are disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onClickMock = jest.fn();
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled onClick={ onClickMock }>
-						Click me
-					</button>
+				getWrappingPopoverElement( screen.getByText( 'tooltip text' ) )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should not emit events back to children when they are disabled', async () => {
+		const user = userEvent.setup();
+		const onClickMock = jest.fn();
+
+		const { container } = render(
+			<Tooltip { ...props }>
+				<Button disabled onClick={ onClickMock }>
+					Click me
+				</Button>
+			</Tooltip>
+		);
+
+		// Note: this is testing for implementation details,
+		// but couldn't find a better way.
+		const buttonRect = screen
+			.getByRole( 'button', { name: 'Click me' } )
+			.getBoundingClientRect();
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const eventCatcher = container.querySelector( '.event-catcher' );
+		await user.click( eventCatcher );
+		expect( onClickMock ).not.toHaveBeenCalled();
+
+		const eventCatcherRect = eventCatcher.getBoundingClientRect();
+		expect( buttonRect ).toEqual( eventCatcherRect );
+	} );
+
+	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
+		const user = userEvent.setup();
+		const onMouseEnterMock = jest.fn();
+		const onMouseLeaveMock = jest.fn();
+		const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
+
+		render(
+			<>
+				<Tooltip { ...props }>
+					<Button
+						onMouseEnter={ onMouseEnterMock }
+						onMouseLeave={ onMouseLeaveMock }
+					>
+						Hover Me!
+					</Button>
 				</Tooltip>
-			);
-
-			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-			const eventCatcher = container.querySelector( '.event-catcher' );
-			await user.click( eventCatcher );
-			expect( onClickMock ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should not show tooltip if the mouse leaves the anchor before the tooltip has shown', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
-			const onMouseEnterMock = jest.fn();
-			const onMouseLeaveMock = jest.fn();
-
-			render(
-				<>
-					<Tooltip text="Help text">
-						<button
-							onMouseEnter={ onMouseEnterMock }
-							onMouseLeave={ onMouseLeaveMock }
-						>
-							Hover Me!
-						</button>
-					</Tooltip>
-					<button>Hover me instead!</button>
-				</>
-			);
-
-			const externalButton = screen.getByRole( 'button', {
-				name: 'Hover me instead!',
-			} );
-			const tooltipButton = screen.getByRole( 'button', {
+				<Button>Hover me instead!</Button>
+			</>
+		);
+
+		await user.hover(
+			screen.getByRole( 'button', {
 				name: 'Hover Me!',
-			} );
+			} )
+		);
 
-			await user.hover( tooltipButton );
+		// Tooltip hasn't appeared yet
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
 
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		// Advance time by MOUSE_LEAVE_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, MOUSE_LEAVE_DELAY )
+		);
 
-			// Advance time by MOUSE_LEAVE_DELAY time
-			act( () => jest.advanceTimersByTime( MOUSE_LEAVE_DELAY ) );
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
 
-			// Hover the other button, meaning that the mouse will leave the tooltip anchor
-			await user.hover( externalButton );
+		// Hover the other button, meaning that the mouse will leave the tooltip anchor
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: 'Hover me instead!',
+			} )
+		);
 
-			// Tooltip still hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+		// Tooltip still hasn't appeared yet
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
 
-			// Advance time again, so that we reach the full TOOLTIP_DELAY time
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
+		// Advance time again, so that we reach the full TOOLTIP_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, TOOLTIP_DELAY )
+		);
 
-			// Tooltip won't show, since the mouse has left the anchor
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
+		// Tooltip won't show, since the mouse has left the tooltip anchor
+		expect( screen.queryByText( 'tooltip text' ) ).not.toBeInTheDocument();
+	} );
 
-		it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+		const user = userEvent.setup();
 
-			render(
-				<Tooltip text="Help text" shortcut="shortcut text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			await user.hover( button );
-
-			const tooltip = await screen.findByText( 'shortcut text' );
-			expect( tooltip ).toBeVisible();
-
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
-
-		it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Tooltip
-					text="Help text"
-					shortcut={ {
-						display: 'shortcut text',
-						ariaLabel: 'shortcut label',
-					} }
-				>
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
+		render(
+			<Tooltip { ...props } shortcut="shortcut text">
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
 
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			await user.hover( button );
+		await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
 
-			const tooltip = await screen.findByLabelText( 'shortcut label' );
-			expect( tooltip ).toHaveTextContent( 'shortcut text' );
+		await waitFor( () =>
+			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
+		);
 
-			// Wait for the tooltip element to be positioned (aligned with the button)
-			await waitFor( () =>
-				expect(
-					getWrappingPopoverElement( tooltip )
-				).toBePositionedPopover()
-			);
-		} );
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( 'shortcut text' ) )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Tooltip
+				{ ...props }
+				shortcut={ {
+					display: '⇧⌘,',
+					ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+				} }
+			>
+				<Button>Hover Me!</Button>
+			</Tooltip>
+		);
+
+		await user.hover( screen.getByRole( 'button', { name: 'Hover Me!' } ) );
+
+		await waitFor( () =>
+			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
+		);
+
+		expect( screen.getByText( '⇧⌘,' ) ).toHaveAttribute(
+			'aria-label',
+			'Control + Shift + Comma'
+		);
+
+		// Wait for the tooltip element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( screen.getByText( '⇧⌘,' ) )
+			).toBePositionedPopover()
+		);
 	} );
 } );
diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js
index c550a558d6d4e2..8af838247d9c25 100644
--- a/packages/components/src/utils/input/input-control.js
+++ b/packages/components/src/utils/input/input-control.js
@@ -12,6 +12,7 @@ import { COLORS } from '../colors-values';
 import { breakpoint } from '../breakpoint';
 
 export const inputControl = css`
+	display: block;
 	font-family: ${ font( 'default.fontFamily' ) };
 	padding: 6px 8px;
 	${ inputStyleNeutral };
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 6aaadae65b49cc..242ff98906cccd 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -44,7 +44,6 @@
 		"src/**/react-native-*",
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
 		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
-		"src/index.js",
-		"src/duotone-picker"
+		"src/index.js"
 	]
 }
diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js
index 099845494c7ba9..bd8a0e724a40b7 100644
--- a/packages/compose/src/hooks/use-media-query/index.js
+++ b/packages/compose/src/hooks/use-media-query/index.js
@@ -1,7 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * A new MediaQueryList object for the media query
+ *
+ * @param {string} [query] Media Query.
+ * @return {MediaQueryList|null} A new object for the media query
+ */
+function getMediaQueryList( query ) {
+	if (
+		query &&
+		typeof window !== 'undefined' &&
+		typeof window.matchMedia === 'function'
+	) {
+		return window.matchMedia( query );
+	}
+
+	return null;
+}
 
 /**
  * Runs a media query and returns its value when it changes.
@@ -10,28 +28,33 @@ import { useState, useEffect } from '@wordpress/element';
  * @return {boolean} return value of the media query.
  */
 export default function useMediaQuery( query ) {
-	const [ match, setMatch ] = useState(
-		() =>
-			!! (
-				query &&
-				typeof window !== 'undefined' &&
-				window.matchMedia( query ).matches
-			)
-	);
+	const source = useMemo( () => {
+		const mediaQueryList = getMediaQueryList( query );
 
-	useEffect( () => {
-		if ( ! query ) {
-			return;
-		}
-		const updateMatch = () =>
-			setMatch( window.matchMedia( query ).matches );
-		updateMatch();
-		const list = window.matchMedia( query );
-		list.addListener( updateMatch );
-		return () => {
-			list.removeListener( updateMatch );
+		return {
+			/** @type {(onStoreChange: () => void) => () => void} */
+			subscribe( onStoreChange ) {
+				if ( ! mediaQueryList ) {
+					return () => {};
+				}
+
+				mediaQueryList.addEventListener( 'change', onStoreChange );
+				return () => {
+					mediaQueryList.removeEventListener(
+						'change',
+						onStoreChange
+					);
+				};
+			},
+			getValue() {
+				return mediaQueryList?.matches ?? false;
+			},
 		};
 	}, [ query ] );
 
-	return !! query && match;
+	return useSyncExternalStore(
+		source.subscribe,
+		source.getValue,
+		() => false
+	);
 }
diff --git a/packages/compose/src/hooks/use-media-query/test/index.js b/packages/compose/src/hooks/use-media-query/test/index.js
index f75ba22a7b3fa1..88b2c1b0a3bd24 100644
--- a/packages/compose/src/hooks/use-media-query/test/index.js
+++ b/packages/compose/src/hooks/use-media-query/test/index.js
@@ -1,125 +1,68 @@
 /**
  * External dependencies
  */
-import { render, act } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { matchMedia, setMedia, cleanup } from 'mock-match-media';
 
 /**
  * Internal dependencies
  */
 import useMediaQuery from '../';
 
-describe( 'useMediaQuery', () => {
-	let addListener, removeListener;
+const TestComponent = ( { query } ) => {
+	const queryResult = useMediaQuery( query );
+	return `useMediaQuery: ${ queryResult }`;
+};
 
+describe( 'useMediaQuery', () => {
 	beforeAll( () => {
-		jest.spyOn( global, 'matchMedia' );
-
-		addListener = jest.fn();
-		removeListener = jest.fn();
+		window.matchMedia = matchMedia;
 	} );
 
-	afterEach( () => {
-		global.matchMedia.mockClear();
-		addListener.mockClear();
-		removeListener.mockClear();
+	beforeEach( () => {
+		setMedia( {
+			width: '960px',
+		} );
 	} );
 
-	afterAll( () => {
-		global.matchMedia.mockRestore();
+	afterEach( () => {
+		cleanup();
 	} );
 
-	const TestComponent = ( { query } ) => {
-		const queryResult = useMediaQuery( query );
-		return `useMediaQuery: ${ queryResult }`;
-	};
-
 	it( 'should return true when query matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-
-		const { container, unmount } = render(
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
 	it( 'should correctly update the value when the query evaluation matches', async () => {
-		// First render.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		// The query within useEffect.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		let updateMatchFunction;
-		await act( async () => {
-			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
-			updateMatchFunction();
+		act( () => {
+			setMedia( {
+				width: '600px',
+			} );
 		} );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalledWith( updateMatchFunction );
 	} );
 
 	it( 'should return false when the query does not matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
-			<TestComponent query="(min-width: 782px)" />
+		const { container } = render(
+			<TestComponent query="(max-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
-	it( 'should not call matchMedia if a query is not passed', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, rerender, unmount } = render( <TestComponent /> );
+	it( 'should return false when a query is not passed', async () => {
+		const { container, rerender } = render( <TestComponent /> );
 
 		// Query will be case to a boolean to simplify the return type.
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
@@ -127,10 +70,5 @@ describe( 'useMediaQuery', () => {
 		rerender( <TestComponent query={ false } /> );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-		expect( global.matchMedia ).not.toHaveBeenCalled();
-		expect( addListener ).not.toHaveBeenCalled();
-		expect( removeListener ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 60592bd2ee53f4..f422a9824cd746 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The `registry.register` function will no longer register a store if another instance is registered with the same name.
+
 ## 8.6.0 (2023-03-15)
 
 ## 8.5.0 (2023-03-01)
diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js
index b41555a7da4495..e1082b50a54657 100644
--- a/packages/data/src/components/use-select/index.js
+++ b/packages/data/src/components/use-select/index.js
@@ -42,48 +42,85 @@ function Store( registry, suspense ) {
 	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.
+	let subscriber;
+
+	const createSubscriber = ( stores ) => {
+		// The set of stores the `subscribe` function is supposed to subscribe to. Here it is
+		// initialized, and then the `updateStores` function can add new stores to it.
+		const activeStores = [ ...stores ];
+
+		// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could
+		// be called multiple times to establish multiple subscriptions. That's why we need to
+		// keep a set of active subscriptions;
+		const activeSubscriptions = new Set();
+
+		function subscribe( 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;
-			listener();
-		};
 
-		const onChange = () => {
-			if ( lastIsAsync ) {
-				renderQueue.add( queueContext, onStoreChange );
-			} else {
-				onStoreChange();
+			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 = [];
+			function subscribeStore( storeName ) {
+				unsubs.push( registry.subscribe( onChange, storeName ) );
 			}
-		};
 
-		const unsubs = stores.map( ( storeName ) => {
-			return registry.subscribe( onChange, storeName );
-		} );
+			for ( const storeName of activeStores ) {
+				subscribeStore( storeName );
+			}
+
+			activeSubscriptions.add( subscribeStore );
+
+			return () => {
+				activeSubscriptions.delete( subscribeStore );
+
+				for ( const unsub of unsubs.values() ) {
+					// The return value of the subscribe function could be undefined if the store is a custom generic store.
+					unsub?.();
+				}
+				// Cancel existing store updates that were already scheduled.
+				renderQueue.cancel( queueContext );
+			};
+		}
+
+		// Check if `newStores` contains some stores we're not subscribed to yet, and add them.
+		function updateStores( newStores ) {
+			for ( const newStore of newStores ) {
+				if ( activeStores.includes( newStore ) ) {
+					continue;
+				}
+
+				// New `subscribe` calls will subscribe to `newStore`, too.
+				activeStores.push( newStore );
 
-		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?.();
+				// Add `newStore` to existing subscriptions.
+				for ( const subscription of activeSubscriptions ) {
+					subscription( newStore );
+				}
 			}
-			// Cancel existing store updates that were already scheduled.
-			renderQueue.cancel( queueContext );
-		};
-	};
+		}
 
-	return ( mapSelect, resubscribe, isAsync ) => {
-		const selectValue = () => mapSelect( select, registry );
+		return { subscribe, updateStores };
+	};
 
-		function updateValue( selectFromStore ) {
+	return ( mapSelect, isAsync ) => {
+		function updateValue() {
 			// 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.
@@ -91,19 +128,30 @@ function Store( registry, suspense ) {
 				return lastMapResult;
 			}
 
-			const mapResult = selectFromStore();
+			const listeningStores = { current: null };
+			const mapResult = registry.__unstableMarkListeningStores(
+				() => mapSelect( select, registry ),
+				listeningStores
+			);
+
+			if ( ! subscriber ) {
+				subscriber = createSubscriber( listeningStores.current );
+			} else {
+				subscriber.updateStores( listeningStores.current );
+			}
 
 			// 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;
 			}
+			lastMapSelect = mapSelect;
 			lastMapResultValid = true;
 		}
 
 		function getValue() {
 			// Update the value in case it's been invalidated or `mapSelect` has changed.
-			updateValue( selectValue );
+			updateValue();
 			return lastMapResult;
 		}
 
@@ -115,30 +163,12 @@ function Store( registry, suspense ) {
 			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 );
-		}
+		updateValue();
 
 		lastIsAsync = isAsync;
-		lastMapSelect = mapSelect;
 
 		// Return a pair of functions that can be passed to `useSyncExternalStore`.
-		return { subscribe, getValue };
+		return { subscribe: subscriber.subscribe, getValue };
 	};
 }
 
@@ -151,7 +181,7 @@ function useMappingSelect( suspense, mapSelect, deps ) {
 	const isAsync = useAsyncMode();
 	const store = useMemo( () => Store( registry, suspense ), [ registry ] );
 	const selector = useCallback( mapSelect, deps );
-	const { subscribe, getValue } = store( selector, !! deps, isAsync );
+	const { subscribe, getValue } = store( selector, isAsync );
 	const result = useSyncExternalStore( subscribe, getValue, getValue );
 	useDebugValue( result );
 	return result;
diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js
index f4b2ca83f24bf2..93ebf800be0a84 100644
--- a/packages/data/src/components/use-select/test/index.js
+++ b/packages/data/src/components/use-select/test/index.js
@@ -6,7 +6,7 @@ import { act, render, fireEvent, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { Component, useState, useReducer } from '@wordpress/element';
+import { useLayoutEffect, useState, useReducer } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,6 +19,19 @@ import {
 } from '../../..';
 import useSelect from '..';
 
+function counterStore( initialCount = 0, step = 1 ) {
+	return {
+		reducer: ( state = initialCount, action ) =>
+			action.type === 'INC' ? state + step : state,
+		actions: {
+			inc: () => ( { type: 'INC' } ),
+		},
+		selectors: {
+			get: ( state ) => state,
+		},
+	};
+}
+
 describe( 'useSelect', () => {
 	let registry;
 	beforeEach( () => {
@@ -109,7 +122,7 @@ describe( 'useSelect', () => {
 		);
 
 		expect( selectSpyFoo ).toHaveBeenCalledTimes( 2 );
-		expect( selectSpyBar ).toHaveBeenCalledTimes( 2 );
+		expect( selectSpyBar ).toHaveBeenCalledTimes( 1 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 3 );
 
 		// Ensure expected state was rendered.
@@ -180,6 +193,81 @@ describe( 'useSelect', () => {
 		expect( Child ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'incrementally subscribes to newly selected stores', () => {
+		registry.registerStore( 'store-main', counterStore() );
+		registry.registerStore( 'store-even', counterStore( 0, 2 ) );
+		registry.registerStore( 'store-odd', counterStore( 1, 2 ) );
+
+		const mapSelect = jest.fn( ( select ) => {
+			const first = select( 'store-main' ).get();
+			// select from other stores depending on whether main value is even or odd
+			const secondStore = first % 2 === 1 ? 'store-odd' : 'store-even';
+			const second = select( secondStore ).get();
+			return first + ':' + second;
+		} );
+
+		const TestComponent = jest.fn( () => {
+			const data = useSelect( mapSelect, [] );
+			return <div role="status">{ data }</div>;
+		} );
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 2 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:0' );
+
+		// check that increment in store-even triggers a render
+		act( () => {
+			registry.dispatch( 'store-even' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 3 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:2' );
+
+		// check that increment in store-odd doesn't trigger a render (not listening yet)
+		act( () => {
+			registry.dispatch( 'store-odd' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 3 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:2' );
+
+		// check that increment in main store switches to store-odd
+		act( () => {
+			registry.dispatch( 'store-main' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 4 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 3 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:3' );
+
+		// check that increment in store-odd triggers a render
+		act( () => {
+			registry.dispatch( 'store-odd' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 5 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 4 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:5' );
+
+		// check that increment in store-even triggers a mapSelect call (still listening)
+		// but not a render (not used for selected value which doesn't change)
+		act( () => {
+			registry.dispatch( 'store-even' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 6 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 4 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:5' );
+	} );
+
 	describe( 'rerenders as expected with various mapSelect return types', () => {
 		const getComponent = ( mapSelectSpy ) => () => {
 			const data = useSelect( mapSelectSpy, [] );
@@ -254,40 +342,20 @@ describe( 'useSelect', () => {
 	} );
 
 	describe( 're-calls the selector as few times as possible', () => {
-		const counterStore = {
-			actions: {
-				increment: () => ( { type: 'INCREMENT' } ),
-			},
-			reducer: ( state, action ) => {
-				if ( ! state ) {
-					return { counter: 0 };
-				}
-				if ( action?.type === 'INCREMENT' ) {
-					return { counter: state.counter + 1 };
-				}
-				return state;
-			},
-			selectors: {
-				getCounter: ( state ) => state.counter,
-			},
-		};
-
 		it( 'only calls the selectors it has selected', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1 = jest.fn();
 			const selectCount2 = jest.fn();
 
 			const TestComponent = jest.fn( () => {
 				const count1 = useSelect(
-					( select ) =>
-						selectCount1() || select( 'store-1' ).getCounter(),
+					( select ) => selectCount1() || select( 'store-1' ).get(),
 					[]
 				);
 				useSelect(
-					( select ) =>
-						selectCount2() || select( 'store-2' ).getCounter(),
+					( select ) => selectCount2() || select( 'store-2' ).get(),
 					[]
 				);
 
@@ -306,7 +374,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
@@ -315,7 +383,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 3 );
@@ -328,9 +396,9 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 'can subscribe to multiple stores at once', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
-			registry.registerStore( 'store-3', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
+			registry.registerStore( 'store-3', counterStore() );
 
 			const selectCount1And2 = jest.fn();
 
@@ -338,8 +406,8 @@ describe( 'useSelect', () => {
 				const { count1, count2 } = useSelect(
 					( select ) =>
 						selectCount1And2() || {
-							count1: select( 'store-1' ).getCounter(),
-							count2: select( 'store-2' ).getCounter(),
+							count1: select( 'store-1' ).get(),
+							count2: select( 'store-2' ).get(),
 						},
 					[]
 				);
@@ -361,14 +429,14 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,0' );
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
 
 			act( () => {
-				registry.dispatch( 'store-3' ).increment();
+				registry.dispatch( 'store-3' ).inc();
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
@@ -376,9 +444,9 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 're-calls the selector when deps changed', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
-			registry.registerStore( 'store-3', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
+			registry.registerStore( 'store-3', counterStore() );
 
 			let dep, setDep;
 			const selectCount1AndDep = jest.fn();
@@ -388,7 +456,7 @@ describe( 'useSelect', () => {
 				const state = useSelect(
 					( select ) =>
 						selectCount1AndDep() || {
-							count1: select( 'store-1' ).getCounter(),
+							count1: select( 'store-1' ).get(),
 							dep,
 						},
 					[ dep ]
@@ -416,63 +484,40 @@ describe( 'useSelect', () => {
 				setDep( 1 );
 			} );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 4 );
+			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:0,dep:1'
 			);
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 5 );
+			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 4 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:1,dep:1'
 			);
 		} );
 
-		it( 'captures state changes scheduled between render and effect', () => {
-			registry.registerStore( 'store-1', counterStore );
-
-			class ChildComponent extends Component {
-				componentDidUpdate( prevProps ) {
-					if (
-						this.props.childShouldDispatch &&
-						this.props.childShouldDispatch !==
-							prevProps.childShouldDispatch
-					) {
-						registry.dispatch( 'store-1' ).increment();
-					}
-				}
-
-				render() {
-					return null;
-				}
-			}
+		it( 'captures state changes scheduled between render and subscription', () => {
+			registry.registerStore( 'store-1', counterStore() );
 
-			const selectCount1AndDep = jest.fn( ( select ) => ( {
-				count1: select( 'store-1' ).getCounter(),
+			const selectCount1 = jest.fn( ( select ) => ( {
+				count1: select( 'store-1' ).get(),
 			} ) );
 
-			const TestComponent = () => {
-				const [ childShouldDispatch, setChildShouldDispatch ] =
-					useState( false );
-				const state = useSelect( selectCount1AndDep, [] );
+			const TestComponent = jest.fn( () => {
+				const { count1 } = useSelect( selectCount1, [] );
 
-				return (
-					<>
-						<div role="status">count1:{ state.count1 }</div>
-						<ChildComponent
-							childShouldDispatch={ childShouldDispatch }
-						/>
-						<button
-							onClick={ () => setChildShouldDispatch( true ) }
-						>
-							triggerChildDispatch
-						</button>
-					</>
-				);
-			};
+				// Increment the store value from 0 to 1 after render and before subscription
+				useLayoutEffect( () => {
+					if ( count1 === 0 ) {
+						registry.dispatch( 'store-1' ).inc();
+					}
+				}, [ count1 ] );
+
+				return <div role="status">count1:{ count1 }</div>;
+			} );
 
 			render(
 				<RegistryProvider value={ registry }>
@@ -480,30 +525,93 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			fireEvent.click( screen.getByText( 'triggerChildDispatch' ) );
+			// One select on initial render, and one in `checkIfSnapshotChanged` after subscribing.
+			// There's a third selector call on the second render, but that one returns a memoized value.
+			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 );
+			// Initial render and second render after counter increment (which is expected to be detected).
+			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+
+			// Finally rendered with the incremented counter's value.
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:1'
 			);
 		} );
 
+		it( 'captures state changes scheduled between render and effect after selector change', () => {
+			registry.registerStore( 'names', {
+				reducer: ( state = {}, action ) => {
+					if ( action.type === 'SET_NAME' ) {
+						return {
+							...state,
+							[ action.id ]: action.name,
+						};
+					}
+					return state;
+				},
+				actions: {
+					setName: ( id, name ) => ( { type: 'SET_NAME', id, name } ),
+				},
+				selectors: {
+					getName: ( state, id ) => state[ id ] ?? 'null',
+				},
+			} );
+
+			const renderedItems = [];
+
+			function TestComponent() {
+				const [ blockId, setBlockId ] = useState( 1 );
+
+				const name = useSelect(
+					( select ) => select( 'names' ).getName( blockId ),
+					[ blockId ]
+				);
+
+				// Change name of block 2. The store listener will still use the old selector
+				// for block 1, because a new one will be stored by an effect a moment later,
+				// but we're testing that it still won't miss the update, because one more check
+				// will happen in that effect.
+				useLayoutEffect( () => {
+					if ( blockId === 2 ) {
+						registry.dispatch( 'names' ).setName( 2, 'new2' );
+					}
+				}, [ blockId ] );
+
+				renderedItems.push( name );
+
+				return (
+					<button onClick={ () => setBlockId( 2 ) }>
+						change-block
+					</button>
+				);
+			}
+
+			render(
+				<RegistryProvider value={ registry }>
+					<TestComponent />
+				</RegistryProvider>
+			);
+			expect( renderedItems ).toEqual( [ 'null' ] );
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			// After click, there are two new renders:
+			// 1. With of block 2, after state update of `blockId` from 1 to 2
+			// 2. After dispatching an action to change 2's name to `new2`
+			expect( renderedItems ).toEqual( [ 'null', 'null', 'new2' ] );
+		} );
+
 		it( 'handles registry selectors', () => {
 			const getCount1And2 = createRegistrySelector(
 				( select ) => ( state ) => ( {
-					count1: state.counter,
-					count2: select( 'store-2' ).getCounter(),
+					count1: state,
+					count2: select( 'store-2' ).get(),
 				} )
 			);
 
-			registry.registerStore( 'store-1', {
-				...counterStore,
-				selectors: {
-					...counterStore.selectors,
-					getCount1And2,
-				},
-			} );
-			registry.registerStore( 'store-2', counterStore );
+			const store1Spec = counterStore();
+			Object.assign( store1Spec.selectors, { getCount1And2 } );
+			registry.registerStore( 'store-1', store1Spec );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1And2 = jest.fn();
 
@@ -534,7 +642,7 @@ describe( 'useSelect', () => {
 			);
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
 			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
@@ -544,8 +652,8 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 'handles conditional statements in selectors', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1 = jest.fn();
 			const selectCount2 = jest.fn();
@@ -559,13 +667,11 @@ describe( 'useSelect', () => {
 					( select ) => {
 						if ( shouldSelectCount1 ) {
 							selectCount1();
-							select( 'store-1' ).getCounter();
-							return 'count1';
+							return 'count1:' + select( 'store-1' ).get();
 						}
 
 						selectCount2();
-						select( 'store-2' ).getCounter();
-						return 'count2';
+						return 'count2:' + select( 'store-2' ).get();
 					},
 					[ shouldSelectCount1 ]
 				);
@@ -587,29 +693,40 @@ describe( 'useSelect', () => {
 			expect( selectCount1 ).toHaveBeenCalledTimes( 0 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
-				'count2'
+				'count2:0'
 			);
 
 			act( () => screen.getByText( 'Toggle' ).click() );
 
+			expect( selectCount1 ).toHaveBeenCalledTimes( 1 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
+				'count1:0'
+			);
+
+			// Verify that the component subscribed to store-1 after selected from
+			act( () => {
+				registry.dispatch( 'store-1' ).inc();
+			} );
+
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
-				'count1'
+				'count1:1'
 			);
 		} );
 
 		it( "handles subscriptions to the parent's stores", () => {
-			registry.registerStore( 'parent-store', counterStore );
+			registry.registerStore( 'parent-store', counterStore() );
 
 			const subRegistry = createRegistry( {}, registry );
-			subRegistry.registerStore( 'child-store', counterStore );
+			subRegistry.registerStore( 'child-store', counterStore() );
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) => ( {
-						parentCount: select( 'parent-store' ).getCounter(),
-						childCount: select( 'child-store' ).getCounter(),
+						parentCount: select( 'parent-store' ).get(),
+						childCount: select( 'child-store' ).get(),
 					} ),
 					[]
 				);
@@ -634,7 +751,7 @@ describe( 'useSelect', () => {
 			);
 
 			act( () => {
-				registry.dispatch( 'parent-store' ).increment();
+				registry.dispatch( 'parent-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
@@ -643,13 +760,13 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 'handles non-existing stores', () => {
-			registry.registerStore( 'store-1', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) => ( {
-						count1: select( 'store-1' ).getCounter(),
-						count2: select( 'store-2' )?.getCounter() ?? 'blank',
+						count1: select( 'store-1' ).get(),
+						count2: select( 'store-2' )?.get() ?? 'blank',
 					} ),
 					[]
 				);
@@ -672,7 +789,7 @@ describe( 'useSelect', () => {
 			);
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
@@ -687,8 +804,7 @@ describe( 'useSelect', () => {
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) =>
-						select( 'not-yet-registered-store' )?.getCounter() ??
-						'blank',
+						select( 'not-yet-registered-store' )?.get() ?? 'blank',
 					[]
 				);
 
@@ -706,7 +822,7 @@ describe( 'useSelect', () => {
 			act( () => {
 				registry.registerStore(
 					'not-yet-registered-store',
-					counterStore
+					counterStore()
 				);
 			} );
 
@@ -714,7 +830,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
-				registry.dispatch( 'not-yet-registered-store' ).increment();
+				registry.dispatch( 'not-yet-registered-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -729,9 +845,8 @@ describe( 'useSelect', () => {
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) =>
-						select(
-							'not-yet-registered-child-store'
-						)?.getCounter() ?? 'blank',
+						select( 'not-yet-registered-child-store' )?.get() ??
+						'blank',
 					[]
 				);
 
@@ -751,7 +866,7 @@ describe( 'useSelect', () => {
 			act( () => {
 				registry.registerStore(
 					'not-yet-registered-child-store',
-					counterStore
+					counterStore()
 				);
 			} );
 
@@ -759,9 +874,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
-				registry
-					.dispatch( 'not-yet-registered-child-store' )
-					.increment();
+				registry.dispatch( 'not-yet-registered-child-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -778,11 +891,11 @@ describe( 'useSelect', () => {
 					let counter = 0;
 
 					const selectors = {
-						getCounter: () => counter,
+						get: () => counter,
 					};
 
 					const actions = {
-						increment: () => {
+						inc: () => {
 							counter += 1;
 							storeChanged();
 						},
@@ -806,7 +919,7 @@ describe( 'useSelect', () => {
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
-					( select ) => select( customStore ).getCounter(),
+					( select ) => select( customStore ).get(),
 					[]
 				);
 
@@ -822,7 +935,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( customStore ).increment();
+				registry.dispatch( customStore ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -832,25 +945,8 @@ describe( 'useSelect', () => {
 	} );
 
 	describe( 'async mode', () => {
-		function registerCounterStore( reg, initialCount = 0 ) {
-			reg.registerStore( 'counter', {
-				reducer: ( state = initialCount, action ) => {
-					if ( action.type === 'INCREMENT' ) {
-						return state + 1;
-					}
-					return state;
-				},
-				actions: {
-					inc: () => ( { type: 'INCREMENT' } ),
-				},
-				selectors: {
-					get: ( state ) => state,
-				},
-			} );
-		}
-
 		beforeEach( () => {
-			registerCounterStore( registry );
+			registry.registerStore( 'counter', counterStore() );
 		} );
 
 		it( 'renders with async mode', async () => {
@@ -1030,7 +1126,7 @@ describe( 'useSelect', () => {
 
 		it( 'cancels scheduled updates when registry changes', async () => {
 			const registry2 = createRegistry();
-			registerCounterStore( registry2, 100 );
+			registry2.registerStore( 'counter', counterStore( 100 ) );
 
 			const selectSpy = jest.fn( ( select ) =>
 				select( 'counter' ).get()
@@ -1073,16 +1169,8 @@ describe( 'useSelect', () => {
 	} );
 
 	describe( 'usage without dependencies array', () => {
-		function registerStore( name, initial ) {
-			registry.registerStore( name, {
-				reducer: ( s = initial, a ) => ( a.type === 'inc' ? s + 1 : s ),
-				actions: { inc: () => ( { type: 'inc' } ) },
-				selectors: { get: ( s ) => s },
-			} );
-		}
-
 		it( 'does not memoize the callback when there are no deps', () => {
-			registerStore( 'store', 1 );
+			registry.registerStore( 'store', counterStore( 1 ) );
 
 			const Status = ( { multiple } ) => {
 				const count = useSelect(
@@ -1106,9 +1194,9 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '2' );
 		} );
 
-		it( 'subscribes only stores used by the initial callback', () => {
-			registerStore( 'counter-1', 1 );
-			registerStore( 'counter-2', 10 );
+		it( 'resubscribes when the set of selected stores changes', () => {
+			registry.registerStore( 'counter-1', counterStore( 1 ) );
+			registry.registerStore( 'counter-2', counterStore( 10 ) );
 
 			const Status = ( { store } ) => {
 				const count = useSelect( ( select ) => select( store ).get() );
@@ -1135,21 +1223,17 @@ describe( 'useSelect', () => {
 			rerender( <App store="counter-2" /> );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 
-			// update from counter-2 is ignored because component is subcribed only to counter-1
+			// update from counter-2 is processed because component has subscribed to counter-2
 			act( () => {
 				registry.dispatch( 'counter-2' ).inc();
 			} );
-			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '11' );
 		} );
 	} );
 
 	describe( 'static store selection mode', () => {
 		it( 'can read the current value from store', () => {
-			registry.registerStore( 'testStore', {
-				reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ),
-				actions: { inc: () => ( { type: 'INC' } ) },
-				selectors: { get: ( s ) => s },
-			} );
+			registry.registerStore( 'testStore', counterStore() );
 
 			const record = jest.fn();
 
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index 8fe418e5d8bfa9..7a913da488f46e 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -211,10 +211,18 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	/**
 	 * Registers a store instance.
 	 *
-	 * @param {string} name  Store registry name.
-	 * @param {Object} store Store instance object (getSelectors, getActions, subscribe).
+	 * @param {string}   name        Store registry name.
+	 * @param {Function} createStore Function that creates a store object (getSelectors, getActions, subscribe).
 	 */
-	function registerStoreInstance( name, store ) {
+	function registerStoreInstance( name, createStore ) {
+		if ( stores[ name ] ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Store "' + name + '" is already registered.' );
+			return stores[ name ];
+		}
+
+		const store = createStore();
+
 		if ( typeof store.getSelectors !== 'function' ) {
 			throw new TypeError( 'store.getSelectors must be a function' );
 		}
@@ -262,6 +270,8 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 				// ignore it.
 			}
 		}
+
+		return store;
 	}
 
 	/**
@@ -270,7 +280,9 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @param {StoreDescriptor} store Store descriptor.
 	 */
 	function register( store ) {
-		registerStoreInstance( store.name, store.instantiate( registry ) );
+		registerStoreInstance( store.name, () =>
+			store.instantiate( registry )
+		);
 	}
 
 	function registerGenericStore( name, store ) {
@@ -278,7 +290,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			since: '5.9',
 			alternative: 'wp.data.register( storeDescriptor )',
 		} );
-		registerStoreInstance( name, store );
+		registerStoreInstance( name, () => store );
 	}
 
 	/**
@@ -294,10 +306,10 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			throw new TypeError( 'Must specify store reducer' );
 		}
 
-		const store = createReduxStore( storeName, options ).instantiate(
-			registry
+		const store = registerStoreInstance( storeName, () =>
+			createReduxStore( storeName, options ).instantiate( registry )
 		);
-		registerStoreInstance( storeName, store );
+
 		return store.store;
 	}
 
diff --git a/packages/data/src/test/registry.js b/packages/data/src/test/registry.js
index 1422ef1082556a..b9288eae821d8a 100644
--- a/packages/data/src/test/registry.js
+++ b/packages/data/src/test/registry.js
@@ -481,41 +481,50 @@ describe( 'createRegistry', () => {
 	} );
 
 	describe( 'register', () => {
+		const store = createReduxStore( 'demo', {
+			reducer( state = 'OK', action ) {
+				if ( action.type === 'UPDATE' ) {
+					return 'UPDATED';
+				}
+				return state;
+			},
+			actions: {
+				update: () => ( { type: 'UPDATE' } ),
+			},
+			selectors: {
+				getValue: ( state ) => state,
+			},
+		} );
+
 		it( 'should work with the store descriptor as param for select', () => {
-			const store = createReduxStore( 'demo', {
-				reducer: ( state = 'OK' ) => state,
-				selectors: {
-					getValue: ( state ) => state,
-				},
-			} );
 			registry.register( store );
 
 			expect( registry.select( store ).getValue() ).toBe( 'OK' );
 		} );
 
 		it( 'should work with the store descriptor as param for dispatch', async () => {
-			const store = createReduxStore( 'demo', {
-				reducer( state = 'OK', action ) {
-					if ( action.type === 'UPDATE' ) {
-						return 'UPDATED';
-					}
-					return state;
-				},
-				actions: {
-					update() {
-						return { type: 'UPDATE' };
-					},
-				},
-				selectors: {
-					getValue: ( state ) => state,
-				},
-			} );
 			registry.register( store );
 
 			expect( registry.select( store ).getValue() ).toBe( 'OK' );
 			await registry.dispatch( store ).update();
 			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
 		} );
+
+		it( 'should keep the existing store instance on duplicate registration', async () => {
+			registry.register( store );
+
+			await registry.dispatch( store ).update();
+			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
+
+			registry.register( store );
+
+			// check that the state hasn't been reset back to `OK`, as a re-registration would do
+			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
+
+			expect( console ).toHaveErroredWith(
+				'Store "demo" is already registered.'
+			);
+		} );
 	} );
 
 	describe( 'select', () => {
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/pages.ts b/packages/e2e-test-utils-playwright/src/request-utils/pages.ts
index f5d7cb4bf622de..6fe70ef3cb3fde 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/pages.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/pages.ts
@@ -14,13 +14,13 @@ const PAGE_STATUS = [
 
 export type Page = {
 	id: number;
-	status: typeof PAGE_STATUS[ number ];
+	status: ( typeof PAGE_STATUS )[ number ];
 };
 
 export type CreatePagePayload = {
 	title?: string;
 	content?: string;
-	status: typeof PAGE_STATUS[ number ];
+	status: ( typeof PAGE_STATUS )[ number ];
 	date?: string;
 	date_gmt?: string;
 };
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index a277afa1cd13d9..894abf93dcd02e 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -32,7 +32,7 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 	const type = message.type();
 	if (
 		! OBSERVED_CONSOLE_MESSAGE_TYPES.includes(
-			type as typeof OBSERVED_CONSOLE_MESSAGE_TYPES[ number ]
+			type as ( typeof OBSERVED_CONSOLE_MESSAGE_TYPES )[ number ]
 		)
 	) {
 		return;
@@ -85,7 +85,8 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 		return;
 	}
 
-	const logFunction = type as typeof OBSERVED_CONSOLE_MESSAGE_TYPES[ number ];
+	const logFunction =
+		type as ( typeof OBSERVED_CONSOLE_MESSAGE_TYPES )[ number ];
 
 	// Disable reason: We intentionally bubble up the console message
 	// which, unless the test explicitly anticipates the logging via
diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js
index e9928008dd6e3b..a382229e201bf9 100644
--- a/packages/e2e-tests/config/performance-reporter.js
+++ b/packages/e2e-tests/config/performance-reporter.js
@@ -19,9 +19,11 @@ const success = chalk.bold.green;
 
 class PerformanceReporter {
 	onTestResult( test ) {
-		const dirname = path.dirname( test.path );
 		const basename = path.basename( test.path, '.js' );
-		const filepath = path.join( dirname, basename + '.results.json' );
+		const filepath = path.join(
+			process.env.WP_ARTIFACTS_PATH,
+			basename + '.performance-results.json'
+		);
 
 		if ( ! existsSync( filepath ) ) {
 			return;
diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
index 092a0276ba0f23..56ed8455aefa9c 100644
--- a/packages/e2e-tests/specs/editor/blocks/cover.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/cover.test.js
@@ -42,30 +42,6 @@ describe( 'Cover', () => {
 		await createNewPost();
 	} );
 
-	it( 'can set overlay color using color picker on block placeholder', async () => {
-		await insertBlock( 'Cover' );
-		// Get the first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		// Get the RGB value of the picked color.
-		const pickedColor = await colorPickerButton.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-		// Create the block by clicking selected color button.
-		await colorPickerButton.click();
-		// Get the block's background dim element.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		// Get the RGB value of the background dim.
-		const dimColor = await backgroundDim.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-
-		expect( pickedColor ).toEqual( dimColor );
-	} );
-
 	it( 'can set background image using image upload on block placeholder', async () => {
 		await insertBlock( 'Cover' );
 		// Create the block using uploaded image.
@@ -95,27 +71,6 @@ describe( 'Cover', () => {
 		expect( backgroundDimOpacity ).toBe( '0.5' );
 	} );
 
-	it( 'can have the title edited', async () => {
-		await insertBlock( 'Cover' );
-		// Click first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		await colorPickerButton.click();
-		// Click the title placeholder to put the cursor inside.
-		const coverTitle = await page.waitForSelector(
-			'.wp-block-cover .wp-block-paragraph'
-		);
-		await coverTitle.click();
-		// Type the title.
-		await page.keyboard.type( 'foo' );
-		const coverTitleText = await coverTitle.evaluate(
-			( el ) => el.innerText
-		);
-
-		expect( coverTitleText ).toEqual( 'foo' );
-	} );
-
 	it( 'can be resized using drag & drop', async () => {
 		await insertBlock( 'Cover' );
 		// Close the inserter.
diff --git a/packages/e2e-tests/specs/performance/front-end-block-theme.test.js b/packages/e2e-tests/specs/performance/front-end-block-theme.test.js
index ebbd898e1c25b8..260a20ce64c4df 100644
--- a/packages/e2e-tests/specs/performance/front-end-block-theme.test.js
+++ b/packages/e2e-tests/specs/performance/front-end-block-theme.test.js
@@ -1,13 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
+import { saveResultsFile } from './utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
@@ -22,12 +21,8 @@ describe( 'Front End Performance', () => {
 	} );
 
 	afterAll( async () => {
+		saveResultsFile( __filename, results );
 		await activateTheme( 'twentytwentyone' );
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
 	} );
 
 	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
diff --git a/packages/e2e-tests/specs/performance/front-end-classic-theme.test.js b/packages/e2e-tests/specs/performance/front-end-classic-theme.test.js
index 5ef281e8dd0e84..ffe6906a529d8c 100644
--- a/packages/e2e-tests/specs/performance/front-end-classic-theme.test.js
+++ b/packages/e2e-tests/specs/performance/front-end-classic-theme.test.js
@@ -1,13 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
+import { saveResultsFile } from './utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
@@ -22,11 +21,7 @@ describe( 'Front End Performance', () => {
 	} );
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
+		saveResultsFile( __filename, results );
 	} );
 
 	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 0a6409495ed700..ee77f122a42bd4 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import path from 'path';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,8 @@ import {
 import {
 	readFile,
 	deleteFile,
+	saveResultsFile,
+	getTraceFilePath,
 	getTypingEventDurations,
 	getClickEventDurations,
 	getHoverEventDurations,
@@ -78,16 +79,13 @@ describe( 'Post Editor Performance', () => {
 		inserterHover: [],
 		inserterSearch: [],
 	};
-	const traceFile = __dirname + '/trace.json';
+	const traceFilePath = getTraceFilePath();
+
 	let traceResults;
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-		deleteFile( traceFile );
+		saveResultsFile( __filename, results );
+		deleteFile( traceFilePath );
 	} );
 
 	beforeEach( async () => {
@@ -103,7 +101,7 @@ describe( 'Post Editor Performance', () => {
 
 	it( 'Loading', async () => {
 		await loadHtmlIntoTheBlockEditor(
-			readFile( join( __dirname, '../../assets/large-post.html' ) )
+			readFile( path.join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await saveDraft();
 		const draftURL = await page.url();
@@ -148,12 +146,12 @@ describe( 'Post Editor Performance', () => {
 
 	it( 'Typing', async () => {
 		await loadHtmlIntoTheBlockEditor(
-			readFile( join( __dirname, '../../assets/large-post.html' ) )
+			readFile( path.join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -166,7 +164,7 @@ describe( 'Post Editor Performance', () => {
 			await page.keyboard.type( 'x' );
 		}
 		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
+		traceResults = JSON.parse( readFile( traceFilePath ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
 		if (
@@ -186,7 +184,7 @@ describe( 'Post Editor Performance', () => {
 	it( 'Typing within containers', async () => {
 		await loadHtmlIntoTheBlockEditor(
 			readFile(
-				join(
+				path.join(
 					__dirname,
 					'../../assets/small-post-with-containers.html'
 				)
@@ -202,7 +200,7 @@ describe( 'Post Editor Performance', () => {
 
 		let i = 10;
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -216,7 +214,7 @@ describe( 'Post Editor Performance', () => {
 		// eslint-disable-next-line no-restricted-syntax
 		await page.waitForTimeout( 500 );
 		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
+		traceResults = JSON.parse( readFile( traceFilePath ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
 		if (
@@ -242,13 +240,13 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 1000 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await paragraphs[ j ].click();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const allDurations = getSelectionEventDurations( traceResults );
 			results.focus.push(
 				allDurations.reduce( ( acc, eventDurations ) => {
@@ -262,13 +260,13 @@ describe( 'Post Editor Performance', () => {
 		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await openListView();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
 			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
 				results.listViewOpen.push( mouseClickEvents[ k ] );
@@ -281,13 +279,13 @@ describe( 'Post Editor Performance', () => {
 		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await openGlobalBlockInserter();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
 			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
 				results.inserterOpen.push( mouseClickEvents[ k ] );
@@ -304,13 +302,13 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 500 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await page.keyboard.type( 'p' );
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 				getTypingEventDurations( traceResults );
 			if (
@@ -343,7 +341,7 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 200 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
@@ -351,7 +349,7 @@ describe( 'Post Editor Performance', () => {
 			await page.hover( headingBlockItem );
 			await page.tracing.stop();
 
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseOverEvents, mouseOutEvents ] =
 				getHoverEventDurations( traceResults );
 			for ( let k = 0; k < mouseOverEvents.length; k++ ) {
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
index 69f5c336c74148..22c1af35ff7161 100644
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import path from 'path';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,8 @@ import {
 import {
 	readFile,
 	deleteFile,
+	saveResultsFile,
+	getTraceFilePath,
 	getTypingEventDurations,
 	getLoadingDurations,
 	sequence,
@@ -56,7 +57,7 @@ describe( 'Site Editor Performance', () => {
 		await deleteAllTemplates( 'wp_template_part' );
 
 		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
+			path.join( __dirname, '../../assets/large-post.html' )
 		);
 
 		await createNewPost( { postType: 'page' } );
@@ -83,12 +84,7 @@ describe( 'Site Editor Performance', () => {
 	} );
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-
+		saveResultsFile( __filename, results );
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
 		await activateTheme( 'twentytwentyone' );
@@ -159,9 +155,9 @@ describe( 'Site Editor Performance', () => {
 		await insertBlock( 'Paragraph' );
 
 		// Start tracing.
-		const traceFile = __dirname + '/trace.json';
+		const traceFilePath = getTraceFilePath();
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -171,7 +167,7 @@ describe( 'Site Editor Performance', () => {
 
 		// Stop tracing and save results.
 		await page.tracing.stop();
-		const traceResults = JSON.parse( readFile( traceFile ) );
+		const traceResults = JSON.parse( readFile( traceFilePath ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
 		for ( let i = 0; i < keyDownEvents.length; i++ ) {
@@ -181,7 +177,7 @@ describe( 'Site Editor Performance', () => {
 		}
 
 		// Delete the original trace file.
-		deleteFile( traceFile );
+		deleteFile( traceFilePath );
 
 		expect( true ).toBe( true );
 	} );
diff --git a/packages/e2e-tests/specs/performance/utils.js b/packages/e2e-tests/specs/performance/utils.js
index 772070cea70825..a71e58edefebf2 100644
--- a/packages/e2e-tests/specs/performance/utils.js
+++ b/packages/e2e-tests/specs/performance/utils.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { existsSync, readFileSync, unlinkSync } from 'fs';
+import path from 'path';
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
 
 export function readFile( filePath ) {
 	return existsSync( filePath )
@@ -15,6 +16,21 @@ export function deleteFile( filePath ) {
 	}
 }
 
+export function getTraceFilePath() {
+	return path.join( process.env.WP_ARTIFACTS_PATH, '/trace.json' );
+}
+
+export function saveResultsFile( testFilename, results ) {
+	const resultsFilename =
+		process.env.RESULTS_FILENAME ||
+		path.basename( testFilename, '.js' ) + '.performance-results.json';
+
+	return writeFileSync(
+		path.join( process.env.WP_ARTIFACTS_PATH, resultsFilename ),
+		JSON.stringify( results, null, 2 )
+	);
+}
+
 function isEvent( item ) {
 	return (
 		item.cat === 'devtools.timeline' &&
diff --git a/packages/edit-navigation/src/private-apis.js b/packages/edit-navigation/src/private-apis.js
deleted file mode 100644
index bf34b570f0b298..00000000000000
--- a/packages/edit-navigation/src/private-apis.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
-		'@wordpress/edit-navigation'
-	);
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
index 50661aa50c30ee..10e148bbb2762c 100644
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -51,6 +51,12 @@
 	li:only-child {
 		width: 100%;
 	}
+
+	&.components-panel__header.edit-post-sidebar__panel-tabs {
+		.components-button.has-icon {
+			display: flex;
+		}
+	}
 }
 
 .edit-post-editor__list-view-panel-content,
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index ec53dc380aace9..fd7614ea9b2c6a 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -67,12 +67,12 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 
 	return (
 		<Iframe
-			head={ <EditorStyles styles={ styles } /> }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
 			name="editor-canvas"
 		>
+			<EditorStyles styles={ styles } />
 			{ children }
 		</Iframe>
 	);
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d5d7056a0b7c24..90f29f37b145cf 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -294,7 +294,7 @@ export const showBlockTypes =
 			( type ) =>
 				! (
 					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
-				 ).includes( type )
+				).includes( type )
 		);
 
 		registry
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index fdb4b0c136abf0..81a1713943e95f 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -99,6 +99,15 @@ body.block-editor-page {
 
 @include wordpress-admin-schemes();
 
+.interface-interface-skeleton__header .edit-post-header {
+	@supports (scrollbar-gutter: stable) {
+		// The scrollbar-gutter property ensures space is reserved for the scrollbar to appear,
+		// when scrollbars are set to be always visible. This ensure icons stay visually aligned.
+		scrollbar-gutter: stable;
+		overflow: hidden;
+	}
+}
+
 // The edit-site package adds or removes the sidebar when it's opened or closed.
 // The edit-post package, however, always has the sidebar in the canvas.
 // These edit-post specific rules ensures there isn't a border on the right of
@@ -109,6 +118,7 @@ body.block-editor-page {
 	.is-sidebar-opened & {
 		@include break-medium() {
 			border-left: $border-width solid $gray-200;
+			overflow: hidden scroll;
 		}
 	}
 }
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 82e90f248b4f97..6ed799f1493c6e 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
@@ -13,14 +13,12 @@ import { plus } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useHistory } from '../routes';
-import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
-import { unlock } from '../../private-apis';
 
 export default function NewTemplatePart( {
 	postType,
@@ -31,7 +29,6 @@ export default function NewTemplatePart( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const existingTemplateParts = useExistingTemplateParts();
 
 	async function createTemplatePart( { title, area } ) {
@@ -63,13 +60,11 @@ export default function NewTemplatePart( {
 
 			setIsModalOpen( false );
 
-			// Switch to edit mode.
-			setCanvasMode( 'edit' );
-
 			// Navigate to the created template part editor.
 			history.push( {
 				postId: templatePart.id,
 				postType: 'wp_template_part',
+				canvas: 'edit',
 			} );
 
 			// TODO: Add a success notice?
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index f76960d1069d47..2644db600f3cf3 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -98,9 +98,7 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate, setCanvasMode } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -125,20 +123,19 @@ export default function NewTemplate( {
 
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
-			// Switch to edit mode.
-			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,
 				postType: newTemplate.type,
+				canvas: 'edit',
 			} );
 
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					title
+					newTemplate.title?.rendered || title
 				),
 				{
 					type: 'snackbar',
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..8de37c1f64632c 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -146,7 +146,7 @@ export function usePostTypeArchiveMenuItems() {
 						description: sprintf(
 							// translators: %s: Name of the post type e.g: "Post".
 							__(
-								'Displays an archive with the latests posts of type: %s.'
+								'Displays an archive with the latest posts of type: %s.'
 							),
 							postType.labels.singular_name
 						),
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 4489b78ef520f8..1f64c8c4c4f9ca 100644
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -31,33 +31,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+
 	return (
 		<Iframe
 			expand={ isZoomOutMode }
 			scale={ ( isZoomOutMode && 0.45 ) || undefined }
 			frameSize={ isZoomOutMode ? 100 : undefined }
 			style={ enableResizing ? {} : deviceStyles }
-			head={
-				<>
-					<EditorStyles styles={ settings.styles } />
-					<style>{
-						// Forming a "block formatting context" to prevent margin collapsing.
-						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-						`.is-root-container { display: flow-root; }
-							body { position: relative;
-							${ canvasMode === 'view' ? 'cursor: pointer;' : '' }}}`
-					}</style>
-					{ enableResizing && (
-						<style>
-							{
-								// Some themes will have `min-height: 100vh` for the root container,
-								// which isn't a requirement in auto resize mode.
-								`.is-root-container { min-height: 0 !important; }`
-							}
-						</style>
-					) }
-				</>
-			}
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
 			className="edit-site-visual-editor__editor-canvas"
@@ -70,8 +50,18 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			}
 			readonly={ canvasMode === 'view' }
 		>
-			{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-			{ settings.svgFilters }
+			<EditorStyles styles={ settings.styles } />
+			<style>{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+				`.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}body{position:relative; ${
+					canvasMode === 'view' ? 'cursor: pointer;' : ''
+				}}}`
+			}</style>
 			{ children }
 		</Iframe>
 	);
diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js
index 3d0df911685cbb..14fc4adf25f7e2 100644
--- a/packages/edit-site/src/components/global-styles-renderer/index.js
+++ b/packages/edit-site/src/components/global-styles-renderer/index.js
@@ -14,7 +14,7 @@ import { unlock } from '../../private-apis';
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
+	const [ styles, settings ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -30,7 +30,6 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
-			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );
diff --git a/packages/edit-site/src/components/global-styles/color-utils.js b/packages/edit-site/src/components/global-styles/color-utils.js
deleted file mode 100644
index b022b8506b0a23..00000000000000
--- a/packages/edit-site/src/components/global-styles/color-utils.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useSupportedStyles } from './hooks';
-
-export function useHasColorPanel( name ) {
-	const supports = useSupportedStyles( name );
-	return (
-		supports.includes( 'color' ) ||
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' ) ||
-		supports.includes( 'linkColor' )
-	);
-}
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 89fd262d9ade4c..8440124c9818f8 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -27,7 +27,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { useHasColorPanel } from './color-utils';
 import { useHasFilterPanel } from './filter-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
@@ -40,6 +39,7 @@ const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useHasBorderPanel,
+	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -48,7 +48,7 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const [ rawSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( name );
+	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasEffectsPanel = useHasShadowControl( name );
 	const hasFilterPanel = useHasFilterPanel( name );
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 690cbd3cbcbe6e..163ae58df8dcfa 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -7,8 +7,6 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -18,86 +16,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =
-	unlock( blockEditorPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-export function useColorsPerOrigin( name ) {
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom', name );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );
-	const [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );
-	const [ shouldDisplayDefaultColors ] = useGlobalSetting(
-		'color.defaultPalette'
-	);
-
-	return useColorsPerOriginFromSettings( {
-		color: {
-			palette: {
-				custom: customColors,
-				theme: themeColors,
-				default: defaultColors,
-			},
-			defaultPalette: shouldDisplayDefaultColors,
-		},
-	} );
-}
-
-export function useGradientsPerOrigin( name ) {
-	const [ customGradients ] = useGlobalSetting(
-		'color.gradients.custom',
-		name
-	);
-	const [ themeGradients ] = useGlobalSetting(
-		'color.gradients.theme',
-		name
-	);
-	const [ defaultGradients ] = useGlobalSetting(
-		'color.gradients.default',
-		name
-	);
-	const [ shouldDisplayDefaultGradients ] = useGlobalSetting(
-		'color.defaultGradients'
-	);
-
-	return useMemo( () => {
-		const result = [];
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				gradients: themeGradients,
-			} );
-		}
-		if (
-			shouldDisplayDefaultGradients &&
-			defaultGradients &&
-			defaultGradients.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				gradients: defaultGradients,
-			} );
-		}
-		if ( customGradients && customGradients.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				gradients: customGradients,
-			} );
-		}
-		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
-}
-
 export function useColorRandomizer( name ) {
 	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index fa27af246448f9..395ecd33fbc3bf 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -117,7 +117,6 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 			{ isReady && (
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
-					head={ <EditorStyles styles={ editorStyles } /> }
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
@@ -125,6 +124,7 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
+					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,
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
deleted file mode 100644
index 6a072185b91e21..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	useSupportedStyles,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-} from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenBackgroundColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useGlobalSetting(
-		'color.customGradient',
-		name
-	);
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
-	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useGlobalStyle(
-		prefix + 'color.gradient',
-		name
-	);
-	const [ userGradient ] = useGlobalStyle(
-		prefix + 'color.gradient',
-		name,
-		'user'
-	);
-
-	if ( ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Background' ) }
-				description={ __(
-					'Set a background color or gradient for the whole site.'
-				) }
-			/>
-			<ColorGradientControl
-				className={ classnames(
-					'edit-site-screen-background-color__control',
-					{
-						'has-no-tabs':
-							! hasBackgroundColor || ! hasGradientColor,
-					}
-				) }
-				colors={ colorsPerOrigin }
-				gradients={ gradientsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				disableCustomGradients={ ! areCustomGradientsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				headingLevel={ 3 }
-				{ ...controlProps }
-			/>
-		</>
-	);
-}
-
-export default ScreenBackgroundColor;
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 e85b3956f3e372..7c60273beda76c 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
@@ -20,7 +20,6 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasColorPanel } from './color-utils';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
@@ -32,6 +31,7 @@ const {
 	useHasBorderPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasColorPanel,
 } = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
@@ -61,7 +61,7 @@ function BlockMenuItem( { block } ) {
 	const [ rawSettings ] = useGlobalSetting( '', block.name );
 	const settings = useSettingsForBlockElement( rawSettings, block.name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( block.name );
+	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
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
deleted file mode 100644
index 010095d024c622..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenButtonColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-
-	const hasButtonColor =
-		supports.includes( 'buttonColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(
-		prefix + 'elements.button.color.text',
-		name
-	);
-	const [ userButtonTextColor ] = useGlobalStyle(
-		'elements.button.color.text',
-		name,
-		'user'
-	);
-
-	const [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(
-		'elements.button.color.background',
-		name
-	);
-	const [ userButtonBgColor ] = useGlobalStyle(
-		'elements.button.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasButtonColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Buttons' ) }
-				description={ __(
-					'Set the default colors used for buttons across the site.'
-				) }
-			/>
-
-			<h3 className="edit-site-global-styles-section-title">
-				{ __( 'Text color' ) }
-			</h3>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonTextColor }
-				onColorChange={ setButtonTextColor }
-				clearable={ buttonTextColor === userButtonTextColor }
-				headingLevel={ 4 }
-			/>
-
-			<h3 className="edit-site-global-styles-section-title">
-				{ __( 'Background color' ) }
-			</h3>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonBgColor }
-				onColorChange={ setButtonBgColor }
-				clearable={ buttonBgColor === userButtonBgColor }
-				headingLevel={ 4 }
-			/>
-		</>
-	);
-}
-
-export default ScreenButtonColor;
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 dc40ca155b3387..1624bdefc7ae92 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -2,14 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalZStack as ZStack,
-	FlexItem,
-	ColorIndicator,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -17,205 +10,32 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import { NavigationButtonAsItem } from './navigation-button';
-import { useSupportedStyles } from './hooks';
-import Subtitle from './subtitle';
-import ColorIndicatorWrapper from './color-indicator-wrapper';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	ColorPanel: StylesColorPanel,
+} = unlock( blockEditorPrivateApis );
 
-function BackgroundColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport =
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' );
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/background' }
-			aria-label={ __( 'Colors background styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ gradientValue ?? backgroundColor }
-						data-testid="background-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Background' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function TextColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/text' }
-			aria-label={ __( 'Colors text styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ color }
-						data-testid="text-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Text' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function LinkColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.link.color.text',
-		name
-	);
-	const [ colorHover ] = useGlobalStyle(
-		prefix + 'elements.link.:hover.color.text',
-		name
-	);
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/link' }
-			aria-label={ __( 'Colors link styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ colorHover } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Links' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function HeadingColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.heading.color.text',
-		name
-	);
-	const [ bgColor ] = useGlobalStyle(
-		prefix + 'elements.heading.color.background',
-		name
-	);
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/heading' }
-			aria-label={ __( 'Colors heading styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem>{ __( 'Headings' ) }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ButtonColorItem( { name, parentMenu, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const urlPrefix = variation ? `/variations/${ variation }` : '';
-	const supports = useSupportedStyles( name );
-	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useGlobalStyle(
-		prefix + 'elements.button.color.text',
-		name
-	);
-	const [ bgColor ] = useGlobalStyle(
-		prefix + 'elements.button.color.background',
-		name
-	);
+function ScreenColors( { name, variation = '' } ) {
+	const variationClassName = getVariationClassName( variation );
 
-	if ( ! hasSupport ) {
-		return null;
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
 	}
+	const prefix = prefixParts.join( '.' );
 
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + urlPrefix + '/colors/button' }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Buttons' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ScreenColors( { name, variation = '' } ) {
-	const parentMenu =
-		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
-	const variationClassName = getVariationClassName( variation );
+	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 
 	return (
 		<>
@@ -232,36 +52,12 @@ function ScreenColors( { name, variation = '' } ) {
 				<VStack spacing={ 10 }>
 					<Palette name={ name } />
 
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<BackgroundColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<TextColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<LinkColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<HeadingColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-							<ButtonColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-								variation={ variation }
-							/>
-						</ItemGroup>
-					</VStack>
+					<StylesColorPanel
+						inheritedValue={ inheritedStyle }
+						value={ style }
+						onChange={ setStyle }
+						settings={ settings }
+					/>
 				</VStack>
 			</div>
 		</>
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
deleted file mode 100644
index 859659092200f0..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	useSupportedStyles,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-} from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenHeadingColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useGlobalSetting(
-		'color.customGradient',
-		name
-	);
-	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
-	const [ isBackgroundEnabled ] = useGlobalSetting(
-		'color.background',
-		name
-	);
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );
-
-	const [ color, setColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.text',
-		name
-	);
-	const [ userColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.text',
-		name,
-		'user'
-	);
-
-	const [ backgroundColor, setBackgroundColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.gradient',
-		name
-	);
-	const [ userGradient ] = useGlobalStyle(
-		prefix + 'elements.' + selectedLevel + '.color.gradient',
-		name,
-		'user'
-	);
-
-	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Headings' ) }
-				description={ __(
-					'Set the default color used for headings across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen-heading-color">
-				<h3>{ __( 'Select heading level' ) }</h3>
-
-				<ToggleGroupControl
-					__nextHasNoMarginBottom
-					label={ __( 'Select heading level' ) }
-					hideLabelFromVision={ true }
-					value={ selectedLevel }
-					onChange={ setCurrentTab }
-					isBlock
-				>
-					<ToggleGroupControlOption
-						value="heading"
-						/* translators: 'All' refers to selecting all heading levels
-						and applying the same style to h1-h6. */
-						label={ __( 'All' ) }
-					/>
-					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
-					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
-					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
-					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
-					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
-					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
-				</ToggleGroupControl>
-			</div>
-			{ hasTextColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h3>
-						{ selectedLevel === 'heading'
-							? __( 'Text color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Text color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h3>
-					<ColorGradientControl
-						className="edit-site-screen-heading-text-color__control"
-						colors={ colorsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						colorValue={ color }
-						onColorChange={ setColor }
-						clearable={ color === userColor }
-						headingLevel={ 4 }
-					/>
-				</div>
-			) }
-			{ hasBackgroundColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h3>
-						{ selectedLevel === 'heading'
-							? __( 'Background color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Background color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h3>
-					<ColorGradientControl
-						className="edit-site-screen-heading-background-color__control"
-						colors={ colorsPerOrigin }
-						gradients={ gradientsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						disableCustomGradients={ ! areCustomGradientsEnabled }
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						headingLevel={ 4 }
-						{ ...controlProps }
-					/>
-				</div>
-			) }
-		</>
-	);
-}
-
-export default ScreenHeadingColor;
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
deleted file mode 100644
index fa2759dc0a19ec..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { TabPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenLinkColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );
-
-	const hasLinkColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const pseudoStates = {
-		default: {
-			label: __( 'Default' ),
-			value: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name
-			)[ 0 ],
-			handler: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name
-			)[ 1 ],
-			userValue: useGlobalStyle(
-				prefix + 'elements.link.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-		hover: {
-			label: __( 'Hover' ),
-			value: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name
-			)[ 0 ],
-			handler: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name
-			)[ 1 ],
-			userValue: useGlobalStyle(
-				prefix + 'elements.link.:hover.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-	};
-
-	if ( ! hasLinkColor ) {
-		return null;
-	}
-
-	const tabs = Object.entries( pseudoStates ).map(
-		( [ selector, config ] ) => {
-			return {
-				name: selector,
-				title: config.label,
-				className: `color-text-${ selector }`,
-			};
-		}
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Links' ) }
-				description={ __(
-					'Set the colors used for links across the site.'
-				) }
-			/>
-
-			<TabPanel tabs={ tabs }>
-				{ ( tab ) => {
-					const pseudoSelectorConfig =
-						pseudoStates[ tab.name ] ?? null;
-
-					if ( ! pseudoSelectorConfig ) {
-						return null;
-					}
-
-					return (
-						<>
-							<ColorGradientControl
-								className="edit-site-screen-link-color__control"
-								colors={ colorsPerOrigin }
-								disableCustomColors={ ! areCustomSolidsEnabled }
-								showTitle={ false }
-								enableAlpha
-								__experimentalIsRenderedInSidebar
-								colorValue={ pseudoSelectorConfig.value }
-								onColorChange={ pseudoSelectorConfig.handler }
-								clearable={
-									pseudoSelectorConfig.value ===
-									pseudoSelectorConfig.userValue
-								}
-								headingLevel={ 3 }
-							/>
-						</>
-					);
-				} }
-			</TabPanel>
-		</>
-	);
-}
-
-export default ScreenLinkColor;
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
deleted file mode 100644
index 72b7e25fa8a3b4..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import { useSupportedStyles, useColorsPerOrigin } from './hooks';
-import { unlock } from '../../private-apis';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function ScreenTextColor( { name, variation = '' } ) {
-	const prefix = variation ? `variations.${ variation }.` : '';
-	const supports = useSupportedStyles( name );
-	const [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useGlobalSetting( 'color.text', name );
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );
-
-	const [ color, setColor ] = useGlobalStyle( prefix + 'color.text', name );
-	const [ userColor ] = useGlobalStyle( prefix + 'color.text', name, 'user' );
-
-	if ( ! hasTextColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Text' ) }
-				description={ __(
-					'Set the default color used for text across the site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-text-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ color }
-				onColorChange={ setColor }
-				clearable={ color === userColor }
-				headingLevel={ 3 }
-			/>
-		</>
-	);
-}
-
-export default ScreenTextColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 76d7d6de5df90d..f28bf2bfe1706e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -29,6 +29,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on headings.' ),
 		title: __( 'Headings' ),
 	},
+	caption: {
+		description: __( 'Manage the fonts and typography used on captions.' ),
+		title: __( 'Captions' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),
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 96df1ff9d656ea..239b1e05950c21 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -129,6 +129,12 @@ function ScreenTypography( { name, variation = '' } ) {
 								element="heading"
 								label={ __( 'Headings' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="caption"
+								label={ __( 'Captions' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }
diff --git a/packages/edit-site/src/components/global-styles/stories/index.js b/packages/edit-site/src/components/global-styles/stories/index.js
new file mode 100644
index 00000000000000..f915794e5ecd06
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/stories/index.js
@@ -0,0 +1,425 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { default as GlobalStylesUIComponent } from '../ui';
+import { unlock } from '../../../private-apis';
+
+const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
+	blockEditorPrivateApis
+);
+
+export default { title: 'EditSite/GlobalStylesUI' };
+
+const BASE_SETTINGS = {
+	settings: {
+		appearanceTools: false,
+		useRootPaddingAwareAlignments: true,
+		border: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			background: true,
+			custom: true,
+			customDuotone: true,
+			customGradient: true,
+			defaultDuotone: true,
+			defaultGradients: true,
+			defaultPalette: true,
+			duotone: {
+				default: [
+					{
+						name: 'Dark grayscale',
+						colors: [ '#000000', '#7f7f7f' ],
+						slug: 'dark-grayscale',
+					},
+					{
+						name: 'Grayscale',
+						colors: [ '#000000', '#ffffff' ],
+						slug: 'grayscale',
+					},
+					{
+						name: 'Purple and yellow',
+						colors: [ '#8c00b7', '#fcff41' ],
+						slug: 'purple-yellow',
+					},
+					{
+						name: 'Blue and red',
+						colors: [ '#000097', '#ff4747' ],
+						slug: 'blue-red',
+					},
+					{
+						name: 'Midnight',
+						colors: [ '#000000', '#00a5ff' ],
+						slug: 'midnight',
+					},
+					{
+						name: 'Magenta and yellow',
+						colors: [ '#c7005a', '#fff278' ],
+						slug: 'magenta-yellow',
+					},
+					{
+						name: 'Purple and green',
+						colors: [ '#a60072', '#67ff66' ],
+						slug: 'purple-green',
+					},
+					{
+						name: 'Blue and orange',
+						colors: [ '#1900d8', '#ffa96b' ],
+						slug: 'blue-orange',
+					},
+				],
+			},
+			gradients: {
+				default: [
+					{
+						name: 'Vivid cyan blue to vivid purple',
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						name: 'Light green cyan to vivid green cyan',
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+					{
+						name: 'Luminous vivid amber to luminous vivid orange',
+						gradient:
+							'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+						slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+					},
+					{
+						name: 'Luminous vivid orange to vivid red',
+						gradient:
+							'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+						slug: 'luminous-vivid-orange-to-vivid-red',
+					},
+					{
+						name: 'Very light gray to cyan bluish gray',
+						gradient:
+							'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+						slug: 'very-light-gray-to-cyan-bluish-gray',
+					},
+					{
+						name: 'Cool to warm spectrum',
+						gradient:
+							'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+						slug: 'cool-to-warm-spectrum',
+					},
+					{
+						name: 'Blush light purple',
+						gradient:
+							'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
+						slug: 'blush-light-purple',
+					},
+					{
+						name: 'Blush bordeaux',
+						gradient:
+							'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
+						slug: 'blush-bordeaux',
+					},
+					{
+						name: 'Luminous dusk',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
+						slug: 'luminous-dusk',
+					},
+					{
+						name: 'Pale ocean',
+						gradient:
+							'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+						slug: 'pale-ocean',
+					},
+					{
+						name: 'Electric grass',
+						gradient:
+							'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
+						slug: 'electric-grass',
+					},
+					{
+						name: 'Midnight',
+						gradient:
+							'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+						slug: 'midnight',
+					},
+				],
+			},
+			link: true,
+			palette: {
+				default: [
+					{
+						name: 'Black',
+						slug: 'black',
+						color: '#000000',
+					},
+					{
+						name: 'Cyan bluish gray',
+						slug: 'cyan-bluish-gray',
+						color: '#abb8c3',
+					},
+					{
+						name: 'White',
+						slug: 'white',
+						color: '#ffffff',
+					},
+					{
+						name: 'Pale pink',
+						slug: 'pale-pink',
+						color: '#f78da7',
+					},
+					{
+						name: 'Vivid red',
+						slug: 'vivid-red',
+						color: '#cf2e2e',
+					},
+					{
+						name: 'Luminous vivid orange',
+						slug: 'luminous-vivid-orange',
+						color: '#ff6900',
+					},
+					{
+						name: 'Luminous vivid amber',
+						slug: 'luminous-vivid-amber',
+						color: '#fcb900',
+					},
+					{
+						name: 'Light green cyan',
+						slug: 'light-green-cyan',
+						color: '#7bdcb5',
+					},
+					{
+						name: 'Vivid green cyan',
+						slug: 'vivid-green-cyan',
+						color: '#00d084',
+					},
+					{
+						name: 'Pale cyan blue',
+						slug: 'pale-cyan-blue',
+						color: '#8ed1fc',
+					},
+					{
+						name: 'Vivid cyan blue',
+						slug: 'vivid-cyan-blue',
+						color: '#0693e3',
+					},
+					{
+						name: 'Vivid purple',
+						slug: 'vivid-purple',
+						color: '#9b51e0',
+					},
+				],
+				theme: [
+					{
+						color: '#ffffff',
+						name: 'Base',
+						slug: 'base',
+					},
+					{
+						color: '#000000',
+						name: 'Contrast',
+						slug: 'contrast',
+					},
+					{
+						color: '#9DFF20',
+						name: 'Primary',
+						slug: 'primary',
+					},
+					{
+						color: '#345C00',
+						name: 'Secondary',
+						slug: 'secondary',
+					},
+					{
+						color: '#F6F6F6',
+						name: 'Tertiary',
+						slug: 'tertiary',
+					},
+				],
+			},
+			text: true,
+		},
+		shadow: {
+			defaultPresets: true,
+			presets: {
+				default: [
+					{
+						name: 'Natural',
+						slug: 'natural',
+						shadow: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Deep',
+						slug: 'deep',
+						shadow: '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					},
+					{
+						name: 'Sharp',
+						slug: 'sharp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Outlined',
+						slug: 'outlined',
+						shadow: '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					},
+					{
+						name: 'Crisp',
+						slug: 'crisp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 1)',
+					},
+				],
+			},
+		},
+		layout: {
+			contentSize: '650px',
+			wideSize: '1200px',
+		},
+		spacing: {
+			blockGap: true,
+			margin: true,
+			padding: true,
+			customSpacingSize: true,
+			units: [ '%', 'px', 'em', 'rem', 'vh', 'vw' ],
+			spacingScale: {
+				operator: '*',
+				increment: 1.5,
+				steps: 0,
+				mediumStep: 1.5,
+				unit: 'rem',
+			},
+			spacingSizes: {
+				theme: [
+					{
+						size: 'clamp(1.5rem, 5vw, 2rem)',
+						slug: '30',
+						name: '1',
+					},
+					{
+						size: 'clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+						slug: '40',
+						name: '2',
+					},
+					{
+						size: 'clamp(2.5rem, 8vw, 4.5rem)',
+						slug: '50',
+						name: '3',
+					},
+					{
+						size: 'clamp(3.75rem, 10vw, 7rem)',
+						slug: '60',
+						name: '4',
+					},
+					{
+						size: 'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+						slug: '70',
+						name: '5',
+					},
+					{
+						size: 'clamp(7rem, 14vw, 11rem)',
+						slug: '80',
+						name: '6',
+					},
+				],
+			},
+		},
+		typography: {
+			customFontSize: true,
+			dropCap: false,
+			fontSizes: {
+				default: [
+					{
+						name: 'Small',
+						slug: 'small',
+						size: '13px',
+					},
+					{
+						name: 'Medium',
+						slug: 'medium',
+						size: '20px',
+					},
+					{
+						name: 'Large',
+						slug: 'large',
+						size: '36px',
+					},
+					{
+						name: 'Extra Large',
+						slug: 'x-large',
+						size: '42px',
+					},
+				],
+			},
+			fontStyle: true,
+			fontWeight: true,
+			letterSpacing: true,
+			lineHeight: true,
+			textColumns: false,
+			textDecoration: true,
+			textTransform: true,
+			fluid: true,
+			fontFamilies: {
+				theme: [
+					{
+						fontFamily:
+							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+						name: 'System Font',
+						slug: 'system-font',
+					},
+				],
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		position: {
+			fixed: true,
+			sticky: true,
+		},
+	},
+	styles: {
+		blocks: {},
+		elements: {},
+	},
+};
+
+export const GlobalStylesUI = () => {
+	const [ userGlobalStyles, setUserStyles ] = useState( {
+		settings: {},
+		styles: {},
+	} );
+	const context = useMemo( () => {
+		return {
+			isReady: true,
+			user: userGlobalStyles,
+			base: BASE_SETTINGS,
+			merged: mergeBaseAndUserConfigs( BASE_SETTINGS, userGlobalStyles ),
+			setUserConfig: setUserStyles,
+		};
+	}, [ userGlobalStyles, setUserStyles ] );
+	const wrapperStyle = {
+		width: 280,
+	};
+	return (
+		<ExperimentalBlockEditorProvider>
+			<GlobalStylesContext.Provider value={ context }>
+				<div style={ wrapperStyle }>
+					<GlobalStylesUIComponent
+						isStyleBookOpened={ false }
+						onCloseStyleBook={ () => {} }
+					/>
+				</div>
+			</GlobalStylesContext.Provider>
+		</ExperimentalBlockEditorProvider>
+	);
+};
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index a348bd72173b3d..24bee506479a44 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -27,7 +27,6 @@
 	max-width: 100%;
 }
 
-.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography,
 .edit-site-global-styles-screen-css {
 	margin: $grid-unit-20;
@@ -46,10 +45,10 @@
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
-	.component-color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-		flex-shrink: 0;
+	.color-block-support-panel {
+		padding-left: 0;
+		padding-right: 0;
+		border-top: none;
 	}
 }
 
@@ -84,13 +83,6 @@
 	margin: 0;
 }
 
-.edit-site-screen-text-color__control,
-.edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control,
-.edit-site-screen-background-color__control.has-no-tabs {
-	padding: $grid-unit-20;
-}
-
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 
@@ -123,12 +115,6 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__color-label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 15168b1e7f599b..b9319df5a4a9f1 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -27,11 +27,6 @@ import ScreenTypographyElement from './screen-typography-element';
 import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
-import ScreenBackgroundColor from './screen-background-color';
-import ScreenTextColor from './screen-text-color';
-import ScreenLinkColor from './screen-link-color';
-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';
@@ -184,6 +179,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenTypographyElement name={ name } element="heading" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/caption' }
+			>
+				<ScreenTypographyElement name={ name } element="caption" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -200,36 +201,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/background' }
-			>
-				<ScreenBackgroundColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
 				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/heading' }
-			>
-				<ScreenHeadingColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/button' }
-			>
-				<ScreenButtonColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
index eaad82acafa273..dc33ffb649c7de 100644
--- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -18,6 +18,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
@@ -33,7 +34,7 @@ export default function ListViewSidebar() {
 
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -59,7 +60,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView />
+				<PrivateListView />
 			</div>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
index 2e4ff413dfd450..41cf5c495b9bd0 100644
--- a/packages/edit-site/src/components/start-template-options/index.js
+++ b/packages/edit-site/src/components/start-template-options/index.js
@@ -4,7 +4,10 @@
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import {
+	__experimentalBlockPatternsList as BlockPatternsList,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -35,15 +38,40 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 
 const START_BLANK_TITLE = __( 'Start blank' );
 
-function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
-	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
-	const blockPatterns = useMemo(
-		() => [
+function useStartPatterns( fallbackContent ) {
+	const { slug, patterns } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEntityRecord } = select( coreStore );
+		const postId = getEditedPostId();
+		const postType = getEditedPostType();
+		const record = getEntityRecord( 'postType', postType, postId );
+		const { getSettings } = select( blockEditorStore );
+		return {
+			slug: record.slug,
+			patterns: getSettings().__experimentalBlockPatterns,
+		};
+	}, [] );
+
+	return useMemo( () => {
+		// filter patterns that are supposed to be used in the current template being edited.
+		return [
 			{
 				name: 'fallback',
 				blocks: parse( fallbackContent ),
 				title: __( 'Fallback content' ),
 			},
+			...patterns
+				.filter( ( pattern ) => {
+					return (
+						Array.isArray( pattern.templateTypes ) &&
+						pattern.templateTypes.some( ( templateType ) =>
+							slug.startsWith( templateType )
+						)
+					);
+				} )
+				.map( ( pattern ) => {
+					return { ...pattern, blocks: parse( pattern.content ) };
+				} ),
 			{
 				name: 'start-blank',
 				blocks: parse(
@@ -51,9 +79,13 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 				),
 				title: START_BLANK_TITLE,
 			},
-		],
-		[ fallbackContent ]
-	);
+		];
+	}, [ fallbackContent, slug, patterns ] );
+}
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
 
 	return (
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 5eca935ad0d257..a010f811dcf1d0 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -247,25 +247,19 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					{ ( tab ) => (
 						<Iframe
 							className="edit-site-style-book__iframe"
-							head={
-								<>
-									<EditorStyles styles={ settings.styles } />
-									<style>
-										{
-											// Forming a "block formatting context" to prevent margin collapsing.
-											// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-											`.is-root-container { display: flow-root; }
-											body { position: relative; padding: 32px !important; }` +
-												STYLE_BOOK_IFRAME_STYLES
-										}
-									</style>
-								</>
-							}
 							name="style-book-canvas"
 							tabIndex={ 0 }
 						>
-							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-							{ settings.svgFilters }
+							<EditorStyles styles={ settings.styles } />
+							<style>
+								{
+									// Forming a "block formatting context" to prevent margin collapsing.
+									// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+									`.is-root-container { display: flow-root; }
+											body { position: relative; padding: 32px !important; }` +
+										STYLE_BOOK_IFRAME_STYLES
+								}
+							</style>
 							<Examples
 								className={ classnames(
 									'edit-site-style-book__examples',
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index 881b117a75ccb3..cf84655258725b 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -1,5 +1,5 @@
 .edit-site-style-book {
-	background: $white; // Fallback color, overriden by JavaScript.
+	background: $white; // Fallback color, overridden by JavaScript.
 	border-radius: $radius-block-ui;
 	bottom: 0;
 	left: 0;
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 815aa6f6b20c32..5ee0efcd6fa7c3 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
@@ -45,6 +45,7 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.button.color.background': 'color',
 	'elements.button.typography.fontFamily': 'font-family',
 	'elements.button.typography.fontSize': 'font-size',
+	'elements.caption.color.text': 'color',
 	'elements.heading.color': 'color',
 	'elements.heading.color.background': 'color',
 	'elements.heading.typography.fontFamily': 'font-family',
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index 953fabf9953da7..ea21c61de1e153 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -6,8 +6,7 @@ import {
 	Modal,
 	Button,
 	ExternalLink,
-	Flex,
-	FlexItem,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -175,55 +174,30 @@ export default function PostLockedModal() {
 			isDismissible={ false }
 			className="editor-post-locked-modal"
 		>
-			{ !! userAvatar && (
-				<img
-					src={ userAvatar }
-					alt={ __( 'Avatar' ) }
-					className="editor-post-locked-modal__avatar"
-					width={ 64 }
-					height={ 64 }
-				/>
-			) }
-			<div>
-				{ !! isTakeover && (
-					<p>
-						{ createInterpolateElement(
-							userDisplayName
-								? sprintf(
-										/* translators: %s: user's display name */
-										__(
-											'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
-										),
-										userDisplayName
-								  )
-								: __(
-										'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
-								  ),
-							{
-								strong: <strong />,
-								PreviewLink: (
-									<ExternalLink href={ previewLink }>
-										{ __( 'preview' ) }
-									</ExternalLink>
-								),
-							}
-						) }
-					</p>
+			<HStack alignment="top" spacing={ 6 }>
+				{ !! userAvatar && (
+					<img
+						src={ userAvatar }
+						alt={ __( 'Avatar' ) }
+						className="editor-post-locked-modal__avatar"
+						width={ 64 }
+						height={ 64 }
+					/>
 				) }
-				{ ! isTakeover && (
-					<>
+				<div>
+					{ !! isTakeover && (
 						<p>
 							{ createInterpolateElement(
 								userDisplayName
 									? sprintf(
 											/* translators: %s: user's display name */
 											__(
-												'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+												'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 											),
 											userDisplayName
 									  )
 									: __(
-											'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+											'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 									  ),
 								{
 									strong: <strong />,
@@ -235,33 +209,55 @@ export default function PostLockedModal() {
 								}
 							) }
 						</p>
-						<p>
-							{ __(
-								'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
-							) }
-						</p>
-					</>
-				) }
-
-				<Flex
-					className="editor-post-locked-modal__buttons"
-					justify="flex-end"
-					expanded={ false }
-				>
+					) }
 					{ ! isTakeover && (
-						<FlexItem>
+						<>
+							<p>
+								{ createInterpolateElement(
+									userDisplayName
+										? sprintf(
+												/* translators: %s: user's display name */
+												__(
+													'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+												),
+												userDisplayName
+										  )
+										: __(
+												'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+										  ),
+									{
+										strong: <strong />,
+										PreviewLink: (
+											<ExternalLink href={ previewLink }>
+												{ __( 'preview' ) }
+											</ExternalLink>
+										),
+									}
+								) }
+							</p>
+							<p>
+								{ __(
+									'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
+								) }
+							</p>
+						</>
+					) }
+
+					<HStack
+						className="editor-post-locked-modal__buttons"
+						justify="flex-end"
+					>
+						{ ! isTakeover && (
 							<Button variant="tertiary" href={ unlockUrl }>
 								{ __( 'Take over' ) }
 							</Button>
-						</FlexItem>
-					) }
-					<FlexItem>
+						) }
 						<Button variant="primary" href={ allPostsUrl }>
 							{ allPostsLabel }
 						</Button>
-					</FlexItem>
-				</Flex>
-			</div>
+					</HStack>
+				</div>
+			</HStack>
 		</Modal>
 	);
 }
diff --git a/packages/editor/src/components/post-locked-modal/style.scss b/packages/editor/src/components/post-locked-modal/style.scss
index b9c43f5184169f..9225032b6d2289 100644
--- a/packages/editor/src/components/post-locked-modal/style.scss
+++ b/packages/editor/src/components/post-locked-modal/style.scss
@@ -2,10 +2,6 @@
 	@include break-small() {
 		max-width: $break-mobile;
 	}
-
-	.components-modal__content {
-		display: flex;
-	}
 }
 
 .editor-post-locked-modal__buttons {
@@ -15,5 +11,5 @@
 .editor-post-locked-modal__avatar {
 	border-radius: $radius-block-ui;
 	margin-top: $grid-unit-20;
-	margin-right: $grid-unit-30;
+	min-width: initial !important;
 }
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 178fc2c4954058..39f48d3bc811c4 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -17,6 +17,7 @@ import PostScheduleLabel from '../post-schedule/label';
 import { store as editorStore } from '../../store';
 
 const POSTNAME = '%postname%';
+const PAGENAME = '%pagename%';
 
 /**
  * Returns URL for a future post.
@@ -33,6 +34,10 @@ const getFuturePostUrl = ( post ) => {
 		return post.permalink_template.replace( POSTNAME, slug );
 	}
 
+	if ( post.permalink_template.includes( PAGENAME ) ) {
+		return post.permalink_template.replace( PAGENAME, slug );
+	}
+
 	return post.permalink_template;
 };
 
diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
index 4260c9af468965..57a774fc17e422 100644
--- a/packages/editor/src/components/post-type-support-check/index.js
+++ b/packages/editor/src/components/post-type-support-check/index.js
@@ -27,7 +27,7 @@ export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-		 ).some( ( key ) => !! postType.supports[ key ] );
+		).some( ( key ) => !! postType.supports[ key ] );
 	}
 
 	if ( ! isSupported ) {
diff --git a/packages/editor/src/components/theme-support-check/index.js b/packages/editor/src/components/theme-support-check/index.js
index 97828549217a7e..fb84b55f5f3707 100644
--- a/packages/editor/src/components/theme-support-check/index.js
+++ b/packages/editor/src/components/theme-support-check/index.js
@@ -17,7 +17,7 @@ export function ThemeSupportCheck( {
 } ) {
 	const isSupported = (
 		Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-	 ).some( ( key ) => {
+	).some( ( key ) => {
 		const supported = themeSupports?.[ key ] ?? false;
 		// 'post-thumbnails' can be boolean or an array of post types.
 		// In the latter case, we need to verify `postType` exists
diff --git a/packages/editor/src/utils/terms.js b/packages/editor/src/utils/terms.js
index e95987c02a6d17..2d34879548a56c 100644
--- a/packages/editor/src/utils/terms.js
+++ b/packages/editor/src/utils/terms.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -24,10 +19,25 @@ export function buildTermsTree( flatTerms ) {
 		};
 	} );
 
-	const termsByParent = groupBy( flatTermsWithParentAndChildren, 'parent' );
-	if ( termsByParent.null && termsByParent.null.length ) {
+	// All terms should have a `parent` because we're about to index them by it.
+	if (
+		flatTermsWithParentAndChildren.some( ( { parent } ) => parent === null )
+	) {
 		return flatTermsWithParentAndChildren;
 	}
+
+	const termsByParent = flatTermsWithParentAndChildren.reduce(
+		( acc, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{}
+	);
+
 	const fillWithChildren = ( terms ) => {
 		return terms.map( ( term ) => {
 			const children = termsByParent[ term.id ];
diff --git a/packages/element/README.md b/packages/element/README.md
index 9fda8a6c01eaf4..ec4d725062c2b9 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -25,23 +25,33 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ## Usage
 
-Let's render a customized greeting into an empty element:
+Let's render a customized greeting into an empty element.
+
+**Note:** `createRoot` was introduced with React 18, which is bundled with WordPress 6.2. Therefore it may be necessary to mount your component depending on which version of WordPress (and therefore React) you are currently using. This is possible by checking for an undefined import and falling back to the React 17 method of mounting an app using `render`.
+
+Assuming the following root element is present in the page:
 
 ```html
 <div id="greeting"></div>
-<script>
-	function Greeting( props ) {
-		return wp.element.createElement(
-			'span',
-			null,
-			'Hello ' + props.toWhom + '!'
-		);
-	}
-
-	wp.element
-		.createRoot( document.getElementById( 'greeting' ) )
-		.render( wp.element.createElement( Greeting, { toWhom: 'World' } ) );
-</script>
+```
+
+We can mount our app:
+
+```js
+import { createRoot, render, createElement } from '@wordpress/element';
+
+function Greeting( props ) {
+	return createElement( 'span', null, 'Hello ' + props.toWhom + '!' );
+}
+
+const domElement = document.getElementById( 'greeting' );
+const uiElement = createElement( Greeting, { toWhom: 'World' } );
+
+if ( createRoot ) {
+	createRoot( domElement ).render( uiElement );
+} else {
+	render( uiElement, domElement );
+}
 ```
 
 Refer to the [official React Quick Start guide](https://reactjs.org/docs/hello-world.html) for a more thorough walkthrough, in most cases substituting `React` and `ReactDOM` with `wp.element` in code examples.
@@ -168,7 +178,7 @@ You would have something like this as the conversionMap value:
 _Parameters_
 
 -   _interpolatedString_ `string`: The interpolation string to be parsed.
--   _conversionMap_ `Object`: The map used to convert the string to a react element.
+-   _conversionMap_ `Record<string, WPElement>`: The map used to convert the string to a react element.
 
 _Returns_
 
@@ -203,7 +213,11 @@ Creates a new React root for the target DOM node.
 
 _Related_
 
--   <https://reactjs.org/docs/react-dom-client.html#createroot>
+-   <https://react.dev/reference/react-dom/client/createRoot>
+
+_Changelog_
+
+`6.2.0` Introduced in WordPress core.
 
 ### findDOMNode
 
@@ -242,12 +256,13 @@ A component which renders its children without any wrapping element.
 
 ### hydrate
 
+> **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead.
+
 Hydrates a given element into the target DOM node.
 
-_Parameters_
+_Related_
 
--   _element_ `import('./react').WPElement`: Element to hydrate.
--   _target_ `HTMLElement`: DOM node into which element should be hydrated.
+-   <https://react.dev/reference/react-dom/hydrate>
 
 ### hydrateRoot
 
@@ -255,7 +270,11 @@ Creates a new React root for the target DOM node and hydrates it with a pre-gene
 
 _Related_
 
--   <https://reactjs.org/docs/react-dom-client.html#hydrateroot>
+-   <https://react.dev/reference/react-dom/client/hydrateRoot>
+
+_Changelog_
+
+`6.2.0` Introduced in WordPress core.
 
 ### isEmptyElement
 
@@ -334,12 +353,13 @@ _Returns_
 
 ### render
 
+> **Deprecated** since WordPress 6.2.0. Use `createRoot` instead.
+
 Renders a given element into the target DOM node.
 
-_Parameters_
+_Related_
 
--   _element_ `import('./react').WPElement`: Element to render.
--   _target_ `HTMLElement`: DOM node into which element should be rendered.
+-   <https://react.dev/reference/react-dom/render>
 
 ### renderToString
 
@@ -386,11 +406,13 @@ _Returns_
 
 ### unmountComponentAtNode
 
+> **Deprecated** since WordPress 6.2.0. Use `root.unmount()` instead.
+
 Removes any mounted element from the target DOM node.
 
-_Parameters_
+_Related_
 
--   _target_ `Element`: DOM node in which element is to be removed
+-   <https://react.dev/reference/react-dom/unmountComponentAtNode>
 
 ### useCallback
 
diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js
index c8e38c0f457434..761a01079f5a14 100644
--- a/packages/element/src/create-interpolate-element.js
+++ b/packages/element/src/create-interpolate-element.js
@@ -101,9 +101,9 @@ function createFrame(
  * }
  * ```
  *
- * @param {string} interpolatedString The interpolation string to be parsed.
- * @param {Object} conversionMap      The map used to convert the string to
- *                                    a react element.
+ * @param {string}                    interpolatedString The interpolation string to be parsed.
+ * @param {Record<string, WPElement>} conversionMap      The map used to convert the string to
+ *                                                       a react element.
  * @throws {TypeError}
  * @return {WPElement}  A wp element.
  */
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index 38ab823f357e6b..bd444b2828bef7 100644
--- a/packages/element/src/react-platform.js
+++ b/packages/element/src/react-platform.js
@@ -39,36 +39,39 @@ export { flushSync };
 /**
  * Renders a given element into the target DOM node.
  *
- * @param {import('./react').WPElement} element Element to render.
- * @param {HTMLElement}                 target  DOM node into which element should be rendered.
+ * @deprecated since WordPress 6.2.0. Use `createRoot` instead.
+ * @see https://react.dev/reference/react-dom/render
  */
 export { render };
 
 /**
  * Hydrates a given element into the target DOM node.
  *
- * @param {import('./react').WPElement} element Element to hydrate.
- * @param {HTMLElement}                 target  DOM node into which element should be hydrated.
+ * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
+ * @see https://react.dev/reference/react-dom/hydrate
  */
 export { hydrate };
 
 /**
  * Creates a new React root for the target DOM node.
  *
- * @see https://reactjs.org/docs/react-dom-client.html#createroot
+ * @since 6.2.0 Introduced in WordPress core.
+ * @see https://react.dev/reference/react-dom/client/createRoot
  */
 export { createRoot };
 
 /**
  * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
  *
- * @see https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ * @since 6.2.0 Introduced in WordPress core.
+ * @see https://react.dev/reference/react-dom/client/hydrateRoot
  */
 export { hydrateRoot };
 
 /**
  * Removes any mounted element from the target DOM node.
  *
- * @param {Element} target DOM node in which element is to be removed
+ * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
+ * @see https://react.dev/reference/react-dom/unmountComponentAtNode
  */
 export { unmountComponentAtNode };
diff --git a/packages/env/README.md b/packages/env/README.md
index efc4172c708ede..5c2ac83708a132 100644
--- a/packages/env/README.md
+++ b/packages/env/README.md
@@ -456,7 +456,7 @@ $ wp-env install-path
 
 You can customize the WordPress installation, plugins and themes that the development environment will use by specifying a `.wp-env.json` file in the directory that you run `wp-env` from.
 
-`.wp-env.json` supports six fields for options applicable to both the tests and development instances.
+`.wp-env.json` supports fields for options applicable to both the tests and development instances.
 
 | Field          | Type           | Default                                | Description                                                                                                                      |
 | -------------- | -------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
@@ -465,6 +465,7 @@ You can customize the WordPress installation, plugins and themes that the develo
 | `"plugins"`    | `string[]`     | `[]`                                   | A list of plugins to install and activate in the environment.                                                                    |
 | `"themes"`     | `string[]`     | `[]`                                   | A list of themes to install in the environment.                                                                                  |
 | `"port"`       | `integer`      | `8888` (`8889` for the tests instance) | The primary port number to use for the installation. You'll access the instance through the port: 'http://localhost:8888'.       |
+| `"testsPort"`       | `integer`      | `8889` | The port number for the test site. You'll access the instance through the port: 'http://localhost:8889'.       |
 | `"config"`     | `Object`       | See below.                             | Mapping of wp-config.php constants to their desired values.                                                                      |
 | `"mappings"`   | `Object`       | `"{}"`                                 | Mapping of WordPress directories to local directories to be mounted in the WordPress instance.                                   |
 
diff --git a/packages/env/lib/config/config.js b/packages/env/lib/config/config.js
index ca00aebacf4ba9..afb845ed0b16ed 100644
--- a/packages/env/lib/config/config.js
+++ b/packages/env/lib/config/config.js
@@ -331,7 +331,7 @@ function getNumberFromEnvVariable( varName ) {
  * Gets the `wp-env` home directory in which generated files are created.
  *
  * By default: '~/.wp-env/'. On Linux with snap packages: '~/wp-env/'. Can be
- * overriden with the WP_ENV_HOME environment variable.
+ * overridden with the WP_ENV_HOME environment variable.
  *
  * @return {Promise<string>} The absolute path to the `wp-env` home directory.
  */
diff --git a/packages/env/lib/config/test/config.js b/packages/env/lib/config/test/config.js
index 5552ecce9d70f4..f94ecd4c099568 100644
--- a/packages/env/lib/config/test/config.js
+++ b/packages/env/lib/config/test/config.js
@@ -825,7 +825,7 @@ describe( 'readConfig', () => {
 				)
 			);
 			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
+			// Custom port is overridden while testsPort gets the deault value.
 			expect( config ).toMatchObject( {
 				env: {
 					development: {
@@ -848,7 +848,7 @@ describe( 'readConfig', () => {
 				)
 			);
 			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
+			// Custom port is overridden while testsPort gets the deault value.
 			expect( config ).toMatchObject( {
 				env: {
 					development: {
@@ -884,7 +884,7 @@ describe( 'readConfig', () => {
 				)
 			);
 			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
+			// Custom port is overridden while testsPort gets the deault value.
 			expect( config ).toMatchObject( {
 				env: {
 					development: {
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index df8328d60f699e..45ead66387db7f 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -202,6 +202,7 @@ export { default as rotateRight } from './library/rotate-right';
 export { default as rss } from './library/rss';
 export { default as search } from './library/search';
 export { default as seen } from './library/seen';
+export { default as unseen } from './library/unseen';
 export { default as separator } from './library/separator';
 export { default as settings } from './library/settings';
 export { default as shadow } from './library/shadow';
diff --git a/packages/icons/src/library/unseen.js b/packages/icons/src/library/unseen.js
new file mode 100644
index 00000000000000..384c67d08ff55f
--- /dev/null
+++ b/packages/icons/src/library/unseen.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const unseen = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M4.67 10.664s-2.09 1.11-2.917 1.582l.494.87 1.608-.914.002.002c.343.502.86 1.17 1.563 1.84.348.33.742.663 1.185.976L5.57 16.744l.858.515 1.02-1.701a9.1 9.1 0 0 0 4.051 1.18V19h1v-2.263a9.1 9.1 0 0 0 4.05-1.18l1.021 1.7.858-.514-1.034-1.723c.442-.313.837-.646 1.184-.977.703-.669 1.22-1.337 1.563-1.839l.002-.003 1.61.914.493-.87c-1.75-.994-2.918-1.58-2.918-1.58l-.003.005a8.29 8.29 0 0 1-.422.689 10.097 10.097 0 0 1-1.36 1.598c-1.218 1.16-3.042 2.293-5.544 2.293-2.503 0-4.327-1.132-5.546-2.293a10.099 10.099 0 0 1-1.359-1.599 8.267 8.267 0 0 1-.422-.689l-.003-.005Z" />
+	</SVG>
+);
+
+export default unseen;
diff --git a/packages/plugins/README.md b/packages/plugins/README.md
index 8b7fbaf5d922d3..a5fee590d4fd18 100644
--- a/packages/plugins/README.md
+++ b/packages/plugins/README.md
@@ -68,6 +68,12 @@ const Layout = () => (
 );
 ```
 
+_Parameters_
+
+-   _props_ `Object`:
+-   _props.scope_ `string|undefined`:
+-   _props.onError_ `Function|undefined`:
+
 _Returns_
 
 -   `WPComponent`: The component to be rendered.
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 881e6fdf4530a0..8eb18d8512da37 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -30,6 +30,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"memize": "^1.1.0"
 	},
 	"peerDependencies": {
diff --git a/packages/plugins/src/components/plugin-area/index.js b/packages/plugins/src/components/plugin-area/index.js
index 30c9d59371206e..72147dba16292d 100644
--- a/packages/plugins/src/components/plugin-area/index.js
+++ b/packages/plugins/src/components/plugin-area/index.js
@@ -6,8 +6,9 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
 import { addAction, removeAction } from '@wordpress/hooks';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -16,9 +17,14 @@ import { PluginContextProvider } from '../plugin-context';
 import { PluginErrorBoundary } from '../plugin-error-boundary';
 import { getPlugins } from '../../api';
 
+const getPluginContext = memoize( ( icon, name ) => ( { icon, name } ) );
+
 /**
  * A component that renders all plugin fills in a hidden div.
  *
+ * @param {Object}             props
+ * @param {string|undefined}   props.scope
+ * @param {Function|undefined} props.onError
  * @example
  * ```js
  * // Using ES5 syntax
@@ -50,80 +56,61 @@ import { getPlugins } from '../../api';
  *
  * @return {WPComponent} The component to be rendered.
  */
-class PluginArea extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setPlugins = this.setPlugins.bind( this );
-		this.memoizedContext = memoize( ( name, icon ) => {
-			return {
-				name,
-				icon,
-			};
-		} );
-		this.state = this.getCurrentPluginsState();
-	}
+function PluginArea( { scope, onError } ) {
+	const store = useMemo( () => {
+		let lastValue;
 
-	getCurrentPluginsState() {
 		return {
-			plugins: getPlugins( this.props.scope ).map(
-				( { icon, name, render } ) => {
-					return {
-						Plugin: render,
-						context: this.memoizedContext( name, icon ),
-					};
-				}
-			),
-		};
-	}
+			subscribe( listener ) {
+				addAction(
+					'plugins.pluginRegistered',
+					'core/plugins/plugin-area/plugins-registered',
+					listener
+				);
+				addAction(
+					'plugins.pluginUnregistered',
+					'core/plugins/plugin-area/plugins-unregistered',
+					listener
+				);
+				return () => {
+					removeAction(
+						'plugins.pluginRegistered',
+						'core/plugins/plugin-area/plugins-registered'
+					);
+					removeAction(
+						'plugins.pluginUnregistered',
+						'core/plugins/plugin-area/plugins-unregistered'
+					);
+				};
+			},
+			getValue() {
+				const nextValue = getPlugins( scope );
 
-	componentDidMount() {
-		addAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered',
-			this.setPlugins
-		);
-		addAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered',
-			this.setPlugins
-		);
-	}
+				if ( ! isShallowEqual( lastValue, nextValue ) ) {
+					lastValue = nextValue;
+				}
 
-	componentWillUnmount() {
-		removeAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered'
-		);
-		removeAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered'
-		);
-	}
+				return lastValue;
+			},
+		};
+	}, [ scope ] );
 
-	setPlugins() {
-		this.setState( this.getCurrentPluginsState );
-	}
+	const plugins = useSyncExternalStore( store.subscribe, store.getValue );
 
-	render() {
-		return (
-			<div style={ { display: 'none' } }>
-				{ this.state.plugins.map( ( { context, Plugin } ) => (
-					<PluginContextProvider
-						key={ context.name }
-						value={ context }
-					>
-						<PluginErrorBoundary
-							name={ context.name }
-							onError={ this.props.onError }
-						>
-							<Plugin />
-						</PluginErrorBoundary>
-					</PluginContextProvider>
-				) ) }
-			</div>
-		);
-	}
+	return (
+		<div style={ { display: 'none' } }>
+			{ plugins.map( ( { icon, name, render: Plugin } ) => (
+				<PluginContextProvider
+					key={ name }
+					value={ getPluginContext( icon, name ) }
+				>
+					<PluginErrorBoundary name={ name } onError={ onError }>
+						<Plugin />
+					</PluginErrorBoundary>
+				</PluginContextProvider>
+			) ) }
+		</div>
+	);
 }
 
 export default PluginArea;
diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js
new file mode 100644
index 00000000000000..42ea556081ae2a
--- /dev/null
+++ b/packages/plugins/src/components/test/plugin-area.js
@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import { act, render, cleanup } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { getPlugins, unregisterPlugin, registerPlugin } from '../../api';
+import PluginArea from '../plugin-area';
+
+describe( 'PluginArea', () => {
+	afterEach( () => {
+		// Unmount components before unregistering the plugins.
+		// RTL uses top-level `afterEach` for cleanup, executed after this teardown.
+		cleanup();
+		getPlugins().forEach( ( plugin ) => {
+			unregisterPlugin( plugin.name );
+		} );
+		getPlugins( 'my-app' ).forEach( ( plugin ) => {
+			unregisterPlugin( plugin.name );
+		} );
+	} );
+
+	const TestComponent = ( { content } ) => {
+		return `plugin: ${ content }.`;
+	};
+
+	test( 'renders unscoped plugin', () => {
+		registerPlugin( 'unscoped', {
+			render: () => <TestComponent content="unscoped" />,
+			icon: 'smiley',
+		} );
+
+		const { container } = render( <PluginArea /> );
+
+		expect( container ).toHaveTextContent( 'plugin: unscoped.' );
+	} );
+
+	test( 'renders scoped plugin', () => {
+		registerPlugin( 'scoped', {
+			render: () => <TestComponent content="scoped" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		expect( container ).toHaveTextContent( 'plugin: scoped.' );
+	} );
+
+	test( 'rerenders when a new plugin is registered', () => {
+		registerPlugin( 'foo', {
+			render: () => <TestComponent content="foo" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		act( () => {
+			registerPlugin( 'bar', {
+				render: () => <TestComponent content="bar" />,
+				icon: 'smiley',
+				scope: 'my-app',
+			} );
+		} );
+
+		expect( container ).toHaveTextContent( 'plugin: bar.' );
+	} );
+
+	test( 'rerenders when a plugin is unregistered', () => {
+		registerPlugin( 'one', {
+			render: () => <TestComponent content="one" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+		registerPlugin( 'two', {
+			render: () => <TestComponent content="two" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		expect( container ).toHaveTextContent( 'plugin: one.plugin: two.' );
+
+		act( () => {
+			unregisterPlugin( 'one' );
+		} );
+
+		expect( container ).toHaveTextContent( 'plugin: two.' );
+	} );
+
+	test( 'does not rerender when a plugin is added to a different scope', () => {
+		const ComponentSpy = jest.fn( ( { content } ) => {
+			return `plugin: ${ content }.`;
+		} );
+
+		registerPlugin( 'scoped', {
+			render: () => <ComponentSpy content="scoped" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		render( <PluginArea scope="my-app" /> );
+
+		act( () => {
+			registerPlugin( 'unscoped', {
+				render: () => <TestComponent content="unscoped" />,
+				icon: 'smiley',
+			} );
+		} );
+
+		expect( ComponentSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/private-apis/tsconfig.json b/packages/private-apis/tsconfig.json
index e5cd68c790b824..671d4a5eba4403 100644
--- a/packages/private-apis/tsconfig.json
+++ b/packages/private-apis/tsconfig.json
@@ -7,6 +7,3 @@
 	},
 	"include": [ "src/**/*" ]
 }
-
-
-
diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle
index 341cb437cdf44b..991fb23e51b9ad 100644
--- a/packages/react-native-aztec/android/build.gradle
+++ b/packages/react-native-aztec/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         robolectricVersion = '3.5.1'
         jUnitVersion = '4.12'
         jSoupVersion = '1.10.3'
-        wordpressUtilsVersion = '2.3.0'
+        wordpressUtilsVersion = '3.3.0'
         espressoVersion = '3.0.1'
         aztecVersion = 'v1.6.3'
     }
diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
index cc87ef29e9704b..166d86834bc131 100644
--- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
+++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
@@ -101,7 +101,7 @@ class RCTAztecView: Aztec.TextView {
     /// This helps to avoid propagating that unwanted empty string to RN. (Solving #606)
     /// on `textViewDidChange` and `textViewDidChangeSelection`
     private var isInsertingDictationResult = false
-
+    
     // MARK: - Font
 
     /// Flag to enable using the defaultFont in Aztec for specific blocks
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index 2c983b5f141bb9..0ee37b52977792 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.90.0",
+	"version": "1.91.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle
index 931d21ed26e601..ae22807d9495ad 100644
--- a/packages/react-native-bridge/android/react-native-bridge/build.gradle
+++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle
@@ -60,7 +60,7 @@ dependencies {
     // For animated GIF support
     implementation 'com.facebook.fresco:animated-gif:2.0.0'
     implementation 'com.google.android.material:material:1.2.1'
-    implementation "org.wordpress:utils:2.3.0"
+    implementation "org.wordpress:utils:3.3.0"
 
     testImplementation "junit:junit:4.13"
 
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
index 9c3a25a5ed0762..1933acec052aaa 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
@@ -9,5 +9,6 @@ interface RNMedia {
     val caption: String
     val title: String
     val alt: String
+    val metadata: WritableMap
     fun toMap(): WritableMap
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
index d225593d8eef4d..0ef03e5f1fbdae 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
@@ -15,7 +15,8 @@ data class Media(
     override val type: String,
     override val caption: String = "",
     override val title: String = "",
-    override val alt: String = ""
+    override val alt: String = "",
+    override val metadata: WritableMap = WritableNativeMap()
 ) : RNMedia {
     override fun toMap(): WritableMap = WritableNativeMap().apply {
         putInt("id", id)
@@ -24,6 +25,7 @@ data class Media(
         putString("caption", caption)
         putString("title", title)
         putString("alt", alt)
+        putMap("metadata", metadata)
     }
 
     companion object {
@@ -58,9 +60,11 @@ data class Media(
             mimeType: String?,
             caption: String?,
             title: String?,
+            alt: String?,
+            metadata: WritableNativeMap = WritableNativeMap()
         ): Media {
             val type = convertToType(mimeType)
-            return Media(id, url, type, caption ?: "", title ?: "")
+            return Media(id, url, type, caption ?: "", title ?: "", alt ?: "", metadata)
         }
     }
 }
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
index 56296d509868d3..9a2aefbfdf81b8 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -5,14 +5,20 @@ public struct MediaInfo: Encodable {
     public let title: String?
     public let caption: String?
     public let alt: String?
+    public let metadata: [String: Any]
 
-    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil) {
+    private enum CodingKeys: String, CodingKey {
+        case id, url, type, title, caption, alt
+    }
+
+    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil, metadata: [String: Any] = [:]) {
         self.id = id
         self.url = url
         self.type = type
         self.caption = caption
         self.title = title
         self.alt = alt
+        self.metadata = metadata
     }
 }
 
diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
index 8d11028728a891..8ce80ea7f61370 100644
--- a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
+++ b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
@@ -71,7 +71,7 @@ open class GutenbergWebSingleBlockViewController: UIViewController {
     }
 
     /// Called when Gutenberg Web editor is loaded in the web view.
-    /// If overriden, is required to call super.onGutenbergReady()
+    /// If overridden, is required to call super.onGutenbergReady()
     open func onGutenbergReady() {
         onGutenbergReadyScripts().forEach(evaluateJavascript)
         evaluateJavascript(jsInjection.preventAutosavesScript)
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index 162bdc3fec7d7c..e751bbe4d838c3 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -468,12 +468,13 @@ extension MediaInfo {
     func encodeForJS() -> [String: Any] {
         guard
             let data = try? JSONEncoder().encode(self),
-            let jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] else
+            var jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] else
         {
             assertionFailure("Encoding of MediaInfo failed")
             return [String: Any]()
         }
 
+        jsonObject["metadata"] = self.metadata
         return jsonObject
     }
 }
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index ec1c572a97d345..b523f26f62f9bf 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.90.0",
+	"version": "1.91.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 463d7717dec8ca..fad6fcf6f46854 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,9 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.91.0
+-   [*] Allow new block transformations for most blocks. [#48792]
+
 ## 1.90.0
 -   [*] Fix parsing of css units for null matched values [#48484]
 -   [*] Spacer block - Add initial support for spacing presets [#47258]
diff --git a/packages/react-native-editor/__device-tests__/README.md b/packages/react-native-editor/__device-tests__/README.md
index 3252b378c4a504..0da1501250a77b 100644
--- a/packages/react-native-editor/__device-tests__/README.md
+++ b/packages/react-native-editor/__device-tests__/README.md
@@ -8,15 +8,21 @@ SauceLabs is a cloud hosting platform that provides access to a variety of simul
 
 ## Getting set up to run the tests
 
-### Emulators && Simulators
+### Emulators & Simulators
 
-iOS: Once you've already set up XCode and the simulators you should be good to go to run the tests on an iOS simulator.
+> **Note**
+>
+> Visual regression tests that rely upon screenshots require specific devices and OS versions for Android and iOS, respectively, otherwise the tests will fail due to subtle OS differences. To run or update visual regression tests, install the emulators/simulators listed in the test suite [configuration files](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-editor/__device-tests__/helpers/caps.js#L30-L31).
 
-Android: You'll need to have created the emulator images and fired up the desired emulator before running the tests against an Android emulator.
+**iOS:** If you have completed the [React Native Getting Started](https://reactnative.dev/docs/environment-setup) guide you should already have XCode installed and the simulators set up.
 
-### Real Devices
+**Android:** If you have completed the [React Native Getting Started](https://reactnative.dev/docs/environment-setup) guide you should already have Android Studio installed and the Android SDK installed. You'll also need to have the [Android Emulator](https://developer.android.com/studio/run/emulator) installed and set up. The emulator needs to be running prior to running the tests.
 
-TBA
+### Physical Devices
+
+**iOS:** Currently unsupported.
+
+**Android:** Connect your device to your computer via USB and [enable USB debugging](https://developer.android.com/studio/debug/dev-options).
 
 ## Running the tests locally
 
diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
index 329f32e9cb3156..79f3ad5d1c9807 100644
--- a/packages/react-native-editor/__device-tests__/helpers/utils.js
+++ b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -514,6 +514,26 @@ const toggleOrientation = async ( driver ) => {
 	}
 };
 
+/**
+ * Toggle the device dark mode.
+ *
+ * @param {Object}  driver   Driver
+ * @param {boolean} darkMode Whether to enable dark mode or not
+ */
+const toggleDarkMode = ( driver, darkMode = true ) => {
+	if ( isAndroid() ) {
+		return driver.execute( 'mobile: shell', [
+			{
+				command: `cmd uimode night  ${ darkMode ? 'yes' : 'no' }`,
+			},
+		] );
+	}
+
+	return driver.execute( 'mobile: setAppearance', {
+		style: darkMode ? 'dark' : 'light',
+	} );
+};
+
 const isEditorVisible = async ( driver ) => {
 	const postTitleLocator = isAndroid()
 		? `//android.widget.EditText[contains(@content-desc, "Post title")]`
@@ -706,6 +726,7 @@ module.exports = {
 	tapPasteAboveElement,
 	tapSelectAllAboveElement,
 	timer,
+	toggleDarkMode,
 	toggleHtmlMode,
 	toggleOrientation,
 	typeString,
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index f598973af38be6..cbedc7fc8a9552 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -11,7 +11,6 @@ const {
 	doubleTap,
 	isAndroid,
 	isEditorVisible,
-	longPressMiddleOfElement,
 	setClipboard,
 	setupDriver,
 	stopDriver,
@@ -385,28 +384,9 @@ class EditorPage {
 		return await this.driver.elementsByAccessibilityId( 'Document tools' );
 	}
 
-	async addNewBlock( blockName, relativePosition ) {
-		const addButton = await this.getAddBlockButton();
-
-		if ( relativePosition === 'before' ) {
-			// On Android it doesn't get the right size of the button
-			const customElementSize = {
-				width: 43,
-				height: 43,
-			};
-
-			await longPressMiddleOfElement(
-				this.driver,
-				addButton,
-				8000,
-				customElementSize
-			);
-			const addBlockBeforeButtonLocator = isAndroid()
-				? '//android.widget.Button[@content-desc="Add Block Before"]'
-				: '//XCUIElementTypeButton[@name="Add Block Before"]';
-
-			await clickIfClickable( this.driver, addBlockBeforeButtonLocator );
-		} else {
+	async addNewBlock( blockName, { skipInserterOpen = false } = {} ) {
+		if ( ! skipInserterOpen ) {
+			const addButton = await this.getAddBlockButton();
 			await addButton.click();
 		}
 
@@ -439,6 +419,11 @@ class EditorPage {
 		);
 	}
 
+	static async isElementOutOfBounds( element, { width, height } = {} ) {
+		const { x, y } = await element.getLocation();
+		return x > width || y > height;
+	}
+
 	// Attempts to find the given block button in the block inserter control.
 	async findBlockButton( blockName ) {
 		await this.waitForInserter();
@@ -494,7 +479,10 @@ class EditorPage {
 		// We start dragging a bit above it to not trigger home button.
 		const height = size.height - 50;
 
-		while ( ! ( await blockButton.isDisplayed() ) ) {
+		while (
+			! ( await blockButton.isDisplayed() ) ||
+			( await EditorPage.isElementOutOfBounds( blockButton, { height } ) )
+		) {
 			await this.driver.execute( 'mobile: dragFromToForDuration', {
 				fromX: 50,
 				fromY: height,
@@ -980,6 +968,7 @@ const blockNames = {
 	group: 'Group',
 	buttons: 'Buttons',
 	button: 'Button',
+	preformatted: 'Preformatted',
 };
 
 module.exports = { initializeEditorPage, blockNames };
diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle
index 4dd7d1338ff514..d143a36952ee1c 100644
--- a/packages/react-native-editor/android/app/build.gradle
+++ b/packages/react-native-editor/android/app/build.gradle
@@ -239,9 +239,7 @@ android {
 dependencies {
     def packageJson = '../../package.json'
 
-    implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", {
-        exclude group: 'org.wordpress', module: 'utils'
-    })
+    implementation "org.wordpress-mobile.gutenberg-mobile:react-native-bridge"
     implementation 'androidx.appcompat:appcompat:1.2.0'
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:${extractPackageVersion(packageJson, 'react-native', 'dependencies')}"
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
index 8356db02d07627..bd452e2ecbfd52 100644
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -17,6 +17,7 @@
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableNativeMap;
 import com.reactnativecommunity.clipboard.ClipboardPackage;
 import com.reactnativecommunity.slider.ReactSliderPackage;
 import com.brentvatne.react.ReactVideoPackage;
@@ -44,6 +45,7 @@
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 import org.reactnative.maskedview.RNCMaskedViewPackage;
+import org.wordpress.mobile.WPAndroidGlue.Media;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
 import java.lang.reflect.InvocationTargetException;
@@ -82,20 +84,27 @@ public void requestMediaPickFromDeviceLibrary(MediaSelectedCallback mediaSelecte
             @Override
             public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
                 List<RNMedia> rnMediaList = new ArrayList<>();
+                WritableNativeMap emptyMetadata = new WritableNativeMap();
 
                 switch (mediaType) {
                     case IMAGE:
-                        rnMediaList.add(createRNMediaUsingMimeType(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground"));
+                        Media image = new Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground", emptyMetadata);
+                        rnMediaList.add(image);
                         break;
                     case VIDEO:
-                        rnMediaList.add(createRNMediaUsingMimeType(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", ""));
+                        WritableNativeMap metadata = new WritableNativeMap();
+                        metadata.putString("extraID", "AbCdE");
+                        Media video = new Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "", "", metadata);
+                        rnMediaList.add(video);
                         break;
                     case ANY:
                     case OTHER:
-                        rnMediaList.add(createRNMediaUsingMimeType(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip"));
+                        Media other = new Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip", "", emptyMetadata);
+                        rnMediaList.add(other);
                         break;
                     case AUDIO:
-                        rnMediaList.add(createRNMediaUsingMimeType(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
+                        Media audio = new Media(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", "", "", emptyMetadata);
+                        rnMediaList.add(audio);
                         break;
                 }
                 mediaSelectedCallback.onMediaFileSelected(rnMediaList);
@@ -147,7 +156,8 @@ public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMe
             public void requestMediaPickFrom(String mediaSource, MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection) {
                 if (mediaSource.equals("1")) {
                     List<RNMedia> rnMediaList = new ArrayList<>();
-                    rnMediaList.add(createRNMediaUsingMimeType(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf"));
+                    Media pdf = new Media(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf", "", new WritableNativeMap());
+                    rnMediaList.add(pdf);
                     mediaSelectedCallback.onMediaFileSelected(rnMediaList);
                 }
             }
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index cb485a6bca720c..fd851712e2a926 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -97,7 +97,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
                     callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video"),
                               MediaInfo(id: 4, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video")])
                 } else {
-                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup")])
+                    let metadata = ["extraID": "AbCdE"]
+                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup", metadata: metadata)])
                 }
             case .other, .any:
                  callback([MediaInfo(id: 3, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")])
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 403f06f95d2cb0..0d425360aa2e6b 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.90.0):
+  - Gutenberg (1.91.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.90.0):
+  - RNTAztecView (1.91.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: dbb0140a7159408f2cd8031d841c7adf98e1e9ca
+  Gutenberg: fd67b0394a094ed0d475f00705ece86d99b846be
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
   RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
   RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4
@@ -588,7 +588,7 @@ SPEC CHECKSUMS:
   RNReanimated: bea6acb5fdcbd8ca27641180579d09e3434f803c
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 0ef32f75b63813ac5e7675696fa074d3062b8e91
+  RNTAztecView: a632287ad9e3807fe0b4460efa329b54111af4a3
   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 8d83f7ada8aebd..f7bda6bf1cba15 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.90.0",
+	"version": "1.91.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/get-active-format.js b/packages/rich-text/src/get-active-format.js
index 783177168b60ab..a259b094272f37 100644
--- a/packages/rich-text/src/get-active-format.js
+++ b/packages/rich-text/src/get-active-format.js
@@ -19,7 +19,7 @@ import { getActiveFormats } from './get-active-formats';
  *                                    type, or undefined.
  */
 export function getActiveFormat( value, formatType ) {
-	return getActiveFormats( value )?.find(
+	return getActiveFormats( value ).find(
 		( { type } ) => type === formatType
 	);
 }
diff --git a/packages/rich-text/src/get-active-formats.js b/packages/rich-text/src/get-active-formats.js
index 256c95eca01431..09bbef0cf2d6cf 100644
--- a/packages/rich-text/src/get-active-formats.js
+++ b/packages/rich-text/src/get-active-formats.js
@@ -1,6 +1,11 @@
 /** @typedef {import('./create').RichTextValue} RichTextValue */
 /** @typedef {import('./create').RichTextFormatList} RichTextFormatList */
 
+/**
+ * Internal dependencies
+ */
+import { isFormatEqual } from './is-format-equal';
+
 /**
  * Gets the all format objects at the start of the selection.
  *
@@ -10,10 +15,8 @@
  *
  * @return {RichTextFormatList} Active format objects.
  */
-export function getActiveFormats(
-	{ formats, start, end, activeFormats },
-	EMPTY_ACTIVE_FORMATS = []
-) {
+export function getActiveFormats( value, EMPTY_ACTIVE_FORMATS = [] ) {
+	const { formats, start, end, activeFormats } = value;
 	if ( start === undefined ) {
 		return EMPTY_ACTIVE_FORMATS;
 	}
@@ -37,5 +40,49 @@ export function getActiveFormats(
 		return formatsAfter;
 	}
 
-	return formats[ start ] || EMPTY_ACTIVE_FORMATS;
+	// If there's no formats at the start index, there are not active formats.
+	if ( ! formats[ start ] ) {
+		return EMPTY_ACTIVE_FORMATS;
+	}
+
+	const selectedFormats = formats.slice( start, end );
+
+	// Clone the formats so we're not mutating the live value.
+	const _activeFormats = [ ...selectedFormats[ 0 ] ];
+	let i = selectedFormats.length;
+
+	// For performance reasons, start from the end where it's much quicker to
+	// realise that there are no active formats.
+	while ( i-- ) {
+		const formatsAtIndex = selectedFormats[ i ];
+
+		// If we run into any index without formats, we're sure that there's no
+		// active formats.
+		if ( ! formatsAtIndex ) {
+			return EMPTY_ACTIVE_FORMATS;
+		}
+
+		let ii = _activeFormats.length;
+
+		// Loop over the active formats and remove any that are not present at
+		// the current index.
+		while ( ii-- ) {
+			const format = _activeFormats[ ii ];
+
+			if (
+				! formatsAtIndex.find( ( _format ) =>
+					isFormatEqual( format, _format )
+				)
+			) {
+				_activeFormats.splice( ii, 1 );
+			}
+		}
+
+		// If there are no active formats, we can stop.
+		if ( _activeFormats.length === 0 ) {
+			return EMPTY_ACTIVE_FORMATS;
+		}
+	}
+
+	return _activeFormats || EMPTY_ACTIVE_FORMATS;
 }
diff --git a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
index 756d06885ea14d..a0eb7b3cb0a3ce 100644
--- a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
+++ b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
@@ -61,9 +61,7 @@ exports[`recordToDom should create a value with image object and formatting 1`]
 
 exports[`recordToDom should create a value with image object and text after 1`] = `
 <body>
-  <em
-    data-rich-text-format-boundary="true"
-  >
+  <em>
     
     <img
       src=""
diff --git a/packages/rich-text/src/test/get-active-format.js b/packages/rich-text/src/test/get-active-format.js
index eba352783c39ab..6ba279c7df2439 100644
--- a/packages/rich-text/src/test/get-active-format.js
+++ b/packages/rich-text/src/test/get-active-format.js
@@ -17,17 +17,28 @@ describe( 'getActiveFormat', () => {
 		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
 	} );
 
-	it( 'should return format at first character for uncollapsed selection', () => {
+	it( 'should return format when active over whole selection', () => {
 		const record = {
 			formats: [ [ em ], [ strong ], , ],
 			text: 'one',
 			start: 0,
-			end: 2,
+			end: 1,
 		};
 
 		expect( getActiveFormat( record, 'em' ) ).toBe( em );
 	} );
 
+	it( 'should return not return format when not active over whole selection', () => {
+		const record = {
+			formats: [ [ em ], [ strong ], , ],
+			text: 'one',
+			start: 0,
+			end: 2,
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+	} );
+
 	it( 'should return undefined if at the boundary before', () => {
 		const record = {
 			formats: [ [ em ], , [ em ] ],
diff --git a/packages/rich-text/src/test/toggle-format.js b/packages/rich-text/src/test/toggle-format.js
index 6a71412c413fb2..95f03947fa667d 100644
--- a/packages/rich-text/src/test/toggle-format.js
+++ b/packages/rich-text/src/test/toggle-format.js
@@ -14,15 +14,18 @@ describe( 'toggleFormat', () => {
 	const strong = { type: 'strong' };
 	const em = { type: 'em' };
 
-	it( 'should remove format if it exists at start of selection', () => {
+	it( 'should remove format if it is active', () => {
 		const record = {
 			formats: [
 				,
 				,
 				,
-				[ strong ],
+				// In reality, formats at a different index are never the same
+				// value. Only formats that create the same tag are the same
+				// value.
+				[ { type: 'strong' } ],
+				[ em, strong ],
 				[ em, strong ],
-				[ em ],
 				[ em ],
 				,
 				,
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index afe22e868a63ab..edd73573103672 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   The bundled `wp-prettier` dependency has been upgraded from `2.6.2` to `2.8.5` ([#49258](https://github.com/WordPress/gutenberg/pull/49258)).
+
 ## 26.0.0 (2023-03-15)
 
 ### Breaking Changes
diff --git a/packages/scripts/config/jest-environment-puppeteer/index.js b/packages/scripts/config/jest-environment-puppeteer/index.js
index af0a4ec165f4d9..9e903ab498e1df 100644
--- a/packages/scripts/config/jest-environment-puppeteer/index.js
+++ b/packages/scripts/config/jest-environment-puppeteer/index.js
@@ -42,11 +42,7 @@ const KEYS = {
 	ENTER: '\r',
 };
 
-const root = process.env.GITHUB_WORKSPACE || process.cwd();
-const ARTIFACTS_PATH = path.resolve(
-	root,
-	process.env.WP_ARTIFACTS_PATH || 'artifacts'
-);
+const { WP_ARTIFACTS_PATH } = process.env;
 
 class PuppeteerEnvironment extends NodeEnvironment {
 	// Jest is not available here, so we have to reverse engineer
@@ -172,7 +168,7 @@ class PuppeteerEnvironment extends NodeEnvironment {
 		await this.global.jestPuppeteer.resetBrowser();
 
 		try {
-			await mkdir( ARTIFACTS_PATH, { recursive: true } );
+			await mkdir( WP_ARTIFACTS_PATH, { recursive: true } );
 		} catch ( err ) {
 			if ( err.code !== 'EEXIST' ) {
 				throw err;
@@ -206,11 +202,11 @@ class PuppeteerEnvironment extends NodeEnvironment {
 			replacement: '-',
 		} );
 		await writeFile(
-			path.join( ARTIFACTS_PATH, `${ fileName }-snapshot.html` ),
+			path.join( WP_ARTIFACTS_PATH, `${ fileName }-snapshot.html` ),
 			await this.global.page.content()
 		);
 		await this.global.page.screenshot( {
-			path: path.join( ARTIFACTS_PATH, `${ fileName }.jpg` ),
+			path: path.join( WP_ARTIFACTS_PATH, `${ fileName }.jpg` ),
 		} );
 	}
 
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 5c565a16e41058..c32cb7b83bcfd1 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -73,7 +73,7 @@
 		"npm-packlist": "^3.0.0",
 		"postcss": "^8.4.5",
 		"postcss-loader": "^6.2.1",
-		"prettier": "npm:wp-prettier@2.6.2",
+		"prettier": "npm:wp-prettier@2.8.5",
 		"puppeteer-core": "^13.2.0",
 		"react-refresh": "^0.10.0",
 		"read-pkg-up": "^7.0.1",
diff --git a/packages/scripts/scripts/test-e2e.js b/packages/scripts/scripts/test-e2e.js
index 330439ce2121b7..bbaa2e910929c0 100644
--- a/packages/scripts/scripts/test-e2e.js
+++ b/packages/scripts/scripts/test-e2e.js
@@ -12,6 +12,7 @@ process.on( 'unhandledRejection', ( err ) => {
 /**
  * External dependencies
  */
+const path = require( 'path' );
 const jest = require( 'jest' );
 const { sync: spawn } = require( 'cross-spawn' );
 
@@ -77,6 +78,14 @@ Object.entries( configsMapping ).forEach( ( [ envKey, argName ] ) => {
 	}
 } );
 
+// Set the default artifacts path.
+if ( ! process.env.WP_ARTIFACTS_PATH ) {
+	process.env.WP_ARTIFACTS_PATH = path.resolve(
+		process.env.GITHUB_WORKSPACE || process.cwd(),
+		'artifacts'
+	);
+}
+
 const cleanUpPrefixes = [ '--puppeteer-', '--wordpress-' ];
 
 jest.run( [ ...config, ...runInBand, ...getArgsFromCLI( cleanUpPrefixes ) ] );
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index 63e75e01f49fd2..05ec31fcbccbcf 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { groupBy, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * Internal dependencies
@@ -36,7 +36,20 @@ export function compileCSS( style: Style, options: StyleOptions = {} ): string {
 		return inlineRules.join( ' ' );
 	}
 
-	const groupedRules = groupBy( rules, 'selector' );
+	const groupedRules = rules.reduce(
+		( acc: Record< string, GeneratedCSSRule[] >, rule ) => {
+			const { selector } = rule;
+			if ( ! selector ) {
+				return acc;
+			}
+			if ( ! acc[ selector ] ) {
+				acc[ selector ] = [];
+			}
+			acc[ selector ].push( rule );
+			return acc;
+		},
+		{}
+	);
 	const selectorRules = Object.keys( groupedRules ).reduce(
 		( acc: string[], subSelector: string ) => {
 			acc.push(
diff --git a/phpunit/block-supports/duotone-test.php b/phpunit/block-supports/duotone-test.php
deleted file mode 100644
index 3588950468aba4..00000000000000
--- a/phpunit/block-supports/duotone-test.php
+++ /dev/null
@@ -1,40 +0,0 @@
-<?php
-
-/**
- * Test the block duotone support.
- *
- * @package Gutenberg
- */
-
-class WP_Block_Supports_Duotone_Test extends WP_UnitTestCase {
-	public function test_gutenberg_render_duotone_support_preset() {
-		$block         = array(
-			'blockName' => 'core/image',
-			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|slug' ) ) ),
-		);
-		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '<figure class="wp-duotone-slug wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$this->assertSame( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
-	}
-
-	public function test_gutenberg_render_duotone_support_css() {
-		$block         = array(
-			'blockName' => 'core/image',
-			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
-		);
-		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '/<figure class="wp-duotone-unset-\d+ wp-block-image size-full"><img src="\\/my-image.jpg" \\/><\\/figure>/';
-		$this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
-	}
-
-	public function test_gutenberg_render_duotone_support_custom() {
-		$block         = array(
-			'blockName' => 'core/image',
-			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
-		);
-		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
-		$expected      = '/<figure class="wp-duotone-ffffff-000000-\d+ wp-block-image size-full"><img src="\\/my-image.jpg" \\/><\\/figure>/';
-		$this->assertMatchesRegularExpression( $expected, gutenberg_render_duotone_support( $block_content, $block ) );
-	}
-
-}
diff --git a/phpunit/blocks/render-block-navigation-submenu-test.php b/phpunit/blocks/render-block-navigation-submenu-test.php
new file mode 100644
index 00000000000000..86ca34f5b997f8
--- /dev/null
+++ b/phpunit/blocks/render-block-navigation-submenu-test.php
@@ -0,0 +1,213 @@
+<?php
+/**
+ * Tests server side rendering of core/navigation-submenu
+ *
+ * @package    Gutenberg
+ * @subpackage block-library
+ */
+
+/**
+ * Tests for various cases in Navigation Submenu rendering
+ */
+class Render_Block_Navigation_Submenu_Test extends WP_UnitTestCase {
+	private static $category;
+	private static $page;
+	private static $draft;
+	private static $custom_draft;
+	private static $custom_post;
+
+
+	/**
+	 * @var array|null
+	 */
+	private $original_block_supports;
+
+	public static function set_up_before_class() {
+		self::$page = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'page',
+				'post_status'  => 'publish',
+				'post_name'    => 'tabby',
+				'post_title'   => 'Tabby cats',
+				'post_content' => 'Tabby cat content',
+				'post_excerpt' => 'Tabby cat',
+			)
+		);
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
+		WP_Block_Supports::$block_to_render = array(
+			'attrs'     => array(),
+			'blockName' => '',
+		);
+	}
+
+	public function tear_down() {
+		WP_Block_Supports::$block_to_render = $this->original_block_supports;
+		parent::tear_down();
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_preset_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'       => 'purple',
+			'overlayBackgroundColor' => 'yellow',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$rendered_html = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$tags = new WP_HTML_Tag_Processor( $rendered_html );
+		$tags->next_tag(
+			array(
+				'tag_name'   => 'ul',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		);
+		$tags->get_attribute( 'class' );
+
+		$this->assertEquals(
+			'wp-block-navigation__submenu-container has-text-color has-purple-color has-background has-yellow-background-color',
+			$tags->get_attribute( 'class' ),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'customOverlayTextColor'       => '#BCC60A',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="color:' . $context['customOverlayTextColor'] . ';background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_mix_of_preset_and_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'             => 'purple',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-' . $context['overlayTextColor'] . '-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_not_apply_custom_colors_if_missing_from_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Intentionally empty - no colors.
+		$context = array();
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$actual = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$this->assertStringContainsString(
+			'<ul class="wp-block-navigation__submenu-container">',
+			$actual,
+			'Submenu block should not apply colors if missing from context'
+		);
+
+		$this->assertStringNotContainsString(
+			$actual,
+			'has-text-color has-background',
+			'Submenu block should not apply "has-*" color classes if missing from context'
+		);
+
+	}
+}
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index fac777864200a8..e15509e43143eb 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -134,6 +134,46 @@ function gutenberg_register_test_block_for_feature_selectors() {
 			),
 		)
 	);
+
+	WP_Block_Type_Registry::get_instance()->register(
+		'my/block-with-selectors',
+		array(
+			'api_version' => 2,
+			'attributes'  => array(
+				'textColor' => array(
+					'type' => 'string',
+				),
+				'style'     => array(
+					'type' => 'object',
+				),
+			),
+			'supports'    => array(
+				'__experimentalBorder' => array(
+					'radius' => true,
+				),
+				'color'                => array(
+					'background' => true,
+					'text'       => true,
+				),
+				'spacing'              => array(
+					'padding' => true,
+				),
+				'typography'           => array(
+					'fontSize' => true,
+				),
+			),
+			'selectors'   => array(
+				'root'       => '.custom-root-selector',
+				'border'     => array(
+					'root' => '.custom-root-selector img',
+				),
+				'color'      => array(
+					'text' => '.custom-root-selector > figcaption',
+				),
+				'typography' => '.custom-root-selector > figcaption',
+			),
+		)
+	);
 }
 tests_add_filter( 'init', 'gutenberg_register_test_block_for_feature_selectors' );
 
@@ -142,4 +182,3 @@ function gutenberg_register_test_block_for_feature_selectors() {
 
 // Use existing behavior for wp_die during actual test execution.
 remove_filter( 'wp_die_handler', 'fail_if_died' );
-
diff --git a/phpunit/class-wp-duotone-test.php b/phpunit/class-wp-duotone-test.php
new file mode 100644
index 00000000000000..49ef631e65f022
--- /dev/null
+++ b/phpunit/class-wp-duotone-test.php
@@ -0,0 +1,92 @@
+<?php
+
+/**
+ * Test the block WP_Duotone_Gutenberg class.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Duotone_Gutenberg_Test extends WP_UnitTestCase {
+	/**
+	 * Cleans up CSS added to block-supports from duotone styles. We neeed to do this
+	 * in order to avoid impacting other tests.
+	 */
+	public static function wpTearDownAfterClass() {
+		WP_Style_Engine_CSS_Rules_Store_Gutenberg::remove_all_stores();
+	}
+
+	public function test_gutenberg_render_duotone_support_preset() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
+		$this->assertSame( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+	public function test_gutenberg_render_duotone_support_css() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+	public function test_gutenberg_render_duotone_support_custom() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+	public function data_gutenberg_get_slug_from_attr() {
+		return array(
+			'pipe-slug'                       => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
+			'css-var'                         => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
+			'css-var-invalid-slug-chars'      => array( 'var(--wp--preset--duotone--.)', '.' ),
+			'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
+			'invalid'                         => array( 'not a valid attribute', '' ),
+			'css-var-no-value'                => array( 'var(--wp--preset--duotone--)', '' ),
+			'pipe-slug-no-value'              => array( 'var:preset|duotone|', '' ),
+			'css-var-spaces'                  => array( 'var(--wp--preset--duotone--    ', '' ),
+			'pipe-slug-spaces'                => array( 'var:preset|duotone|  ', '' ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_gutenberg_get_slug_from_attr
+	 */
+	public function test_gutenberg_get_slug_from_attr( $data_attr, $expected ) {
+
+		$reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'gutenberg_get_slug_from_attr' );
+		$reflection->setAccessible( true );
+
+		$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+	}
+
+	public function data_is_preset() {
+		return array(
+			'pipe-slug'                       => array( 'var:preset|duotone|blue-orange', true ),
+			'css-var'                         => array( 'var(--wp--preset--duotone--blue-orange)', true ),
+			'css-var-invalid-slug-chars'      => array( 'var(--wp--preset--duotone--.)', false ),
+			'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
+			'invalid'                         => array( 'not a valid attribute', false ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_is_preset
+	 */
+	public function test_is_preset( $data_attr, $expected ) {
+		$reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'is_preset' );
+		$reflection->setAccessible( true );
+
+		$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+	}
+}
diff --git a/phpunit/class-wp-get-block-css-selectors-test.php b/phpunit/class-wp-get-block-css-selectors-test.php
new file mode 100644
index 00000000000000..ba63f042a68dc0
--- /dev/null
+++ b/phpunit/class-wp-get-block-css-selectors-test.php
@@ -0,0 +1,331 @@
+<?php
+/**
+ * Tests_Get_Block_CSS_Selector class
+ *
+ * @package WordPress
+ */
+
+class WP_Get_Block_CSS_Selector_Test extends WP_UnitTestCase {
+	private $test_block_name;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+	}
+
+	public function tear_down() {
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	private function register_test_block( $name, $selectors = null, $supports = null ) {
+		$this->test_block_name = $name;
+
+		return register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 2,
+				'attributes'  => array(),
+				'selectors'   => $selectors,
+				'supports'    => $supports,
+			)
+		);
+	}
+
+	public function test_get_root_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/block-with-selectors',
+			array( 'root' => '.wp-custom-block-class' )
+		);
+
+		$selector = wp_get_block_css_selector( $block_type );
+		$this->assertEquals( '.wp-custom-block-class', $selector );
+	}
+
+	public function test_get_root_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/block-without-selectors',
+			null,
+			array( '__experimentalSelector' => '.experimental-selector' )
+		);
+
+		$selector = wp_get_block_css_selector( $block_type );
+		$this->assertEquals( '.experimental-selector', $selector );
+	}
+
+	public function test_default_root_selector_generation_for_core_block() {
+		$block_type = self::register_test_block(
+			'core/without-selectors-or-supports',
+			null,
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type );
+		$this->assertEquals( '.wp-block-without-selectors-or-supports', $selector );
+	}
+
+	public function test_default_root_selector_generation() {
+		$block_type = self::register_test_block(
+			'test/without-selectors-or-supports',
+			null,
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type );
+		$this->assertEquals( '.wp-block-test-without-selectors-or-supports', $selector );
+	}
+
+	public function test_get_duotone_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/duotone-selector',
+			array(
+				'filter' => array( 'duotone' => '.duotone-selector' ),
+			),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, array( 'filter', 'duotone' ) );
+		$this->assertEquals( '.duotone-selector', $selector );
+	}
+
+	public function test_get_duotone_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/experimental-duotone-selector',
+			null,
+			array(
+				'color' => array(
+					'__experimentalDuotone' => '.experimental-duotone',
+				),
+			)
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
+		$this->assertEquals( '.experimental-duotone', $selector );
+	}
+
+	public function test_no_duotone_selector_set() {
+		$block_type = self::register_test_block(
+			'test/null-duotone-selector',
+			null,
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_get_feature_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/feature-selector',
+			array( 'typography' => array( 'root' => '.typography' ) ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( '.typography', $selector );
+	}
+
+	public function test_get_feature_selector_via_selectors_api_shorthand_property() {
+		$block_type = self::register_test_block(
+			'test/shorthand-feature-selector',
+			array( 'typography' => '.typography' ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( '.typography', $selector );
+	}
+
+	public function test_no_feature_level_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/null-feature-selector',
+			array( 'root' => '.fallback-root-selector' ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_fallback_feature_level_selector_via_selectors_api_to_generated_class() {
+		$block_type = self::register_test_block(
+			'test/fallback-feature-selector',
+			array(),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography', true );
+		$this->assertEquals( '.wp-block-test-fallback-feature-selector', $selector );
+	}
+
+
+	public function test_fallback_feature_level_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/fallback-feature-selector',
+			array( 'root' => '.fallback-root-selector' ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography', true );
+		$this->assertEquals( '.fallback-root-selector', $selector );
+	}
+
+	public function test_get_feature_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/experimental-feature-selector',
+			null,
+			array(
+				'typography' => array(
+					'__experimentalSelector' => '.experimental-typography',
+				),
+			)
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( '.wp-block-test-experimental-feature-selector .experimental-typography', $selector );
+	}
+
+	public function test_fallback_feature_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/fallback-feature-selector',
+			null,
+			array()
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography', true );
+		$this->assertEquals( '.wp-block-test-fallback-feature-selector', $selector );
+	}
+
+	public function test_no_feature_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/null-experimental-feature-selector',
+			null,
+			array()
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_get_subfeature_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/subfeature-selector',
+			array(
+				'typography' => array(
+					'textDecoration' => '.root .typography .text-decoration',
+				),
+			),
+			null
+		);
+
+		$selector = wp_get_block_css_selector(
+			$block_type,
+			array( 'typography', 'textDecoration' )
+		);
+
+		$this->assertEquals( '.root .typography .text-decoration', $selector );
+	}
+
+	public function test_fallback_subfeature_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/subfeature-selector',
+			array(
+				'typography' => array( 'root' => '.root .typography' ),
+			),
+			null
+		);
+
+		$selector = wp_get_block_css_selector(
+			$block_type,
+			array( 'typography', 'textDecoration' ),
+			true
+		);
+
+		$this->assertEquals( '.root .typography', $selector );
+	}
+
+	public function test_no_subfeature_level_selector_via_selectors_api() {
+		$block_type = self::register_test_block(
+			'test/null-subfeature-selector',
+			array(),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, array( 'typography', 'fontSize' ) );
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_fallback_subfeature_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/fallback-subfeature-selector',
+			null,
+			array()
+		);
+
+		$selector = wp_get_block_css_selector(
+			$block_type,
+			array( 'typography', 'fontSize' ),
+			true
+		);
+		$this->assertEquals( '.wp-block-test-fallback-subfeature-selector', $selector );
+	}
+
+	public function test_no_subfeature_selector_via_experimental_property() {
+		$block_type = self::register_test_block(
+			'test/null-experimental-subfeature-selector',
+			null,
+			array()
+		);
+
+		$selector = wp_get_block_css_selector(
+			$block_type,
+			array( 'typography', 'fontSize' )
+		);
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_empty_target_returns_null() {
+		$block_type = self::register_test_block(
+			'test/null-experimental-subfeature-selector',
+			null,
+			array()
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, array() );
+		$this->assertEquals( null, $selector );
+
+		$selector = wp_get_block_css_selector( $block_type, '' );
+		$this->assertEquals( null, $selector );
+	}
+
+	public function test_string_targets_for_features() {
+		$block_type = self::register_test_block(
+			'test/target-types-for-features',
+			array( 'typography' => '.found' ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography' );
+		$this->assertEquals( '.found', $selector );
+
+		$selector = wp_get_block_css_selector( $block_type, array( 'typography' ) );
+		$this->assertEquals( '.found', $selector );
+	}
+
+	public function test_string_targets_for_subfeatures() {
+		$block_type = self::register_test_block(
+			'test/target-types-for-features',
+			array(
+				'typography' => array( 'fontSize' => '.found' ),
+			),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'typography.fontSize' );
+		$this->assertEquals( '.found', $selector );
+
+		$selector = wp_get_block_css_selector( $block_type, array( 'typography', 'fontSize' ) );
+		$this->assertEquals( '.found', $selector );
+	}
+}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index b46838c0275b1a..eeb5940f44cd35 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -803,7 +803,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu
 	 * bootstrap. After a core block adopts feature level selectors we could
 	 * remove that filter and instead use the core block for the following test.
 	 */
-	public function test_get_stylesheet_with_block_support_feature_level_selectors() {
+	public function test_get_stylesheet_with_deprecated_feature_level_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
@@ -856,6 +856,68 @@ public function test_get_stylesheet_with_block_support_feature_level_selectors()
 		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
 	}
 
+	/**
+	 * This test relies on a block having already been registered prior to
+	 * theme.json generating block metadata. Until a core block adopts the
+	 * new selectors API, we need to register a test block.
+	 * This is achieved via `tests_add_filter()` in Gutenberg's phpunit
+	 * bootstrap. After a core block adopts feature level selectors we could
+	 * remove that filter and instead use the core block for the following test.
+	 */
+	public function test_get_stylesheet_with_block_json_selectors() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'border'     => array(
+						'radius' => true,
+					),
+					'color'      => array(
+						'custom'  => false,
+						'palette' => array(
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+							),
+						),
+					),
+					'spacing'    => array(
+						'padding' => true,
+					),
+					'typography' => array(
+						'fontSize' => true,
+					),
+				),
+				'styles'   => array(
+					'blocks' => array(
+						'my/block-with-selectors' => array(
+							'border'     => array(
+								'radius' => '9999px',
+							),
+							'color'      => array(
+								'background' => 'grey',
+								'text'       => 'navy',
+							),
+							'spacing'    => array(
+								'padding' => '20px',
+							),
+							'typography' => array(
+								'fontSize' => '3em',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$base_styles   = 'body{--wp--preset--color--green: green;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+		$block_styles  = '.custom-root-selector{background-color: grey;padding: 20px;}.custom-root-selector img{border-radius: 9999px;}.custom-root-selector > figcaption{color: navy;font-size: 3em;}';
+		$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
+		$expected      = $base_styles . $block_styles . $preset_styles;
+
+		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
+	}
+
 	public function test_allow_indirect_properties() {
 		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
 			array(
diff --git a/phpunit/fonts-api/wpFonts/registerProvider-test.php b/phpunit/fonts-api/wpFonts/registerProvider-test.php
index e4c9454c19ca1c..03dc6fd6049b1a 100644
--- a/phpunit/fonts-api/wpFonts/registerProvider-test.php
+++ b/phpunit/fonts-api/wpFonts/registerProvider-test.php
@@ -58,7 +58,7 @@ public function data_register_providers() {
 		);
 	}
 
-	public function test_should_register_mutliple_providers() {
+	public function test_should_register_multiple_providers() {
 		$wp_fonts  = new WP_Fonts();
 		$providers = $this->get_provider_definitions();
 		foreach ( $providers as $provider ) {
diff --git a/phpunit/fonts-api/wpFonts/removeVariation-test.php b/phpunit/fonts-api/wpFonts/removeVariation-test.php
index 71e898a4ba45af..fb8f78e4122fb2 100644
--- a/phpunit/fonts-api/wpFonts/removeVariation-test.php
+++ b/phpunit/fonts-api/wpFonts/removeVariation-test.php
@@ -53,7 +53,7 @@ private function setup_integration_test() {
 	public function test_mocked_setup( $font_family_handle, $variation_handle ) {
 		$this->setup_unit_test();
 
-		$this->assertArrayHasKey( $variation_handle, $this->wp_fonts->registered, 'Variation should be in the registered queue before remval' );
+		$this->assertArrayHasKey( $variation_handle, $this->wp_fonts->registered, 'Variation should be in the registered queue before removal' );
 		$this->assertContains( $variation_handle, $this->wp_fonts->registered[ $font_family_handle ]->deps, 'Variation should be in its font family deps before removal' );
 	}
 
diff --git a/readme.txt b/readme.txt
index c87aff308e1c52..9a21c99105dcd1 100644
--- a/readme.txt
+++ b/readme.txt
@@ -47,6 +47,12 @@ The best place to report bugs, feature suggestions, or any other feedback is at
 
 While we try to triage issues reported here on the plugin forum, you’ll get a faster response (and reduce duplication of effort) by keeping feedback centralized in GitHub.
 
+= Where can I report security bugs? =
+
+The Gutenberg team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program.
+
 = Do I have to use the Gutenberg plugin to get access to these features? =
 
 Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the <a href="https://wordpress.org/support/article/wordpress-editor/">WordPress Editor</a>. You are likely already benefitting from stable features!
diff --git a/schemas/json/block.json b/schemas/json/block.json
index ad3bb45516b9ff..6023d829c5ecd0 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -428,6 +428,104 @@
 			},
 			"additionalProperties": true
 		},
+		"selectors": {
+			"type": "object",
+			"description": "Provides custom CSS selectors and mappings for the block. Selectors may be set for the block itself or per-feature e.g. typography. Custom selectors per feature or sub-feature, allow different block styles to be applied to different elements within the block.",
+			"properties": {
+				"root": {
+					"type": "string",
+					"description": "The primary CSS class to apply to the block. This replaces the `.wp-block-name` class if set."
+				},
+				"border": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json border styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"color": { "type": "string" },
+								"radius": { "type": "string" },
+								"style": { "type": "string" },
+								"width": { "type": "string" }
+							}
+						}
+					]
+				},
+				"color": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json color styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"text": { "type": "string" },
+								"background": { "type": "string" }
+							}
+						}
+					]
+				},
+				"dimensions": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json dimensions styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"minHeight": { "type": "string" }
+							}
+						}
+					]
+				},
+				"spacing": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json spacing styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"blockGap": { "type": "string" },
+								"padding": { "type": "string" },
+								"margin": { "type": "string" }
+							}
+						}
+					]
+				},
+				"typography": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json typography styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"fontFamily": { "type": "string" },
+								"fontSize": { "type": "string" },
+								"fontStyle": { "type": "string" },
+								"fontWeight": { "type": "string" },
+								"lineHeight": { "type": "string" },
+								"letterSpacing": { "type": "string" },
+								"textDecoration": { "type": "string" },
+								"textTransform": { "type": "string" }
+							}
+						}
+					]
+				}
+			}
+		},
 		"styles": {
 			"type": "array",
 			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles",
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 0458e587a909f2..4417daff97cd05 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -74,6 +74,11 @@
 					"description": "Settings related to shadows.",
 					"type": "object",
 					"properties": {
+						"defaultPresets": {
+							"description": "Allow users to choose shadows from the default shadow presets.",
+							"type": "boolean",
+							"default": true
+						},
 						"presets": {
 							"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",
 							"type": "array",
@@ -97,7 +102,8 @@
 								"additionalProperties": false
 							}
 						}
-					}
+					},
+					"additionalProperties": false
 				}
 			}
 		},
@@ -1654,6 +1660,12 @@
 								},
 								":visited": {
 									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":link": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":any-link": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
 								}
 							},
 							"additionalProperties": false
@@ -1683,6 +1695,12 @@
 								},
 								":visited": {
 									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":link": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":any-link": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
 								}
 							},
 							"additionalProperties": false
@@ -2050,6 +2068,8 @@
 						"typography": {},
 						"border": {},
 						"shadow": {},
+						"position": {},
+						"dimensions": {},
 						"custom": {},
 						"blocks": {
 							"description": "Settings defined on a per-block basis.",
diff --git a/storybook/decorators/with-rtl.js b/storybook/decorators/with-rtl.js
index 2a2a8cb8f0da53..3eab5a7c39e230 100644
--- a/storybook/decorators/with-rtl.js
+++ b/storybook/decorators/with-rtl.js
@@ -12,8 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import ltrStyles from '../style-ltr.lazy.scss';
-import rtlStyles from '../style-rtl.lazy.scss';
+import CONFIG from '../package-styles/config';
 
 export const WithRTL = ( Story, context ) => {
 	const [ rerenderKey, setRerenderKey ] = useState( 0 );
@@ -43,17 +42,20 @@ export const WithRTL = ( Story, context ) => {
 	}, [ context.globals.direction ] );
 
 	useLayoutEffect( () => {
-		if ( context.globals.direction === 'rtl' ) {
-			rtlStyles.use();
-		} else {
-			ltrStyles.use();
-		}
+		const stylesToUse = [];
+
+		CONFIG.forEach( ( item ) => {
+			if ( item.componentIdMatcher.test( context.componentId ) ) {
+				stylesToUse.push( ...item[ context.globals.direction ] );
+			}
+		} );
+
+		stylesToUse.forEach( ( style ) => style.use() );
 
 		return () => {
-			ltrStyles.unuse();
-			rtlStyles.unuse();
+			stylesToUse.forEach( ( style ) => style.unuse() );
 		};
-	}, [ context.globals.direction ] );
+	}, [ context.componentId, context.globals.direction ] );
 
 	return (
 		<div ref={ ref } key={ rerenderKey }>
diff --git a/storybook/main.js b/storybook/main.js
index a0bd17068a60e4..a0f5c333bb0d8b 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -3,6 +3,7 @@ const stories = [
 	'../packages/block-editor/src/**/stories/*.@(js|tsx|mdx)',
 	'../packages/components/src/**/stories/*.@(js|tsx|mdx)',
 	'../packages/icons/src/**/stories/*.@(js|tsx|mdx)',
+	'../packages/edit-site/src/**/stories/*.@(js|tsx|mdx)',
 ].filter( Boolean );
 
 module.exports = {
diff --git a/storybook/package-styles/block-editor-ltr.lazy.scss b/storybook/package-styles/block-editor-ltr.lazy.scss
new file mode 100644
index 00000000000000..4a84559461387f
--- /dev/null
+++ b/storybook/package-styles/block-editor-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style";
diff --git a/storybook/package-styles/block-editor-rtl.lazy.scss b/storybook/package-styles/block-editor-rtl.lazy.scss
new file mode 100644
index 00000000000000..d8eacb3d25b585
--- /dev/null
+++ b/storybook/package-styles/block-editor-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style-rtl";
diff --git a/storybook/package-styles/block-library-ltr.lazy.scss b/storybook/package-styles/block-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..a5e373b1c061cd
--- /dev/null
+++ b/storybook/package-styles/block-library-ltr.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style";
+@import "../../packages/block-library/build-style/theme";
+@import "../../packages/block-library/build-style/editor";
diff --git a/storybook/package-styles/block-library-rtl.lazy.scss b/storybook/package-styles/block-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de83f997385539
--- /dev/null
+++ b/storybook/package-styles/block-library-rtl.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style-rtl";
+@import "../../packages/block-library/build-style/theme-rtl";
+@import "../../packages/block-library/build-style/editor-rtl";
diff --git a/storybook/package-styles/components-ltr.lazy.scss b/storybook/package-styles/components-ltr.lazy.scss
new file mode 100644
index 00000000000000..e7891f25026c4c
--- /dev/null
+++ b/storybook/package-styles/components-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style";
diff --git a/storybook/package-styles/components-rtl.lazy.scss b/storybook/package-styles/components-rtl.lazy.scss
new file mode 100644
index 00000000000000..6cba6edf353da5
--- /dev/null
+++ b/storybook/package-styles/components-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style-rtl";
diff --git a/storybook/package-styles/config.js b/storybook/package-styles/config.js
new file mode 100644
index 00000000000000..536b447a294c68
--- /dev/null
+++ b/storybook/package-styles/config.js
@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import blockEditorLtr from '../package-styles/block-editor-ltr.lazy.scss';
+import blockEditorRtl from '../package-styles/block-editor-rtl.lazy.scss';
+import blockLibraryLtr from '../package-styles/block-library-ltr.lazy.scss';
+import blockLibraryRtl from '../package-styles/block-library-rtl.lazy.scss';
+import componentsLtr from '../package-styles/components-ltr.lazy.scss';
+import componentsRtl from '../package-styles/components-rtl.lazy.scss';
+import formatLibraryLtr from '../package-styles/format-library-ltr.lazy.scss';
+import formatLibraryRtl from '../package-styles/format-library-rtl.lazy.scss';
+import editSiteLtr from '../package-styles/edit-site-ltr.lazy.scss';
+import editSiteRtl from '../package-styles/edit-site-rtl.lazy.scss';
+
+/**
+ * Stylesheets to lazy load when the story's context.componentId matches the
+ * componentIdMatcher regex.
+ *
+ * To prevent problematically overscoped styles in a package stylesheet
+ * from leaking into stories for other packages, we should explicitly declare
+ * stylesheet dependencies for each story group.
+ */
+const CONFIG = [
+	{
+		componentIdMatcher: /^playground-/,
+		ltr: [
+			componentsLtr,
+			blockEditorLtr,
+			blockLibraryLtr,
+			formatLibraryLtr,
+		],
+		rtl: [
+			componentsRtl,
+			blockEditorRtl,
+			blockLibraryRtl,
+			formatLibraryRtl,
+		],
+	},
+	{
+		componentIdMatcher: /^blockeditor-/,
+		ltr: [ componentsLtr, blockEditorLtr ],
+		rtl: [ componentsRtl, blockEditorRtl ],
+	},
+	{
+		componentIdMatcher: /^editsite-/,
+		ltr: [ componentsLtr, editSiteLtr ],
+		rtl: [ componentsRtl, editSiteRtl ],
+	},
+	{
+		componentIdMatcher: /^components-/,
+		ltr: [ componentsLtr ],
+		rtl: [ componentsRtl ],
+	},
+];
+
+export default CONFIG;
diff --git a/storybook/package-styles/edit-site-ltr.lazy.scss b/storybook/package-styles/edit-site-ltr.lazy.scss
new file mode 100644
index 00000000000000..c704fe9d9530ae
--- /dev/null
+++ b/storybook/package-styles/edit-site-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/edit-site/build-style/style";
diff --git a/storybook/package-styles/edit-site-rtl.lazy.scss b/storybook/package-styles/edit-site-rtl.lazy.scss
new file mode 100644
index 00000000000000..ae9ac27d6b51ef
--- /dev/null
+++ b/storybook/package-styles/edit-site-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/edit-site/build-style/style-rtl";
diff --git a/storybook/package-styles/format-library-ltr.lazy.scss b/storybook/package-styles/format-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..0f7db59c5d5dfb
--- /dev/null
+++ b/storybook/package-styles/format-library-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style";
diff --git a/storybook/package-styles/format-library-rtl.lazy.scss b/storybook/package-styles/format-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de2553bb5efa20
--- /dev/null
+++ b/storybook/package-styles/format-library-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style-rtl";
diff --git a/storybook/style-ltr.lazy.scss b/storybook/style-ltr.lazy.scss
deleted file mode 100644
index a799679206e50d..00000000000000
--- a/storybook/style-ltr.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (ltr)
-@import "../packages/components/build-style/style";
-@import "../packages/block-editor/build-style/style";
-@import "../packages/block-library/build-style/style";
-@import "../packages/block-library/build-style/theme";
-@import "../packages/block-library/build-style/editor";
-@import "../packages/format-library/build-style/style";
diff --git a/storybook/style-rtl.lazy.scss b/storybook/style-rtl.lazy.scss
deleted file mode 100644
index 0aae79416b079a..00000000000000
--- a/storybook/style-rtl.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (rtl)
-@import "../packages/components/build-style/style-rtl";
-@import "../packages/block-editor/build-style/style-rtl";
-@import "../packages/block-library/build-style/style-rtl";
-@import "../packages/block-library/build-style/theme-rtl";
-@import "../packages/block-library/build-style/editor-rtl";
-@import "../packages/format-library/build-style/style-rtl";
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index db7cfa3082ed81..5a002f5324c4ee 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -3,223 +3,317 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe(
-	'As a user I want the navigation block to fallback to the best possible default',
-	() => {
-		test.beforeAll( async ( { requestUtils } ) => {
-			//TT3 is preferable to emptytheme because it already has the navigation block on its templates.
-			await requestUtils.activateTheme( 'twentytwentythree' );
+test.describe( 'As a user I want the navigation block to fallback to the best possible default', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		//TT3 is preferable to emptytheme because it already has the navigation block on its templates.
+		await requestUtils.activateTheme( 'twentytwentythree' );
+	} );
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		await Promise.all( [ requestUtils.deleteAllMenus() ] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllMenus(),
+			requestUtils.activateTheme( 'twentytwentyone' ),
+		] );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'default to a list of pages if there are no menus', async ( {
+		admin,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		const pageListBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Page List',
 		} );
 
-		test.beforeEach( async ( { requestUtils } ) => {
-			await Promise.all( [ requestUtils.deleteAllMenus() ] );
+		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,
 		} );
 
-		test.afterAll( async ( { requestUtils } ) => {
-			await Promise.all( [
-				requestUtils.deleteAllMenus(),
-				requestUtils.activateTheme( 'twentytwentyone' ),
-			] );
+		// 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 -->`
+		);
+	} );
+
+	test( 'default to my only existing menu', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+	} ) => {
+		await admin.createNewPost();
+		const createdMenu = await requestUtils.createNavigationMenu( {
+			title: 'Test Menu 1',
+			content:
+				'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
 		} );
 
-		test.afterEach( async ( { requestUtils } ) => {
-			await requestUtils.deleteAllPosts();
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		// Check the block in the canvas.
+		await expect(
+			editor.canvas.locator(
+				`role=textbox[name="Navigation link text"i] >> text="WordPress"`
+			)
+		).toBeVisible();
+
+		// Check the markup of the block is correct.
+		await editor.publishPost();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/navigation',
+				attributes: { ref: createdMenu.id },
+			},
+		] );
+		await page.locator( 'role=button[name="Close panel"i]' ).click();
+
+		// Check the block in the frontend.
+		await page.goto( '/' );
+		await expect(
+			page.locator( `role=navigation >> role=link[name="WordPress"i]` )
+		).toBeVisible();
+	} );
+
+	test( 'default to the only existing classic menu if there are no block menus', async ( {
+		admin,
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		// Create a classic menu.
+		await requestUtils.createClassicMenu( 'Test Classic 1' );
+		await admin.createNewPost();
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+		// We need to check the canvas after inserting the navigation block to be able to target the block.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/navigation',
+			},
+		] );
+
+		// Check the block in the canvas.
+		await expect(
+			editor.canvas.locator(
+				`role=textbox[name="Navigation link text"i] >> text="Custom link"`
+			)
+		).toBeVisible();
+
+		// Check the block in the frontend.
+		await page.goto( '/' );
+
+		await expect(
+			page.locator( `role=navigation >> role=link[name="Custom link"i]` )
+		).toBeVisible();
+	} );
+
+	test( 'default to my most recently created menu', async ( {
+		admin,
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		await admin.createNewPost();
+		await requestUtils.createNavigationMenu( {
+			title: 'Test Menu 1',
+			content:
+				'<!-- wp:navigation-link {"label":"Menu 1 Link","type":"custom","url":"http://localhost:8889/#menu-1-link","kind":"custom","isTopLevelLink":true} /-->',
 		} );
 
-		test( 'default to a list of pages if there are no menus', async ( {
-			admin,
-			editor,
-		} ) => {
-			await admin.createNewPost();
-			await editor.insertBlock( { name: 'core/navigation' } );
+		//FIXME this is needed because if the two menus are created at the same time, the API will return them in the wrong order.
+		//https://core.trac.wordpress.org/ticket/57914
+		await editor.page.waitForTimeout( 1000 );
 
-			const pageListBlock = editor.canvas.getByRole( 'document', {
-				name: 'Block: Page List',
-			} );
+		const latestMenu = await requestUtils.createNavigationMenu( {
+			title: 'Test Menu 2',
+			content:
+				'<!-- wp:navigation-link {"label":"Menu 2 Link","type":"custom","url":"http://localhost:8889/#menu-2-link","kind":"custom","isTopLevelLink":true} /-->',
+		} );
 
-			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,
-			} );
+		await editor.insertBlock( { name: 'core/navigation' } );
 
-			// 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 -->`
-			);
+		// Check the markup of the block is correct.
+		await editor.publishPost();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/navigation',
+				attributes: { ref: latestMenu.id },
+			},
+		] );
+		await page.locator( 'role=button[name="Close panel"i]' ).click();
+
+		// Check the block in the canvas.
+		await expect(
+			editor.canvas.locator(
+				`role=textbox[name="Navigation link text"i] >> text="Menu 2 Link"`
+			)
+		).toBeVisible();
+
+		// Check the block in the frontend.
+		await page.goto( '/' );
+		await expect(
+			page.locator( `role=navigation >> role=link[name="Menu 2 Link"i]` )
+		).toBeVisible();
+	} );
+} );
+
+test.describe( 'As a user I want to create submenus using the navigation block', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		//TT3 is preferable to emptytheme because it already has the navigation block on its templates.
+		await requestUtils.activateTheme( 'twentytwentythree' );
+	} );
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		await Promise.all( [ requestUtils.deleteAllMenus() ] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllMenus(),
+			requestUtils.activateTheme( 'twentytwentyone' ),
+		] );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'create a submenu', async ( {
+		admin,
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		await admin.createNewPost();
+		await requestUtils.createNavigationMenu( {
+			title: 'Test Menu',
+			content: '',
 		} );
 
-		test( 'default to my only existing menu', async ( {
-			admin,
-			editor,
-			page,
-			requestUtils,
-		} ) => {
-			await admin.createNewPost();
-			const createdMenu = await requestUtils.createNavigationMenu( {
-				title: 'Test Menu 1',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
+		await editor.insertBlock( { name: 'core/navigation' } );
 
-			await editor.insertBlock( { name: 'core/navigation' } );
+		const navBlockInserter = editor.canvas.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await navBlockInserter.click();
 
-			// Check the block in the canvas.
-			await expect(
-				editor.canvas.locator(
-					`role=textbox[name="Navigation link text"i] >> text="WordPress"`
-				)
-			).toBeVisible();
+		await page.keyboard.type( 'https://example.com' );
+		await page.keyboard.press( 'Enter' );
 
-			// Check the markup of the block is correct.
-			await editor.publishPost();
-			await expect.poll( editor.getBlocks ).toMatchObject( [
-				{
-					name: 'core/navigation',
-					attributes: { ref: createdMenu.id },
-				},
-			] );
-			await page.locator( 'role=button[name="Close panel"i]' ).click();
-
-			// Check the block in the frontend.
-			await page.goto( '/' );
-			await expect(
-				page.locator(
-					`role=navigation >> role=link[name="WordPress"i]`
-				)
-			).toBeVisible();
+		const addSubmenuButton = page.getByRole( 'button', {
+			name: 'Add submenu',
 		} );
+		await addSubmenuButton.click();
 
-		test( 'default to the only existing classic menu if there are no block menus', async ( {
-			admin,
-			page,
-			editor,
-			requestUtils,
-		} ) => {
-			// Create a classic menu.
-			await requestUtils.createClassicMenu( 'Test Classic 1' );
-			await admin.createNewPost();
+		await editor.publishPost();
 
-			await editor.insertBlock( { name: 'core/navigation' } );
-			// We need to check the canvas after inserting the navigation block to be able to target the block.
-			await expect.poll( editor.getBlocks ).toMatchObject( [
-				{
-					name: 'core/navigation',
-				},
-			] );
+		await page.locator( 'role=button[name="Close panel"i]' ).click();
+
+		await page.goto( '/' );
+		await expect(
+			page.locator(
+				`role=navigation >> role=button[name="example.com submenu "i]`
+			)
+		).toBeVisible();
+	} );
 
-			// Check the block in the canvas.
-			await expect(
-				editor.canvas.locator(
-					`role=textbox[name="Navigation link text"i] >> text="Custom link"`
-				)
-			).toBeVisible();
-
-			// Check the block in the frontend.
-			await page.goto( '/' );
-
-			await expect(
-				page.locator(
-					`role=navigation >> role=link[name="Custom link"i]`
-				)
-			).toBeVisible();
+	test( 'submenu converts to link automatically', async ( {
+		admin,
+		pageUtils,
+		editor,
+		requestUtils,
+	} ) => {
+		await admin.createNewPost();
+		await requestUtils.createNavigationMenu( {
+			title: 'Test Menu',
+			content:
+				'<!-- wp:navigation-submenu {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} --><!-- wp:navigation-link {"label":"WordPress Child","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /--><!-- /wp:navigation-submenu -->',
 		} );
 
-		test( 'default to my most recently created menu', async ( {
-			admin,
-			page,
-			editor,
-			requestUtils,
-		} ) => {
-			await admin.createNewPost();
-			await requestUtils.createNavigationMenu( {
-				title: 'Test Menu 1',
-				content:
-					'<!-- wp:navigation-link {"label":"Menu 1 Link","type":"custom","url":"http://localhost:8889/#menu-1-link","kind":"custom","isTopLevelLink":true} /-->',
-			} );
+		await editor.insertBlock( { name: 'core/navigation' } );
 
-			//FIXME this is needed because if the two menus are created at the same time, the API will return them in the wrong order.
-			//https://core.trac.wordpress.org/ticket/57914
-			await editor.page.waitForTimeout( 1000 );
+		await expect(
+			editor.canvas.locator(
+				`role=textbox[name="Navigation link text"i] >> text="WordPress"`
+			)
+		).toBeVisible();
 
-			const latestMenu = await requestUtils.createNavigationMenu( {
-				title: 'Test Menu 2',
-				content:
-					'<!-- wp:navigation-link {"label":"Menu 2 Link","type":"custom","url":"http://localhost:8889/#menu-2-link","kind":"custom","isTopLevelLink":true} /-->',
-			} );
+		const navigationBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Navigation',
+		} );
+		await editor.selectBlocks( navigationBlock );
+
+		const submenuBlock1 = editor.canvas.getByRole( 'document', {
+			name: 'Block: Submenu',
+		} );
+		await expect( submenuBlock1 ).toBeVisible();
 
-			await editor.insertBlock( { name: 'core/navigation' } );
+		// select the child link via keyboard
+		await pageUtils.pressKeys( 'ArrowDown' );
+		await pageUtils.pressKeys( 'ArrowDown' );
+		await pageUtils.pressKeys( 'ArrowDown' );
+
+		// remove the child link
+		await pageUtils.pressKeys( 'access+z' );
+
+		const submenuBlock2 = editor.canvas.getByRole( 'document', {
+			name: 'Block: Submenu',
+		} );
+		await expect( submenuBlock2 ).toBeHidden();
+	} );
+} );
+
+test.describe( 'Navigation block', () => {
+	test.describe( 'As a user I want to see a warning if the menu referenced by a navigation block is not available', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost();
+		} );
+
+		test( 'warning message shows when given an unknown ref', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: {
+					ref: 1,
+				},
+			} );
 
 			// Check the markup of the block is correct.
 			await editor.publishPost();
+
 			await expect.poll( editor.getBlocks ).toMatchObject( [
 				{
 					name: 'core/navigation',
-					attributes: { ref: latestMenu.id },
+					attributes: { ref: 1 },
 				},
 			] );
-			await page.locator( 'role=button[name="Close panel"i]' ).click();
-
-			// Check the block in the canvas.
-			await expect(
-				editor.canvas.locator(
-					`role=textbox[name="Navigation link text"i] >> text="Menu 2 Link"`
-				)
-			).toBeVisible();
-
-			// Check the block in the frontend.
-			await page.goto( '/' );
-			await expect(
-				page.locator(
-					`role=navigation >> role=link[name="Menu 2 Link"i]`
-				)
-			).toBeVisible();
-		} );
-	}
-);
-
-test.describe( 'Navigation block', () => {
-	test.describe(
-		'As a user I want to see a warning if the menu referenced by a navigation block is not available',
-		() => {
-			test.beforeEach( async ( { admin } ) => {
-				await admin.createNewPost();
-			} );
 
-			test( 'warning message shows when given an unknown ref', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/navigation',
-					attributes: {
-						ref: 1,
-					},
-				} );
-
-				// Check the markup of the block is correct.
-				await editor.publishPost();
-
-				await expect.poll( editor.getBlocks ).toMatchObject( [
-					{
-						name: 'core/navigation',
-						attributes: { ref: 1 },
-					},
-				] );
-
-				// Find the warning message
-				const warningMessage = editor.canvas
-					.getByRole( 'document', { name: 'Block: Navigation' } )
-					.getByText(
-						'Navigation menu has been deleted or is unavailable.'
-					);
-				await expect( warningMessage ).toBeVisible();
-			} );
-		}
-	);
+			// Find the warning message
+			const warningMessage = editor.canvas
+				.getByRole( 'document', { name: 'Block: Navigation' } )
+				.getByText(
+					'Navigation menu has been deleted or is unavailable.'
+				);
+			await expect( warningMessage ).toBeVisible();
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 279af60fe20949..6e724ab09afd7b 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -317,4 +317,22 @@ test.describe( 'Quote', () => {
 <!-- /wp:quote -->`
 		);
 	} );
+
+	test( `shouldn't crash selecting content + cite and pressing backspace.`, async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'Shift+ArrowUp' );
+		let error;
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'error' ) error = msg.text();
+		} );
+		await page.keyboard.press( 'Backspace' );
+		expect( error ).toBeUndefined();
+	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js
index 1b516dbcf05ef9..a7502c93a2476c 100644
--- a/test/e2e/specs/editor/plugins/image-size.spec.js
+++ b/test/e2e/specs/editor/plugins/image-size.spec.js
@@ -46,7 +46,7 @@ test.describe( 'changing image size', () => {
 
 		// Select the new size updated with the plugin.
 		await editor.openDocumentSettingsSidebar();
-		await page.selectOption( 'role=combobox[name="Image size"i]', {
+		await page.selectOption( 'role=combobox[name="Resolution"i]', {
 			label: 'Custom Size One',
 		} );
 
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index fc6d09fcc3240c..08aa33ec095522 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -363,53 +363,46 @@ test.describe( 'splitting and merging blocks', () => {
 		);
 	} );
 
-	test.describe(
-		'test restore selection when merge produces more than one block',
-		() => {
-			test( 'on forward delete', async ( {
-				editor,
-				page,
-				pageUtils,
-			} ) => {
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type( 'hi' );
-				await editor.insertBlock( { name: 'core/list' } );
-				await page.keyboard.type( 'item 1' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'item 2' );
-				await pageUtils.pressKeys( 'ArrowUp', { times: 3 } );
-				await page.keyboard.press( 'Delete' );
-
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-
-				await page.keyboard.press( 'Delete' );
-				// Carret should be in the first block and at the proper position.
-				await page.keyboard.type( '-' );
-
-				// Check the content.
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			test( 'on backspace', async ( { editor, page, pageUtils } ) => {
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type( 'hi' );
-				await editor.insertBlock( { name: 'core/list' } );
-				await page.keyboard.type( 'item 1' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'item 2' );
-				await page.keyboard.press( 'ArrowUp' );
-				await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
-				await page.keyboard.press( 'Backspace' );
-
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-
-				await page.keyboard.press( 'Backspace' );
-				// Carret should be in the first block and at the proper position.
-				await page.keyboard.type( '-' );
-
-				// Check the content.
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-			} );
-		}
-	);
+	test.describe( 'test restore selection when merge produces more than one block', () => {
+		test( 'on forward delete', async ( { editor, page, pageUtils } ) => {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( 'hi' );
+			await editor.insertBlock( { name: 'core/list' } );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await pageUtils.pressKeys( 'ArrowUp', { times: 3 } );
+			await page.keyboard.press( 'Delete' );
+
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+			await page.keyboard.press( 'Delete' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+
+			// Check the content.
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		} );
+
+		test( 'on backspace', async ( { editor, page, pageUtils } ) => {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( 'hi' );
+			await editor.insertBlock( { name: 'core/list' } );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await page.keyboard.press( 'ArrowUp' );
+			await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+			await page.keyboard.press( 'Backspace' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+
+			// Check the content.
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
index ac11112e2db7cf..a501d8982947c3 100644
--- a/test/e2e/specs/editor/various/switch-to-draft.spec.js
+++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -27,70 +27,65 @@ test.afterAll( async ( { requestUtils } ) => {
 	] );
 } );
 
-test.describe(
-	'Clicking "Switch to draft" on a published/scheduled post/page',
-	() => {
-		[ 'schedule', 'publish' ].forEach( ( postStatus ) => {
-			[ 'large', 'small' ].forEach( ( viewport ) => {
-				[ 'post', 'page' ].forEach( ( postType ) => {
-					test( `should switch a ${ postStatus }-ed ${ postType } to draft in a ${ viewport } viewport`, async ( {
-						page,
-						switchToDraftUtils,
-						pageUtils,
-					} ) => {
-						await pageUtils.setBrowserViewport( viewport );
-
-						await switchToDraftUtils.createTestPost(
-							postType,
-							viewport,
-							postStatus === 'schedule'
+test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', () => {
+	[ 'schedule', 'publish' ].forEach( ( postStatus ) => {
+		[ 'large', 'small' ].forEach( ( viewport ) => {
+			[ 'post', 'page' ].forEach( ( postType ) => {
+				test( `should switch a ${ postStatus }-ed ${ postType } to draft in a ${ viewport } viewport`, async ( {
+					page,
+					switchToDraftUtils,
+					pageUtils,
+				} ) => {
+					await pageUtils.setBrowserViewport( viewport );
+
+					await switchToDraftUtils.createTestPost(
+						postType,
+						viewport,
+						postStatus === 'schedule'
+					);
+
+					await switchToDraftUtils.switchToDraftButton.click();
+
+					await page
+						.getByRole( 'dialog' )
+						.getByRole( 'button', { name: 'Cancel' } )
+						.click();
+
+					await expect
+						.poll(
+							switchToDraftUtils.getPostStatus,
+							`should leave a ${ postStatus }-ed ${ postType } ${ postStatus }-ed if canceled`
+						)
+						.toBe(
+							postStatus === 'schedule' ? 'future' : postStatus
 						);
 
-						await switchToDraftUtils.switchToDraftButton.click();
-
-						await page
-							.getByRole( 'dialog' )
-							.getByRole( 'button', { name: 'Cancel' } )
-							.click();
-
-						await expect
-							.poll(
-								switchToDraftUtils.getPostStatus,
-								`should leave a ${ postStatus }-ed ${ postType } ${ postStatus }-ed if canceled`
-							)
-							.toBe(
-								postStatus === 'schedule'
-									? 'future'
-									: postStatus
-							);
-
-						await switchToDraftUtils.switchToDraftButton.click();
-
-						await page
-							.getByRole( 'dialog' )
-							.getByRole( 'button', { name: 'OK' } )
-							.click();
-
-						await expect(
-							page.getByRole( 'button', {
-								name: 'Dismiss this notice',
-							} )
-						).toHaveText( `${ postType } reverted to draft.`, {
-							ignoreCase: true,
-						} );
-
-						await expect
-							.poll(
-								switchToDraftUtils.getPostStatus,
-								`should revert a ${ postStatus }-ed ${ postType } to a draft if confirmed`
-							)
-							.toBe( 'draft' );
+					await switchToDraftUtils.switchToDraftButton.click();
+
+					await page
+						.getByRole( 'dialog' )
+						.getByRole( 'button', { name: 'OK' } )
+						.click();
+
+					await expect(
+						page.getByRole( 'button', {
+							name: 'Dismiss this notice',
+						} )
+					).toHaveText( `${ postType } reverted to draft.`, {
+						ignoreCase: true,
 					} );
+
+					await expect
+						.poll(
+							switchToDraftUtils.getPostStatus,
+							`should revert a ${ postStatus }-ed ${ postType } to a draft if confirmed`
+						)
+						.toBe( 'draft' );
 				} );
 			} );
 		} );
-	}
-);
+	} );
+} );
 
 class SwitchToDraftUtils {
 	/** @type {Page} */
diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
new file mode 100644
index 00000000000000..edc4909a98c979
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor url navigation', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Redirection after template and template part creation', () => {
+		test.afterEach( async ( { requestUtils } ) => {
+			await Promise.all( [
+				requestUtils.deleteAllPosts(),
+				requestUtils.deleteAllTemplates( 'wp_template' ),
+				requestUtils.deleteAllTemplates( 'wp_template_part' ),
+			] );
+		} );
+		test( 'Redirection after template creation', async ( {
+			admin,
+			page,
+			requestUtils,
+		} ) => {
+			await requestUtils.createPost( {
+				title: 'Demo',
+				status: 'publish',
+			} );
+			await admin.visitSiteEditor();
+			// We need to wait the response from the `posts` request in order to click the augmented menu item,
+			// that includes the options for creating templates for specific posts.
+			await Promise.all( [
+				page.waitForResponse(
+					( resp ) =>
+						resp
+							.url()
+							.includes(
+								'/index.php?rest_route=%2Fwp%2Fv2%2Fposts&context=view'
+							) && resp.status() === 200
+				),
+				page.click( 'role=button[name="Templates"]' ),
+			] );
+			await page.click( 'role=button[name="Add New Template"i]' );
+			await page
+				.getByRole( 'menuitem', {
+					name: 'Single item: Post',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', { name: 'For a specific item' } )
+				.click();
+			await page.getByRole( 'option', { name: 'Demo' } ).click();
+			await expect( page ).toHaveURL(
+				'/wp-admin/site-editor.php?postId=emptytheme%2F%2Fsingle-post-demo&postType=wp_template&canvas=edit'
+			);
+		} );
+		test( 'Redirection after template part creation', async ( {
+			admin,
+			page,
+		} ) => {
+			await admin.visitSiteEditor();
+			await page.click( 'role=button[name="Template Parts"i]' );
+			await page.click( 'role=button[name="Add New"i]' );
+			// Fill in a name in the dialog that pops up.
+			await page.type(
+				'role=dialog >> role=textbox[name="Name"i]',
+				'Demo'
+			);
+			await page.keyboard.press( 'Enter' );
+			await expect( page ).toHaveURL(
+				'/wp-admin/site-editor.php?postId=emptytheme%2F%2Fdemo&postType=wp_template_part&canvas=edit'
+			);
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 0fb2c2b80505fe..84a5eefb1cda7d 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -86,13 +86,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors background styles"i] >> data-testid=background-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors text styles"i] >> data-testid=text-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
 
@@ -127,13 +127,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors background styles"i] >> data-testid=background-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors text styles"i] >> data-testid=text-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
 
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index 00770cabce6d8b..5623c1171861ef 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -356,4 +356,52 @@ test.describe( 'Template Part', () => {
 			page.getByRole( 'combobox', { name: 'Import widget area' } )
 		).not.toBeVisible();
 	} );
+
+	test( 'Keeps focus in place on undo in template parts', async ( {
+		admin,
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+		} );
+		await editor.canvas.click( 'body' );
+
+		// Select the site title block.
+		const siteTitle = editor.canvas.getByRole( 'document', {
+			name: 'Site title',
+		} );
+		await editor.selectBlocks( siteTitle );
+
+		// Remove the default site title block.
+		await pageUtils.pressKeys( 'access+z' );
+
+		// Insert a group block with a Site Title block inside.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [ { name: 'core/site-title' } ],
+		} );
+
+		// Select the Site Title block inside the group.
+		const siteTitleInGroup = editor.canvas.getByRole( 'document', {
+			name: 'Site title',
+		} );
+		await editor.selectBlocks( siteTitleInGroup );
+
+		// Change heading level of the Site Title block.
+		await editor.clickBlockToolbarButton( 'Change heading level' );
+		const Heading3Button = page.getByRole( 'menuitemradio', {
+			name: 'Heading 3',
+		} );
+		await Heading3Button.click();
+
+		// Undo the change.
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect(
+			page.locator( 'role=button[name="Change heading level"i]' )
+		).toBeFocused();
+	} );
 } );
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index e194e90449160c..fada3fbe41e1ef 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -15,14 +15,13 @@ test.describe( 'Site editor title', () => {
 	test( 'displays the selected template name in the title for the index template', async ( {
 		admin,
 		page,
-		editor,
 	} ) => {
 		// Navigate to a template.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.click( 'body' );
 		const title = page.locator(
 			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
 		);
@@ -33,14 +32,13 @@ test.describe( 'Site editor title', () => {
 	test( 'displays the selected template name in the title for the header template', async ( {
 		admin,
 		page,
-		editor,
 	} ) => {
 		// Navigate to a template part.
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-		await editor.canvas.click( 'body' );
 		const title = page.locator(
 			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
 		);
@@ -51,13 +49,12 @@ test.describe( 'Site editor title', () => {
 	test( "displays the selected template part's name in the secondary title when a template part is selected from List View", async ( {
 		admin,
 		page,
-		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-		await editor.canvas.click( 'body' );
 		// Select the header template part via list view.
 		await page.click( 'role=button[name="List View"i]' );
 		const listView = page.locator(
diff --git a/test/integration/fixtures/blocks/core__media-text.html b/test/integration/fixtures/blocks/core__media-text.html
index 8c05e44479a5ab..52ed3cb3c8a496 100644
--- a/test/integration/fixtures/blocks/core__media-text.html
+++ b/test/integration/fixtures/blocks/core__media-text.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile">
+<div class="wp-block-media-text is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
 	</figure>
diff --git a/test/integration/fixtures/blocks/core__media-text.json b/test/integration/fixtures/blocks/core__media-text.json
index 99158c68ba3371..fc7601b7073d6a 100644
--- a/test/integration/fixtures/blocks/core__media-text.json
+++ b/test/integration/fixtures/blocks/core__media-text.json
@@ -3,7 +3,7 @@
 		"name": "core/media-text",
 		"isValid": true,
 		"attributes": {
-			"align": "wide",
+			"align": "none",
 			"mediaAlt": "",
 			"mediaPosition": "left",
 			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
diff --git a/test/integration/fixtures/blocks/core__media-text.parsed.json b/test/integration/fixtures/blocks/core__media-text.parsed.json
index 84a992af2abc86..c7876c627eef07 100644
--- a/test/integration/fixtures/blocks/core__media-text.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text.parsed.json
@@ -18,9 +18,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text.serialized.html b/test/integration/fixtures/blocks/core__media-text.serialized.html
index 3a0190e7eeb8e7..eae92996876bf9 100644
--- a/test/integration/fixtures/blocks/core__media-text.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
index 9b33221d935d55..7d7a76c730b273 100644
--- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56% 57%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
 <p>My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html
new file mode 100644
index 00000000000000..8c05e44479a5ab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaType":"image"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
+	</figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
new file mode 100644
index 00000000000000..bbe1bf7fc90ded
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
@@ -0,0 +1,28 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
new file mode 100644
index 00000000000000..84a992af2abc86
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
@@ -0,0 +1,28 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
new file mode 100644
index 00000000000000..aa018a73342161
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
index 064b2c772f6a7c..cd01616afd42e0 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"align":"none","mediaType":"image"} -->
+<!-- wp:media-text {"mediaType":"image"} -->
 <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="my alt"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
index 9e184932848ca5..bf195f6fa1c953 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"imageFill": true
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
index 2a1c3c68cc1bf8..40382e884f618e 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
index fcae892bf1304a..986e049099541f 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"imageFill": true,
 			"focalPoint": {
 				"x": 0.84,
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
index a1d3bb9c40fcc7..9445d0ad259b22 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
index 4536d933eb8dd0..cce4ca41239c5f 100644
--- a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
+++ b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "",
 			"mediaPosition": "left",
-			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"mediaType": "video",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
index 654e79b68edf08..bd86c13cac2b11 100644
--- a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"video"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"video"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
index f4f729efb84e8b..f7d0516a85a648 100644
--- a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
+++ b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"verticalAlignment": "bottom"
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
index 5557277fd6c308..2c1772e0edb762 100644
--- a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"image","verticalAlignment":"bottom"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","verticalAlignment":"bottom"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__video.json b/test/integration/fixtures/blocks/core__media-text__video.json
index 4536d933eb8dd0..cce4ca41239c5f 100644
--- a/test/integration/fixtures/blocks/core__media-text__video.json
+++ b/test/integration/fixtures/blocks/core__media-text__video.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "",
 			"mediaPosition": "left",
-			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"mediaType": "video",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__video.serialized.html b/test/integration/fixtures/blocks/core__media-text__video.serialized.html
index 654e79b68edf08..bd86c13cac2b11 100644
--- a/test/integration/fixtures/blocks/core__media-text__video.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__video.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"video"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"video"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/helpers/integration-test-editor.js b/test/integration/helpers/integration-test-editor.js
new file mode 100644
index 00000000000000..6b954a895a51ac
--- /dev/null
+++ b/test/integration/helpers/integration-test-editor.js
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import {
+	BlockEditorKeyboardShortcuts,
+	BlockEditorProvider,
+	BlockList,
+	BlockTools,
+	BlockInspector,
+	WritingFlow,
+	ObserveTyping,
+} from '@wordpress/block-editor';
+import { Popover, SlotFillProvider } from '@wordpress/components';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import '@wordpress/format-library';
+import {
+	createBlock,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { waitForStoreResolvers } from './wait-for-store-resolvers';
+
+// Polyfill for String.prototype.replaceAll until CI is runnig Node 15 or higher.
+if ( ! String.prototype.replaceAll ) {
+	String.prototype.replaceAll = function ( str, newStr ) {
+		// If a regex pattern
+		if (
+			Object.prototype.toString.call( str ).toLowerCase() ===
+			'[object regexp]'
+		) {
+			return this.replace( str, newStr );
+		}
+
+		// If a string
+		return this.replace( new RegExp( str, 'g' ), newStr );
+	};
+}
+
+/**
+ * Selects the block to be tested by the aria-label on the block wrapper, eg. "Block: Cover".
+ *
+ * @param {string} name
+ */
+export async function selectBlock( name ) {
+	await userEvent.click( screen.getByLabelText( name ) );
+}
+
+export function Editor( { testBlocks, settings = {} } ) {
+	const [ currentBlocks, updateBlocks ] = useState( testBlocks );
+
+	useEffect( () => {
+		return () => {
+			getBlockTypes().forEach( ( { name } ) =>
+				unregisterBlockType( name )
+			);
+		};
+	}, [] );
+
+	return (
+		<ShortcutProvider>
+			<SlotFillProvider>
+				<BlockEditorProvider
+					value={ currentBlocks }
+					onInput={ updateBlocks }
+					onChange={ updateBlocks }
+					settings={ settings }
+				>
+					<BlockInspector />
+					<BlockTools>
+						<BlockEditorKeyboardShortcuts.Register />
+						<WritingFlow>
+							<ObserveTyping>
+								<BlockList />
+							</ObserveTyping>
+						</WritingFlow>
+					</BlockTools>
+
+					<Popover.Slot />
+				</BlockEditorProvider>
+			</SlotFillProvider>
+		</ShortcutProvider>
+	);
+}
+
+/**
+ * Registers the core block, creates the test block instances, and then instantiates the Editor.
+ *
+ * @param {Object | Array} testBlocks    Block or array of block settings for blocks to be tested.
+ * @param {boolean}        useCoreBlocks Defaults to true. If false, core blocks will not be registered.
+ * @param {Object}         settings      Any additional editor settings to be passed to the editor.
+ */
+export async function initializeEditor(
+	testBlocks,
+	useCoreBlocks = true,
+	settings
+) {
+	if ( useCoreBlocks ) {
+		registerCoreBlocks();
+	}
+	const blocks = Array.isArray( testBlocks ) ? testBlocks : [ testBlocks ];
+	const newBlocks = blocks.map( ( testBlock ) =>
+		createBlock(
+			testBlock.name,
+			testBlock.attributes,
+			testBlock.innerBlocks
+		)
+	);
+	return waitForStoreResolvers( () => {
+		return render(
+			<Editor testBlocks={ newBlocks } settings={ settings } />
+		);
+	} );
+}
diff --git a/test/integration/helpers/wait-for-store-resolvers.js b/test/integration/helpers/wait-for-store-resolvers.js
new file mode 100644
index 00000000000000..fbb35c4e734612
--- /dev/null
+++ b/test/integration/helpers/wait-for-store-resolvers.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { act } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { withFakeTimers } from './with-fake-timers';
+
+/**
+ * Executes a function that triggers store resolvers and waits for them to be finished.
+ *
+ * Asynchronous store resolvers leverage `setTimeout` to run at the end of
+ * the current JavaScript block execution. In order to prevent "act" warnings
+ * triggered by updates to the React tree, we manually tick fake timers and
+ * await the resolution of the current block execution before proceeding.
+ *
+ * @param {Function} fn Function that to trigger.
+ *
+ * @return {*} The result of the function call.
+ */
+export async function waitForStoreResolvers( fn ) {
+	return withFakeTimers( async () => {
+		const result = fn();
+
+		// Advance all timers allowing store resolvers to resolve.
+		act( () => jest.runAllTimers() );
+
+		// The store resolvers perform several API fetches during editor
+		// initialization. The most straightforward approach to ensure all of them
+		// resolve before we consider the editor initialized is to flush micro tasks,
+		// similar to the approach found in `@testing-library/react`.
+		// https://github.com/callstack/react-native-testing-library/blob/a010ffdbca906615279ecc3abee423525e528101/src/flushMicroTasks.js#L15-L23.
+		// eslint-disable-next-line testing-library/no-unnecessary-act
+		await act( async () => {} );
+
+		return result;
+	} );
+}
diff --git a/test/integration/helpers/with-fake-timers.js b/test/integration/helpers/with-fake-timers.js
new file mode 100644
index 00000000000000..91e3ead0a2bf00
--- /dev/null
+++ b/test/integration/helpers/with-fake-timers.js
@@ -0,0 +1,30 @@
+/**
+ * Set up fake timers for executing a function and restores them afterwards.
+ *
+ * @param {Function} fn Function to trigger.
+ *
+ * @return {*} The result of the function call.
+ */
+export async function withFakeTimers( fn ) {
+	const usingFakeTimers = jest.isMockFunction( setTimeout );
+
+	// Portions of the React Native Animation API rely upon these APIs. However,
+	// Jest's 'legacy' fake timers mutate these globals, which breaks the Animated
+	// API. We preserve the original implementations to restore them later.
+	const requestAnimationFrameCopy = global.requestAnimationFrame;
+	const cancelAnimationFrameCopy = global.cancelAnimationFrame;
+
+	if ( ! usingFakeTimers ) {
+		jest.useFakeTimers( { legacyFakeTimers: true } );
+	}
+
+	const result = await fn();
+
+	if ( ! usingFakeTimers ) {
+		jest.useRealTimers();
+
+		global.requestAnimationFrame = requestAnimationFrameCopy;
+		global.cancelAnimationFrame = cancelAnimationFrameCopy;
+	}
+	return result;
+}