diff --git a/.eslintrc.js b/.eslintrc.js
index 5ad25a66edaff4..b24c3129f1134e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -96,6 +96,11 @@ module.exports = {
 						message:
 							'`puppeteer-testing-library` is still experimental.',
 					},
+					{
+						name: '@emotion/css',
+						message:
+							'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support',
+					},
 				],
 			},
 		],
diff --git a/changelog.txt b/changelog.txt
index 7dd4097cad1aee..a8e1c97339697f 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,177 @@
 == Changelog ==
 
+= 11.0.0-rc.1 =
+
+
+
+### Enhancements
+
+- Polish block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922))
+- Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810))
+- [Block Library - Query Loop]: Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737))
+- Remove the widget switcher block toolbar button. ([32733](https://github.com/WordPress/gutenberg/pull/32733))
+- Block categories: Clean these up by moving several blocks from Design to Theme. ([32568](https://github.com/WordPress/gutenberg/pull/32568))
+- Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641))
+- Media & Text: Allow drag n drop media replacement. ([29710](https://github.com/WordPress/gutenberg/pull/29710))
+
+### New APIs
+
+- Allow making context specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961))
+- Add an API to define the default template used for the template mode. ([32771](https://github.com/WordPress/gutenberg/pull/32771))
+
+### Bug Fixes
+
+- Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066))
+- Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058))
+- Group Block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045))
+- [Block Library - Query Loop] Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037))
+- Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031))
+- Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024))
+- Button: Update to use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017))
+- [Block Library - Categories]: Fix handling for low privileged users. ([32994](https://github.com/WordPress/gutenberg/pull/32994))
+- [Block Library - Categories]: Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989))
+- Fix to remove default indent from Latest Posts and Latest Comments block in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983))
+- Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979))
+- Add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971))
+- [Block Library - Post Terms]: Fix handling for low privileged users. ([32947](https://github.com/WordPress/gutenberg/pull/32947))
+- Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938))
+- Fix glitchy block focus style when multiselecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927))
+- Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898))
+- Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894))
+- Fix unintended search http request in <LinkControl>. ([32857](https://github.com/WordPress/gutenberg/pull/32857))
+- CI: Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856))
+- Fixed a problem with double encoding of URLs. ([32840](https://github.com/WordPress/gutenberg/pull/32840))
+- Fix incorrect block insertion point after blurring post title. ([32831](https://github.com/WordPress/gutenberg/pull/32831))
+- RNMobile: Fix column wrapping. ([32830](https://github.com/WordPress/gutenberg/pull/32830))
+- [Block Library - Site Title, Site Tagline] - Readonly view when user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817))
+- useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816))
+- Block Library: Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814))
+- Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809))
+- Remove @wordpress/editor as a dependency from @wordpress/block-library. ([32801](https://github.com/WordPress/gutenberg/pull/32801))
+- Fix drag and drop indices when block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776))
+- Customize Widgets: Fix block toolbar deselection when clicking scrollbar. ([32762](https://github.com/WordPress/gutenberg/pull/32762))
+- Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749))
+- components: Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745))
+- TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744))
+- Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729))
+- Fix: Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692))
+- Ensure only valid URLs or anchors within text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663))
+- [Image Block]: Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524))
+- Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479))
+- Image Block: Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364))
+- Fix: Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089))
+
+### Experiments
+
+- Navigation: Skip flakey tests. ([33074](https://github.com/WordPress/gutenberg/pull/33074))
+- Adjust widget form margins in the new widget editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040))
+- Set display only when form not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015))
+- Widgets: Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978))
+- Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976))
+- Adjust legacy widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974))
+- Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953))
+- Widget Editor: Fix allow adding same image twice. ([32951](https://github.com/WordPress/gutenberg/pull/32951))
+- [Block Library - Site Logo]: Add permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919))
+- Navigation: Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918))
+- Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905))
+- Don't display admin notices on widgets screen. ([32877](https://github.com/WordPress/gutenberg/pull/32877))
+- Fix legacy widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871))
+- Rename .interface-interface-skeleton__body z-index to .interface-interface-skeleton__content. ([32869](https://github.com/WordPress/gutenberg/pull/32869))
+- Legacy custom html widget should have option to transform to custom html block. ([32862](https://github.com/WordPress/gutenberg/pull/32862))
+- Wire handle_legacy_widget_preview_iframe to admin_init_hook. ([32854](https://github.com/WordPress/gutenberg/pull/32854))
+- Remove classic block in widgets editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800))
+- Fix: Logic error on site editor useSetting. ([32793](https://github.com/WordPress/gutenberg/pull/32793))
+- Widget preivew not working if widget registered via a instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781))
+- Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761))
+- Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759))
+- Widgets editor: Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757))
+- Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732))
+- Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683))
+- Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491))
+- Fix oembeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331))
+- Global Styles: Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840))
+- Add post-classes in the loop. ([30497](https://github.com/WordPress/gutenberg/pull/30497))
+
+### Documentation
+
+- ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030))
+- Add some technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026))
+- Docs: Add link color suppots to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936))
+- Add a schema explaining the relationship between the packages that make the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921))
+- Handbook: Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770))
+- Fix abort error thrown by `api-fetch` and add documentation. ([32530](https://github.com/WordPress/gutenberg/pull/32530))
+- Update the block toolbar ESnext code. ([32422](https://github.com/WordPress/gutenberg/pull/32422))
+- Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850))
+
+### Code Quality
+
+- data: Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967))
+- data: Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965))
+- data: Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942))
+- Block Library: Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866))
+- data: Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855))
+- components: Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852))
+- Correct the case of navigation __unstableLocation. ([32783](https://github.com/WordPress/gutenberg/pull/32783))
+- Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774))
+- Quality: Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537))
+- Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516))
+- Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313))
+
+### Tools
+
+- components: Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051))
+- end-to-end Test Utils: Add getCurrentUser(), and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050))
+- Disable Android end-to-end tests while we investigate foundational breakage. ([32934](https://github.com/WordPress/gutenberg/pull/32934))
+- [E2E Tests]: Fix WP editor metabox test. ([32915](https://github.com/WordPress/gutenberg/pull/32915))
+- Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906))
+- Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904))
+- Testing: Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888))
+- Skip failing image caption caret test. ([32847](https://github.com/WordPress/gutenberg/pull/32847))
+- @wordpress/scripts: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834))
+- Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832))
+- Docs: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829))
+- Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633))
+- Workflows: Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560))
+
+### Various
+
+- Add a label for screen reader in categories block. ([33060](https://github.com/WordPress/gutenberg/pull/33060))
+- Focus style followup. ([33022](https://github.com/WordPress/gutenberg/pull/33022))
+- Typo correction. ([33013](https://github.com/WordPress/gutenberg/pull/33013))
+- Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008))
+- Handle context on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991))
+- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977))
+- Revert mistaken push to trunk. ([32948](https://github.com/WordPress/gutenberg/pull/32948))
+- Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930))
+- Replace FullscreenMode from Class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925))
+- Query block: Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892))
+- Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889))
+- Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874))
+- Query Loop Patterns: Use plain `div` for wrapper element. ([32867](https://github.com/WordPress/gutenberg/pull/32867))
+- Properly handle 404 errors while publishing Android artifacts. ([32860](https://github.com/WordPress/gutenberg/pull/32860))
+- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858))
+- Safari: See if compositing layer size is more reasonable when position fixed divs are not inserted into content. ([32824](https://github.com/WordPress/gutenberg/pull/32824))
+- Remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804))
+- Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797))
+- components: Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796))
+- Revert accidental commit. ([32777](https://github.com/WordPress/gutenberg/pull/32777))
+- Card: Delete old version of the g2 implementation. ([32764](https://github.com/WordPress/gutenberg/pull/32764))
+- Card: Update Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763))
+- Avoid flash of background color when scrolling in safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747))
+- Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746))
+- Components: Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743))
+- Implement basic in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741))
+- Rename native editor onboarding properties for clarity. ([32739](https://github.com/WordPress/gutenberg/pull/32739))
+- Try: Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738))
+- Card: Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566))
+- Rnmobile/fix/disable controls when template lock is set. ([32495](https://github.com/WordPress/gutenberg/pull/32495))
+- Added filters to get block templates functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806))
+- Template Parts & Reusable Blocks - try overlay element for clickthrough to edit pattern. ([31109](https://github.com/WordPress/gutenberg/pull/31109))
+- [RN Mobile][Global Styles] Adds new Prop for Global Styles Settings. ([30544](https://github.com/WordPress/gutenberg/pull/30544))
+
+
+
+
 = 10.9.1 =
 
 ### Bug Fixes
diff --git a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
index a82bb3c6058118..bf86d303fc643e 100644
--- a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
+++ b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
@@ -5,7 +5,7 @@ Dynamic blocks are blocks that build their structure and content on the fly when
 There are two primary uses for dynamic blocks:
 
 1. Blocks where content should change even if a post has not been updated. One example from WordPress itself is the Latest Posts block. This block will update everywhere it is used when a new post is published.
-2. Blocks where updates to the code (HTML, CSS, JS) should be immediately shown on the front end of the website. For example, if you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site. (If a dynamic block is not used then when block code is updated Guterberg's [validation process](/docs/reference-guides/block-api/block-edit-save.md#validation) generally applies, causing users to see the validation message, "This block appears to have been modified externally").
+2. Blocks where updates to the code (HTML, CSS, JS) should be immediately shown on the front end of the website. For example, if you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site. (If a dynamic block is not used then when block code is updated Gutenberg's [validation process](/docs/reference-guides/block-api/block-edit-save.md#validation) generally applies, causing users to see the validation message, "This block appears to have been modified externally").
 
 For many dynamic blocks, the `save` callback function should be returned as `null`, which tells the editor to save only the [block attributes](/docs/reference-guides/block-api/block-attributes.md) to the database. These attributes are then passed into the server-side rendering callback, so you can decide how to display the block on the front end of your site. When you return `null`, the editor will skip the block markup validation process, avoiding issues with frequently-changing markup.
 
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 1b1eec679c80a0..6d09ffa6d4e751 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -89,14 +89,17 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	return $content . '<style>' . $style . '</style>';
 }
 
-// Register the block support.
-WP_Block_Supports::get_instance()->register(
-	'layout',
-	array(
-		'register_attribute' => 'gutenberg_register_layout_support',
-	)
-);
-add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
+// This can be removed when plugin support requires WordPress 5.8.0+.
+if ( ! function_exists( 'wp_render_layout_support_flag' ) ) {
+	// Register the block support.
+	WP_Block_Supports::get_instance()->register(
+		'layout',
+		array(
+			'register_attribute' => 'gutenberg_register_layout_support',
+		)
+	);
+	add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
+}
 
 /**
  * For themes without theme.json file, make sure
@@ -129,4 +132,7 @@ function( $matches ) {
 	return $updated_content;
 }
 
-add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+// This can be removed when plugin support requires WordPress 5.8.0+.
+if ( ! function_exists( 'wp_restore_group_inner_container' ) ) {
+	add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+}
diff --git a/package-lock.json b/package-lock.json
index be1d33fd063859..ca2d654ff162ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "10.9.1",
+	"version": "11.0.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 5c6f2ce818d575..4546293f5555aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "10.9.1",
+	"version": "11.0.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index d01d312014b879..fed727e4e4a6e1 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -266,21 +266,6 @@
 	&:-ms-input-placeholder {
 		color: $dark-gray-placeholder;
 	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: $light-gray-placeholder;
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: $light-gray-placeholder;
-		}
-
-		&:-ms-input-placeholder {
-			color: $light-gray-placeholder;
-		}
-	}
 }
 
 @mixin checkbox-control {
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 8f0837fbb6790e..7f273c2d732eb8 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "3.5.3",
+	"version": "3.5.4",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index eb7490310bf41d..4fc2962878bc6c 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "2.1.12",
+	"version": "2.1.14",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 616249c2feed60..24e94fdfde1472 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "6.1.7",
+	"version": "6.1.8",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 018cf4760a07eb..c81a2d5469ecc1 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -48,11 +48,13 @@ function BlockForType( {
 	parentWidth,
 	wrapperProps,
 	blockWidth,
+	baseGlobalStyles,
 } ) {
 	const defaultColors = useSetting( 'color.palette' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
+			baseGlobalStyles,
 			globalStyle,
 			wrapperProps.style,
 			attributes,
@@ -300,6 +302,7 @@ export default compose( [
 	withSelect( ( select, { clientId, rootClientId } ) => {
 		const {
 			getBlockIndex,
+			getSettings,
 			isBlockSelected,
 			__unstableGetBlockWithoutInnerBlocks,
 			getSelectedBlockClientId,
@@ -347,6 +350,9 @@ export default compose( [
 			isDescendantOfParentSelected ||
 			isParentSelected ||
 			parentId === '';
+		const baseGlobalStyles = getSettings()
+			?.__experimentalGlobalStylesBaseStyles;
+
 		return {
 			icon,
 			name: name || 'core/missing',
@@ -360,6 +366,7 @@ export default compose( [
 			isParentSelected,
 			firstToSelectId,
 			isTouchable,
+			baseGlobalStyles,
 			wrapperProps: getWrapperProps(
 				attributes,
 				blockType.getEditWrapperProps
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index a0cd8651776ba4..2e150322c17623 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -172,6 +172,7 @@
 			// 2px outside.
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index e9f16b185a5564..7f9d8a9073d398 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
@@ -29,6 +29,11 @@ function BottomSheetSettings( {
 	settings,
 	...props
 } ) {
+	const colorSettings = {
+		colors: useSetting( 'color.palette' ) || settings.colors,
+		gradients: useSetting( 'color.gradients' ) || settings.gradients,
+	};
+
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
@@ -53,7 +58,7 @@ function BottomSheetSettings( {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.color }
 				>
-					<ColorSettings defaultSettings={ settings } />
+					<ColorSettings defaultSettings={ colorSettings } />
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.focalPoint }
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 4a8bfc6f307316..6a747fa59cd8af 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -82,10 +82,6 @@
 			width: $button-size-small !important;
 			margin: 0 !important;
 		}
-
-		&:focus::before {
-			right: $grid-unit-05 !important;
-		}
 	}
 
 	// Match the parent selector button.
@@ -158,10 +154,6 @@
 			width: 0 !important;
 			height: 0 !important;
 		}
-
-		&:focus::before {
-			right: $grid-unit-05 !important;
-		}
 	}
 
 	// Parent selector overrides
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 4c8c94bbf53e48..d089925b3846aa 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -8,6 +8,7 @@ import {
 	forwardRef,
 	useEffect,
 	useMemo,
+	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
@@ -164,6 +165,7 @@ async function loadScript( doc, { id, src } ) {
 }
 
 function Iframe( { contentRef, children, head, ...props }, ref ) {
+	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const styles = useParsedAssets( window.__editorAssets.styles );
 	const scripts = useParsedAssets( window.__editorAssets.scripts );
@@ -194,11 +196,19 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			clearerRef( documentElement );
 			clearerRef( body );
 
-			scripts.reduce(
-				( promise, script ) =>
-					promise.then( () => loadScript( contentDocument, script ) ),
-				Promise.resolve()
-			);
+			scripts
+				.reduce(
+					( promise, script ) =>
+						promise.then( () =>
+							loadScript( contentDocument, script )
+						),
+					Promise.resolve()
+				)
+				.finally( () => {
+					// When script are loaded, re-render blocks to allow them
+					// to initialise.
+					forceRender();
+				} );
 
 			return true;
 		}
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index d143b7b5fcb3ed..45da4a723c07c2 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -127,6 +127,14 @@ This `suggestion` will then be _automatically_ passed to the `onChange` handler
 
 As a result of the above, this prop is often used to allow on the fly creation of new entities (eg: `Posts`, `Pages`) based on the text the user has entered into the link search UI. As an example, the Navigation Block uses `createSuggestion` to create Pages on the fly from within the Block itself.
 
+### onRemove
+
+-   Type: `Function`
+-   Required: No
+-   Default: null
+
+An optional handler, which when passed will trigger the display of an `Unlink` UI within the control. This handler is expected to remove the current `value` of the control thus resetting it back to a default state. The key use case for this is allowing users to remove a link from the control without relying on there being an "unlink" control in the block toolbar.
+
 #### Search `suggestion` values
 
 A `suggestion` should have the following shape:
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index b9a63ceb71da3c..db6b005ac79fab 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -106,6 +106,7 @@ function LinkControl( {
 	value,
 	settings,
 	onChange = noop,
+	onRemove,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -260,11 +261,23 @@ function LinkControl( {
 				/>
 			) }
 
-			<LinkControlSettingsDrawer
-				value={ value }
-				settings={ settings }
-				onChange={ onChange }
-			/>
+			<div className="block-editor-link-control__tools">
+				<LinkControlSettingsDrawer
+					value={ value }
+					settings={ settings }
+					onChange={ onChange }
+				/>
+				{ onRemove && value && ! isEditingLink && ! isCreatingPage && (
+					<Button
+						className="block-editor-link-control__unlink"
+						isDestructive
+						variant="link"
+						onClick={ onRemove }
+					>
+						{ __( 'Unlink' ) }
+					</Button>
+				) }
+			</div>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index b1b6958dbe5f8c..3d5d5941bb7749 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -380,10 +380,23 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
-.block-editor-link-control__settings {
+.block-editor-link-control__tools {
+	display: flex;
+	align-items: center;
 	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20 $grid-unit-30;
+}
+
+.block-editor-link-control__unlink {
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}
+
+.block-editor-link-control__settings {
+	flex: 1;
+	margin: 0;
+
 
 	:last-child {
 		margin-bottom: 0;
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 27e1665d869ff2..250e4656d3708d 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -227,6 +227,49 @@ describe( 'Basic rendering', () => {
 			expect( isEditing() ).toBe( false );
 		} );
 	} );
+
+	describe( 'Unlinking', () => {
+		it( 'should not show "Unlink" button if no onRemove handler is provided', () => {
+			act( () => {
+				render(
+					<LinkControl value={ { url: 'https://example.com' } } />,
+					container
+				);
+			} );
+
+			const unLinkButton = queryByRole( container, 'button', {
+				name: 'Unlink',
+			} );
+
+			expect( unLinkButton ).toBeNull();
+			expect( unLinkButton ).not.toBeInTheDocument();
+		} );
+
+		it( 'should show "Unlink" button if a onRemove handler is provided', () => {
+			const mockOnRemove = jest.fn();
+			act( () => {
+				render(
+					<LinkControl
+						value={ { url: 'https://example.com' } }
+						onRemove={ mockOnRemove }
+					/>,
+					container
+				);
+			} );
+
+			const unLinkButton = queryByRole( container, 'button', {
+				name: 'Unlink',
+			} );
+			expect( unLinkButton ).toBeTruthy();
+			expect( unLinkButton ).toBeInTheDocument();
+
+			act( () => {
+				Simulate.click( unLinkButton );
+			} );
+
+			expect( mockOnRemove ).toHaveBeenCalled();
+		} );
+	} );
 } );
 
 describe( 'Searching for a link', () => {
diff --git a/packages/block-editor/src/components/provider/index.native.js b/packages/block-editor/src/components/provider/index.native.js
index 157cd72d1f237b..8851a2b9b47a15 100644
--- a/packages/block-editor/src/components/provider/index.native.js
+++ b/packages/block-editor/src/components/provider/index.native.js
@@ -10,6 +10,7 @@ import { useEffect } from '@wordpress/element';
 import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
+import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -24,7 +25,7 @@ function BlockEditorProvider( props ) {
 	// Syncs the entity provider with changes in the block-editor store.
 	useBlockSync( props );
 
-	return children;
+	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
 }
 
 export default withRegistryProvider( BlockEditorProvider );
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index b94a6cfb86fb9d..04456706a6bb4e 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -12,12 +12,6 @@ import { useRef } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 
-/**
- * Useful for positioning an element within the viewport so focussing the
- * element does not scroll the page.
- */
-const PREVENT_SCROLL_ON_FOCUS = { position: 'fixed' };
-
 function isFormElement( element ) {
 	const { tagName } = element;
 	return (
@@ -75,7 +69,6 @@ export default function useTabNav() {
 			ref={ focusCaptureBeforeRef }
 			tabIndex={ focusCaptureTabIndex }
 			onFocus={ onFocusCapture }
-			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -84,7 +77,6 @@ export default function useTabNav() {
 			ref={ focusCaptureAfterRef }
 			tabIndex={ focusCaptureTabIndex }
 			onFocus={ onFocusCapture }
-			style={ PREVENT_SCROLL_ON_FOCUS }
 		/>
 	);
 
@@ -131,16 +123,62 @@ export default function useTabNav() {
 			// doesn't refocus this block and so it allows default behaviour
 			// (moving focus to the next tabbable element).
 			noCapture.current = true;
-			next.current.focus();
+
+			// Focusing the focus capture element, which is located above and
+			// below the editor, should not scroll the page all the way up or
+			// down.
+			next.current.focus( { preventScroll: true } );
 		}
 
 		function onFocusOut( event ) {
 			lastFocus.current = event.target;
 		}
 
+		// When tabbing back to an element in block list, this event handler prevents scrolling if the
+		// focus capture divs (before/after) are outside of the viewport. (For example shift+tab back to a paragraph
+		// when focus is on a sidebar element. This prevents the scrollable writing area from jumping either to the
+		// top or bottom of the document.
+		//
+		// Note that it isn't possible to disable scrolling in the onFocus event. We need to intercept this
+		// earlier in the keypress handler, and call focus( { preventScroll: true } ) instead.
+		// https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus#parameters
+		function preventScrollOnTab( event ) {
+			if ( event.keyCode !== TAB ) {
+				return;
+			}
+
+			if ( event.target?.getAttribute( 'role' ) === 'region' ) {
+				return;
+			}
+
+			if ( container.current === event.target ) {
+				return;
+			}
+
+			const isShift = event.shiftKey;
+			const direction = isShift ? 'findPrevious' : 'findNext';
+			const target = focus.tabbable[ direction ]( event.target );
+			// only do something when the next tabbable is a focus capture div (before/after)
+			if (
+				target === focusCaptureBeforeRef.current ||
+				target === focusCaptureAfterRef.current
+			) {
+				event.preventDefault();
+				target.focus( { preventScroll: true } );
+			}
+		}
+
+		node.ownerDocument.defaultView.addEventListener(
+			'keydown',
+			preventScrollOnTab
+		);
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'focusout', onFocusOut );
 		return () => {
+			node.ownerDocument.defaultView.removeEventListener(
+				'keydown',
+				preventScrollOnTab
+			);
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'focusout', onFocusOut );
 		};
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 554781d057b5fd..2da9875c07584f 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -234,7 +234,7 @@ export function ColorEdit( props ) {
 		localAttributes.current = attributes;
 	}, [ attributes ] );
 
-	if ( ! hasColorSupport( blockName ) || Platform.OS !== 'web' ) {
+	if ( ! hasColorSupport( blockName ) ) {
 		return null;
 	}
 
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 2a7855fa1d5a87..ebb79ef5673ddd 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "3.2.10",
+	"version": "3.2.12",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 367e5050df6edb..2d22972f5d1165 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -27,7 +27,7 @@ const migrateBorderRadius = ( attributes ) => {
 		...newAttributes,
 		style: {
 			...newAttributes.style,
-			border: { radius: borderRadius },
+			border: { radius: `${ borderRadius }px` },
 		},
 	};
 };
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 15235369b2ee05..079185d8e2e39e 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -23,6 +23,7 @@ import {
 	InspectorAdvancedControls,
 	RichText,
 	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
@@ -196,7 +197,7 @@ function ButtonEdit( props ) {
 		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
 	};
 
-	const borderRadius = style?.border?.radius;
+	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
 	const ref = useRef();
 	const blockProps = useBlockProps( { ref } );
@@ -220,12 +221,15 @@ function ButtonEdit( props ) {
 						className,
 						'wp-block-button__link',
 						colorProps.className,
+						borderProps.className,
 						{
-							'no-border-radius': borderRadius === 0,
+							// For backwards compatibility add style that isn't
+							// provided via block support.
+							'no-border-radius': style?.border?.radius === 0,
 						}
 					) }
 					style={ {
-						borderRadius: borderRadius ? borderRadius : undefined,
+						...borderProps.style,
 						...colorProps.style,
 					} }
 					onSplit={ ( value ) =>
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index af4f4e6f566f35..d462cf52e6dd7b 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
@@ -28,17 +29,20 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
-	const borderRadius = style?.border?.radius;
+	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const buttonClasses = classnames(
 		'wp-block-button__link',
 		colorProps.className,
+		borderProps.className,
 		{
-			'no-border-radius': borderRadius === 0,
+			// For backwards compatibility add style that isn't provided via
+			// block support.
+			'no-border-radius': style?.border?.radius === 0,
 		}
 	);
 	const buttonStyle = {
-		borderRadius: borderRadius ? borderRadius : undefined,
+		...borderProps.style,
 		...colorProps.style,
 	};
 
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index c820b7bd76b578..3cffff955183c8 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -28,7 +28,7 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s>%2$s</div>';
+		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . $id . '">' . __( 'Categories' ) . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 
diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index a51a708a222767..1cd75758543006 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -30,6 +30,11 @@ function ParagraphBlock( {
 	const { align, content, placeholder } = attributes;
 
 	const styles = {
+		...( mergedStyle?.baseColors && {
+			color: mergedStyle.baseColors?.color?.text,
+			placeholderColor: mergedStyle.baseColors?.color?.text,
+			linkColor: mergedStyle.baseColors?.elements?.link?.color?.text,
+		} ),
 		...mergedStyle,
 		...style,
 	};
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index 40e565e3525d9d..2c8c142c2f4a0a 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -41,7 +41,6 @@ export default function PostTemplateEdit( {
 			sticky,
 			inherit,
 		} = {},
-		queryId,
 		queryContext = [ { page: 1 } ],
 		templateSlug,
 		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
@@ -116,7 +115,6 @@ export default function PostTemplateEdit( {
 			posts?.map( ( post ) => ( {
 				postType: post.type,
 				postId: post.id,
-				queryId,
 			} ) ),
 		[ posts ]
 	);
diff --git a/packages/block-library/src/post-template/index.php b/packages/block-library/src/post-template/index.php
index dd69fda45fe7f3..c7f52c905577e9 100644
--- a/packages/block-library/src/post-template/index.php
+++ b/packages/block-library/src/post-template/index.php
@@ -61,7 +61,8 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$content      .= "<li>{$block_content}</li>";
+		$post_classes  = esc_attr( implode( ' ', get_post_class( 'wp-block-post' ) ) );
+		$content      .= '<li class="' . $post_classes . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();
diff --git a/packages/components/package.json b/packages/components/package.json
index d18e1318e0ecea..d96ff912be264d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "14.1.4",
+	"version": "14.1.5",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/src/base-field/hook.js b/packages/components/src/base-field/hook.js
index f11a7169a3f5f1..28f7a3b5e6aae0 100644
--- a/packages/components/src/base-field/hook.js
+++ b/packages/components/src/base-field/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/base-field/styles.js b/packages/components/src/base-field/styles.js
index 20e12fee0e57f2..9c9946b85caa21 100644
--- a/packages/components/src/base-field/styles.js
+++ b/packages/components/src/base-field/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/box-control/vertical-horizontal-input-controls.js b/packages/components/src/box-control/axial-input-controls.js
similarity index 97%
rename from packages/components/src/box-control/vertical-horizontal-input-controls.js
rename to packages/components/src/box-control/axial-input-controls.js
index 6c7b5a9ad396ee..f4b014e8f5e804 100644
--- a/packages/components/src/box-control/vertical-horizontal-input-controls.js
+++ b/packages/components/src/box-control/axial-input-controls.js
@@ -7,7 +7,7 @@ import { Layout } from './styles/box-control-styles';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
-export default function VerticalHorizontalInputControls( {
+export default function AxialInputControls( {
 	onChange,
 	onFocus,
 	onHoverOn,
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index e651020069bbde..3f23a17d7ea47b 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -17,7 +17,7 @@ import Button from '../button';
 import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
-import VerticalHorizontalInputControls from './vertical-horizontal-input-controls';
+import AxialInputControls from './axial-input-controls';
 import BoxControlIcon from './icon';
 import { Text } from '../text';
 import LinkedButton from './linked-button';
@@ -157,9 +157,7 @@ export default function BoxControl( {
 				) }
 				{ ! isLinked && splitOnAxis && (
 					<FlexBlock>
-						<VerticalHorizontalInputControls
-							{ ...inputControlProps }
-						/>
+						<AxialInputControls { ...inputControlProps } />
 					</FlexBlock>
 				) }
 				{ ! hasOneSide && (
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index f5ba9ee7bcbecf..03f71885edb535 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -87,11 +87,11 @@ export const singleSide = () => {
 	);
 };
 
-export const verticalHorizontalControls = () => {
+export const axialControls = () => {
 	return <DemoExample splitOnAxis={ true } />;
 };
 
-export const verticalHorizontalControlsWithSingleSide = () => {
+export const axialControlsWithSingleSide = () => {
 	return (
 		<DemoExample
 			sides={ [ 'horizontal' ] }
diff --git a/packages/components/src/card/card-body/hook.js b/packages/components/src/card/card-body/hook.js
index 1f27df7ec47a19..3de530b38017b0 100644
--- a/packages/components/src/card/card-body/hook.js
+++ b/packages/components/src/card/card-body/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card-divider/hook.js b/packages/components/src/card/card-divider/hook.js
index 9095e1497881ea..3f05de00abc04e 100644
--- a/packages/components/src/card/card-divider/hook.js
+++ b/packages/components/src/card/card-divider/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card-footer/hook.js b/packages/components/src/card/card-footer/hook.js
index c52d4530c5d0f9..bc1345ddff1105 100644
--- a/packages/components/src/card/card-footer/hook.js
+++ b/packages/components/src/card/card-footer/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card-header/hook.js b/packages/components/src/card/card-header/hook.js
index 5d272495ea348e..fa046ec316142b 100644
--- a/packages/components/src/card/card-header/hook.js
+++ b/packages/components/src/card/card-header/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card-media/hook.js b/packages/components/src/card/card-media/hook.js
index fd2fba826b6e46..c0ade5fa2ffc26 100644
--- a/packages/components/src/card/card-media/hook.js
+++ b/packages/components/src/card/card-media/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card/component.js b/packages/components/src/card/card/component.js
index 0f266f33841ac6..f49f67128883b5 100644
--- a/packages/components/src/card/card/component.js
+++ b/packages/components/src/card/card/component.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/card/hook.js b/packages/components/src/card/card/hook.js
index e90d51ec669c3e..ee3e66a22e98fb 100644
--- a/packages/components/src/card/card/hook.js
+++ b/packages/components/src/card/card/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.js
index 6d874a49fcceab..d4ecdd89db176c 100644
--- a/packages/components/src/card/styles.js
+++ b/packages/components/src/card/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index 0bf253d1b03791..3e296464554e72 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index 3a6b1e20ca9861..b13218ab657fe8 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/elevation/hook.js b/packages/components/src/elevation/hook.js
index 173c331597f34b..3f4d6c88dbedee 100644
--- a/packages/components/src/elevation/hook.js
+++ b/packages/components/src/elevation/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 import { isNil } from 'lodash';
 
diff --git a/packages/components/src/elevation/styles.js b/packages/components/src/elevation/styles.js
index 23c29f01d85bcf..8199f1264023d2 100644
--- a/packages/components/src/elevation/styles.js
+++ b/packages/components/src/elevation/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Elevation = css`
diff --git a/packages/components/src/flex/flex-item/hook.js b/packages/components/src/flex/flex-item/hook.js
index 4ab2ff3beeee0b..9ea9c077e7889c 100644
--- a/packages/components/src/flex/flex-item/hook.js
+++ b/packages/components/src/flex/flex-item/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js
index 044644e3c55a44..1af2602a38255d 100644
--- a/packages/components/src/flex/flex/hook.js
+++ b/packages/components/src/flex/flex/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/flex/styles.js b/packages/components/src/flex/styles.js
index 9fdeade2335fca..a1ca92db3afee6 100644
--- a/packages/components/src/flex/styles.js
+++ b/packages/components/src/flex/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Flex = css`
diff --git a/packages/components/src/grid/hook.js b/packages/components/src/grid/hook.js
index 9de54c0e0a7a27..69c1e74b4954d8 100644
--- a/packages/components/src/grid/hook.js
+++ b/packages/components/src/grid/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index ac8f5b0a237f22..e7e1deea5f7523 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -124,3 +124,4 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
+export { getGlobalStyles } from './mobile/global-styles-context/utils';
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
index 81a60ccc8eb56e..1d4d0d45be6761 100644
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -22,16 +22,21 @@ const GlobalStylesContext = createContext( { style: {} } );
 GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
 
 export const getMergedGlobalStyles = (
+	baseGlobalStyles,
 	globalStyle,
 	wrapperPropsStyle,
 	blockAttributes,
 	defaultColors
 ) => {
+	const baseGlobalColors = {
+		baseColors: baseGlobalStyles || {},
+	};
 	const blockStyleAttributes = pick(
 		blockAttributes,
 		BLOCK_STYLE_ATTRIBUTES
 	);
 	const mergedStyle = {
+		...baseGlobalColors,
 		...globalStyle,
 		...wrapperPropsStyle,
 	};
diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js
index 396dee85b215f6..e29dc8bbed7fa8 100644
--- a/packages/components/src/mobile/global-styles-context/test/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/test/utils.native.js
@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getBlockPaddings, getBlockColors } from '../utils';
+import {
+	getBlockPaddings,
+	getBlockColors,
+	parseColorVariables,
+	getGlobalStyles,
+} from '../utils';
 
 const DEFAULT_COLORS = [
 	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
@@ -9,6 +14,142 @@ const DEFAULT_COLORS = [
 	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
 ];
 
+const GLOBAL_STYLES_PALETTE = [
+	{
+		slug: 'green',
+		color: '#D1E4DD',
+		name: 'Green',
+	},
+	{
+		slug: 'blue',
+		color: '#D1DFE4',
+		name: 'Blue',
+	},
+	{
+		slug: 'purple',
+		color: '#D1D1E4',
+		name: 'Purple',
+	},
+];
+
+const GLOBAL_STYLES_GRADIENTS = [
+	{
+		slug: 'purple-to-blue',
+		gradient:
+			'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+		name: 'Purple to Blue',
+	},
+	{
+		slug: 'green-to-purple',
+		gradient:
+			'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+		name: 'Green to Purple',
+	},
+];
+
+const DEFAULT_GLOBAL_STYLES = {
+	styles: {
+		color: {
+			background: 'var(--wp--preset--color--green)',
+			text: 'var(--wp--preset--color--blue)',
+		},
+		elements: {
+			link: {
+				color: {
+					text: 'var(--wp--preset--color--purple)',
+				},
+			},
+		},
+	},
+};
+
+const PARSED_GLOBAL_STYLES = {
+	styles: {
+		color: {
+			background: '#D1E4DD',
+			text: '#D1DFE4',
+		},
+		elements: {
+			link: {
+				color: {
+					text: '#D1D1E4',
+				},
+			},
+		},
+	},
+};
+
+const RAW_FEATURES = {
+	color: {
+		palette: {
+			core: [
+				{
+					name: 'Black',
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					name: 'Cyan bluish gray',
+					slug: 'cyan-bluish-gray',
+					color: '#abb8c3',
+				},
+				{
+					name: 'White',
+					slug: 'white',
+					color: '#ffffff',
+				},
+			],
+			theme: [
+				{
+					slug: 'green',
+					color: '#D1E4DD',
+					name: 'Green',
+				},
+				{
+					slug: 'blue',
+					color: '#D1DFE4',
+					name: 'Blue',
+				},
+				{
+					slug: 'purple',
+					color: '#D1D1E4',
+					name: 'Purple',
+				},
+			],
+		},
+		gradients: {
+			core: [
+				{
+					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',
+				},
+			],
+			theme: [
+				{
+					slug: 'purple-to-blue',
+					gradient:
+						'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+					name: 'Purple to Blue',
+				},
+				{
+					slug: 'green-to-purple',
+					gradient:
+						'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+					name: 'Green to Purple',
+				},
+			],
+		},
+	},
+};
+
 describe( 'getBlockPaddings', () => {
 	const PADDING = 12;
 
@@ -84,3 +225,49 @@ describe( 'getBlockColors', () => {
 		);
 	} );
 } );
+
+describe( 'parseColorVariables', () => {
+	it( 'returns the parsed colors values correctly', () => {
+		const blockColors = parseColorVariables(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			GLOBAL_STYLES_PALETTE
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+} );
+
+describe( 'getGlobalStyles', () => {
+	it( 'returns the global styles data correctly', () => {
+		const rawFeatures = JSON.stringify( RAW_FEATURES );
+		const globalStyles = getGlobalStyles(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			rawFeatures,
+			GLOBAL_STYLES_PALETTE,
+			GLOBAL_STYLES_GRADIENTS
+		);
+		const gradients = parseColorVariables(
+			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
+			GLOBAL_STYLES_PALETTE
+		);
+		const parsedExperimentalFeatures = parseColorVariables(
+			rawFeatures,
+			GLOBAL_STYLES_PALETTE
+		);
+
+		expect( globalStyles ).toEqual(
+			expect.objectContaining( {
+				colors: GLOBAL_STYLES_PALETTE,
+				gradients,
+				__experimentalFeatures: {
+					color: {
+						palette: parsedExperimentalFeatures?.color?.palette,
+						gradients: parsedExperimentalFeatures?.color?.gradients,
+					},
+				},
+				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+			} )
+		);
+	} );
+} );
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
index c8e2bce0c91f8a..0cf5bee75c4c75 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -66,3 +66,43 @@ export function getBlockColors( blockStyleAttributes, defaultColors ) {
 
 	return blockStyles;
 }
+
+export function parseColorVariables( styles, colorPalette ) {
+	const stylesBase = styles;
+	const colorPrefixRegex = /var\(--wp--preset--color--(.*?)\)/g;
+
+	return stylesBase
+		? JSON.parse(
+				stylesBase?.replace( colorPrefixRegex, ( _$1, $2 ) => {
+					const mappedColor = find( colorPalette, {
+						slug: $2,
+					} );
+					return mappedColor?.color;
+				} )
+		  )
+		: styles;
+}
+
+export function getGlobalStyles( rawStyles, rawFeatures, colors, gradients ) {
+	const parsedGradients = parseColorVariables(
+		JSON.stringify( gradients ),
+		colors
+	);
+	const globalStyles = parseColorVariables( rawStyles, colors );
+	const parsedExperimentalFeatures = parseColorVariables(
+		rawFeatures,
+		colors
+	);
+
+	return {
+		colors,
+		gradients: parsedGradients,
+		__experimentalFeatures: {
+			color: {
+				palette: parsedExperimentalFeatures?.color?.palette,
+				gradients: parsedExperimentalFeatures?.color?.gradients,
+			},
+		},
+		__experimentalGlobalStylesBaseStyles: globalStyles,
+	};
+}
diff --git a/packages/components/src/scrollable/hook.js b/packages/components/src/scrollable/hook.js
index 1451d46161275e..db71d3dc158f9b 100644
--- a/packages/components/src/scrollable/hook.js
+++ b/packages/components/src/scrollable/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/scrollable/styles.js b/packages/components/src/scrollable/styles.js
index 0bff9cf580bcd2..d9ae60f8f0396e 100644
--- a/packages/components/src/scrollable/styles.js
+++ b/packages/components/src/scrollable/styles.js
@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
+
 /**
  * Internal dependencies
  */
diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts
index 17215d0dfebfb8..2bca326ed584f4 100644
--- a/packages/components/src/spacer/hook.ts
+++ b/packages/components/src/spacer/hook.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/surface/hook.js b/packages/components/src/surface/hook.js
index 1269bc06c7cae1..10b46a20aeb060 100644
--- a/packages/components/src/surface/hook.js
+++ b/packages/components/src/surface/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/surface/styles.js b/packages/components/src/surface/styles.js
index 2df015ef303c7c..093f96d68e8a63 100644
--- a/packages/components/src/surface/styles.js
+++ b/packages/components/src/surface/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js
index 10016bf53fc90e..601f8139a9859e 100644
--- a/packages/components/src/text/hook.js
+++ b/packages/components/src/text/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 import { isPlainObject } from 'lodash';
 
diff --git a/packages/components/src/text/styles.js b/packages/components/src/text/styles.js
index 6323d6aedc5124..3f8dc4dd3e2070 100644
--- a/packages/components/src/text/styles.js
+++ b/packages/components/src/text/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
index a0b7815d356b5c..d24a3317328d64 100644
--- a/packages/components/src/toolbar/style.scss
+++ b/packages/components/src/toolbar/style.scss
@@ -72,12 +72,12 @@
 		}
 
 		// Ensure the icon buttons remain square.
-		&.has-icon {
+		// This needs specificity.
+		&.has-icon.has-icon {
 			// Reduce the default padding when a button only has an icon.
-			padding-left: $grid-unit-10;
-			padding-right: $grid-unit-10;
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
 			min-width: $block-toolbar-height;
-			justify-content: center;
 		}
 
 		// @todo: We should extract the tabs styles to the tabs component itself
diff --git a/packages/components/src/truncate/hook.js b/packages/components/src/truncate/hook.js
index 1598074718270c..be990dd4fcc77f 100644
--- a/packages/components/src/truncate/hook.js
+++ b/packages/components/src/truncate/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/truncate/styles.js b/packages/components/src/truncate/styles.js
index b70e64fa76828e..d49a3e3294630f 100644
--- a/packages/components/src/truncate/styles.js
+++ b/packages/components/src/truncate/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const Truncate = css`
diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/ui/context/use-context-system.js
index 48926b32c8e83f..5abbe63ef24457 100644
--- a/packages/components/src/ui/context/use-context-system.js
+++ b/packages/components/src/ui/context/use-context-system.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js
index 3dd09bc997afaf..1a94aced2f835d 100644
--- a/packages/components/src/ui/control-group/hook.js
+++ b/packages/components/src/ui/control-group/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/control-group/styles.js b/packages/components/src/ui/control-group/styles.js
index ef811dec1c51c4..2163aac28175c5 100644
--- a/packages/components/src/ui/control-group/styles.js
+++ b/packages/components/src/ui/control-group/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const first = css`
diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js
index 54d4b940f4515e..66e0d7612ea769 100644
--- a/packages/components/src/ui/control-label/hook.js
+++ b/packages/components/src/ui/control-label/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/control-label/styles.js b/packages/components/src/ui/control-label/styles.js
index 209b9fee06adfd..1a1afde87719b7 100644
--- a/packages/components/src/ui/control-label/styles.js
+++ b/packages/components/src/ui/control-label/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/form-group/form-group-styles.js b/packages/components/src/ui/form-group/form-group-styles.js
index d1c4766658159a..c69bd8b1e43def 100644
--- a/packages/components/src/ui/form-group/form-group-styles.js
+++ b/packages/components/src/ui/form-group/form-group-styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 export const FormGroup = css`
diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js
index 102a5efa634b36..b107b5cb95f988 100644
--- a/packages/components/src/ui/form-group/use-form-group.js
+++ b/packages/components/src/ui/form-group/use-form-group.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/item-group/styles.ts b/packages/components/src/ui/item-group/styles.ts
index 8ada7b89237793..a5efb4afa9cc3e 100644
--- a/packages/components/src/ui/item-group/styles.ts
+++ b/packages/components/src/ui/item-group/styles.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/item-group/use-item-group.ts b/packages/components/src/ui/item-group/use-item-group.ts
index 0942a743cd9385..a30dfdc2d9ce4f 100644
--- a/packages/components/src/ui/item-group/use-item-group.ts
+++ b/packages/components/src/ui/item-group/use-item-group.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/item-group/use-item.ts b/packages/components/src/ui/item-group/use-item.ts
index 9f1f5736562c30..f654a886d70a31 100644
--- a/packages/components/src/ui/item-group/use-item.ts
+++ b/packages/components/src/ui/item-group/use-item.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js
index fbf48792b96489..cdb29e8c5bd582 100644
--- a/packages/components/src/ui/popover/content.js
+++ b/packages/components/src/ui/popover/content.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Popover as ReakitPopover } from 'reakit';
diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/ui/popover/styles.js
index 9fc4dbc91352d7..b3bb67def80ab9 100644
--- a/packages/components/src/ui/popover/styles.js
+++ b/packages/components/src/ui/popover/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js
index 9a05ec7bbaaefe..4861941aa0552b 100644
--- a/packages/components/src/ui/tooltip/content.js
+++ b/packages/components/src/ui/tooltip/content.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Tooltip as ReakitTooltip } from 'reakit';
diff --git a/packages/components/src/ui/tooltip/styles.js b/packages/components/src/ui/tooltip/styles.js
index e50a89aab24099..8e3d0fabb69d4a 100644
--- a/packages/components/src/ui/tooltip/styles.js
+++ b/packages/components/src/ui/tooltip/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
diff --git a/packages/components/src/ui/utils/get-high-dpi.ts b/packages/components/src/ui/utils/get-high-dpi.ts
index b38e953511ddad..15b0e2f0aae001 100644
--- a/packages/components/src/ui/utils/get-high-dpi.ts
+++ b/packages/components/src/ui/utils/get-high-dpi.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, CSSInterpolation } from '@emotion/css';
 
 export function getHighDpi(
diff --git a/packages/components/src/ui/visually-hidden/hook.js b/packages/components/src/ui/visually-hidden/hook.js
index 26f3ced9797d54..a0d67887f10d72 100644
--- a/packages/components/src/ui/visually-hidden/hook.js
+++ b/packages/components/src/ui/visually-hidden/hook.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { cx } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/ui/visually-hidden/styles.js b/packages/components/src/ui/visually-hidden/styles.js
index 87f650b610d596..972c5a65f6e4ba 100644
--- a/packages/components/src/ui/visually-hidden/styles.js
+++ b/packages/components/src/ui/visually-hidden/styles.js
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /**
diff --git a/packages/components/src/utils/browsers.js b/packages/components/src/utils/browsers.js
index 4e71dd75954cb5..96008a62ac6a64 100644
--- a/packages/components/src/utils/browsers.js
+++ b/packages/components/src/utils/browsers.js
@@ -1,11 +1,14 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 
 /* eslint-disable jsdoc/no-undefined-types */
 /**
- * @param {TemplateStringsArray}                     strings
+ * @param {TemplateStringsArray}                                      strings
  * @param {import('@emotion/css/create-instance').CSSInterpolation[]} interpolations
  */
 export function firefoxOnly( strings, ...interpolations ) {
@@ -19,7 +22,7 @@ export function firefoxOnly( strings, ...interpolations ) {
 }
 
 /**
- * @param {TemplateStringsArray}                     strings
+ * @param {TemplateStringsArray}                                      strings
  * @param {import('@emotion/css/create-instance').CSSInterpolation[]} interpolations
  */
 export function safariOnly( strings, ...interpolations ) {
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 8b4d0b6d107d20..b3357e881d262b 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import type { Ref, ReactNode } from 'react';
diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index 60ae05a2a897e4..e74a60de0c705f 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -1,6 +1,9 @@
 /**
  * External dependencies
  */
+// Disable reason: Temporarily disable for existing usages
+// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
+// eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
diff --git a/packages/customize-widgets/README.md b/packages/customize-widgets/README.md
index 771e81f7a8bcc7..f99d5b945cd179 100644
--- a/packages/customize-widgets/README.md
+++ b/packages/customize-widgets/README.md
@@ -14,4 +14,20 @@ npm install @wordpress/customize-widgets
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
 
+## Technical implementation details
+
+The new Widgets Customizer replaces `Appearance > Customize > Widgets` with block-based editors. The original Customizer is a Backbone app, but the new editor is a React app. One of the challenges is to integrate them together but make sure features from both sides still work.
+
+We extend the Customizer's sections and controls in the `/controls` directory and inject some custom logic for the editor. We use React portal to render each editor in its section to reuse most of the styles and scripts provided by the Customizer.
+
+`components/sidebar-block-editor` is the entry point for each widget area's block editor. `component/sidebar-block-editor/sidebar-adapter.js` is an adapter to talk to [the Customize API](https://developer.wordpress.org/themes/customize-api/) and transform widget objects into widget instances. 
+
+`components/sidebar-block-editor/use-sidebar-block-editor.js` is a custom React Hook to integrate the adapter into React and handle most of the translations between blocks and widgets. These allow us to implement basic editing features as well as real-time preview in a backwards-compatible way.
+
+Whenever the blocks change, we run through each block to determine if there are created, edited, or deleted blocks. We then convert them to their widget counterparts and call the Customize API to update them. 
+
+For React developers, this can be thought of as a custom reconciler or a custom renderer for the Customizer. But instead of targeting DOM as the render target, we are targeting WordPress widgets using the Customize API.
+
+This is not the typical way the block editor is intended to be used. As a result, we have to also implement some missing features such as undo/redo and custom focus control. It is still a goal to make the block editor as easy to integrate into different systems as possible, so the integration in the Widgets Customizer can be a good experience for us to reflect some drawbacks in our current API and potentially improve them in the future.
+
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index d3542e120e15f4..e8973fa74d0ee5 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "1.0.11",
+	"version": "1.0.13",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 890f6040afa72b..4fea6127682e5e 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### New Features
 
 -   Added `createUser` and `deleteUser` - Create and delete a user account, respectively.
+-   Added `getCurrentUser` - Determine the currently logged in user. Changed `switchUserToAdmin` and `switchUserToTest` to use it.
 
 ## 5.3.0 (2021-05-31)
 
diff --git a/packages/e2e-test-utils/src/get-current-user.js b/packages/e2e-test-utils/src/get-current-user.js
new file mode 100644
index 00000000000000..d59ec0da2dd5da
--- /dev/null
+++ b/packages/e2e-test-utils/src/get-current-user.js
@@ -0,0 +1,16 @@
+/**
+ * Get the username of the user that's currently logged into WordPress (if any).
+ *
+ * @return {string?} username The user that's currently logged into WordPress (if any).
+ */
+export async function getCurrentUser() {
+	const cookies = await page.cookies();
+	const cookie = cookies.find(
+		( c ) => !! c?.name?.startsWith( 'wordpress_logged_in_' )
+	);
+
+	if ( ! cookie?.value ) {
+		return;
+	}
+	return decodeURIComponent( cookie.value ).split( '|' )[ 0 ];
+}
diff --git a/packages/e2e-test-utils/src/switch-user-to-admin.js b/packages/e2e-test-utils/src/switch-user-to-admin.js
index f36cab835297bc..d1e51322149c0d 100644
--- a/packages/e2e-test-utils/src/switch-user-to-admin.js
+++ b/packages/e2e-test-utils/src/switch-user-to-admin.js
@@ -1,15 +1,16 @@
 /**
  * Internal dependencies
  */
+import { getCurrentUser } from './get-current-user';
 import { loginUser } from './login-user';
-import { WP_USERNAME, WP_ADMIN_USER } from './shared/config';
+import { WP_ADMIN_USER } from './shared/config';
 
 /**
  * Switches the current user to the admin user (if the user
  * running the test is not already the admin user).
  */
 export async function switchUserToAdmin() {
-	if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+	if ( ( await getCurrentUser() ) === WP_ADMIN_USER.username ) {
 		return;
 	}
 	await loginUser( WP_ADMIN_USER.username, WP_ADMIN_USER.password );
diff --git a/packages/e2e-test-utils/src/switch-user-to-test.js b/packages/e2e-test-utils/src/switch-user-to-test.js
index c726de258fb577..b0a2d009cb0b0e 100644
--- a/packages/e2e-test-utils/src/switch-user-to-test.js
+++ b/packages/e2e-test-utils/src/switch-user-to-test.js
@@ -1,15 +1,16 @@
 /**
  * Internal dependencies
  */
+import { getCurrentUser } from './get-current-user';
 import { loginUser } from './login-user';
-import { WP_USERNAME, WP_ADMIN_USER } from './shared/config';
+import { WP_USERNAME } from './shared/config';
 
 /**
  * Switches the current user to whichever user we should be
  * running the tests as (if we're not already that user).
  */
 export async function switchUserToTest() {
-	if ( WP_USERNAME === WP_ADMIN_USER.username ) {
+	if ( ( await getCurrentUser() ) === WP_USERNAME ) {
 		return;
 	}
 	await loginUser();
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
index 00f2d0ab540744..47c67a944a2062 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json
@@ -7,7 +7,7 @@
 			"text": "My button",
 			"style": {
 				"border": {
-					"radius": 25
+					"radius": "25px"
 				}
 			}
 		},
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
index 4cc048a9c2e7eb..2f0b0fe6f6e77b 100644
--- a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:button {"style":{"border":{"radius":25}}} -->
+<!-- wp:button {"style":{"border":{"radius":"25px"}}} -->
 <div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
 <!-- /wp:button -->
 
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 8f09145bd32549..03ac6c0fb8bc1d 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.2.9",
+	"version": "2.2.11",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block.php b/packages/e2e-tests/plugins/iframed-masonry-block.php
new file mode 100644
index 00000000000000..d8d6ea14120f85
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block.php
@@ -0,0 +1,40 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Masonry Block
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-masonry-block
+ */
+
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'init',
+	function() {
+		wp_register_script(
+			'iframed-masonry-block-editor',
+			plugin_dir_url( __FILE__ ) . 'iframed-masonry-block/editor.js',
+			array(
+				'wp-blocks',
+				'wp-block-editor',
+				'wp-element',
+				'wp-compose',
+				'masonry',
+			),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-masonry-block/editor.js' )
+		);
+		wp_register_script(
+			'iframed-masonry-block-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-masonry-block/script.js',
+			array( 'masonry' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-masonry-block/script.js' )
+		);
+		register_block_type_from_metadata( __DIR__ . '/iframed-masonry-block' );
+	}
+);
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/block.json b/packages/e2e-tests/plugins/iframed-masonry-block/block.json
new file mode 100644
index 00000000000000..6b7c995df96494
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/block.json
@@ -0,0 +1,16 @@
+{
+	"apiVersion": 2,
+	"name": "test/iframed-masonry-block",
+	"title": "Iframed Masonry Block",
+	"category": "text",
+	"icon": "smiley",
+	"description": "",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "iframed-masonry-block",
+	"editorScript": "iframed-masonry-block-editor",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./style.css",
+	"script": "iframed-masonry-block-script"
+}
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/editor.css b/packages/e2e-tests/plugins/iframed-masonry-block/editor.css
new file mode 100644
index 00000000000000..99025358dca509
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/editor.css
@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied inside the editor only.
+ */
+.wp-block-test-iframed-masonry-block {
+	border: 1px dotted #f00;
+}
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js
new file mode 100644
index 00000000000000..a6d2697fe3930c
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js
@@ -0,0 +1,57 @@
+( ( { wp: { element, blocks, blockEditor, compose } } ) => {
+	const { createElement: el } = element;
+	const { registerBlockType } = blocks;
+	const { useBlockProps } = blockEditor;
+	const { useRefEffect } = compose;
+
+	const content = [
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height2' } ),
+		el( 'div', { className: 'grid-item grid-item--height3' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+		el( 'div', { className: 'grid-item grid-item--width3' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height3' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height2' } ),
+		el( 'div', { className: 'grid-item grid-item--width2' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--height3' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item' } ),
+		el( 'div', { className: 'grid-item grid-item--height2' } ),
+	]
+
+	registerBlockType( 'test/iframed-masonry-block', {
+		edit: function Edit() {
+			const ref = useRefEffect( ( node ) => {
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+
+				if ( ! defaultView.Masonry ) {
+					return;
+				}
+
+				const masonry = new defaultView.Masonry( node, {
+					itemSelector: '.grid-item',
+				} );
+
+				return () => {
+					masonry.destroy();
+				};
+			} );
+			return el( 'div', useBlockProps( { ref } ), ...content );
+		},
+		save: function Save() {
+			return el( 'div', useBlockProps.save(), ...content );
+		},
+	} );
+} )( window );
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/script.js b/packages/e2e-tests/plugins/iframed-masonry-block/script.js
new file mode 100644
index 00000000000000..e287e6ec2e9745
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/script.js
@@ -0,0 +1,13 @@
+( ( win ) => {
+	const { Masonry, document } = win;
+	win.addEventListener( 'DOMContentLoaded', () => {
+		document
+			.querySelectorAll( '.wp-block-test-iframed-masonry-block' )
+			.forEach( ( element ) => {
+				new Masonry( element, {
+					itemSelector: '.grid-item',
+				} );
+			} );
+	} );
+} )( window );
+
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/style.css b/packages/e2e-tests/plugins/iframed-masonry-block/style.css
new file mode 100644
index 00000000000000..321f2347b02328
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/style.css
@@ -0,0 +1,23 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ */
+.wp-block-test-iframed-masonry-block {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}
+
+.grid-item {
+    float: left;
+    width: 80px;
+    height: 60px;
+    background: #D26;
+    border: 2px solid #333;
+    border-color: hsla(0, 0%, 0%, 0.5);
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.grid-item--width2 { width: 160px; }
+.grid-item--height2 { height: 140px; }
diff --git a/packages/e2e-tests/plugins/marquee-function-widget.php b/packages/e2e-tests/plugins/marquee-function-widget.php
index 43b4f15661772f..dda0c3f9a6e273 100644
--- a/packages/e2e-tests/plugins/marquee-function-widget.php
+++ b/packages/e2e-tests/plugins/marquee-function-widget.php
@@ -34,15 +34,17 @@ function() {
 			$greeting = get_option( 'marquee_greeting' );
 			?>
 			<p>
-				<label for="marquee-greeting">Greeting:</label>
-				<input
-					id="marquee-greeting"
-					class="widefat"
-					name="marquee-greeting"
-					type="text"
-					value="<?php echo esc_attr( $greeting ); ?>"
-					placeholder="Hello!"
-				/>
+				<label>
+					Greeting:
+					<input
+						class="widefat"
+						data-testid="marquee-greeting"
+						name="marquee-greeting"
+						type="text"
+						value="<?php echo esc_attr( $greeting ); ?>"
+						placeholder="Hello!"
+					/>
+				</label>
 			</p>
 			<?php
 		}
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
new file mode 100644
index 00000000000000..1c0d56386164f5
--- /dev/null
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`changing image size should load script and dependencies in iframe 1`] = `
+"<!-- wp:test/iframed-masonry-block -->
+<div class=\\"wp-block-test-iframed-masonry-block\\"><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div></div>
+<!-- /wp:test/iframed-masonry-block -->"
+`;
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
new file mode 100644
index 00000000000000..5c12f2abb1b6aa
--- /dev/null
+++ b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	getEditedPostContent,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+async function didMasonryLoadCorrectly( context ) {
+	return await context.evaluate( () => {
+		const container = document.querySelector(
+			'.wp-block-test-iframed-masonry-block'
+		);
+		return (
+			// Expect Masonry to set a non-zero height.
+			parseInt( container.style.height, 10 ) > 0 &&
+			// Expect Masonry to absolute position items.
+			container.firstElementChild.style.position === 'absolute'
+		);
+	} );
+}
+
+describe( 'changing image size', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-masonry-block' );
+	} );
+
+	it( 'should load script and dependencies in iframe', async () => {
+		await insertBlock( 'Iframed Masonry Block' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+		expect( await didMasonryLoadCorrectly( page ) ).toBe( true );
+
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		await canvas().waitForSelector( '.grid-item[style]' );
+
+		expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
+	} );
+} );
diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap
index 469047fa627266..b4d29c714824d7 100644
--- a/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap
+++ b/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap
@@ -13,7 +13,7 @@ exports[`Post Editor Template mode Allow creating custom block templates in clas
 
 
 <main class=\\"wp-block-group\\" id=\\"wp--skip-link--target\\">
-<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><div class=\\"wp-block-group__inner-container\\"><div class=\\"wp-block-group__inner-container\\"><h2 class=\\"wp-block-post-title\\">Another FSE Post</h2></div></div></div></div>
+<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><div class=\\"wp-block-group__inner-container\\"><h2 class=\\"wp-block-post-title\\">Another FSE Post</h2></div></div></div>
 
 
 <div class=\\"entry-content wp-block-post-content\\">
diff --git a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
index 9212d6ee436e8e..4c389d1076970f 100644
--- a/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/experiments/blocks/navigation.test.js
@@ -592,7 +592,9 @@ describe( 'Navigation', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'loads frontend code only if the block is present', async () => {
+	// The following tests are unstable, roughly around when https://github.com/WordPress/wordpress-develop/pull/1412
+	// landed. The block manually tests well, so let's skip to unblock other PRs and immediately follow up. cc @vcanales
+	it.skip( 'loads frontend code only if the block is present', async () => {
 		// Mock the response from the Pages endpoint. This is done so that the pages returned are always
 		// consistent and to test the feature more rigorously than the single default sample page.
 		await mockPagesResponse( [
@@ -650,7 +652,7 @@ describe( 'Navigation', () => {
 		expect( tagCount ).toBe( 1 );
 	} );
 
-	it( 'loads frontend code only if responsiveness is turned on', async () => {
+	it.skip( 'loads frontend code only if responsiveness is turned on', async () => {
 		await mockPagesResponse( [
 			{
 				title: 'Home',
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index e9cf7fa91c15b0..642af7ee8171b6 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -16,7 +16,7 @@ import {
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { find, findAll, waitFor } from 'puppeteer-testing-library';
+import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';
 
 describe( 'Widgets screen', () => {
@@ -89,6 +89,12 @@ describe( 'Widgets screen', () => {
 		);
 		expect( categoryHeaders.length > 0 ).toBe( true );
 
+		const searchBox = await find( {
+			role: 'searchbox',
+			name: 'Search for blocks and patterns',
+		} );
+		await searchBox.type( blockName );
+
 		const addBlock = await find(
 			{
 				role: 'option',
@@ -394,109 +400,123 @@ describe( 'Widgets screen', () => {
 	` );
 	} );
 
-	async function addMarquee() {
-		// There will be 2 matches here.
-		// One is the in-between inserter,
-		// and the other one is the button block appender.
-		const [ inlineInserterButton ] = await findAll( {
-			role: 'combobox',
-			name: 'Add block',
-		} );
-		await inlineInserterButton.click();
-
-		// TODO: Convert to find() API from puppeteer-testing-library.
-		const inserterSearchBox = await page.waitForSelector(
-			'aria/Search for blocks and patterns[role="searchbox"]'
-		);
-		await expect( inserterSearchBox ).toHaveFocus();
+	describe( 'Function widgets', () => {
+		async function addMarquee( nbExpectedMarquees ) {
+			const marqueeBlock = await getBlockInGlobalInserter(
+				'Marquee Greeting'
+			);
+			await marqueeBlock.click();
+			await page.waitForFunction(
+				( expectedMarquees ) => {
+					return (
+						document.querySelectorAll(
+							'[data-testid="marquee-greeting"]'
+						).length === expectedMarquees
+					);
+				},
+				{},
+				nbExpectedMarquees
+			);
+		}
 
-		await page.keyboard.type( 'Marquee' );
+		async function deleteExistingMarquees() {
+			const widgetAreasHoldingMarqueeWidgets = await page.$x(
+				'//input[@data-testid="marquee-greeting"]/ancestor::div[@aria-label="Block: Widget Area"]'
+			);
+			for ( const widgetArea of widgetAreasHoldingMarqueeWidgets ) {
+				const closedPanelBody = await widgetArea.$(
+					'.components-panel__body:not(.is-opened)'
+				);
+				if ( closedPanelBody ) {
+					await closedPanelBody.focus();
+					await closedPanelBody.click();
+				}
 
-		const inlineQuickInserter = await find( {
-			role: 'listbox',
-			name: 'Blocks',
-		} );
-		const marqueeBlockOption = await find(
-			{
-				role: 'option',
-			},
-			{
-				root: inlineQuickInserter,
+				const [ existingMarqueeWidgets ] = await widgetArea.$x(
+					'//input[@data-testid="marquee-greeting"]/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]'
+				);
+				if ( existingMarqueeWidgets ) {
+					await existingMarqueeWidgets.focus();
+					await pressKeyWithModifier( 'access', 'z' );
+				}
 			}
-		);
-		await marqueeBlockOption.click();
-	}
-
-	it( 'Should add and save the marquee widget', async () => {
-		await activatePlugin( 'gutenberg-test-marquee-widget' );
-		await visitAdminPage( 'widgets.php' );
+		}
 
-		await addMarquee();
+		beforeAll( async () => {
+			await activatePlugin( 'gutenberg-test-marquee-widget' );
+		} );
 
-		await find( {
-			selector: '[data-block][data-type="core/legacy-widget"]',
+		beforeEach( async () => {
+			await deleteExistingMarquees();
 		} );
 
-		const greetingsInput = await find( {
-			selector: '#marquee-greeting',
+		afterAll( async () => {
+			await deactivatePlugin( 'gutenberg-test-marquee-widget' );
 		} );
-		await greetingsInput.click();
-		await page.keyboard.type( 'Howdy' );
 
-		await saveWidgets();
+		it( 'Should add and save the marquee widget', async () => {
+			await addMarquee( 1 );
 
-		let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			const [ marqueeInput ] = await page.$x(
+				'//input[@data-testid="marquee-greeting"]'
+			);
+			await marqueeInput.focus();
+			await marqueeInput.type( 'Howdy' );
 
-		await page.reload();
+			// The first marquee is saved after clicking the form save button.
+			const [ marqueeSaveButton ] = await marqueeInput.$x(
+				'//input/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]//button[@type="submit"]'
+			);
+			await marqueeSaveButton.click();
 
-		editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			await saveWidgets();
 
-		// Add another marquee, it shouldn't be saved
-		await addMarquee();
+			let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
-		// It takes a moment to load the form, let's wait for it.
-		await waitFor( async () => {
-			const marquees = await findAll( {
-				selector: '[id=marquee-greeting]',
-			} );
-			if ( marquees.length === 1 ) {
-				throw new Error();
+			await page.reload();
+
+			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
 			}
-		} );
+		` );
 
-		const marquees = await findAll( {
-			selector: '[id=marquee-greeting]',
-		} );
+			await addMarquee( 2 );
 
-		expect( marquees ).toHaveLength( 2 );
-		await marquees[ 1 ].click();
-		await page.keyboard.type( 'Second howdy' );
+			const marqueeInputs = await page.$$(
+				'[data-testid="marquee-greeting"]'
+			);
 
-		await saveWidgets();
-		editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			expect( marqueeInputs ).toHaveLength( 2 );
+			await marqueeInputs[ 0 ].focus();
+			await marqueeInputs[ 0 ].type( 'first howdy' );
+
+			await marqueeInputs[ 1 ].focus();
+			await marqueeInputs[ 1 ].type( 'Second howdy' );
+
+			// No marquee should be changed without clicking on their "save" button.
+			// The second marquee shouldn't be stored as a widget.
+			// See #32978 for more info.
+			await saveWidgets();
+			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
-		await page.reload();
-		const marqueesAfter = await findAll( {
-			selector: '[id=marquee-greeting]',
+			await page.reload();
+			const marqueesAfter = await findAll( {
+				selector: '[data-testid="marquee-greeting"]',
+			} );
+			expect( marqueesAfter ).toHaveLength( 1 );
 		} );
-		expect( marqueesAfter ).toHaveLength( 1 );
-
-		await deactivatePlugin( 'gutenberg-test-marquee-widget' );
 	} );
 
 	// Disable reason: We temporary skip this test until we can figure out why it fails sometimes.
@@ -528,7 +548,6 @@ describe( 'Widgets screen', () => {
 		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>First Paragraph</p>
 		</div></div>",
-		  "wp_inactive_widgets": "",
 		}
 	` );
 		const initialWidgets = await getWidgetAreaWidgets();
@@ -599,7 +618,6 @@ describe( 'Widgets screen', () => {
 		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>First Paragraph</p>
 		</div></div>",
-		  "wp_inactive_widgets": "",
 		}
 	` );
 		const editedWidgets = await getWidgetAreaWidgets();
diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json
index 22c281185675e1..66247f0bcf7889 100644
--- a/packages/edit-navigation/package.json
+++ b/packages/edit-navigation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-navigation",
-	"version": "1.9.10",
+	"version": "1.9.12",
 	"private": true,
 	"description": "Module for the Navigation page in WordPress.",
 	"author": "The WordPress Contributors",
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 1faa6d09fb5d01..fe2c1e49392cbe 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "4.1.12",
+	"version": "4.1.14",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index f0abe54cfc9e97..d98bae6739ef59 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -9,7 +9,11 @@ import SafeArea from 'react-native-safe-area';
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { BottomSheetSettings, FloatingToolbar } from '@wordpress/block-editor';
+import {
+	BottomSheetSettings,
+	FloatingToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
 	HTMLTextInput,
@@ -101,7 +105,7 @@ class Layout extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme, mode } = this.props;
+		const { getStylesFromColorScheme, mode, globalStyles } = this.props;
 
 		const isHtmlView = mode === 'text';
 
@@ -118,6 +122,16 @@ class Layout extends Component {
 			bottom: this.state.safeAreaInsets.bottom,
 		};
 
+		const editorStyles = [
+			getStylesFromColorScheme(
+				styles.background,
+				styles.backgroundDark
+			),
+			globalStyles?.background && {
+				backgroundColor: globalStyles.background,
+			},
+		];
+
 		return (
 			<Tooltip.Slot>
 				<SafeAreaView
@@ -128,12 +142,7 @@ class Layout extends Component {
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />
-					<View
-						style={ getStylesFromColorScheme(
-							styles.background,
-							styles.backgroundDark
-						) }
-					>
+					<View style={ editorStyles }>
 						{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 						{ ! isHtmlView && Platform.OS === 'android' && (
 							<FloatingToolbar />
@@ -176,9 +185,14 @@ export default compose( [
 			editorStore
 		);
 		const { getEditorMode } = select( editPostStore );
+		const { getSettings } = select( blockEditorStore );
+		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
+			?.color;
+
 		return {
 			isReady: isEditorReady(),
 			mode: getEditorMode(),
+			globalStyles,
 		};
 	} ),
 	withPreferredColorScheme,
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 5e8927afeab710..c0302861b16dd3 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "2.1.12",
+	"version": "2.1.14",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 65418504de58c3..2a7ce2a3459ad6 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "2.1.12",
+	"version": "2.1.14",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index c7404158e8e9b3..102c38d2f2d96d 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "10.1.10",
+	"version": "10.1.11",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 36b67b9756d455..58029c2789faae 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -147,7 +147,7 @@ export class PostPublishButton extends Component {
 		};
 
 		const buttonProps = {
-			'aria-disabled': isButtonDisabled && ! hasNonPostEntityChanges,
+			'aria-disabled': isButtonDisabled,
 			className: 'editor-post-publish-button',
 			isBusy: ! isAutoSaving && isSaving && isPublished,
 			variant: 'primary',
diff --git a/packages/editor/src/components/post-publish-button/test/index.js b/packages/editor/src/components/post-publish-button/test/index.js
index 7dbcc34036c02a..b816b0477149fb 100644
--- a/packages/editor/src/components/post-publish-button/test/index.js
+++ b/packages/editor/src/components/post-publish-button/test/index.js
@@ -25,6 +25,22 @@ describe( 'PostPublishButton', () => {
 			);
 		} );
 
+		it( 'should be true if post is currently saving, even if there are non-post entity changes', () => {
+			// This normally means that we're still saving those changes.
+			const wrapper = shallow(
+				<PostPublishButton
+					hasNonPostEntityChanges
+					isPublishable
+					isSaveable
+					isSaving
+				/>
+			);
+
+			expect( wrapper.find( Button ).prop( 'aria-disabled' ) ).toBe(
+				true
+			);
+		} );
+
 		it( 'should be true if forceIsSaving is true', () => {
 			const wrapper = shallow(
 				<PostPublishButton isPublishable isSaveable forceIsSaving />
@@ -96,6 +112,20 @@ describe( 'PostPublishButton', () => {
 				false
 			);
 		} );
+
+		it( 'should be false if there are non-post entity changes', () => {
+			const wrapper = shallow(
+				<PostPublishButton
+					hasNonPostEntityChanges
+					isPublishable
+					isSaveable
+				/>
+			);
+
+			expect( wrapper.find( Button ).prop( 'aria-disabled' ) ).toBe(
+				false
+			);
+		} );
 	} );
 
 	describe( 'publish status', () => {
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index c2092bd70e3398..5b58fba2f1810c 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -97,7 +97,11 @@ export class PostPublishPanel extends Component {
 								/>
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
-								<Button onClick={ onClose } variant="secondary">
+								<Button
+									disabled={ isSaving }
+									onClick={ onClose }
+									variant="secondary"
+								>
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 7bd560d187275c..e7507902cb5fea 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -135,6 +135,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       className="editor-post-publish-panel__header-cancel-button"
     >
       <ForwardRef(Button)
+        disabled={false}
         variant="secondary"
       >
         Cancel
@@ -175,6 +176,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       className="editor-post-publish-panel__header-cancel-button"
     >
       <ForwardRef(Button)
+        disabled={true}
         variant="secondary"
       >
         Cancel
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 0587f26227ec83..4e117f73fb315b 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -19,6 +19,8 @@ import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -107,12 +109,20 @@ class PostTitle extends Component {
 			borderStyle,
 			isDimmed,
 			postType,
+			globalStyles,
 		} = this.props;
 
 		const decodedPlaceholder = decodeEntities( placeholder );
 		const borderColor = this.props.isSelected
 			? focusedBorderColor
 			: 'transparent';
+		const titleStyles = {
+			...style,
+			...( globalStyles?.text && {
+				color: globalStyles.text,
+				placeholderColor: globalStyles.text,
+			} ),
+		};
 
 		return (
 			<View
@@ -134,7 +144,7 @@ class PostTitle extends Component {
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					multiline={ false }
-					style={ style }
+					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }
 					fontWeight={ 'bold' }
@@ -159,30 +169,34 @@ class PostTitle extends Component {
 export default compose(
 	withSelect( ( select ) => {
 		const { isPostTitleSelected, getEditedPostAttribute } = select(
-			'core/editor'
-		);
-
-		const { getSelectedBlockClientId, getBlockRootClientId } = select(
-			'core/block-editor'
+			editorStore
 		);
+		const {
+			getSelectedBlockClientId,
+			getBlockRootClientId,
+			getSettings,
+		} = select( blockEditorStore );
 
 		const selectedId = getSelectedBlockClientId();
 		const selectionIsNested = !! getBlockRootClientId( selectedId );
+		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
+			?.color;
 
 		return {
 			postType: getEditedPostAttribute( 'type' ),
 			isAnyBlockSelected: !! selectedId,
 			isSelected: isPostTitleSelected(),
 			isDimmed: selectionIsNested,
+			globalStyles,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { undo, redo, togglePostTitleSelection } = dispatch(
-			'core/editor'
+			editorStore
 		);
 
 		const { clearSelectedBlock, insertDefaultBlock } = dispatch(
-			'core/block-editor'
+			blockEditorStore
 		);
 
 		return {
diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
index df425e279fc05c..8440c998856622 100644
--- a/packages/editor/src/components/provider/index.native.js
+++ b/packages/editor/src/components/provider/index.native.js
@@ -13,14 +13,10 @@ import RNReactNativeGutenbergBridge, {
 	subscribeSetTitle,
 	subscribeMediaAppend,
 	subscribeReplaceBlock,
-	subscribeUpdateTheme,
+	subscribeUpdateEditorSettings,
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 } from '@wordpress/react-native-bridge';
-
-/**
- * WordPress dependencies
- */
 import { Component } from '@wordpress/element';
 import { count as wordCount } from '@wordpress/wordcount';
 import {
@@ -37,6 +33,7 @@ import {
 	validateThemeGradients,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { getGlobalStyles } from '@wordpress/components';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -84,13 +81,11 @@ class NativeEditorProvider extends Component {
 	}
 
 	componentDidMount() {
-		const { capabilities, colors, gradients } = this.props;
+		const { capabilities, updateSettings } = this.props;
 
-		this.props.updateSettings( {
+		updateSettings( {
 			...capabilities,
-			// Set theme colors for the editor
-			...( colors ? { colors } : {} ),
-			...( gradients ? { gradients } : {} ),
+			...this.getThemeColors( this.props ),
 		} );
 
 		this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {
@@ -137,15 +132,10 @@ class NativeEditorProvider extends Component {
 			}
 		);
 
-		this.subscriptionParentUpdateTheme = subscribeUpdateTheme(
-			( theme ) => {
-				// Reset the colors and gradients in case one theme was set with custom items and then updated to a theme without custom elements.
-
-				theme.colors = validateThemeColors( theme.colors );
-
-				theme.gradients = validateThemeGradients( theme.gradients );
-
-				this.props.updateSettings( theme );
+		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
+			( editorSettings ) => {
+				const themeColors = this.getThemeColors( editorSettings );
+				updateSettings( themeColors );
 			}
 		);
 
@@ -187,8 +177,8 @@ class NativeEditorProvider extends Component {
 			this.subscriptionParentMediaAppend.remove();
 		}
 
-		if ( this.subscriptionParentUpdateTheme ) {
-			this.subscriptionParentUpdateTheme.remove();
+		if ( this.subscriptionParentUpdateEditorSettings ) {
+			this.subscriptionParentUpdateEditorSettings.remove();
 		}
 
 		if ( this.subscriptionParentUpdateCapabilities ) {
@@ -200,6 +190,17 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
+	getThemeColors( { colors, gradients, rawStyles, rawFeatures } ) {
+		return {
+			...( rawStyles
+				? getGlobalStyles( rawStyles, rawFeatures, colors, gradients )
+				: {
+						colors: validateThemeColors( colors ),
+						gradients: validateThemeGradients( gradients ),
+				  } ),
+		};
+	}
+
 	componentDidUpdate( prevProps ) {
 		if ( ! prevProps.isReady && this.props.isReady ) {
 			const blocks = this.props.blocks;
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 1a9d38039fc826..b1dfec6ba955c2 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "2.1.7",
+	"version": "2.1.8",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index d015267a8e38f7..8a9e7efae2fa1e 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -11,6 +11,7 @@ import {
 	isCollapsed,
 	applyFormat,
 	useAnchorRef,
+	removeFormat,
 } from '@wordpress/rich-text';
 import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
 
@@ -48,6 +49,13 @@ function InlineLinkUI( {
 		...nextLinkValue,
 	};
 
+	function removeLink() {
+		const newValue = removeFormat( value, 'core/link' );
+		onChange( newValue );
+		stopAddingLink();
+		speak( __( 'Link removed.' ), 'assertive' );
+	}
+
 	function onChangeLink( nextValue ) {
 		// Merge with values from state, both for the purpose of assigning the
 		// next state value, and for use in constructing the new link format if
@@ -139,6 +147,7 @@ function InlineLinkUI( {
 			<LinkControl
 				value={ linkValue }
 				onChange={ onChangeLink }
+				onRemove={ removeLink }
 				forceIsEditingLink={ addingLink }
 				hasRichPreviews
 			/>
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 7d42adbfe5ca22..943c15c29556f9 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "3.1.5",
+	"version": "3.1.6",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index b1b44353b687ff..ad2531e7e29779 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "2.1.4",
+	"version": "2.1.5",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/package.json b/packages/nux/package.json
index 9378b50a3f9367..5cb82913411485 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "4.1.4",
+	"version": "4.1.5",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 0dcbf34b6acce5..4b9657671b6cbb 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
index cd8ffb69b7dbb0..b67cae08e932eb 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
@@ -14,7 +14,10 @@
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.webkit.WebViewClient;
+import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.ProgressBar;
+import android.widget.TextView;
 
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.ActionBar;
@@ -41,7 +44,10 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
     private static final String JAVA_SCRIPT_INTERFACE_NAME = "wpwebkit";
 
     protected WebView mWebView;
-    protected View mForegroundView;
+    protected LinearLayout mForegroundView;
+    protected ImageView mForegroundViewImage;
+    protected TextView mForegroundViewTitle;
+    protected TextView mForegroundViewSubtitle;
     protected boolean mIsRedirected;
 
     private ProgressBar mProgressBar;
@@ -61,11 +67,24 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
                         // Insert block content
                         insertBlockScript();
                     }, 200);
+                } else {
+                    final Handler handler = new Handler();
+                    handler.postDelayed(() -> {
+                        if (!mIsGutenbergReady) {
+                            showTroubleshootingInstructions();
+                        }
+                    }, 10000);
                 }
             }
         }
     };
 
+    private void showTroubleshootingInstructions() {
+        mForegroundViewTitle.setText(R.string.block_editor_failed_title);
+        mForegroundViewSubtitle.setText(R.string.block_editor_failed_subtitle);
+        mForegroundViewImage.setVisibility(ImageView.VISIBLE);
+    }
+
     @SuppressLint("SetJavaScriptEnabled")
     protected void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
@@ -75,6 +94,9 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
 
         mWebView = findViewById(R.id.gutenberg_web_view);
         mForegroundView = findViewById(R.id.foreground_view);
+        mForegroundViewImage = findViewById(R.id.foreground_view_image);
+        mForegroundViewTitle = findViewById(R.id.foreground_view_title);
+        mForegroundViewSubtitle = findViewById(R.id.foreground_view_subtitle);
         mProgressBar = findViewById(R.id.progress_bar);
 
         // Set settings
@@ -271,7 +293,7 @@ private void onGutenbergReady() {
             }
             // We need some extra time to hide all unwanted html elements
             // like NUX (new user experience) modal is.
-            mForegroundView.postDelayed(() -> mForegroundView.setVisibility(View.INVISIBLE), 1500);
+            mForegroundView.postDelayed(() -> mForegroundView.setVisibility(LinearLayout.INVISIBLE), 1500);
         }, 2000);
     }
 
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
index 4f7c04bd8b3ca0..896748b541559e 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -44,7 +44,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_NOTIFY_MODAL_CLOSED = "notifyModalClosed";
     private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
     private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
-    private static final String EVENT_NAME_UPDATE_THEME = "updateTheme";
+    private static final String EVENT_NAME_UPDATE_EDITOR_SETTINGS = "updateEditorSettings";
     private static final String EVENT_NAME_SHOW_NOTICE = "showNotice";
 
     private static final String MAP_KEY_UPDATE_HTML = "html";
@@ -57,6 +57,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     public static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_TYPE = "mediaType";
     private static final String MAP_KEY_THEME_UPDATE_COLORS = "colors";
     private static final String MAP_KEY_THEME_UPDATE_GRADIENTS = "gradients";
+    private static final String MAP_KEY_THEME_UPDATE_RAW_STYLES = "rawStyles";
     public static final String MAP_KEY_MEDIA_FINAL_SAVE_RESULT_SUCCESS_VALUE = "success";
 
     private static final String MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK = "isPreferredColorSchemeDark";
@@ -144,6 +145,7 @@ public void updateTheme(@Nullable Bundle editorTheme) {
         WritableMap writableMap = new WritableNativeMap();
         Serializable colors = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_COLORS);
         Serializable gradients = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_GRADIENTS);
+        Serializable rawStyles = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_STYLES);
 
         if (colors != null) {
             writableMap.putArray(MAP_KEY_THEME_UPDATE_COLORS, Arguments.fromList((ArrayList)colors));
@@ -153,7 +155,11 @@ public void updateTheme(@Nullable Bundle editorTheme) {
             writableMap.putArray(MAP_KEY_THEME_UPDATE_GRADIENTS, Arguments.fromList((ArrayList)gradients));
         }
 
-        emitToJS(EVENT_NAME_UPDATE_THEME, writableMap);
+        if (rawStyles != null) {
+            writableMap.putString(MAP_KEY_THEME_UPDATE_RAW_STYLES, rawStyles.toString());
+        }
+
+        emitToJS(EVENT_NAME_UPDATE_EDITOR_SETTINGS, writableMap);
     }
 
     @ReactMethod
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 4425769cfe8b87..aa49f177f3c235 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -36,6 +36,10 @@ data class GutenbergProps @JvmOverloads constructor(
         editorTheme?.also { theme ->
             theme.getSerializable(PROP_COLORS)?.let { putSerializable(PROP_COLORS, it) }
             theme.getSerializable(PROP_GRADIENTS)?.let { putSerializable(PROP_GRADIENTS, it) }
+            theme.getSerializable(PROP_STYLES)
+                    ?.let { putSerializable(PROP_STYLES, it) }
+            theme.getSerializable(PROP_FEATURES)
+                    ?.let { putSerializable(PROP_FEATURES, it) }
         }
     }
 
@@ -69,6 +73,8 @@ data class GutenbergProps @JvmOverloads constructor(
         private const val PROP_TRANSLATIONS = "translations"
         private const val PROP_COLORS = "colors"
         private const val PROP_GRADIENTS = "gradients"
+        private const val PROP_STYLES = "rawStyles"
+        private const val PROP_FEATURES = "rawFeatures"
 
         const val PROP_CAPABILITIES = "capabilities"
         const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock"
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ube_failed.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ube_failed.xml
new file mode 100644
index 00000000000000..ed681ac99a1ea8
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/drawable/ube_failed.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="102dp"
+    android:width="152dp"
+    android:viewportHeight="102"
+    android:viewportWidth="152">
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M134,87.3c1.5-0.5,5.3-2,8.1-4.4c2.4-1.9,4.3-4.3,5.6-7s2-5.7,2.2-8.7s-0.1-6.1-0.8-9c-0.9-2.7-1.2-4.4-4.1-8 c-4.7-5.3-8.7-6.9-15.5-8.5c-3-0.5-6.1-0.5-8.9,0.1c-0.6,0.2-1.7-0.3-1.4-1.5l0,0c1.1-3.5,1.4-7.3,0.8-11 c-0.3-4.4-4.4-17.1-21.3-24.7c-7.1-2.9-14.9-3.3-22.5-2.2C72.5,3,68.8,4,65.4,5.7c-1.7,0.9-3.3,1.9-4.8,3.1s-2.8,2.6-4,4.2 c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1-0.1-0.1-0.2-0.1-0.3c2.1-3.4,5.1-6.1,8.6-8.1c3.5-1.9,7.3-3.2,11.3-3.9C78,0.4,81.1,0,84.9,0 C92,0.1,95.8,1.3,99.6,2.7c18.2,7.2,22.2,22.1,22.9,26.2c0.6,3.3,0.3,7-0.4,10.3l0,0c2.6-0.4,5.3-0.2,7.9,0.2 c7.7,1,14.5,6.3,16.8,9.4c2.3,2.6,3.8,6.5,4.4,8.7c0.8,3.2,1.1,6.5,0.8,9.7s-1.1,6.5-2.7,9.4c-1.5,2.9-3.8,5.4-6.4,7.3 c-2.6,1.9-5.7,3.1-8.8,3.8c-0.1,0-0.3-0.1-0.3-0.2C133.8,87.4,133.8,87.3,134,87.3">
+  </path>
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M26.703,0.758C36.249,8.626 45.302,17.018 54.386,25.377L81.642,50.45L108.724,75.706C117.753,84.124 126.814,92.508 135.379,101.416L135.057,101.758C125.51,93.89 116.458,85.497 107.372,77.138L80.116,52.065L53.035,26.809C44.006,18.391 34.946,10.007 26.379,1.1L26.703,0.758Z">
+  </path>
+
+  <path
+      android:fillColor="@color/neutral_20"
+      android:pathData="M104.2,90.8c-7.5,0.7-14.9,0.8-22.4,0.8l-22.4,0.1c-3.7,0-7.5,0-11.2,0c-3.8,0-7.6-0.2-11.3-0.7c-7.5-1-15-3-21.6-7.1 c-3.3-2-6.3-4.5-8.7-7.6c-2.4-3-4.2-6.5-5.3-10.3c-0.5-1.9-0.9-3.8-1.1-5.7C0,58.3,0,56.2,0.1,54.7c0.1-3.9,1.2-7.7,2.9-11.2 c1.7-3.5,3.9-6.6,6.6-9.4c2.6-2.8,5.7-5.1,9.1-6.9c3.4-1.7,7.1-2.9,11-3.1c1.9-0.1,3.8,0,5.7,0.3c1.9,0.3,3.7,0.9,5.4,1.7 c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1l0,0c-1.7-0.6-3.5-1-5.4-1.3c-1.8-0.2-3.7-0.2-5.5,0c-3.6,0.4-7.1,1.6-10.3,3.4 C13,32.2,7.8,37.8,4.7,44.3c-1.5,3.3-2.5,6.8-2.6,10.4C2,57.3,2,58.5,2.2,60.2c0.2,1.8,0.5,3.6,1,5.3c1,3.5,2.7,6.7,5,9.5 c2.2,2.8,5.1,5.2,8.2,7.1c6.2,3.8,13.5,5.8,20.7,6.7c3.7,0.4,7.3,0.6,11,0.6c3.7,0,7.5,0,11.2,0l22.4,0.1c7.5,0,14.9,0.1,22.4,0.8 c0.1,0,0.2,0.1,0.2,0.3C104.4,90.6,104.3,90.7,104.2,90.8">
+  </path>
+
+</vector>
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml
index 26024f79f21b5a..2dcf133412d64e 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_web_view.xml
@@ -32,11 +32,44 @@
         android:layout_height="match_parent"
         android:visibility="visible"/>
 
-    <View
+    <LinearLayout
         android:id="@+id/foreground_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/white"/>
+        android:background="@color/white"
+        android:gravity="center"
+        android:paddingStart="@dimen/foreground_view_padding_large"
+        android:paddingEnd="@dimen/foreground_view_padding_large"
+        android:orientation="vertical">
+
+        <ImageView
+            android:id="@+id/foreground_view_image"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="@dimen/foreground_view_padding_medium"
+            android:layout_marginTop="@dimen/foreground_view_padding_medium"
+            android:src="@drawable/ube_failed"
+            android:contentDescription="@null" 
+            android:visibility="gone" />
+
+        <TextView
+            android:id="@+id/foreground_view_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:layout_marginBottom="@dimen/foreground_view_padding_small"
+            android:text="@string/block_editor_loading_title"
+            android:textSize="@dimen/foreground_view_text_size_large" />
+
+        <TextView
+            android:id="@+id/foreground_view_subtitle"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:layout_marginBottom="@dimen/foreground_view_padding_medium"
+            android:text="@string/block_editor_loading_subtitle"
+            android:textSize="@dimen/foreground_view_text_size_medium" />
+    </LinearLayout>
 
     <ProgressBar
         android:id="@+id/progress_bar"
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/colors.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/colors.xml
index 9029f837ff1d3f..d0c4a25d8c48b3 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/colors.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/colors.xml
@@ -3,4 +3,6 @@
 
     <color name="status_bar_color">#006088</color>
 
+    <color name="neutral_20">#a7aaad</color>
+
 </resources>
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/dimens.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/dimens.xml
index 55b8f63169a804..cd6054d65b6401 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/dimens.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/dimens.xml
@@ -7,4 +7,11 @@
     <dimen name="toolbar_content_offset">72dp</dimen>
     <dimen name="toolbar_content_offset_end">0dp</dimen>
 
+    <dimen name="foreground_view_padding_large">30dp</dimen>
+    <dimen name="foreground_view_padding_medium">16dp</dimen>
+    <dimen name="foreground_view_padding_small">8dp</dimen>
+
+    <dimen name="foreground_view_text_size_large">20sp</dimen>
+    <dimen name="foreground_view_text_size_medium">16sp</dimen>
+
 </resources>
\ No newline at end of file
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/strings.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/strings.xml
index 36c2e8cf1f93ec..5e7bc7a1012e8c 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/strings.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/values/strings.xml
@@ -3,4 +3,10 @@
 
     <string name="menu_save">Save</string>
 
+    <string name="block_editor_loading_title">Loading the block editor...</string>
+    <string name="block_editor_loading_subtitle">Please ensure the block editor is enabled on your site. If it is not enabled, it will not load.</string>
+
+    <string name="block_editor_failed_title">Unable to load the block editor right now.</string>
+    <string name="block_editor_failed_subtitle">Please ensure the block editor is enabled on your site and try again.</string>
+
 </resources>
\ No newline at end of file
diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
index fde2f098563465..7d781095749b0d 100644
--- a/packages/react-native-bridge/index.js
+++ b/packages/react-native-bridge/index.js
@@ -125,8 +125,11 @@ export function subscribeAndroidModalClosed( callback ) {
 		: undefined;
 }
 
-export function subscribeUpdateTheme( callback ) {
-	return gutenbergBridgeEvents.addListener( 'updateTheme', callback );
+export function subscribeUpdateEditorSettings( callback ) {
+	return gutenbergBridgeEvents.addListener(
+		'updateEditorSettings',
+		callback
+	);
 }
 
 export function subscribePreferredColorScheme( callback ) {
diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
index d6cc7605385125..cd143ae0d831f4 100644
--- a/packages/react-native-bridge/ios/Gutenberg.swift
+++ b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -79,13 +79,10 @@ public class Gutenberg: NSObject {
             initialProps["capabilities"] = capabilities.toJSPayload()
         }
 
-        let editorTheme = dataSource.gutenbergEditorTheme()
-        if let colors = editorTheme?.colors {
-            initialProps["colors"] = colors
-        }
-
-        if let gradients = editorTheme?.gradients {
-            initialProps["gradients"] = gradients
+        let editorSettings = dataSource.gutenbergEditorSettings()
+        let settingsUpdates = properties(from: editorSettings)
+        initialProps.merge(settingsUpdates) { (intialProp, settingsUpdates) -> Any in
+            settingsUpdates
         }
 
         return initialProps
@@ -184,19 +181,32 @@ public class Gutenberg: NSObject {
         bridgeModule.sendEventIfNeeded(.setFocusOnTitle, body: nil)
     }
 
-    public func updateTheme(_ editorTheme: GutenbergEditorTheme?) {
+    public func updateEditorSettings(_ editorSettings: GutenbergEditorSettings?) {
+        let settingsUpdates = properties(from: editorSettings)
+        sendEvent(.updateEditorSettings, body: settingsUpdates)
+    }
+
+    private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] {
+        var settingsUpdates = [String : Any]()
+        settingsUpdates["isFSETheme"] = editorSettings?.isFSETheme ?? false
 
-        var themeUpdates = [String : Any]()
+        if let rawStyles = editorSettings?.rawStyles {
+            settingsUpdates["rawStyles"] = rawStyles
+        }
+
+        if let rawFeatures = editorSettings?.rawFeatures {
+            settingsUpdates["rawFeatures"] = rawFeatures
+        }
 
-        if let colors = editorTheme?.colors {
-            themeUpdates["colors"] = colors
+        if let colors = editorSettings?.colors {
+            settingsUpdates["colors"] = colors
         }
 
-        if let gradients = editorTheme?.gradients {
-            themeUpdates["gradients"] = gradients
+        if let gradients = editorSettings?.gradients {
+            settingsUpdates["gradients"] = gradients
         }
 
-        sendEvent(.updateTheme, body:themeUpdates)
+        return settingsUpdates
     }
 
     public func showNotice(_ message: String) {
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
index d6023f4d1508d7..b082cbd60682df 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
@@ -46,7 +46,7 @@ public protocol GutenbergBridgeDataSource: class {
     func gutenbergCapabilities() -> [Capabilities: Bool]
 
     /// Asks the data source for a list of theme colors.
-    func gutenbergEditorTheme() -> GutenbergEditorTheme?
+    func gutenbergEditorSettings() -> GutenbergEditorSettings?
 
     /// Asks the data source for a view to show while the Editor is loading.
      var loadingView: UIView? { get }
@@ -70,7 +70,10 @@ public extension GutenbergBridgeDataSource {
     }
 }
 
-public protocol GutenbergEditorTheme {
+public protocol GutenbergEditorSettings {
+    var isFSETheme: Bool { get }
+    var rawStyles: String? { get }
+    var rawFeatures: String? { get }
     var colors: [[String: String]]? { get }
     var gradients: [[String: String]]? { get }
 }
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index 82f19d50a5a154..2b57384df96109 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -369,7 +369,7 @@ extension RNReactNativeGutenbergBridge {
         case mediaUpload
         case setFocusOnTitle
         case mediaAppend
-        case updateTheme
+        case updateEditorSettings
         case replaceBlock
         case updateCapabilities
         case showNotice
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index bd5b9b569b6936..c66a5df07edd37 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [*] Update loading and failed screens for web version of the editor [#32395]
 ## 1.55.2
 -   [**] Fix incorrect block insertion point after blurring the post title field. [#32831]
 
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index 4e24a4dc1f75d9..ae3cb177d7ccb0 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -296,7 +296,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
         return ExampleAttachmentDelegate()
     }
 
-    func gutenbergEditorTheme() -> GutenbergEditorTheme? {
+    func gutenbergEditorSettings() -> GutenbergEditorSettings? {
         return nil
     }
 
diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
index 2d9cd3ed6c79ac..c8b8fd8b152ab2 100644
--- a/packages/react-native-editor/src/index.js
+++ b/packages/react-native-editor/src/index.js
@@ -81,6 +81,8 @@ const setupInitHooks = () => {
 				featuredImageId,
 				colors,
 				gradients,
+				rawStyles,
+				rawFeatures,
 			} = props;
 
 			if ( initialData === undefined && __DEV__ ) {
@@ -106,6 +108,8 @@ const setupInitHooks = () => {
 				capabilities,
 				colors,
 				gradients,
+				rawStyles,
+				rawFeatures,
 			};
 		}
 	);
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 7386949eb33e5f..ee0226129e0ab5 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "2.1.10",
+	"version": "2.1.11",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 195de53e802fed..8f5afcc4857168 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -3,21 +3,18 @@
 /**
  * External dependencies
  */
+import { View, Platform } from 'react-native';
+import { get, pickBy, debounce, isString } from 'lodash';
+import memize from 'memize';
+
 /**
  * WordPress dependencies
  */
 import RCTAztecView from '@wordpress/react-native-aztec';
-import { View, Platform } from 'react-native';
 import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { get, pickBy, debounce, isString } from 'lodash';
-import memize from 'memize';
-
-/**
- * WordPress dependencies
- */
 import { BlockFormatControls } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -982,10 +979,12 @@ export class RichText extends Component {
 						text: html,
 						eventCount: this.lastEventCount,
 						selection,
-						linkTextColor: defaultTextDecorationColor,
+						linkTextColor:
+							style?.linkColor || defaultTextDecorationColor,
 					} }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={
+						style?.placeholderColor ||
 						this.props.placeholderTextColor ||
 						defaultPlaceholderTextColor
 					}
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index f62bf4c8da1814..dfaf4fddadebce 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "16.1.3",
+	"version": "16.1.4",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md
index 50743c8281370e..8c0a782fed3b16 100644
--- a/packages/server-side-render/README.md
+++ b/packages/server-side-render/README.md
@@ -67,25 +67,35 @@ E.g: `{ post_id: 12 }`.
 
 ### EmptyResponsePlaceholder
 
-This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is empty, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+The component is rendered when the API response is empty. The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
 
--   Type: `WPElement`
+-   Type: `Component`
 -   Required: No
 
 ### ErrorResponsePlaceholder
 
-This is a [render prop](https://reactjs.org/docs/render-props.html). When the api response is an error, the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+The component is rendered when the API response is an error. The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
 
--   Type: `WPElement`
+-   Type: `Component`
 -   Required: No
 
 ### LoadingResponsePlaceholder
 
-This is a [render prop](https://reactjs.org/docs/render-props.html). While the request is being processed (loading state), the value of this prop is rendered. The render prop will receive the value of the api response as well as all props passed into `ServerSideRenderer`.
+The component is rendered while the API request is being processed (loading state). The component will receive the value of the API response, and all props passed into `ServerSideRenderer`.
 
--   Type: `WPElement`
+-   Type: `Component`
 -   Required: No
 
+#### Example usage
+
+```jsx
+const MyServerSideRender = () => (
+	<ServerSideRender
+		LoadingResponsePlaceholder={ MyAmazingPlaceholder }
+	/>
+);
+```
+
 ## Usage
 
 Render core/archives preview.
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index fd8fb1bab6e83b..1efa273a5c8afb 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "2.1.5",
+	"version": "2.1.6",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 48e2a2e6933751..b0c7065eca6a3a 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "1.1.11",
+	"version": "1.1.13",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index 5ad552605f9971..69f8f577702255 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -21,8 +21,13 @@
 		display: block;
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
+		p {
+			margin: $grid-unit-10 0;
+		}
+
 		label {
 			font-size: $default-font-size;
+			line-height: $default-line-height * 1.5;
 		}
 
 		// Override theme style bleed.
@@ -34,9 +39,21 @@
 			color: $black;
 		}
 		input[type="text"],
+		input[type="password"],
+		input[type="date"],
+		input[type="datetime"],
+		input[type="datetime-local"],
+		input[type="email"],
+		input[type="month"],
+		input[type="number"],
+		input[type="search"],
+		input[type="tel"],
+		input[type="time"],
+		input[type="url"],
+		input[type="week"],
 		select {
 			font-family: system-ui;
-			background: transparent;
+			background-color: transparent;
 			box-sizing: border-box;
 			border: 1px solid $gray-700;
 			border-radius: 3px;
@@ -47,9 +64,11 @@
 			width: 100%;
 			font-size: $default-font-size;
 			font-weight: normal;
-			height: 30px;
 			line-height: 1;
 			min-height: 30px;
+			padding-left: $grid-unit-10;
+		}
+		select {
 			padding-left: $grid-unit-05;
 		}
 	}
diff --git a/readme.txt b/readme.txt
index ed14a644cb815c..94bfddb91a1420 100644
--- a/readme.txt
+++ b/readme.txt
@@ -55,4 +55,4 @@ View <a href="https://developer.wordpress.org/block-editor/principles/versions-i
 
 == Changelog ==
 
-To read the changelog for Gutenberg 10.9.1, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v10.9.1">release page</a>.
+To read the changelog for Gutenberg 11.0.0-rc.1, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v11.0.0-rc.1">release page</a>.
diff --git a/test/native/setup.js b/test/native/setup.js
index 2df7fb1889b293..6fd0a13c873371 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -48,7 +48,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeFeaturedImageIdNativeUpdated: jest.fn(),
 		subscribeMediaAppend: jest.fn(),
 		subscribeAndroidModalClosed: jest.fn(),
-		subscribeUpdateTheme: jest.fn(),
+		subscribeUpdateEditorSettings: jest.fn(),
 		subscribePreferredColorScheme: () => 'light',
 		subscribeUpdateCapabilities: jest.fn(),
 		subscribeShowNotice: jest.fn(),