diff --git a/bin/api-docs/are-api-docs-unstaged.js b/bin/api-docs/are-api-docs-unstaged.js
new file mode 100644
index 00000000000000..b7d956b9e145c3
--- /dev/null
+++ b/bin/api-docs/are-api-docs-unstaged.js
@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+/**
+ * Node dependencies.
+ */
+const { extname } = require( 'path' );
+const chalk = require( 'chalk' );
+const execSync = require( 'child_process' ).execSync;
+const { readFile } = require( 'fs' ).promises;
+
+const getUnstagedFiles = () =>
+	execSync( 'git diff --name-only', { encoding: 'utf8' } )
+		.split( '\n' )
+		.filter( Boolean );
+
+const fileHasToken = async ( file ) =>
+	( await readFile( file, 'utf8' ) ).includes( '<!-- START TOKEN' );
+
+const getUnstagedReadmes = () =>
+	Promise.all(
+		getUnstagedFiles().map(
+			async ( file ) =>
+				extname( file ) === '.md' &&
+				( await fileHasToken( file ) ) &&
+				file
+		)
+	).then( ( files ) => files.filter( Boolean ) );
+
+( async () => {
+	const unstagedReadmes = await getUnstagedReadmes();
+	if ( unstagedReadmes.length > 0 ) {
+		process.exitCode = 1;
+		process.stdout.write(
+			chalk.red(
+				'\n',
+				'Some API docs may be out of date:',
+				unstagedReadmes.toString(),
+				'Either stage them or continue with --no-verify.',
+				'\n'
+			)
+		);
+	}
+} )();
diff --git a/bin/api-docs/are-readmes-unstaged.js b/bin/api-docs/are-readmes-unstaged.js
deleted file mode 100644
index c466d55bfb2e03..00000000000000
--- a/bin/api-docs/are-readmes-unstaged.js
+++ /dev/null
@@ -1,37 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Node dependencies.
- */
-const { join } = require( 'path' );
-const chalk = require( 'chalk' );
-const execSync = require( 'child_process' ).execSync;
-
-/**
- * Local dependencies.
- */
-const getPackages = require( './packages' );
-
-const getUnstagedFiles = () =>
-	execSync( 'git diff --name-only', { encoding: 'utf8' } )
-		.split( '\n' )
-		.filter( ( element ) => '' !== element );
-const readmeFiles = getPackages().map( ( [ packageName ] ) =>
-	join( 'packages', packageName, 'README.md' )
-);
-const unstagedReadmes = getUnstagedFiles().filter( ( element ) =>
-	readmeFiles.includes( element )
-);
-
-if ( unstagedReadmes.length > 0 ) {
-	process.exitCode = 1;
-	process.stdout.write(
-		chalk.red(
-			'\n',
-			'Some API docs may be out of date:',
-			unstagedReadmes.toString(),
-			'Either stage them or continue with --no-verify.',
-			'\n'
-		)
-	);
-}
diff --git a/bin/api-docs/packages.js b/bin/api-docs/packages.js
deleted file mode 100644
index 71c2bed2bb14b1..00000000000000
--- a/bin/api-docs/packages.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const packages = [
-	'a11y',
-	'autop',
-	'blob',
-	'block-editor',
-	'block-library',
-	'block-serialization-default-parser',
-	'blocks',
-	'compose',
-	[
-		'core-data',
-		{
-			'Autogenerated actions': 'src/actions.js',
-			'Autogenerated selectors': 'src/selectors.js',
-		},
-	],
-	'data',
-	'data-controls',
-	'date',
-	'deprecated',
-	'dom',
-	'dom-ready',
-	'e2e-test-utils',
-	'edit-post',
-	'element',
-	'escape-html',
-	'html-entities',
-	'i18n',
-	'keyboard-shortcuts',
-	'keycodes',
-	'plugins',
-	'priority-queue',
-	'redux-routine',
-	'rich-text',
-	'shortcode',
-	'url',
-	'viewport',
-	'warning',
-	'wordcount',
-];
-
-module.exports = function() {
-	return packages.map( ( entry ) => {
-		if ( ! Array.isArray( entry ) ) {
-			entry = [ entry, { 'Autogenerated API docs': 'src/index.js' } ];
-		}
-		return entry;
-	} );
-};
diff --git a/bin/api-docs/update-api-docs.js b/bin/api-docs/update-api-docs.js
new file mode 100755
index 00000000000000..fd09b901a5ab39
--- /dev/null
+++ b/bin/api-docs/update-api-docs.js
@@ -0,0 +1,218 @@
+/**
+ * External dependencies
+ */
+const { join, relative, resolve, sep, dirname } = require( 'path' );
+const glob = require( 'fast-glob' );
+const execa = require( 'execa' );
+const { Transform } = require( 'stream' );
+const { readFile } = require( 'fs' ).promises;
+
+/**
+ * README file tokens, defined as a tuple of token identifier, source path.
+ *
+ * @typedef {[string,string]} WPReadmeFileTokens
+ */
+
+/**
+ * README file data, defined as a tuple of README file path, token details.
+ *
+ * @typedef {[string,WPReadmeFileTokens]} WPReadmeFileData
+ */
+
+/**
+ * Path to root project directory.
+ *
+ * @type {string}
+ */
+const ROOT_DIR = resolve( __dirname, '../..' );
+
+/**
+ * Path to packages directory.
+ *
+ * @type {string}
+ */
+const PACKAGES_DIR = resolve( ROOT_DIR, 'packages' );
+
+/**
+ * Path to data documentation directory.
+ *
+ * @type {string}
+ */
+const DATA_DOCS_DIR = resolve(
+	ROOT_DIR,
+	'docs/designers-developers/developers/data'
+);
+
+/**
+ * Default path to use if the token doesn't include one.
+ *
+ * @see TOKEN_PATTERN
+ */
+const DEFAULT_PATH = 'src/index.js';
+
+/**
+ * Pattern matching start token of a README file.
+ *
+ * @example Delimiter tokens that use the default source file:
+ * <!-- START TOKEN(Autogenerated API docs) -->
+ * // content within will be filled by docgen
+ * <!-- END TOKEN(Autogenerated API docs) -->
+ *
+ * @example Delimiter tokens that use a specific source file:
+ * <!-- START TOKEN(Autogenerated actions|src/actions.js) -->
+ * // content within will be filled by docgen
+ * <!-- END TOKEN(Autogenerated actions|src/actions.js) -->
+ *
+ * @type {RegExp}
+ * @see DEFAULT_PATH
+ */
+const TOKEN_PATTERN = /<!-- START TOKEN\((.+?(?:\|(.+?))?)\) -->/g;
+
+/**
+ * Given an absolute file path, returns the package name.
+ *
+ * @param {string} file Absolute path.
+ *
+ * @return {string} Package name.
+ */
+function getFilePackage( file ) {
+	return relative( PACKAGES_DIR, file ).split( sep )[ 0 ];
+}
+
+/**
+ * Returns an appropriate glob pattern for the packages directory to match
+ * relevant documentation files for a given set of files.
+ *
+ * @param {string[]} files Set of files to match. Pass an empty set to match
+ *                         all packages.
+ *
+ * @return {string} Packages glob pattern.
+ */
+function getPackagePattern( files ) {
+	if ( ! files.length ) {
+		return '*';
+	}
+
+	// Since brace expansion doesn't work with a single package, special-case
+	// the pattern for the singular match.
+	const packages = Array.from( new Set( files.map( getFilePackage ) ) );
+	return packages.length === 1 ? packages[ 0 ] : '{' + packages.join() + '}';
+}
+
+/**
+ * Returns the conventional store name of a given package.
+ *
+ * @param {string} packageName Package name.
+ *
+ * @return {string} Store name.
+ */
+function getPackageStoreName( packageName ) {
+	let storeName = 'core';
+	if ( packageName !== 'core-data' ) {
+		storeName += '/' + packageName;
+	}
+
+	return storeName;
+}
+
+/**
+ * Returns the conventional documentation file name of a given package.
+ *
+ * @param {string} packageName Package name.
+ *
+ * @return {string} Documentation file name.
+ */
+function getDataDocumentationFile( packageName ) {
+	const storeName = getPackageStoreName( packageName );
+	return `data-${ storeName.replace( '/', '-' ) }.md`;
+}
+
+/**
+ * Returns an appropriate glob pattern for the data documentation directory to
+ * match relevant documentation files for a given set of files.
+ *
+ * @param {string[]} files Set of files to match. Pass an empty set to match
+ *                         all packages.
+ *
+ * @return {string} Packages glob pattern.
+ */
+function getDataDocumentationPattern( files ) {
+	if ( ! files.length ) {
+		return '*';
+	}
+
+	// Since brace expansion doesn't work with a single package, special-case
+	// the pattern for the singular match.
+	const filePackages = Array.from( new Set( files.map( getFilePackage ) ) );
+	const docFiles = filePackages.map( getDataDocumentationFile );
+
+	return docFiles.length === 1 ? docFiles[ 0 ] : '{' + docFiles.join() + '}';
+}
+
+/**
+ * Stream transform which filters out README files to include only those
+ * containing matched token pattern, yielding a tuple of the file and its
+ * matched tokens.
+ *
+ * @type {Transform}
+ */
+const filterTokenTransform = new Transform( {
+	objectMode: true,
+
+	async transform( file, _encoding, callback ) {
+		let content;
+		try {
+			content = await readFile( file, 'utf8' );
+		} catch {}
+
+		if ( content ) {
+			const tokens = [];
+
+			for ( const match of content.matchAll( TOKEN_PATTERN ) ) {
+				const [ , token, path = DEFAULT_PATH ] = match;
+				tokens.push( [ token, path ] );
+			}
+
+			if ( tokens.length ) {
+				this.push( [ file, tokens ] );
+			}
+		}
+
+		callback();
+	},
+} );
+
+/**
+ * Optional process arguments for which to generate documentation.
+ *
+ * @type {string[]}
+ */
+const files = process.argv.slice( 2 );
+
+glob.stream( [
+	`${ PACKAGES_DIR }/${ getPackagePattern( files ) }/README.md`,
+	`${ DATA_DOCS_DIR }/${ getDataDocumentationPattern( files ) }`,
+] )
+	.pipe( filterTokenTransform )
+	.on( 'data', async ( /** @type {WPReadmeFileData} */ data ) => {
+		const [ file, tokens ] = data;
+		const output = relative( ROOT_DIR, file );
+
+		// Each file can have more than one placeholder content to update, each
+		// represented by tokens. The docgen script updates one token at a time,
+		// so the tokens must be replaced in sequence to prevent the processes
+		// from overriding each other.
+		for ( const [ token, path ] of tokens ) {
+			await execa(
+				join( __dirname, '..', '..', 'node_modules', '.bin', 'docgen' ),
+				[
+					relative( ROOT_DIR, resolve( dirname( file ), path ) ),
+					`--output ${ output }`,
+					'--to-token',
+					`--use-token "${ token }"`,
+					'--ignore "/unstable|experimental/i"',
+				],
+				{ shell: true }
+			);
+		}
+	} );
diff --git a/bin/api-docs/update-readmes.js b/bin/api-docs/update-readmes.js
deleted file mode 100755
index ab1805c3fdeccd..00000000000000
--- a/bin/api-docs/update-readmes.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Node dependencies.
- */
-const { join } = require( 'path' );
-const spawnSync = require( 'child_process' ).spawnSync;
-
-/**
- * Local dependencies.
- */
-const getPackages = require( './packages' );
-
-getPackages().forEach( ( entry ) => {
-	const [ packageName, targetFiles ] = entry;
-
-	Object.entries( targetFiles ).forEach( ( [ token, path ] ) => {
-		// Each target operates over the same file, so it needs to be processed synchronously,
-		// as to make sure the processes don't overwrite each other.
-		const { status, stderr } = spawnSync(
-			join(
-				__dirname,
-				'..',
-				'..',
-				'node_modules',
-				'.bin',
-				'docgen'
-			).replace( / /g, '\\ ' ),
-			[
-				join( 'packages', packageName, path ),
-				`--output packages/${ packageName }/README.md`,
-				'--to-token',
-				`--use-token "${ token }"`,
-				'--ignore "/unstable|experimental/i"',
-			],
-			{ shell: true }
-		);
-
-		if ( status !== 0 ) {
-			process.stderr.write( `${ packageName } ${ stderr.toString() }\n` );
-			process.exit( 1 );
-		}
-	} );
-} );
diff --git a/changelog.txt b/changelog.txt
index 82728ccd676e64..7d9f19ab90a205 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,8 +1,141 @@
 == Changelog ==
 
-= 7.8.0-rc.1 =
+= 7.8.0 =
 
-Changelog creation in progress.
+## Enhancements
+​
+- Add visible labels to BlockPatternPicker pattern selection buttons [19789](https://github.com/WordPress/gutenberg/pull/19789)
+- Adds always on display of media URL [19504](https://github.com/WordPress/gutenberg/pull/19504)
+- Adds current menu class to navigation block [20076](https://github.com/WordPress/gutenberg/pull/20076)
+- Block: Outline when interacting with Toolbar Block Type/Movers [20938](https://github.com/WordPress/gutenberg/pull/20938)
+- Create block: Improve how prompts and values provided are handled [20756](https://github.com/WordPress/gutenberg/pull/20756)
+- Expand create block options and add readme.txt template [20694](https://github.com/WordPress/gutenberg/pull/20694)
+- Patterns: Make adding patterns easier [20854](https://github.com/WordPress/gutenberg/pull/20854)
+- Polish a few icons [20980](https://github.com/WordPress/gutenberg/pull/20980)
+- Polish date-picker component [20824](https://github.com/WordPress/gutenberg/pull/20824)
+- Improve permalink editing [12009](https://github.com/WordPress/gutenberg/pull/12009)
+- Nicer block footprint for social links [20978](https://github.com/WordPress/gutenberg/pull/20978)
+- Show inserter only when block selected for nesting contexts [20753](https://github.com/WordPress/gutenberg/pull/20753)
+- URL: Use test data from web-platform-tests for isURL spec conformance [20537](https://github.com/WordPress/gutenberg/pull/20537)
+- Adds multi-select to categories on Latest Posts [20781](https://github.com/WordPress/gutenberg/pull/20781)
+- Add basic nav block example for inserter and styles previews [21011](https://github.com/WordPress/gutenberg/pull/21011)
+​
+## Bug Fixes
+​
+- Allow media library in gallery mode to be reset [20675](https://github.com/WordPress/gutenberg/pull/20675)
+- Autocomplete: Add support for results with long titles [20962](https://github.com/WordPress/gutenberg/pull/20962)
+- Compat: Conditionally filter editor settings for image dimensions [20939](https://github.com/WordPress/gutenberg/pull/20939)
+- Compat: Use core-js-url-browser for URL polyfill [20225](https://github.com/WordPress/gutenberg/pull/20225)
+- Data: Migrate post editor persistence with fullscreenMode false [21082](https://github.com/WordPress/gutenberg/pull/21082)
+- Edit Post: Make sidebar header focusable for button focus normalization [21031](https://github.com/WordPress/gutenberg/pull/21031)
+- Fix auto-hiding appender regression [20780](https://github.com/WordPress/gutenberg/pull/20780)
+- Fix fullscreen mode device preview [21010](https://github.com/WordPress/gutenberg/pull/21010)
+- Fix link control search results spacing. [21003](https://github.com/WordPress/gutenberg/pull/21003)
+- Fix snackbar container block portion of UI while present [21000](https://github.com/WordPress/gutenberg/pull/21000)
+- Make the inner button block not allowed as a reusable block or editable as HTML [20948](https://github.com/WordPress/gutenberg/pull/20948)
+- URL: Fix getQueryString incorrect handling of hash fragment [20738](https://github.com/WordPress/gutenberg/pull/20738)
+- Update social links block to output a custom class on each individual link [20998](https://github.com/WordPress/gutenberg/pull/20998)
+- Update the inserter's block preview to use the AutoHeightPreview [20817](https://github.com/WordPress/gutenberg/pull/20817)
+- Latest Posts:
+	- Fix link for read more markup [20917](https://github.com/WordPress/gutenberg/pull/20917)
+	- Fixes the categories selector crash when category does not exist [20960](https://github.com/WordPress/gutenberg/pull/20960)
+- Fix input rules [20964](https://github.com/WordPress/gutenberg/pull/20964)
+- Trim input value in navigation search input field [19832](https://github.com/WordPress/gutenberg/pull/19832)
+- Fix mobile header [20946](https://github.com/WordPress/gutenberg/pull/20946)
+- Fix visually hidden classnames [20649](https://github.com/WordPress/gutenberg/pull/20649)
+- Fix/screen reader text [20607](https://github.com/WordPress/gutenberg/pull/20607)
+- Fix SelectControl example code synax highlight [19803](https://github.com/WordPress/gutenberg/pull/19803)
+​
+## New APIs
+​
+- Add initial API to register patterns from themes and plugins [21074](https://github.com/WordPress/gutenberg/pull/21074)
+- Convert \__experimentalCreateInterpolateElement to a stable API [20699](https://github.com/WordPress/gutenberg/pull/20699)
+​
+## Experiments
+​
+- Site Editor:
+	- Add Fullscreen mode [20691](https://github.com/WordPress/gutenberg/pull/20691)
+	- Add fullscreen close button [20989](https://github.com/WordPress/gutenberg/pull/20989)
+	- Add more menu and fullscreen toggle [21006](https://github.com/WordPress/gutenberg/pull/21006)
+	- Style resets for top level page [20886](https://github.com/WordPress/gutenberg/pull/20886)
+	- Get current template part correctly for auto drafts [20438](https://github.com/WordPress/gutenberg/pull/20438)
+	- Add template preview to the edit site template switcher [20958](https://github.com/WordPress/gutenberg/pull/20958)
+	- Add things required to load custom blocks to Site Editor page [20549](https://github.com/WordPress/gutenberg/pull/20549)
+	- Avoid page templates overwriting page title [20865](https://github.com/WordPress/gutenberg/pull/20865)
+- Lighter block DOM:
+	- Group [20586](https://github.com/WordPress/gutenberg/pull/20586)
+	- Navigation [20729](https://github.com/WordPress/gutenberg/pull/20729)
+- Navigation Block:
+	- Fix dynamic rendering recursive function name typo [21078](https://github.com/WordPress/gutenberg/pull/21078)
+	- Avoid hiding submenu when adding a link [21035](https://github.com/WordPress/gutenberg/pull/21035)
+	- Fix toolbar overlap on navigation links [21033](https://github.com/WordPress/gutenberg/pull/21033)
+- PlainText v2 [21076](https://github.com/WordPress/gutenberg/pull/21076)
+	- Editable Component [18361](https://github.com/WordPress/gutenberg/pull/18361)
+​
+## Documentation
+​
+- Add ESNext example for unregisterBlockType [20784](https://github.com/WordPress/gutenberg/pull/20784)
+- Docs/SlotFills: Small update for consistency [20767](https://github.com/WordPress/gutenberg/pull/20767)
+- Correct 2nd param of useViewportMatch() usage [20911](https://github.com/WordPress/gutenberg/pull/20911)
+- Include `npm run dev` guidance in "Getting Started" [21015](https://github.com/WordPress/gutenberg/pull/21015)
+- Document default login credentials and `wp-env run` command [20678](https://github.com/WordPress/gutenberg/pull/20678)
+- Fixes docblock for useViewportMatch [20919](https://github.com/WordPress/gutenberg/pull/20919)
+- Lowercase visual editor and code editor to match block editor and classic editor [20968](https://github.com/WordPress/gutenberg/pull/20968)
+- Update README.md [20913](https://github.com/WordPress/gutenberg/pull/20913)
+- Add Custom Block Editor to TOC and Manifest [20749](https://github.com/WordPress/gutenberg/pull/20749)
+- Add tutorial link to Table of Contents for Custom Block Editor [20750](https://github.com/WordPress/gutenberg/pull/20750)
+​
+## Code Quality
+​
+- Block Editor: Use useResizeObserver in place of direct react-resize-aware dependency [20889](https://github.com/WordPress/gutenberg/pull/20889)
+- E2E Test Utils: Improve durability of embedding matcher [20811](https://github.com/WordPress/gutenberg/pull/20811)
+- Framework: Migrate/remove temporary compatibility script initialization [19178](https://github.com/WordPress/gutenberg/pull/19178)
+- Framework: Use WHATWG URL in place of legacy url module [19823](https://github.com/WordPress/gutenberg/pull/19823)
+- Nav Block: Remove 'frontend' from style comments [21034](https://github.com/WordPress/gutenberg/pull/21034)
+- Project Management Automation: Add TypeScript type-checking [20850](https://github.com/WordPress/gutenberg/pull/20850)
+- Refactor the inserter menu component and split into multiple smaller components [20880](https://github.com/WordPress/gutenberg/pull/20880)
+- Remove iframe from content elements [20976](https://github.com/WordPress/gutenberg/pull/20976)
+- Update Search/RSS block render method [20977](https://github.com/WordPress/gutenberg/pull/20977)
+​
+## Various
+​
+- Update glossary [20934](https://github.com/WordPress/gutenberg/pull/20934)
+- Improve performance testing [20802](https://github.com/WordPress/gutenberg/pull/20802)
+- Edit Post: Register block patterns as separate plugin [20871](https://github.com/WordPress/gutenberg/pull/20871)
+- Accessibility: updated headings to reflect semantic relationship between html tag and it's content. [16444](https://github.com/WordPress/gutenberg/pull/16444)
+- Add Prettier shared config package [20026](https://github.com/WordPress/gutenberg/pull/20026)
+- Add default styles to the TabPanel component [20872](https://github.com/WordPress/gutenberg/pull/20872)
+- Add isFileURL method and use it on all native media upload checks. [20985](https://github.com/WordPress/gutenberg/pull/20985)
+- Add menus endpoints. [20292](https://github.com/WordPress/gutenberg/pull/20292)
+- Block Patterns: Update text-two-columns.json [20890](https://github.com/WordPress/gutenberg/pull/20890)
+- Block Styles: Remove the block margin in the style selector [19983](https://github.com/WordPress/gutenberg/pull/19983)
+- Block patterns: improve success notice [21005](https://github.com/WordPress/gutenberg/pull/21005)
+- Blocks: Allow the Default Style selector to be hidden. [20620](https://github.com/WordPress/gutenberg/pull/20620)
+- E2E Tests: Mock Embed response for InnerBlocks locking test [20481](https://github.com/WordPress/gutenberg/pull/20481)
+- ESLint Plugin: Relax `prefer-const` for destructuring assignment [20737](https://github.com/WordPress/gutenberg/pull/20737)
+- Gallery: Update UI of controls [20776](https://github.com/WordPress/gutenberg/pull/20776)
+- Improves RTL style conversion [20503](https://github.com/WordPress/gutenberg/pull/20503)
+- Minor change to switch Help link target to _blank, add rels [20800](https://github.com/WordPress/gutenberg/pull/20800)
+- Mobile: Add accessibility label to Block List Footer [20633](https://github.com/WordPress/gutenberg/pull/20633)
+- Moves category multi select from LatestPosts to QueryControls [20832](https://github.com/WordPress/gutenberg/pull/20832)
+- Paste: replace iframes with url [20983](https://github.com/WordPress/gutenberg/pull/20983)
+- Polish poster image button arrangement. [20754](https://github.com/WordPress/gutenberg/pull/20754)
+- Preview Button: Remove the separator and border, and reduce the size of the icon. [20683](https://github.com/WordPress/gutenberg/pull/20683)
+- RangeControl: Improve disabled rendering and interactions [20723](https://github.com/WordPress/gutenberg/pull/20723)
+- Reduce gap between block library and preview [20777](https://github.com/WordPress/gutenberg/pull/20777)
+- Remove aria-expanded from close button in Publish panel [20993](https://github.com/WordPress/gutenberg/pull/20993)
+- Remove feature flag for mobile page templates [20718](https://github.com/WordPress/gutenberg/pull/20718)
+- Remove inaccurate message from image block [20909](https://github.com/WordPress/gutenberg/pull/20909)
+- Removed the textarea width restriction for the Shortcode block [20624](https://github.com/WordPress/gutenberg/pull/20624)
+- Revert "Framework: Travis: Avoid skipping Puppeteer download" [20828](https://github.com/WordPress/gutenberg/pull/20828)
+- Show errors in the media replace control [19244](https://github.com/WordPress/gutenberg/pull/19244)
+- Styles Panel: Don't force it to be closed by default. [20617](https://github.com/WordPress/gutenberg/pull/20617)
+- Update Navigation Menu Item icon [20763](https://github.com/WordPress/gutenberg/pull/20763)
+- Update page template picker after design review [20883](https://github.com/WordPress/gutenberg/pull/20883)
+- Latest Posts: Testing larger margins [20563](https://github.com/WordPress/gutenberg/pull/20563)
+- Add codeowners for env package [20667](https://github.com/WordPress/gutenberg/pull/20667)
+- Scripts: Update all webpack related dependencies [20916](https://github.com/WordPress/gutenberg/pull/20916)
+- Dependencies webpack plugin: Let the output file be specified when output is combined [20844](https://github.com/WordPress/gutenberg/pull/20844)
 
 = 7.7.1 =
 
diff --git a/docs/designers-developers/developers/data/data-core-annotations.md b/docs/designers-developers/developers/data/data-core-annotations.md
index e71aefd27d2129..0b5840c617d1e4 100644
--- a/docs/designers-developers/developers/data/data-core-annotations.md
+++ b/docs/designers-developers/developers/data/data-core-annotations.md
@@ -4,17 +4,17 @@ Namespace: `core/annotations`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/annotations/src/store/selectors.js) -->
 
 Nothing to document.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/annotations/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/annotations/src/store/actions.js) -->
 
 Nothing to document.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/annotations/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md
index 1bd2c38e601a1e..e19a7cb52c12b1 100644
--- a/docs/designers-developers/developers/data/data-core-block-editor.md
+++ b/docs/designers-developers/developers/data/data-core-block-editor.md
@@ -4,7 +4,7 @@ Namespace: `core/block-editor`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/block-editor/src/store/selectors.js) -->
 
 <a name="canInsertBlockType" href="#canInsertBlockType">#</a> **canInsertBlockType**
 
@@ -907,12 +907,11 @@ _Returns_
 
 -   `?boolean`: Whether the template is valid or not.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/block-editor/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/block-editor/src/store/actions.js) -->
 
 <a name="clearSelectedBlock" href="#clearSelectedBlock">#</a> **clearSelectedBlock**
 
@@ -1386,6 +1385,15 @@ _Returns_
 
 <a name="updateSettings" href="#updateSettings">#</a> **updateSettings**
 
-Undocumented declaration.
+Returns an action object used in signalling that the block editor settings have been updated.
+
+_Parameters_
+
+-   _settings_ `Object`: Updated settings
+
+_Returns_
+
+-   `Object`: Action object
+
 
-<!-- END TOKEN(Autogenerated actions) -->
+<!-- END TOKEN(Autogenerated actions|../../../../packages/block-editor/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-blocks.md b/docs/designers-developers/developers/data/data-core-blocks.md
index 933c432cd93260..8d577f4fca040c 100644
--- a/docs/designers-developers/developers/data/data-core-blocks.md
+++ b/docs/designers-developers/developers/data/data-core-blocks.md
@@ -4,7 +4,7 @@ Namespace: `core/blocks`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/blocks/src/store/selectors.js) -->
 
 <a name="getBlockStyles" href="#getBlockStyles">#</a> **getBlockStyles**
 
@@ -231,12 +231,11 @@ _Returns_
 
 -   `Array<Object>`: Whether block type matches search term.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/blocks/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/blocks/src/store/actions.js) -->
 
 <a name="addBlockCollection" href="#addBlockCollection">#</a> **addBlockCollection**
 
@@ -417,4 +416,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/blocks/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-edit-post.md b/docs/designers-developers/developers/data/data-core-edit-post.md
index 49801a69817be8..0263877b9c567c 100644
--- a/docs/designers-developers/developers/data/data-core-edit-post.md
+++ b/docs/designers-developers/developers/data/data-core-edit-post.md
@@ -4,7 +4,7 @@ Namespace: `core/edit-post`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/edit-post/src/store/selectors.js) -->
 
 <a name="getActiveGeneralSidebarName" href="#getActiveGeneralSidebarName">#</a> **getActiveGeneralSidebarName**
 
@@ -267,12 +267,11 @@ _Returns_
 
 -   `boolean`: Whether the metaboxes are being saved.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/edit-post/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/edit-post/src/store/actions.js) -->
 
 <a name="closeGeneralSidebar" href="#closeGeneralSidebar">#</a> **closeGeneralSidebar**
 
@@ -472,4 +471,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/edit-post/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-editor.md b/docs/designers-developers/developers/data/data-core-editor.md
index ef0243465e9f3c..ffba8e67b9aa30 100644
--- a/docs/designers-developers/developers/data/data-core-editor.md
+++ b/docs/designers-developers/developers/data/data-core-editor.md
@@ -4,7 +4,7 @@ Namespace: `core/editor`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/editor/src/store/selectors.js) -->
 
 <a name="canInsertBlockType" href="#canInsertBlockType">#</a> **canInsertBlockType**
 
@@ -1060,12 +1060,11 @@ _Related_
 
 -   isValidTemplate in core/block-editor store.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/editor/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/editor/src/store/actions.js) -->
 
 <a name="autosave" href="#autosave">#</a> **autosave**
 
@@ -1511,4 +1510,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/editor/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md
index 9db8ab7ce2d362..fefa8e189e2150 100644
--- a/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md
+++ b/docs/designers-developers/developers/data/data-core-keyboard-shortcuts.md
@@ -4,7 +4,7 @@ Namespace: `core/keyboard-shortcuts`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
 
 <a name="getAllShortcutRawKeyCombinations" href="#getAllShortcutRawKeyCombinations">#</a> **getAllShortcutRawKeyCombinations**
 
@@ -85,12 +85,11 @@ _Returns_
 
 -   `?string`: Shortcut representation.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/keyboard-shortcuts/src/store/actions.js) -->
 
 <a name="registerShortcut" href="#registerShortcut">#</a> **registerShortcut**
 
@@ -116,4 +115,5 @@ _Returns_
 
 -   `Object`: action.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/keyboard-shortcuts/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-notices.md b/docs/designers-developers/developers/data/data-core-notices.md
index 876977576f69bd..54dfbdd8d84ed8 100644
--- a/docs/designers-developers/developers/data/data-core-notices.md
+++ b/docs/designers-developers/developers/data/data-core-notices.md
@@ -4,7 +4,7 @@ Namespace: `core/notices`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/notices/src/store/selectors.js) -->
 
 <a name="getNotices" href="#getNotices">#</a> **getNotices**
 
@@ -20,12 +20,11 @@ _Returns_
 
 -   `Array<WPNotice>`: Array of notices.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/notices/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/notices/src/store/actions.js) -->
 
 <a name="createErrorNotice" href="#createErrorNotice">#</a> **createErrorNotice**
 
@@ -132,4 +131,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/notices/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-nux.md b/docs/designers-developers/developers/data/data-core-nux.md
index 92dcf6be1d0ac2..ad0a93e2bde235 100644
--- a/docs/designers-developers/developers/data/data-core-nux.md
+++ b/docs/designers-developers/developers/data/data-core-nux.md
@@ -4,7 +4,7 @@ Namespace: `core/nux`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/nux/src/store/selectors.js) -->
 
 <a name="areTipsEnabled" href="#areTipsEnabled">#</a> **areTipsEnabled**
 
@@ -47,12 +47,11 @@ _Returns_
 
 -   `boolean`: Whether or not the given tip is showing.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/nux/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/nux/src/store/actions.js) -->
 
 <a name="disableTips" href="#disableTips">#</a> **disableTips**
 
@@ -97,4 +96,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/nux/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core-viewport.md b/docs/designers-developers/developers/data/data-core-viewport.md
index b8f133834ec594..4f776c53efbca7 100644
--- a/docs/designers-developers/developers/data/data-core-viewport.md
+++ b/docs/designers-developers/developers/data/data-core-viewport.md
@@ -4,7 +4,7 @@ Namespace: `core/viewport`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/viewport/src/store/selectors.js) -->
 
 <a name="isViewportMatch" href="#isViewportMatch">#</a> **isViewportMatch**
 
@@ -26,12 +26,11 @@ _Returns_
 
 -   `boolean`: Whether viewport matches query.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/viewport/src/store/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/viewport/src/store/actions.js) -->
 
 <a name="setIsMatching" href="#setIsMatching">#</a> **setIsMatching**
 
@@ -47,4 +46,5 @@ _Returns_
 
 -   `Object`: Action object.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/viewport/src/store/actions.js) -->
diff --git a/docs/designers-developers/developers/data/data-core.md b/docs/designers-developers/developers/data/data-core.md
index 79f3f41991c08f..54ab79f95f1e54 100644
--- a/docs/designers-developers/developers/data/data-core.md
+++ b/docs/designers-developers/developers/data/data-core.md
@@ -4,7 +4,7 @@ Namespace: `core`.
 
 ## Selectors
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|../../../../packages/core-data/src/selectors.js) -->
 
 <a name="canUser" href="#canUser">#</a> **canUser**
 
@@ -441,12 +441,11 @@ _Returns_
 
 -   `boolean`: Whether the entity record is saving or not.
 
-
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|../../../../packages/core-data/src/selectors.js) -->
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|../../../../packages/core-data/src/actions.js) -->
 
 <a name="addEntities" href="#addEntities">#</a> **addEntities**
 
@@ -617,4 +616,5 @@ _Parameters_
 Action triggered to undo the last edit to
 an entity record, if any.
 
-<!-- END TOKEN(Autogenerated actions) -->
+
+<!-- END TOKEN(Autogenerated actions|../../../../packages/core-data/src/actions.js) -->
diff --git a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
index 4bf4c70ae646d5..1804a346f052c9 100644
--- a/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
+++ b/docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md
@@ -4,9 +4,7 @@ With the meta field registered in the previous step, next you will create a new
 
 For this block, you will use the TextControl component, which is similar to an HTML input text field. For additional components, check out the [components](/packages/components/src) and [editor](/packages/editor/src/components) packages repositories.
 
-Attributes are the information displayed in blocks. As shown in the block tutorial, the source of attributes come from the text or HTML a user writes in the editor. For your meta block, the attribute will come from the post meta field.
-
-By specifying the source of the attributes as `meta`, the block editor automatically handles the loading and storing of the data; no REST API or data functions are needed.
+The hook `useEntityProp` can be used by the blocks to get or change meta values.
 
 Add this code to your JavaScript file (this tutorial will call the file `myguten.js`):
 
@@ -17,26 +15,42 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 	var el = wp.element.createElement;
 	var registerBlockType = wp.blocks.registerBlockType;
 	var TextControl = wp.components.TextControl;
+	var useSelect = wp.data.useSelect;
+	var useEntityProp = wp.coreData.useEntityProp;
 
 	registerBlockType( 'myguten/meta-block', {
 		title: 'Meta Block',
 		icon: 'smiley',
 		category: 'common',
 
-		attributes: {
-			blockValue: {
-				type: 'string',
-				source: 'meta',
-				meta: 'myguten_meta_block_field',
-			},
-		},
-
 		edit: function( props ) {
 			var className = props.className;
-			var setAttributes = props.setAttributes;
 
-			function updateBlockValue( blockValue ) {
-				setAttributes( { blockValue } );
+			var postType = useSelect(
+				function( select ) {
+					return select( 'core/editor' ).getCurrentPostType();
+				},
+				[]
+			);
+			var entityProp = useEntityProp(
+				'postType',
+				postType,
+				'meta'
+			);
+			var meta = entityProp[ 0 ];
+			var setMeta = entityProp[ 1 ];
+
+			var metaFieldValue = meta['myguten_meta_block_field'];
+			function updateMetaValue( newValue ) {
+				setMeta(
+					Object.assign(
+						{},
+						meta,
+						{
+							'myguten_meta_block_field': newValue,
+						}
+					)
+				);
 			}
 
 			return el(
@@ -44,8 +58,8 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 				{ className: className },
 				el( TextControl, {
 					label: 'Meta Block Field',
-					value: props.attributes.blockValue,
-					onChange: updateBlockValue,
+					value: metaFieldValue,
+					onChange: updateMetaValue,
 				} )
 			);
 		},
@@ -62,38 +76,42 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 ```js
 import { registerBlockType } from '@wordpress/blocks';
 import { TextControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
 
 registerBlockType( 'myguten/meta-block', {
 	title: 'Meta Block',
 	icon: 'smiley',
 	category: 'common',
 
-	attributes: {
-		blockValue: {
-			type: 'string',
-			source: 'meta',
-			meta: 'myguten_meta_block_field',
-		},
-	},
-
 	edit( { className, setAttributes, attributes } ) {
-		function updateBlockValue( blockValue ) {
-			setAttributes( { blockValue } );
+		const postType = useSelect(
+			( select ) => select( 'core/editor' ).getCurrentPostType(),
+			[]
+		);
+		const [ meta, setMeta ] = useEntityProp(
+			'postType',
+			postType,
+			'meta'
+		);
+		const metaFieldValue = meta['myguten_meta_block_field'];
+		function updateMetaValue( newValue ) {
+			setMeta( { ...meta, 'myguten_meta_block_field': newValue } );
 		}
 
 		return (
 			<div className={ className }>
 				<TextControl
 					label="Meta Block Field"
-					value={ attributes.blockValue }
-					onChange={ updateBlockValue }
+					value={ metaFieldValue }
+					onChange={ updateMetaValue }
 				/>
 			</div>
 		);
 	},
 
 	// No information saved to the block
-	// Data is saved to post meta via attributes
+	// Data is saved to post meta via the hook
 	save() {
 		return null;
 	},
@@ -101,14 +119,14 @@ registerBlockType( 'myguten/meta-block', {
 ```
 {% end %}
 
-**Important:** Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are `wp.element`, `wp.blocks`, and `wp.components`. Each of these need to be included in the array of dependencies. Update the `myguten-meta-block.php` file adding the enqueue function:
+**Important:** Before you test, you need to enqueue your JavaScript file and its dependencies. Note the WordPress packages used above are `wp.element`, `wp.blocks`, `wp.components`, `wp.data`, and `wp.coreData`. Each of these need to be included in the array of dependencies. Update the `myguten-meta-block.php` file adding the enqueue function:
 
 ```php
 function myguten_enqueue() {
 	wp_enqueue_script(
 		'myguten-script',
 		plugins_url( 'myguten.js', __FILE__ ),
-		array( 'wp-blocks', 'wp-element', 'wp-components' )
+		array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-data', 'wp-core-data' )
 	);
 }
 add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
@@ -119,4 +137,3 @@ You can now edit a draft post and add a Meta Block to the post. You will see you
 ![Meta Block](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/metabox/meta-block.png)
 
 You can now use the post meta data in a template, or another block. See next section for [using post meta data](/docs/designers-developers/developers/tutorials/metabox/meta-block-4-use-data.md). You could also confirm the data is saved by checking the database table `wp_postmeta` and confirm the new post id contains the new field data.
-
diff --git a/docs/tool/are-data-files-unstaged.js b/docs/tool/are-data-files-unstaged.js
deleted file mode 100644
index 38f659ec9bb0c7..00000000000000
--- a/docs/tool/are-data-files-unstaged.js
+++ /dev/null
@@ -1,40 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Node dependencies.
- */
-const chalk = require( 'chalk' );
-const execSync = require( 'child_process' ).execSync;
-
-/**
- * Local dependencies.
- */
-const getPackages = require( './packages' );
-
-const getUnstagedFiles = () =>
-	execSync( 'git diff --name-only', { encoding: 'utf8' } )
-		.split( '\n' )
-		.filter( ( element ) => '' !== element );
-const readmeFiles = getPackages().map(
-	( [ packageName ] ) =>
-		`docs/designers-developers/developers/data/data-${ packageName.replace(
-			'/',
-			'-'
-		) }.md`
-);
-const unstagedReadmes = getUnstagedFiles().filter( ( element ) =>
-	readmeFiles.includes( element )
-);
-
-if ( unstagedReadmes.length > 0 ) {
-	process.exitCode = 1;
-	process.stdout.write(
-		chalk.red(
-			'\n',
-			'Some API docs may be out of date:',
-			unstagedReadmes.toString(),
-			'Either stage them or continue with --no-verify.',
-			'\n'
-		)
-	);
-}
diff --git a/docs/tool/index.js b/docs/tool/index.js
index f0b1297f987dfb..d7e03d00974b3b 100644
--- a/docs/tool/index.js
+++ b/docs/tool/index.js
@@ -2,8 +2,6 @@
  * Node dependencies
  */
 const fs = require( 'fs' );
-const { join } = require( 'path' );
-const { execFileSync } = require( 'child_process' );
 const path = require( 'path' );
 
 /**
@@ -14,9 +12,6 @@ const { getRootManifest } = require( './manifest' );
 const tocFileInput = path.resolve( __dirname, '../toc.json' );
 const manifestOutput = path.resolve( __dirname, '../manifest.json' );
 
-// Update data files from code
-execFileSync( 'node', [ join( __dirname, 'update-data.js' ) ] );
-
 // Process TOC file and generate manifest handbook
 fs.writeFileSync(
 	manifestOutput,
diff --git a/docs/tool/packages.js b/docs/tool/packages.js
deleted file mode 100644
index 558a3e62c43c23..00000000000000
--- a/docs/tool/packages.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const packages = [
-	[
-		'core',
-		{
-			'Autogenerated actions': 'packages/core-data/src/actions.js',
-			'Autogenerated selectors': 'packages/core-data/src/selectors.js',
-		},
-	],
-	'core/annotations',
-	'core/blocks',
-	'core/block-editor',
-	'core/editor',
-	'core/edit-post',
-	'core/keyboard-shortcuts',
-	'core/notices',
-	'core/nux',
-	'core/viewport',
-];
-
-module.exports = function() {
-	return packages.map( ( entry ) => {
-		if ( ! Array.isArray( entry ) ) {
-			entry = [
-				entry,
-				{
-					'Autogenerated actions': `packages/${ entry.replace(
-						'core/',
-						''
-					) }/src/store/actions.js`,
-					'Autogenerated selectors': `packages/${ entry.replace(
-						'core/',
-						''
-					) }/src/store/selectors.js`,
-				},
-			];
-		}
-		return entry;
-	} );
-};
diff --git a/docs/tool/update-data.js b/docs/tool/update-data.js
deleted file mode 100644
index 89f0fc614f1c50..00000000000000
--- a/docs/tool/update-data.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Node dependencies.
- */
-const { join } = require( 'path' );
-const spawnSync = require( 'child_process' ).spawnSync;
-
-/**
- * Local dependencies.
- */
-const getPackages = require( './packages' );
-
-getPackages().forEach( ( entry ) => {
-	const [ packageName, targetFiles ] = entry;
-
-	Object.entries( targetFiles ).forEach( ( [ token, target ] ) => {
-		// Note that this needs to be a sync process for each output file that is updated:
-		// until docgen provides a way to update many tokens at once, we need to make sure
-		// the output file is updated before starting the second pass for the next token.
-		const { status, stderr } = spawnSync(
-			join(
-				__dirname,
-				'..',
-				'..',
-				'node_modules',
-				'.bin',
-				'docgen'
-			).replace( / /g, '\\ ' ),
-			[
-				target,
-				`--output docs/designers-developers/developers/data/data-${ packageName.replace(
-					'/',
-					'-'
-				) }.md`,
-				'--to-token',
-				`--use-token "${ token }"`,
-				'--ignore "/unstable|experimental/i"',
-			],
-			{ shell: true }
-		);
-
-		if ( status !== 0 ) {
-			process.stderr.write( `${ packageName } ${ stderr.toString() }\n` );
-			process.exit( 1 );
-		}
-	} );
-} );
diff --git a/gutenberg.php b/gutenberg.php
index 18d3e0ae60c1d6..642f6092e51686 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -3,7 +3,7 @@
  * Plugin Name: Gutenberg
  * Plugin URI: https://github.com/WordPress/gutenberg
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
- * Version: 7.8.0-rc.1
+ * Version: 7.8.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
index ef24509f5447e6..025f7239159ac0 100644
--- a/lib/edit-site-page.php
+++ b/lib/edit-site-page.php
@@ -36,6 +36,55 @@ function gutenberg_is_edit_site_page( $page ) {
 	return in_array( $page, $allowed_pages, true );
 }
 
+/**
+ * Load editor styles (this is copied form edit-form-blocks.php).
+ * Ideally the code is extracted into a reusable function.
+ *
+ * @return array Editor Styles Setting.
+ */
+function gutenberg_get_editor_styles() {
+	global $editor_styles;
+
+	//
+	// Ideally the code is extracted into a reusable function.
+	$styles = array(
+		array(
+			'css' => file_get_contents(
+				ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
+			),
+		),
+	);
+
+	/* translators: Use this to specify the CSS font family for the default font. */
+	$locale_font_family = esc_html_x( 'Noto Serif', 'CSS Font Family for Editor Font', 'gutenberg' );
+	$styles[]           = array(
+		'css' => "body { font-family: '$locale_font_family' }",
+	);
+
+	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
+		foreach ( $editor_styles as $style ) {
+			if ( preg_match( '~^(https?:)?//~', $style ) ) {
+				$response = wp_remote_get( $style );
+				if ( ! is_wp_error( $response ) ) {
+					$styles[] = array(
+						'css' => wp_remote_retrieve_body( $response ),
+					);
+				}
+			} else {
+				$file = get_theme_file_path( $style );
+				if ( is_file( $file ) ) {
+					$styles[] = array(
+						'css'     => file_get_contents( $file ),
+						'baseURL' => get_theme_file_uri( $style ),
+					);
+				}
+			}
+		}
+	}
+
+	return $styles;
+}
+
 /**
  * Initialize the Gutenberg Edit Site Page.
  *
@@ -152,6 +201,7 @@ function gutenberg_edit_site_init( $hook ) {
 	$settings['templateType']    = 'wp_template';
 	$settings['templateIds']     = array_values( $template_ids );
 	$settings['templatePartIds'] = array_values( $template_part_ids );
+	$settings['styles']          = gutenberg_get_editor_styles();
 
 	// This is so other parts of the code can hook their own settings.
 	// Example: Global Styles.
diff --git a/package-lock.json b/package-lock.json
index 0c40113e095c0d..a4184598a1d896 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "7.8.0-rc.1",
+	"version": "7.8.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -10687,6 +10687,121 @@
 				"make-dir": "^3.0.0",
 				"mustache": "^4.0.0",
 				"write-pkg": "^4.0.0"
+			},
+			"dependencies": {
+				"cross-spawn": {
+					"version": "7.0.1",
+					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+					"integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+					"dev": true,
+					"requires": {
+						"path-key": "^3.1.0",
+						"shebang-command": "^2.0.0",
+						"which": "^2.0.1"
+					}
+				},
+				"execa": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz",
+					"integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==",
+					"dev": true,
+					"requires": {
+						"cross-spawn": "^7.0.0",
+						"get-stream": "^5.0.0",
+						"human-signals": "^1.1.1",
+						"is-stream": "^2.0.0",
+						"merge-stream": "^2.0.0",
+						"npm-run-path": "^4.0.0",
+						"onetime": "^5.1.0",
+						"signal-exit": "^3.0.2",
+						"strip-final-newline": "^2.0.0"
+					}
+				},
+				"get-stream": {
+					"version": "5.1.0",
+					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
+					"integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
+					"dev": true,
+					"requires": {
+						"pump": "^3.0.0"
+					}
+				},
+				"is-stream": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+					"integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+					"dev": true
+				},
+				"merge-stream": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+					"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+					"dev": true
+				},
+				"mimic-fn": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+					"dev": true
+				},
+				"npm-run-path": {
+					"version": "4.0.1",
+					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+					"dev": true,
+					"requires": {
+						"path-key": "^3.0.0"
+					}
+				},
+				"onetime": {
+					"version": "5.1.0",
+					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+					"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+					"dev": true,
+					"requires": {
+						"mimic-fn": "^2.1.0"
+					}
+				},
+				"path-key": {
+					"version": "3.1.1",
+					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+					"dev": true
+				},
+				"pump": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+					"dev": true,
+					"requires": {
+						"end-of-stream": "^1.1.0",
+						"once": "^1.3.1"
+					}
+				},
+				"shebang-command": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+					"dev": true,
+					"requires": {
+						"shebang-regex": "^3.0.0"
+					}
+				},
+				"shebang-regex": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+					"dev": true
+				},
+				"which": {
+					"version": "2.0.2",
+					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+					"dev": true,
+					"requires": {
+						"isexe": "^2.0.0"
+					}
+				}
 			}
 		},
 		"@wordpress/custom-templated-path-webpack-plugin": {
@@ -14286,6 +14401,12 @@
 						"has-flag": "^4.0.0"
 					}
 				},
+				"term-size": {
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
+					"integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==",
+					"dev": true
+				},
 				"type-fest": {
 					"version": "0.8.1",
 					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
@@ -18970,9 +19091,9 @@
 			"dev": true
 		},
 		"execa": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.0.tgz",
-			"integrity": "sha512-JbDUxwV3BoT5ZVXQrSVbAiaXhXUkIwvbhPIwZ0N13kX+5yCzOhUNdocxB/UQRuYOHRYYwAxKYwJYc0T4D12pDA==",
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-3.4.0.tgz",
+			"integrity": "sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==",
 			"dev": true,
 			"requires": {
 				"cross-spawn": "^7.0.0",
@@ -18982,6 +19103,7 @@
 				"merge-stream": "^2.0.0",
 				"npm-run-path": "^4.0.0",
 				"onetime": "^5.1.0",
+				"p-finally": "^2.0.0",
 				"signal-exit": "^3.0.2",
 				"strip-final-newline": "^2.0.0"
 			},
@@ -19025,9 +19147,9 @@
 					"dev": true
 				},
 				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.0.tgz",
+					"integrity": "sha512-8eyAOAH+bYXFPSnNnKr3J+yoybe8O87Is5rtAQ8qRczJz1ajcsjg8l2oZqP+Ppx15Ii3S1vUTjQN2h4YO2tWWQ==",
 					"dev": true,
 					"requires": {
 						"path-key": "^3.0.0"
@@ -19042,6 +19164,12 @@
 						"mimic-fn": "^2.1.0"
 					}
 				},
+				"p-finally": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
+					"integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
+					"dev": true
+				},
 				"path-key": {
 					"version": "3.1.1",
 					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -23050,9 +23178,9 @@
 			"dev": true
 		},
 		"is-whitespace-character": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz",
-			"integrity": "sha512-SzM+T5GKUCtLhlHFKt2SDAX2RFzfS6joT91F2/WSi9LxgFdsnhfPK/UIA+JhRR2xuyLdrCys2PiFDrtn1fU5hQ==",
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+			"integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
 			"dev": true
 		},
 		"is-windows": {
@@ -23062,9 +23190,9 @@
 			"dev": true
 		},
 		"is-word-character": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.2.tgz",
-			"integrity": "sha512-T3FlsX8rCHAH8e7RE7PfOPZVFQlcV3XRF9eOOBQ1uf70OxO7CjjSOjeImMPCADBdYWcStAbVbYvJ1m2D3tb+EA==",
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+			"integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
 			"dev": true
 		},
 		"is-wsl": {
@@ -38819,12 +38947,6 @@
 				}
 			}
 		},
-		"term-size": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/term-size/-/term-size-2.1.1.tgz",
-			"integrity": "sha512-UqvQSch04R+69g4RDhrslmGvGL3ucDRX/U+snYW0Mab4uCAyKSndUksaoqlJ81QKSpRnIsuOYQCbC2ZWx2896A==",
-			"dev": true
-		},
 		"terminal-link": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.0.0.tgz",
diff --git a/package.json b/package.json
index b94b6088efe27a..61b182e0a1f678 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "7.8.0-rc.1",
+	"version": "7.8.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -127,6 +127,7 @@
 		"enzyme": "3.9.0",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.18.2",
+		"execa": "3.4.0",
 		"fast-glob": "2.2.7",
 		"fbjs": "0.8.17",
 		"glob": "7.1.2",
@@ -184,7 +185,7 @@
 		"predev": "npm run check-engines",
 		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "node ./bin/packages/watch.js",
-		"docs:build": "node ./docs/tool/index.js && node ./bin/api-docs/update-readmes.js",
+		"docs:build": "node ./docs/tool/index.js && node ./bin/api-docs/update-api-docs.js",
 		"fixtures:clean": "rimraf \"packages/e2e-tests/fixtures/blocks/*.+(json|serialized.html)\"",
 		"fixtures:server-registered": "packages/env/bin/wp-env run wordpress ./wp-content/plugins/gutenberg/bin/get-server-blocks.php > test/integration/full-content/server-registered.json",
 		"fixtures:generate": "npm run fixtures:server-registered && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
@@ -246,13 +247,12 @@
 			"wp-scripts format-js",
 			"wp-scripts lint-js"
 		],
-		"{docs/{toc.json,tool/*.js},packages/{*/README.md,*/src/{actions,selectors}.js,components/src/*/**/README.md}}": [
-			"node ./docs/tool/index.js",
-			"node ./docs/tool/are-data-files-unstaged.js"
+		"{docs/{toc.json,tool/*.js},packages/{*/README.md,components/src/*/**/README.md}}": [
+			"node ./docs/tool/index.js"
 		],
 		"packages/**/*.js": [
-			"node ./bin/api-docs/update-readmes.js",
-			"node ./bin/api-docs/are-readmes-unstaged.js"
+			"node ./bin/api-docs/update-api-docs.js",
+			"node ./bin/api-docs/are-api-docs-unstaged.js"
 		]
 	},
 	"wp-env": {
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 5b3c4e9605a69f..be91bfafdab138 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -75,7 +75,7 @@ $block-toolbar-height: $grid-unit-60;
 $mobile-block-toolbar-height: 44px;
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
-$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
+$block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
 $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
 $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
@@ -91,15 +91,6 @@ $block-selected-padding: 0;
 $block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
-$block-selected-child-border-width: 1px;
-$block-selected-child-padding: 0;
-$block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
-$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
-$block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
-$block-selected-vertical-margin-descendant: 2 * $block-selected-to-content;
-$block-selected-vertical-margin-child: $block-edge-to-content;
-$block-toolbar-margin: $block-selected-margin + $block-selected-border-width;
-
 /**
  * Border radii.
  */
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 78d7f4fe399dc4..448f4b74514565 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -62,7 +62,6 @@ function BlockListBlock( {
 	enableAnimation,
 	isNavigationMode,
 	isMultiSelecting,
-	hasSelectedUI = true,
 } ) {
 	// In addition to withSelect, we should favor using useSelect in this
 	// component going forward to avoid leaking new props to the public API
@@ -110,7 +109,6 @@ function BlockListBlock( {
 		customClassName,
 		'wp-block block-editor-block-list__block',
 		{
-			'has-selected-ui': hasSelectedUI,
 			'has-warning': ! isValid || !! hasError || isUnregisteredBlock,
 			'is-selected': isSelected,
 			'is-highlighted': isHighlighted,
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 8905a17b58f22a..aeb21f503e78d4 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -29,7 +29,6 @@ function BlockList(
 		rootClientId,
 		isDraggable,
 		renderAppender,
-		__experimentalUIParts = {},
 		__experimentalTagName = 'div',
 		__experimentalAppenderTagName,
 		__experimentalPassedProps = {},
@@ -73,9 +72,6 @@ function BlockList(
 		element: ref,
 		rootClientId,
 	} );
-	const __experimentalContainerProps = rootClientId
-		? {}
-		: { hasPopover: __experimentalUIParts.hasPopover };
 
 	return (
 		<Container
@@ -86,7 +82,6 @@ function BlockList(
 				className,
 				__experimentalPassedProps.className
 			) }
-			{ ...__experimentalContainerProps }
 		>
 			{ blockClientIds.map( ( clientId, index ) => {
 				const isBlockInSelection = hasMultiSelection
@@ -108,9 +103,6 @@ function BlockList(
 							// otherwise there might be a small delay to trigger the animation.
 							index={ index }
 							enableAnimation={ enableAnimation }
-							hasSelectedUI={
-								__experimentalUIParts.hasSelectedUI
-							}
 							className={
 								clientId === targetClientId
 									? 'is-drop-target'
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index c2827bebd5bd16..07171c18f360e8 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -137,6 +137,7 @@ export class BlockList extends Component {
 					keyboardShouldPersistTaps="always"
 					scrollViewStyle={ {
 						flex: isRootList ? 1 : 0,
+						...( ! isRootList && { overflow: 'visible' } ),
 					} }
 					data={ blockClientIds }
 					keyExtractor={ identity }
diff --git a/packages/block-editor/src/components/block-list/root-container.js b/packages/block-editor/src/components/block-list/root-container.js
index 1ca09351851667..89569ab0a90444 100644
--- a/packages/block-editor/src/components/block-list/root-container.js
+++ b/packages/block-editor/src/components/block-list/root-container.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -46,7 +51,7 @@ function onDragStart( event ) {
 	}
 }
 
-function RootContainer( { children, className, hasPopover = true }, ref ) {
+function RootContainer( { children, className }, ref ) {
 	const {
 		selectedBlockClientId,
 		hasMultiSelection,
@@ -82,10 +87,10 @@ function RootContainer( { children, className, hasPopover = true }, ref ) {
 			containerRef={ ref }
 		>
 			<BlockNodes.Provider value={ useState( {} ) }>
-				{ hasPopover ? <BlockPopover /> : null }
+				<BlockPopover />
 				<div
 					ref={ ref }
-					className={ className }
+					className={ classnames( className, 'is-root-container' ) }
 					onFocus={ onFocus }
 					onDragStart={ onDragStart }
 				>
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 1157c381e643bb..b2c7f75b853438 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -21,33 +21,6 @@
 	margin: 0;
 }
 
-/**
- * General Post Content Layout
- */
-
-// Add side padding for the main block container, currently post_content.
-// The purpose of this padding is to ensure that on small viewports, there is
-// room for the block border that sits 14px ($block-padding) offset from the
-// block footprint, as well as the side-UI.
-.block-editor-block-list__layout {
-	padding-left: $block-padding;
-	padding-right: $block-padding;
-	position: relative;
-
-	// Beyond the mobile breakpoint, compensate for side UI.
-	@include break-small() {
-		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-	}
-
-	// Don't propogate that padding to nested blocks.
-	.block-editor-block-list__layout {
-		padding-left: 0;
-		padding-right: 0;
-	}
-}
-
-
 /**
  * Notices & Block Selected/Hover Styles.
  */
@@ -145,6 +118,7 @@
  */
 
 .block-editor-block-list__layout {
+	position: relative;
 
 	// The primary indicator of selection in text is the native selection marker.
 	// When selecting multiple blocks, we provide an additional selection indicator.
@@ -316,18 +290,6 @@
 		clear: both;
 	}
 
-	// Full-wide.
-	&[data-align="full"],
-	&.alignfull {
-		margin-left: -$block-padding;
-		margin-right: -$block-padding;
-
-		@include break-small() {
-			margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
-			margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
-		}
-	}
-
 	// Clear floats.
 	&[data-clear="true"] {
 		float: none;
@@ -669,3 +631,32 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+
+// Add side padding for the canvas, currently edit-post-visual-editor.
+// The purpose of this padding is to ensure that on small viewports, there is
+// room for the block border that sits 14px ($block-padding) offset from the
+// block footprint.
+.block-editor-block-list__layout.is-root-container {
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	@include break-small() {
+		padding-left: $block-side-ui-width;
+		padding-right: $block-side-ui-width;
+	}
+}
+
+.block-editor-block-list__layout.is-root-container {
+	// Full-wide. (to account for the padddings added above)
+	> .block-editor-block-list__block[data-align="full"],
+	> .block-editor-block-list__block.alignfull {
+		margin-left: -$block-padding;
+		margin-right: -$block-padding;
+
+		@include break-small() {
+			margin-left: -$block-side-ui-width;
+			margin-right: -$block-side-ui-width;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
index 093b80ea11b2ea..0a0bcd016d5b37 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
+++ b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
@@ -2,8 +2,8 @@
 	flex-direction: row;
 	height: $mobile-block-toolbar-height;
 	align-items: flex-start;
-	margin-left: $block-toolbar-margin;
-	margin-right: $block-toolbar-margin;
+	margin-left: 2px;
+	margin-right: 2px;
 }
 
 .spacer {
diff --git a/packages/block-editor/src/components/block-patterns/index.js b/packages/block-editor/src/components/block-patterns/index.js
index 5ffd7f0727a164..c2737e4e7ee12d 100644
--- a/packages/block-editor/src/components/block-patterns/index.js
+++ b/packages/block-editor/src/components/block-patterns/index.js
@@ -34,7 +34,7 @@ function BlockPattern( { pattern, onClick } ) {
 			tabIndex={ 0 }
 		>
 			<div className="block-editor-patterns__item-preview">
-				<BlockPreview blocks={ blocks } autoHeight />
+				<BlockPreview blocks={ blocks } />
 			</div>
 			<div className="block-editor-patterns__item-title">{ title }</div>
 		</div>
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 81d26ada36d111..bab6aa7b78c8a4 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -21,7 +21,7 @@ function AutoBlockPreview( { viewportWidth } ) {
 
 	return (
 		<div
-			className="block-editor-block-preview__container editor-styles-wrapper is-auto-height"
+			className="block-editor-block-preview__container editor-styles-wrapper"
 			aria-hidden
 			style={ {
 				height: ( contentHeight * containerWidth ) / viewportWidth,
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 3c3c608762650a..b189a60d536d23 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, noop } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,6 @@ import { useLayoutEffect, useReducer, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockEditorProvider from '../provider';
-import ScaledBlockPreview from './scaled';
 import AutoHeightBlockPreview from './auto';
 
 /**
@@ -27,14 +26,7 @@ import AutoHeightBlockPreview from './auto';
  *
  * @return {WPComponent} The component to be rendered.
  */
-export function BlockPreview( {
-	blocks,
-	viewportWidth = 700,
-	padding,
-	autoHeight = false,
-	__experimentalOnReady = noop,
-	__experimentalScalingDelay = 100,
-} ) {
+export function BlockPreview( { blocks, viewportWidth = 700 } ) {
 	const settings = useSelect( ( select ) =>
 		select( 'core/block-editor' ).getSettings()
 	);
@@ -49,26 +41,10 @@ export function BlockPreview( {
 	}
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			{ /*
-			 * The key prop is used to force recomputing the preview
-			 * by remounting the component, ScaledBlockPreview is not meant to
-			 * be rerendered.
-			 */ }
-			{ autoHeight ? (
-				<AutoHeightBlockPreview
-					key={ recompute }
-					viewportWidth={ viewportWidth }
-				/>
-			) : (
-				<ScaledBlockPreview
-					key={ recompute }
-					blocks={ renderedBlocks }
-					viewportWidth={ viewportWidth }
-					padding={ padding }
-					onReady={ __experimentalOnReady }
-					scalingDelay={ __experimentalScalingDelay }
-				/>
-			) }
+			<AutoHeightBlockPreview
+				key={ recompute }
+				viewportWidth={ viewportWidth }
+			/>
 		</BlockEditorProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-preview/scaled.js b/packages/block-editor/src/components/block-preview/scaled.js
deleted file mode 100644
index 69496241fdb5ac..00000000000000
--- a/packages/block-editor/src/components/block-preview/scaled.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-import { useLayoutEffect, useState, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockList from '../block-list';
-import { getBlockPreviewContainerDOMNode } from '../../utils/dom';
-
-const getInlineStyles = ( scale, x, y, isReady, width ) => ( {
-	transform: `scale(${ scale })`,
-	visibility: isReady ? 'visible' : 'hidden',
-	left: x,
-	top: y,
-	width,
-} );
-
-function ScaledBlockPreview( {
-	blocks,
-	viewportWidth,
-	padding = 0,
-	onReady,
-	scalingDelay,
-} ) {
-	const previewRef = useRef( null );
-
-	const [ isReady, setIsReady ] = useState( false );
-	const [ previewScale, setPreviewScale ] = useState( 1 );
-	const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } );
-
-	// Dynamically calculate the scale factor
-	useLayoutEffect( () => {
-		// Timer - required to account for async render of `BlockEditorProvider`
-		const timerId = setTimeout( () => {
-			const containerElement = previewRef.current;
-			if ( ! containerElement ) {
-				return;
-			}
-
-			// Auxiliary vars used for onReady() callback.
-			let scale,
-				offsetX = 0,
-				offsetY = 0;
-
-			// If we're previewing a single block, scale the preview to fit it.
-			if ( blocks.length === 1 ) {
-				const block = blocks[ 0 ];
-				const previewElement = getBlockPreviewContainerDOMNode(
-					block.clientId
-				);
-				if ( ! previewElement ) {
-					return;
-				}
-
-				let containerElementRect = containerElement.getBoundingClientRect();
-				containerElementRect = {
-					width: containerElementRect.width - padding * 2,
-					height: containerElementRect.height - padding * 2,
-					left: containerElementRect.left,
-					top: containerElementRect.top,
-				};
-				const scaledElementRect = previewElement.getBoundingClientRect();
-
-				scale =
-					containerElementRect.width / scaledElementRect.width || 1;
-				offsetX =
-					-( scaledElementRect.left - containerElementRect.left ) *
-						scale +
-					padding;
-				offsetY =
-					containerElementRect.height >
-					scaledElementRect.height * scale
-						? ( containerElementRect.height -
-								scaledElementRect.height * scale ) /
-								2 +
-						  padding
-						: 0;
-
-				setPreviewScale( scale );
-				setPosition( { x: offsetX, y: offsetY } );
-
-				// Hack: we need  to reset the scaled elements margins
-				previewElement.style.marginTop = '0';
-			} else {
-				const containerElementRect = containerElement.getBoundingClientRect();
-				scale = containerElementRect.width / viewportWidth;
-				setPreviewScale( scale );
-			}
-
-			setIsReady( true );
-			onReady( {
-				scale,
-				position: { x: offsetX, y: offsetY },
-				previewContainerRef: previewRef,
-
-				inlineStyles: getInlineStyles(
-					scale,
-					offsetX,
-					offsetY,
-					true,
-					viewportWidth
-				),
-			} );
-		}, scalingDelay );
-
-		// Cleanup
-		return () => {
-			if ( timerId ) {
-				window.clearTimeout( timerId );
-			}
-		};
-	}, [] );
-
-	if ( ! blocks || blocks.length === 0 ) {
-		return null;
-	}
-
-	const previewStyles = getInlineStyles(
-		previewScale,
-		x,
-		y,
-		isReady,
-		viewportWidth
-	);
-
-	return (
-		<div
-			ref={ previewRef }
-			className={ classnames(
-				'block-editor-block-preview__container editor-styles-wrapper is-centered',
-				{
-					'is-ready': isReady,
-				}
-			) }
-			aria-hidden
-		>
-			<Disabled
-				style={ previewStyles }
-				className="block-editor-block-preview__content"
-			>
-				<BlockList />
-			</Disabled>
-		</div>
-	);
-}
-
-export default ScaledBlockPreview;
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 1628c178dbd059..c6ef74f6c28b60 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -9,9 +9,6 @@
 	width: 100%;
 
 	overflow: hidden;
-	&.is-ready {
-		overflow: visible;
-	}
 }
 
 .block-editor-block-preview__content {
@@ -35,13 +32,6 @@
 	overflow: visible;
 	min-height: auto;
 
-	.block-editor-block-preview__container &.is-centered {
-		.block-editor-block-list__layout,
-		.block-editor-block-list__block {
-			padding: 0;
-		}
-	}
-
 	.block-editor-block-list__insertion-point,
 	.block-editor-block-drop-zone,
 	.reusable-block-indicator,
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 3faa492477fb8c..0c4352d41530ac 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -141,7 +141,6 @@ function BlockStyles( {
 					>
 						<div className="block-editor-block-styles__item-preview">
 							<BlockPreview
-								autoHeight
 								viewportWidth={ 500 }
 								blocks={
 									type.example
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 565d1e7685cc24..e74cfc9ad94b76 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -187,7 +187,6 @@ export class BlockSwitcher extends Component {
 									{ __( 'Preview' ) }
 								</div>
 								<BlockPreview
-									autoHeight
 									viewportWidth={ 500 }
 									blocks={
 										hoveredBlockType.example
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 04a13cc498e27e..d2dc21fff63c20 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -26,7 +26,6 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		isValid,
 		mode,
 		moverDirection,
-		hasMovers = true,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockMode,
@@ -40,7 +39,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
 
-		const { __experimentalMoverDirection, __experimentalUIParts = {} } =
+		const { __experimentalMoverDirection } =
 			getBlockListSettings( blockRootClientId ) || {};
 
 		return {
@@ -57,7 +56,6 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					? getBlockMode( selectedBlockClientIds[ 0 ] )
 					: null,
 			moverDirection: __experimentalMoverDirection,
-			hasMovers: __experimentalUIParts.hasMovers,
 		};
 	}, [] );
 
@@ -74,8 +72,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
 
-	const shouldShowMovers =
-		displayHeaderToolbar || ( showMovers && hasMovers );
+	const shouldShowMovers = displayHeaderToolbar || showMovers;
 
 	if ( blockClientIds.length === 0 ) {
 		return null;
diff --git a/packages/block-editor/src/components/colors/use-colors.native.js b/packages/block-editor/src/components/colors/use-colors.native.js
new file mode 100644
index 00000000000000..49a29b6404836e
--- /dev/null
+++ b/packages/block-editor/src/components/colors/use-colors.native.js
@@ -0,0 +1,10 @@
+const TextColor = ( props ) => <>{ props.children }</>;
+
+const InspectorControlsColorPanel = () => null;
+
+export default function __experimentalUseColors() {
+	return {
+		TextColor,
+		InspectorControlsColorPanel,
+	};
+}
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
new file mode 100644
index 00000000000000..e5acac522d6515
--- /dev/null
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { compact, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import transformStyles from '../../utils/transform-styles';
+
+function EditorStyles( { styles } ) {
+	useEffect( () => {
+		const updatedStyles = transformStyles(
+			styles,
+			'.editor-styles-wrapper'
+		);
+
+		const nodes = map( compact( updatedStyles ), ( updatedCSS ) => {
+			const node = document.createElement( 'style' );
+			node.innerHTML = updatedCSS;
+			document.body.appendChild( node );
+
+			return node;
+		} );
+
+		return () =>
+			nodes.forEach( ( node ) => document.body.removeChild( node ) );
+	}, [ styles ] );
+
+	return null;
+}
+
+export default EditorStyles;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 31365b395684a9..0fd7fb2d4fb09b 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -72,6 +72,7 @@ export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as CopyHandler } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index cddc6dd39e77db..032e1a01c30ad9 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -44,6 +44,7 @@ export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { Block as __experimentalBlock } from './block-list/block-wrapper';
 
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 8111eb769ffe30..1e5672b6c7fc40 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -125,7 +125,6 @@ class InnerBlocks extends Component {
 			parentLock,
 			__experimentalCaptureToolbars,
 			__experimentalMoverDirection,
-			__experimentalUIParts,
 		} = this.props;
 
 		const newSettings = {
@@ -135,7 +134,6 @@ class InnerBlocks extends Component {
 			__experimentalCaptureToolbars:
 				__experimentalCaptureToolbars || false,
 			__experimentalMoverDirection,
-			__experimentalUIParts,
 		};
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
index 2985f75d6d916e..06f989a2a9bb06 100644
--- a/packages/block-editor/src/components/inserter/preview-panel.js
+++ b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -24,7 +24,6 @@ function InserterPreviewPanel( { item } ) {
 				{ isReusableBlock( item ) || hoveredItemBlockType.example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							padding={ 10 }
 							viewportWidth={ 500 }
 							blocks={
 								hoveredItemBlockType.example
@@ -43,7 +42,6 @@ function InserterPreviewPanel( { item } ) {
 											item.initialAttributes
 									  )
 							}
-							autoHeight
 						/>
 					</div>
 				) : (
diff --git a/packages/block-editor/src/components/plain-text/index.native.js b/packages/block-editor/src/components/plain-text/index.native.js
index 9ddb1fba7465c1..468549b448576d 100644
--- a/packages/block-editor/src/components/plain-text/index.native.js
+++ b/packages/block-editor/src/components/plain-text/index.native.js
@@ -70,6 +70,7 @@ export default class PlainText extends Component {
 				style={
 					this.props.style || styles[ 'block-editor-plain-text' ]
 				}
+				scrollEnabled={ false }
 			/>
 		);
 	}
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 1431b6ee4b9684..e919e27f7ce145 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -65,6 +65,7 @@ export const withInspectorControl = createHigherOrderComponent(
 						<BlockEdit { ...props } />
 						<InspectorAdvancedControls>
 							<TextControl
+								autoComplete="off"
 								label={ __( 'Additional CSS class(es)' ) }
 								value={ props.attributes.className || '' }
 								onChange={ ( nextValue ) => {
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index fe401713c3ab99..c59bd31bdd9c6e 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -788,7 +788,7 @@ export function updateBlockListSettings( clientId, settings ) {
 	};
 }
 
-/*
+/**
  * Returns an action object used in signalling that the block editor settings have been updated.
  *
  * @param {Object} settings Updated settings
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 15590ca49e713b..d9b76ed8f1bcb6 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -13,9 +13,6 @@ import { name as buttonBlockName } from '../button/';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
-const UI_PARTS = {
-	hasSelectedUI: false,
-};
 
 // Inside buttons block alignment options are not supported.
 const alignmentHooksSetting = {
@@ -29,7 +26,6 @@ function ButtonsEdit( { className } ) {
 				<InnerBlocks
 					allowedBlocks={ ALLOWED_BLOCKS }
 					template={ BUTTONS_TEMPLATE }
-					__experimentalUIParts={ UI_PARTS }
 					__experimentalMoverDirection="horizontal"
 				/>
 			</AlignmentHookSettingsProvider>
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
index 680f870fecb56a..c3e9d2fb7064f3 100644
--- a/packages/block-library/src/column/edit.native.js
+++ b/packages/block-library/src/column/edit.native.js
@@ -25,9 +25,6 @@ function ColumnEdit( {
 	isSelected,
 	getStylesFromColorScheme,
 	isParentSelected,
-	isDescendantOfParentSelected,
-	isDescendantSelected,
-	isAncestorSelected,
 	customBlockProps,
 } ) {
 	const { verticalAlignment } = attributes;
@@ -40,69 +37,11 @@ function ColumnEdit( {
 	const minWidth = Math.min( containerWidth, containerMaxWidth );
 	const columnBaseWidth = minWidth / Math.max( 1, columnsInRow );
 
-	const applyBlockStyle = ( placeholder = false ) => {
-		const pullWidths = ( names ) =>
-			names.map(
-				( name ) =>
-					( styles[ `column-${ name }-margin` ] || {} ).width || 0
-			);
-
+	const applyBlockStyle = () => {
 		let width = columnBaseWidth;
-		const names = [
-			'selected',
-			'parent-selected',
-			'descendant-selected',
-			'placeholder-selected',
-			'dashed-border',
-		];
-		const widths = pullWidths( names );
-		const [
-			emptyColumnSelected,
-			parentSelected,
-			columnSelected,
-			placeholderParentSelected,
-			dashedBorderWidth,
-		] = widths;
-
-		switch ( true ) {
-			case isSelected:
-				width = columnBaseWidth;
-				width -= ! hasChildren
-					? emptyColumnSelected
-					: columnSelected + dashedBorderWidth;
-				break;
-
-			case isParentSelected:
-				width -= placeholder
-					? placeholderParentSelected
-					: parentSelected;
-				break;
-
-			case isDescendantSelected:
-				width = columnBaseWidth;
-				break;
-
-			case isDescendantOfParentSelected:
-				width = columnBaseWidth;
-				if ( ! hasChildren ) width -= emptyColumnSelected;
-				break;
-
-			case isAncestorSelected:
-				width = columnBaseWidth;
-				if ( ! hasChildren ) width -= parentSelected;
-				break;
-
-			case placeholder:
-				width -=
-					columnsInRow === 1
-						? parentSelected
-						: placeholderParentSelected;
-				width -=
-					columnSelected +
-					( columnsInRow === 1 ? parentSelected : dashedBorderWidth );
-				break;
-
-			default:
+		if ( columnsInRow > 1 ) {
+			const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
+			width = ( minWidth - margins ) / Math.max( 1, columnsInRow );
 		}
 
 		return { width };
@@ -121,11 +60,8 @@ function ColumnEdit( {
 							styles.columnPlaceholder,
 							styles.columnPlaceholderDark
 						),
-					applyBlockStyle( true ),
-					{
-						...styles.marginVerticalDense,
-						...styles.marginHorizontalNone,
-					},
+					applyBlockStyle(),
+					styles.columnPlaceholderNotSelected,
 				] }
 			></View>
 		);
@@ -140,10 +76,16 @@ function ColumnEdit( {
 					isCollapsed={ false }
 				/>
 			</BlockControls>
-			<View style={ applyBlockStyle() }>
+			<View
+				style={ [
+					applyBlockStyle(),
+					isSelected && hasChildren && styles.innerBlocksBottomSpace,
+				] }
+			>
 				<InnerBlocks
 					flatListProps={ {
 						scrollEnabled: false,
+						style: styles.innerBlocks,
 					} }
 					renderAppender={
 						isSelected && InnerBlocks.ButtonBlockAppender
@@ -175,7 +117,6 @@ function ColumnEditWrapper( props ) {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const {
-			getBlockParents,
 			getBlockCount,
 			getBlockRootClientId,
 			getSelectedBlockClientId,
@@ -190,26 +131,10 @@ export default compose( [
 		const isParentSelected =
 			selectedBlockClientId && selectedBlockClientId === parentId;
 
-		const selectedParents = selectedBlockClientId
-			? getBlockParents( selectedBlockClientId )
-			: [];
-		const isDescendantOfParentSelected = selectedParents.includes(
-			parentId
-		);
-
-		const parents = getBlockParents( clientId, true );
-
-		const isAncestorSelected =
-			selectedBlockClientId && parents.includes( selectedBlockClientId );
-		const isDescendantSelected = selectedParents.includes( clientId );
-
 		return {
 			hasChildren,
 			isParentSelected,
 			isSelected,
-			isDescendantOfParentSelected,
-			isAncestorSelected,
-			isDescendantSelected,
 		};
 	} ),
 	withPreferredColorScheme,
diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
index 25fbd03803878e..64d2045d519c87 100644
--- a/packages/block-library/src/column/editor.native.scss
+++ b/packages/block-library/src/column/editor.native.scss
@@ -1,4 +1,9 @@
+.columnPlaceholderNotSelected {
+	padding-top: $block-selected-to-content;
+}
+
 .columnPlaceholder {
+	flex: 1;
 	padding: $block-selected-to-content;
 	background-color: $white;
 	border: $border-width dashed $gray;
@@ -10,44 +15,18 @@
 	border: $border-width dashed $gray-70;
 }
 
-.marginVerticalDense {
-	margin-top: $block-selected-child-to-content;
-	margin-bottom: $block-selected-child-to-content;
+.innerBlocks {
+	overflow: visible;
 }
 
-.marginHorizontalNone {
-	margin-left: 0;
-	margin-right: 0;
+.innerBlocksBottomSpace {
+	margin-bottom: $block-selected-to-content;
 }
 
 .columns-container {
 	max-width: $content-width;
 }
 
-.column-container-base {
-	max-width: $content-width - 2 * ( $block-selected-margin + $block-selected-border-width );
-}
-
-.column-placeholder-selected-margin {
-	width: 2 * $block-selected-to-content;
-}
-
-.column-parent-selected-margin {
-	width: $block-selected-to-content;
-}
-
-.column-selected-margin {
-	width: 2 * $block-edge-to-content;
-}
-
-.column-descendant-selected-margin {
-	width: 2 * $block-selected-margin;
-}
-
-.column-dashed-border-margin {
-	width: 2 * $block-selected-border-width;
-}
-
 .is-vertically-aligned-top {
 	justify-content: flex-start;
 }
@@ -63,3 +42,7 @@
 .flexBase {
 	flex: 1;
 }
+
+.columnMargin {
+	margin: $block-edge-to-content / 2;
+}
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 41f6679a98b7f7..5fc2729d36bdd2 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -122,7 +122,7 @@ function ColumnsEditContainer( {
 					isCollapsed={ false }
 				/>
 			</BlockControls>
-			<View>
+			<View style={ isSelected && styles.innerBlocksSelected }>
 				{ resizeListener }
 				<InnerBlocks
 					renderAppender={ renderAppender }
@@ -132,12 +132,10 @@ function ColumnsEditContainer( {
 							: undefined
 					}
 					flatListProps={ {
-						contentContainerStyle: {
-							...styles.columnsContainer,
-							maxWidth: width,
-						},
+						contentContainerStyle: styles.columnsContainer,
 						horizontal: true,
 						scrollEnabled: false,
+						style: styles.innerBlocks,
 					} }
 					allowedBlocks={ ALLOWED_BLOCKS }
 					customBlockProps={ {
diff --git a/packages/block-library/src/columns/editor.native.scss b/packages/block-library/src/columns/editor.native.scss
index 4b59f9833b7d29..90c01e39748129 100644
--- a/packages/block-library/src/columns/editor.native.scss
+++ b/packages/block-library/src/columns/editor.native.scss
@@ -1,31 +1,17 @@
-.columnsPlaceholder {
-	padding: 12px;
-	margin-bottom: 12px;
-	background-color: $white;
-	border: $border-width dashed $gray;
-	border-radius: 4px;
-}
-
-.columnsPlaceholderDark {
-	background-color: $black;
-	border: $border-width dashed $gray-70;
-}
-
-.marginVerticalDense {
-	margin-top: $block-selected-child-margin;
-	margin-bottom: $block-selected-child-margin;
-}
-
-.marginHorizontalNone {
-	margin-left: 0;
-	margin-right: 0;
-}
-
 .columnsContainer {
 	flex-direction: row;
 	flex-wrap: wrap;
-	justify-content: flex-start;
+	justify-content: space-between;
 	align-items: stretch;
 	max-width: $content-width;
-	overflow: hidden;
+	overflow: visible;
+	width: 100%;
+}
+
+.innerBlocks {
+	overflow: visible;
+}
+
+.innerBlocksSelected {
+	margin-bottom: $block-edge-to-content;
 }
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 3e43660a300efe..cc68a15f0d79b5 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -12,7 +12,7 @@ import HeadingToolbar from './heading-toolbar';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, __experimentalText as Text } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import {
 	AlignmentToolbar,
@@ -22,7 +22,7 @@ import {
 	__experimentalUseColors,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
+import { useRef, Platform } from '@wordpress/element';
 
 function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 	const ref = useRef();
@@ -42,8 +42,8 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 		<>
 			<BlockControls>
 				<HeadingToolbar
-					minLevel={ 2 }
-					maxLevel={ 5 }
+					minLevel={ Platform.OS === 'web' ? 2 : 1 }
+					maxLevel={ Platform.OS === 'web' ? 5 : 7 }
 					selectedLevel={ level }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
@@ -56,20 +56,22 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls>
-				<PanelBody title={ __( 'Heading settings' ) }>
-					<p>{ __( 'Level' ) }</p>
-					<HeadingToolbar
-						isCollapsed={ false }
-						minLevel={ 1 }
-						maxLevel={ 7 }
-						selectedLevel={ level }
-						onChange={ ( newLevel ) =>
-							setAttributes( { level: newLevel } )
-						}
-					/>
-				</PanelBody>
-			</InspectorControls>
+			{ Platform.OS === 'web' && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Heading settings' ) }>
+						<Text variant="label">{ __( 'Level' ) }</Text>
+						<HeadingToolbar
+							isCollapsed={ false }
+							minLevel={ 1 }
+							maxLevel={ 7 }
+							selectedLevel={ level }
+							onChange={ ( newLevel ) =>
+								setAttributes( { level: newLevel } )
+							}
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
 			{ InspectorControlsColorPanel }
 			<TextColor>
 				<RichText
@@ -97,6 +99,7 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) {
 						[ `has-text-align-${ align }` ]: align,
 					} ) }
 					placeholder={ placeholder || __( 'Write heading…' ) }
+					textAlign={ align }
 				/>
 			</TextColor>
 		</>
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
deleted file mode 100644
index 8d8d8b49aef99a..00000000000000
--- a/packages/block-library/src/heading/edit.native.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Internal dependencies
- */
-import HeadingToolbar from './heading-toolbar';
-
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	RichText,
-	BlockControls,
-	__experimentalUseColors,
-} from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
-
-const HeadingEdit = ( {
-	attributes,
-	mergeBlocks,
-	onFocus,
-	onReplace,
-	setAttributes,
-	style,
-} ) => {
-	const { align, content, level, placeholder } = attributes;
-
-	/* eslint-disable @wordpress/no-unused-vars-before-return */
-	const { TextColor } = __experimentalUseColors( [
-		{ name: 'textColor', property: 'color' },
-	] );
-	/* eslint-enable @wordpress/no-unused-vars-before-return */
-
-	return (
-		<View onAccessibilityTap={ onFocus }>
-			<BlockControls>
-				<HeadingToolbar
-					minLevel={ 2 }
-					maxLevel={ 7 }
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-					isCollapsed={ false }
-				/>
-			</BlockControls>
-			<TextColor>
-				<RichText
-					identifier="content"
-					tagName={ 'h' + level }
-					value={ content }
-					style={ style }
-					onChange={ ( value ) =>
-						setAttributes( { content: value } )
-					}
-					onMerge={ mergeBlocks }
-					onSplit={ ( value ) => {
-						if ( ! value ) {
-							return createBlock( 'core/paragraph' );
-						}
-
-						return createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} }
-					onReplace={ onReplace }
-					onRemove={ () => onReplace( [] ) }
-					placeholder={ placeholder || __( 'Write heading…' ) }
-					textAlign={ align }
-				/>
-			</TextColor>
-		</View>
-	);
-};
-
-export default HeadingEdit;
diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js
index 29a60cd93d7217..eef2b3af3b5e7e 100644
--- a/packages/block-library/src/heading/heading-level-icon.js
+++ b/packages/block-library/src/heading/heading-level-icon.js
@@ -18,8 +18,8 @@ export default function HeadingLevelIcon( { level, isPressed = false } ) {
 
 	return (
 		<SVG
-			width="20"
-			height="20"
+			width="24"
+			height="24"
 			viewBox="0 0 20 20"
 			xmlns="http://www.w3.org/2000/svg"
 			isPressed={ isPressed }
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 6d8fa6f441e2e2..fedfdd9eed449e 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -36,8 +36,6 @@ $navigation-sub-menu-width: $grid-unit-10 * 25;
 
 .wp-block-navigation > ul {
 	li {
-		z-index: 1;
-
 		&:hover,
 		&:focus-within {
 			cursor: pointer;
diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
index 04865708f773bc..abeb2d12139ef8 100644
--- a/packages/block-library/src/template-part/edit/placeholder.js
+++ b/packages/block-library/src/template-part/edit/placeholder.js
@@ -22,7 +22,7 @@ function TemplatePartPreview() {
 			<div className="wp-block-template-part__placeholder-preview-title">
 				{ __( 'Preview' ) }
 			</div>
-			<BlockPreview blocks={ blocks } autoHeight />
+			<BlockPreview blocks={ blocks } />
 		</div>
 	);
 }
diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
index 82a184ce167904..2c33afb53fd818 100644
--- a/packages/block-library/src/verse/edit.js
+++ b/packages/block-library/src/verse/edit.js
@@ -11,6 +11,7 @@ import {
 	RichText,
 	BlockControls,
 	AlignmentToolbar,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 
 export default function VerseEdit( {
@@ -32,7 +33,7 @@ export default function VerseEdit( {
 				/>
 			</BlockControls>
 			<RichText
-				tagName="pre"
+				tagName={ Block.pre }
 				preserveWhiteSpace
 				value={ content }
 				onChange={ ( nextContent ) => {
diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js
index e05ab62bf2f27f..df40ab80799fa1 100644
--- a/packages/block-library/src/verse/index.js
+++ b/packages/block-library/src/verse/index.js
@@ -31,6 +31,9 @@ export const settings = {
 			),
 		},
 	},
+	supports: {
+		lightBlockWrapper: true,
+	},
 	keywords: [ __( 'poetry' ), __( 'poem' ) ],
 	transforms,
 	deprecated,
diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
index 0c861f1b414d44..5d88c9be90d59c 100644
--- a/packages/components/src/angle-picker-control/stories/index.js
+++ b/packages/components/src/angle-picker-control/stories/index.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
 import AnglePickerControl from '../';
 
 export default {
-	title: 'Components|AnglePickerControl',
+	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
 };
 
diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js
index 6243847023227e..d665e37e49cae3 100644
--- a/packages/components/src/dropdown-menu/index.native.js
+++ b/packages/components/src/dropdown-menu/index.native.js
@@ -1,5 +1,184 @@
-function DropdownMenu() {
-	return null;
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { flatMap, isEmpty, isFunction } from 'lodash';
+import { Platform } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { DOWN } from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
+import { BottomSheet, PanelBody } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Dropdown from '../dropdown';
+
+function mergeProps( defaultProps = {}, props = {} ) {
+	const mergedProps = {
+		...defaultProps,
+		...props,
+	};
+
+	if ( props.className && defaultProps.className ) {
+		mergedProps.className = classnames(
+			props.className,
+			defaultProps.className
+		);
+	}
+
+	return mergedProps;
+}
+
+function DropdownMenu( {
+	children,
+	className,
+	controls,
+	icon = 'menu',
+	label,
+	popoverProps,
+	toggleProps,
+	// The following props exist for backward compatibility.
+	menuLabel,
+	position,
+} ) {
+	if ( menuLabel ) {
+		deprecated( '`menuLabel` prop in `DropdownComponent`', {
+			alternative: '`menuProps` object and its `aria-label` property',
+			plugin: 'Gutenberg',
+		} );
+	}
+
+	if ( position ) {
+		deprecated( '`position` prop in `DropdownComponent`', {
+			alternative: '`popoverProps` object and its `position` property',
+			plugin: 'Gutenberg',
+		} );
+	}
+
+	if ( isEmpty( controls ) && ! isFunction( children ) ) {
+		return null;
+	}
+
+	// Normalize controls to nested array of objects (sets of controls)
+	let controlSets;
+	if ( ! isEmpty( controls ) ) {
+		controlSets = controls;
+		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
+			controlSets = [ controlSets ];
+		}
+	}
+	const mergedPopoverProps = mergeProps(
+		{
+			className: 'components-dropdown-menu__popover',
+			position,
+		},
+		popoverProps
+	);
+
+	return (
+		<Dropdown
+			className={ classnames( 'components-dropdown-menu', className ) }
+			popoverProps={ mergedPopoverProps }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const openOnArrowDown = ( event ) => {
+					if ( ! isOpen && event.keyCode === DOWN ) {
+						event.preventDefault();
+						event.stopPropagation();
+						onToggle();
+					}
+				};
+				const mergedToggleProps = mergeProps(
+					{
+						className: classnames(
+							'components-dropdown-menu__toggle',
+							{
+								'is-opened': isOpen,
+							}
+						),
+					},
+					toggleProps
+				);
+
+				return (
+					<Button
+						{ ...mergedToggleProps }
+						icon={ icon }
+						onClick={ ( event ) => {
+							onToggle( event );
+							if ( mergedToggleProps.onClick ) {
+								mergedToggleProps.onClick( event );
+							}
+						} }
+						onKeyDown={ ( event ) => {
+							openOnArrowDown( event );
+							if ( mergedToggleProps.onKeyDown ) {
+								mergedToggleProps.onKeyDown( event );
+							}
+						} }
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						label={ label }
+						showTooltip
+					>
+						{ mergedToggleProps.children }
+					</Button>
+				);
+			} }
+			renderContent={ ( { isOpen, onClose, ...props } ) => {
+				return (
+					<BottomSheet
+						hideHeader={ true }
+						isVisible={ isOpen }
+						onClose={ onClose }
+					>
+						{ isFunction( children ) ? children( props ) : null }
+						<PanelBody
+							title={ label }
+							style={ { paddingLeft: 0, paddingRight: 0 } }
+						>
+							{ flatMap(
+								controlSets,
+								( controlSet, indexOfSet ) =>
+									controlSet.map(
+										( control, indexOfControl ) => (
+											<BottomSheet.Cell
+												key={ [
+													indexOfSet,
+													indexOfControl,
+												].join() }
+												label={ control.title }
+												onPress={ () => {
+													onClose();
+													if ( control.onClick ) {
+														control.onClick();
+													}
+												} }
+												editable={ false }
+												icon={ control.icon }
+												leftAlign={ true }
+												isSelected={ control.isActive }
+												separatorType={
+													indexOfControl ===
+														controlSet.length - 1 ||
+													Platform.OS === 'android'
+														? 'none'
+														: 'leftMargin'
+												}
+											/>
+										)
+									)
+							) }
+						</PanelBody>
+					</BottomSheet>
+				);
+			} }
+		/>
+	);
 }
 
-export default DropdownMenu;
+export default withPreferredColorScheme( DropdownMenu );
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index e02dde7f7217df..2523e423c4b160 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -80,6 +80,7 @@ export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
+export { default as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
@@ -113,4 +114,3 @@ export {
 } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
-export * from './text';
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index abb7b278dc5723..5bbef298904d99 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -30,6 +30,7 @@ export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';
 export { default as PanelActions } from './panel/actions';
 export { default as Button } from './button';
+export { default as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
 export { default as SelectControl } from './select-control';
@@ -46,6 +47,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export * from './text';
 
 // Mobile Components
 export { default as BottomSheet } from './mobile/bottom-sheet';
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 37228c481eb59f..deb6cdd5f8f216 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -15,6 +15,7 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { check } from '@wordpress/icons';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
@@ -100,6 +101,7 @@ class BottomSheetCell extends Component {
 			onChangeValue,
 			children,
 			editable = true,
+			isSelected = false,
 			separatorType,
 			style = {},
 			getStylesFromColorScheme,
@@ -127,7 +129,7 @@ class BottomSheetCell extends Component {
 			? cellLabelLeftAlignNoIconStyle
 			: cellLabelCenteredStyle;
 		const defaultLabelStyle =
-			showValue || icon !== undefined || customActionButton
+			showValue || customActionButton
 				? cellLabelStyle
 				: defaultMissingIconAndValue;
 
@@ -303,6 +305,7 @@ class BottomSheetCell extends Component {
 										icon={ icon }
 										size={ 24 }
 										color={ iconStyle.color }
+										isPressed={ false }
 									/>
 									<View
 										style={
@@ -314,6 +317,12 @@ class BottomSheetCell extends Component {
 							<Text style={ [ defaultLabelStyle, labelStyle ] }>
 								{ label }
 							</Text>
+							{ isSelected && (
+								<Icon
+									icon={ check }
+									fill={ platformStyles.isSelected.color }
+								/>
+							) }
 						</View>
 						{ customActionButton && (
 							<TouchableOpacity
diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss
index 4feb815ba9bd07..0c823db8c3fc90 100644
--- a/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss
+++ b/packages/components/src/mobile/bottom-sheet/cellStyles.android.scss
@@ -5,3 +5,7 @@
 .separatorMarginLeft {
 	margin-left: 56px;
 }
+
+.isSelected {
+	color: $blue-wordpress;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss
index 45b97213d1768f..bb16b45216e4c1 100644
--- a/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss
+++ b/packages/components/src/mobile/bottom-sheet/cellStyles.ios.scss
@@ -5,3 +5,7 @@
 .separatorMarginLeft {
 	margin-left: 36px;
 }
+
+.isSelected {
+	color: $blue-wordpress;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
index 254817bfb44490..c781949317b28a 100644
--- a/packages/components/src/mobile/bottom-sheet/styles.native.scss
+++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -137,7 +137,7 @@
 	font-size: 17px;
 	color: #2e4453;
 	flex: 1;
-	margin-left: 12px;
+	margin-left: 0;
 }
 
 .cellValue {
diff --git a/packages/components/src/panel/body.native.js b/packages/components/src/panel/body.native.js
index 87c5eeb60bac7f..36126ea76a9f5b 100644
--- a/packages/components/src/panel/body.native.js
+++ b/packages/components/src/panel/body.native.js
@@ -19,10 +19,10 @@ export class PanelBody extends Component {
 	}
 
 	render() {
-		const { children, title } = this.props;
+		const { children, title, style = {} } = this.props;
 
 		return (
-			<View style={ styles.panelContainer }>
+			<View style={ [ styles.panelContainer, style ] }>
 				{ title && (
 					<Text style={ styles.sectionHeaderText }>{ title }</Text>
 				) }
diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md
index 806c60d45a06bc..4a659b34fa4ccc 100644
--- a/packages/components/src/text/README.md
+++ b/packages/components/src/text/README.md
@@ -1,18 +1,54 @@
 # Text
 
-A text component for styling text.
+A component for rendering text.
 
 ## Usage
 
 ```jsx
-import {Text} from '@wordpress/components';
+import { Text } from '@wordpress/components';
 
 const HeroPanel = () => (
 	<>
-		<Text variant="title.large" as="h1">Hello World!</Text>
+		<Text variant="title.large" as="h1">
+			Hello World!
+		</Text>
 		<Text variant="body">Greetings to you!</Text>
 	</>
 );
 ```
 
-> For most use-cases you can use this component instead of a `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`.
+## Props
+
+The component accepts the following props:
+
+#### as
+
+Determines the HTML selector for the text.
+
+For most use-cases you can use this component instead of a `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`.
+
+-   Type: `String`
+-   Required: No
+-   Default: ''
+
+#### variant
+
+Determines the style for the text. Available variants:
+
+-   `title`
+-   `title.large`
+-   `title.medium`
+-   `title.small`
+-   `subtitle`
+-   `subtitle.large`
+-   `subtitle.small`
+-   `body`
+-   `body.large`
+-   `body.small`
+-   `button`
+-   `caption`
+-   `label`
+
+*   Type: `String`
+*   Required: No
+*   Default: 'body'
diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js
index c4ae06e2b4f97f..e502e39a59c49a 100644
--- a/packages/components/src/text/index.js
+++ b/packages/components/src/text/index.js
@@ -1 +1,19 @@
-export * from './text.styles';
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { text } from './styles/text-mixins';
+
+const Text = styled.p(
+	`
+	box-sizing: border-box;
+	margin: 0;
+`,
+	text
+);
+
+export default Text;
diff --git a/packages/components/src/text/text.styles.native.js b/packages/components/src/text/index.native.js
similarity index 51%
rename from packages/components/src/text/text.styles.native.js
rename to packages/components/src/text/index.native.js
index 2304de2efa62f3..8a52d4056d5578 100644
--- a/packages/components/src/text/text.styles.native.js
+++ b/packages/components/src/text/index.native.js
@@ -6,6 +6,8 @@ import styled from '@emotion/native';
 /**
  * Internal dependencies
  */
-import { text } from './mixins';
+import { text } from './styles/text-mixins';
 
-export const __experimentalText = styled.Text( text );
+const Text = styled.Text( text );
+
+export default Text;
diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.js
index f1dca3b2c819b6..aeb3cd330fdd3a 100644
--- a/packages/components/src/text/stories/index.js
+++ b/packages/components/src/text/stories/index.js
@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import { __experimentalText as Text } from '../text.styles';
+import Text from '../index';
 
 export default {
-	title: 'Components/Experimental/Text',
+	title: 'Components/Text',
 	component: Text,
 };
 
@@ -28,31 +28,3 @@ export const _default = () => (
 		<Text variant="label">Label</Text>
 	</>
 );
-
-export const TitleLarge = () => (
-	<Text variant="title.large" as="h1">
-		Title Large
-	</Text>
-);
-export const TitleMedium = () => (
-	<Text variant="title.medium" as="h2">
-		Title Medium
-	</Text>
-);
-export const TitleSmall = () => (
-	<Text variant="title.small" as="h3">
-		Title Small
-	</Text>
-);
-
-export const Subtitle = () => <Text variant="subtitle">Subtitle</Text>;
-export const SubtitleSmall = () => (
-	<Text variant="subtitle.small">Subtitle Small</Text>
-);
-
-export const Body = () => <Text variant="body">Body</Text>;
-export const BodySmall = () => <Text variant="body.small">Body Small</Text>;
-
-export const Button = () => <Text variant="button">Button</Text>;
-export const Caption = () => <Text variant="caption">Caption</Text>;
-export const Label = () => <Text variant="label">Label</Text>;
diff --git a/packages/components/src/text/styles/emotion-css.js b/packages/components/src/text/styles/emotion-css.js
new file mode 100644
index 00000000000000..c86ee0154e7630
--- /dev/null
+++ b/packages/components/src/text/styles/emotion-css.js
@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+
+export default css;
diff --git a/packages/components/src/text/styles/emotion-css.native.js b/packages/components/src/text/styles/emotion-css.native.js
new file mode 100644
index 00000000000000..11ea92e4e705c3
--- /dev/null
+++ b/packages/components/src/text/styles/emotion-css.native.js
@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/native';
+
+export default css;
diff --git a/packages/components/src/text/font-family.js b/packages/components/src/text/styles/font-family.js
similarity index 100%
rename from packages/components/src/text/font-family.js
rename to packages/components/src/text/styles/font-family.js
diff --git a/packages/components/src/text/font-family.native.js b/packages/components/src/text/styles/font-family.native.js
similarity index 100%
rename from packages/components/src/text/font-family.native.js
rename to packages/components/src/text/styles/font-family.native.js
diff --git a/packages/components/src/text/mixins.js b/packages/components/src/text/styles/text-mixins.js
similarity index 90%
rename from packages/components/src/text/mixins.js
rename to packages/components/src/text/styles/text-mixins.js
index 9d4abca2bad126..d2463e80310a49 100644
--- a/packages/components/src/text/mixins.js
+++ b/packages/components/src/text/styles/text-mixins.js
@@ -1,11 +1,8 @@
-/**
- * External dependencies
- */
-import css from '@emotion/css';
 /**
  * Internal dependencies
  */
 import { fontFamily } from './font-family';
+import css from './emotion-css';
 
 const fontWeightNormal = `font-weight: 400;`;
 const fontWeightSemibold = `font-weight: 600;`;
@@ -78,13 +75,13 @@ const label = `
 `;
 
 /**
- * @typedef {'title.large'|'title.medium'|'title.small'|'subtitle'|'subtitle.small'|'body'|'body.small'|'button'|'caption'|'label'} TextVariant
+ * @typedef {'title.large'|'title.medium'|'title.small'|'subtitle'|'subtitle.small'|'body'|'body.large'|'body.small'|'button'|'caption'|'label'} TextVariant
  */
 
 /**
  * @param {TextVariant} variantName
  */
-const variant = ( variantName ) => {
+const variant = ( variantName = 'body' ) => {
 	switch ( variantName ) {
 		case 'title.large':
 			return css`
@@ -114,6 +111,10 @@ const variant = ( variantName ) => {
 			`;
 
 		case 'body':
+			return css`
+				${body}
+			`;
+		case 'body.large':
 			return css`
 				${body}
 				${bodyLarge}
diff --git a/packages/components/src/text/test/index.js b/packages/components/src/text/test/index.js
new file mode 100644
index 00000000000000..dfa504018ed5dd
--- /dev/null
+++ b/packages/components/src/text/test/index.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import Text from '../';
+
+let container = null;
+
+beforeEach( () => {
+	container = document.createElement( 'div' );
+	document.body.appendChild( container );
+} );
+
+afterEach( () => {
+	unmountComponentAtNode( container );
+	container.remove();
+	container = null;
+} );
+
+function getTextStyle( node ) {
+	const text = node || container.children[ 0 ];
+	return window.getComputedStyle( text );
+}
+
+describe( 'Text', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			act( () => {
+				render( <Text>Hello</Text>, container );
+			} );
+
+			const [ text ] = container.children;
+
+			expect( text.innerHTML ).toBe( 'Hello' );
+		} );
+
+		it( 'should render as a <p>, by default', () => {
+			act( () => {
+				render( <Text />, container );
+			} );
+
+			const [ text ] = container.children;
+
+			expect( text.tagName ).toBe( 'P' );
+		} );
+
+		it( 'should render as another selector, if specified', () => {
+			act( () => {
+				render(
+					<>
+						<Text as="h1" />
+						<Text as="h2" />
+						<Text as="span" />
+						<Text as="div" />
+					</>,
+					container
+				);
+			} );
+
+			const [ h1, h2, span, div ] = container.children;
+
+			expect( h1.tagName ).toBe( 'H1' );
+			expect( h2.tagName ).toBe( 'H2' );
+			expect( span.tagName ).toBe( 'SPAN' );
+			expect( div.tagName ).toBe( 'DIV' );
+		} );
+	} );
+
+	describe( 'Variants', () => {
+		it( 'should render with specified variantion styles', () => {
+			act( () => {
+				render(
+					<>
+						<Text>Base</Text>
+						<Text variant="title.large">Title Large</Text>
+						<Text variant="caption">Caption</Text>
+					</>,
+					container
+				);
+			} );
+
+			const [ base, title, caption ] = container.children;
+
+			expect( getTextStyle( base ).fontSize ).toBeFalsy();
+			expect( getTextStyle( title ).fontSize ).toBe( '32px' );
+			expect( getTextStyle( caption ).fontSize ).toBe( '12px' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/text/text.styles.js b/packages/components/src/text/text.styles.js
deleted file mode 100644
index 67545507f0d0b5..00000000000000
--- a/packages/components/src/text/text.styles.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { text } from './mixins';
-
-export const __experimentalText = styled.p( `margin: 0;`, text );
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js b/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
index a890645928854a..411a4e6edbd604 100644
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
+++ b/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
@@ -1,10 +1,36 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import DropdownMenu from '../dropdown-menu';
+import styles from './style.scss';
 
-function ToolbarGroupCollapsed( { controls = [], ...props } ) {
-	return <DropdownMenu controls={ controls } { ...props } />;
+function ToolbarGroupCollapsed( {
+	controls = [],
+	getStylesFromColorScheme,
+	passedStyle,
+	...props
+} ) {
+	return (
+		<View
+			style={ [
+				getStylesFromColorScheme(
+					styles.container,
+					styles.containerDark
+				),
+				passedStyle,
+			] }
+		>
+			<DropdownMenu controls={ controls } { ...props } />
+		</View>
+	);
 }
 
-export default ToolbarGroupCollapsed;
+export default withPreferredColorScheme( ToolbarGroupCollapsed );
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index a2bb3ccbe6deeb..c63333f9f149cd 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -40,7 +40,7 @@ const MyAuthorsList = withSelect( ( select ) => ( {
 
 The following set of dispatching action creators are available on the object returned by `wp.data.dispatch( 'core' )`:
 
-<!-- START TOKEN(Autogenerated actions) -->
+<!-- START TOKEN(Autogenerated actions|src/actions.js) -->
 
 <a name="addEntities" href="#addEntities">#</a> **addEntities**
 
@@ -211,13 +211,13 @@ _Parameters_
 Action triggered to undo the last edit to
 an entity record, if any.
 
-<!-- END TOKEN(Autogenerated actions) -->
+<!-- END TOKEN(Autogenerated actions|src/actions.js) -->
 
 ## Selectors
 
 The following selectors are available on the object returned by `wp.data.select( 'core' )`:
 
-<!-- START TOKEN(Autogenerated selectors) -->
+<!-- START TOKEN(Autogenerated selectors|src/selectors.js) -->
 
 <a name="canUser" href="#canUser">#</a> **canUser**
 
@@ -655,6 +655,6 @@ _Returns_
 -   `boolean`: Whether the entity record is saving or not.
 
 
-<!-- END TOKEN(Autogenerated selectors) -->
+<!-- END TOKEN(Autogenerated selectors|src/selectors.js) -->
 
 <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/docgen/README.md b/packages/docgen/README.md
index c62b96fc4e44b4..e39594cb4fc644 100644
--- a/packages/docgen/README.md
+++ b/packages/docgen/README.md
@@ -33,9 +33,9 @@ This command will generate a file named `entry-point-api.md` containing all the
 * **--output** `(String)`: Output file that will contain the API documentation.
 * **--to-section** `(String)`: Append generated documentation to this section in the Markdown output. To be used by the default Markdown formatter. Depends on `--output` and bypasses the custom `--formatter` passed, if any.
 * **--to-token**: Embed generated documentation within the start and end tokens in the Markdown output. To be used by the default Markdown formatter.Depends on `--output` and bypasses the custom `--formatter` passed, if any.
-  * Start token: `<!-- START TOKEN(Autogenerated API docs) -->`
-  * End token: `<!-- END TOKEN(Autogenerated API docs) -->`
-* **--use-token** `(String)`: This options allows you to customize the string between the tokens. For example, `--use-token my-api` will look up for the start token `<!-- START TOKEN(my-api) -->` and the end token `<!-- END TOKEN(my-api) -->`. Depends on `--to-token`.
+  * Start token: <code>&lt;!-- START TOKEN(Autogenerated API docs) --&gt;</code>
+  * End token: <code>&lt;!-- END TOKEN(Autogenerated API docs) --&gt;</code>
+* **--use-token** `(String)`: This options allows you to customize the string between the tokens. For example, `--use-token my-api` will look up for the start token <code>&lt;!-- START TOKEN(my-api) --&gt;</code> and the end token <code>&lt;!-- END TOKEN(my-api) --&gt;</code>. Depends on `--to-token`.
 * **--debug**: Run in debug mode, which outputs some intermediate files useful for debugging.
 
 ## Examples
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 9bbb44b8ee96ad..368c843a72f465 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -5,7 +5,7 @@
 	flex-grow: 1;
 
 	// Always show outlines in code editor
-	.editor-post-title__block {
+	.editor-post-title {
 		textarea {
 			border: $border-width solid $light-gray-500;
 			margin-bottom: $block-spacing;
@@ -16,20 +16,8 @@
 				border: $border-width solid $black;
 			}
 		}
-	}
-
-	.editor-post-permalink {
-		margin-top: -6px;
 
-		// Hide the thick left border in the code editor.
-		box-shadow: none;
-		border: none;
-		outline: $border-width solid $dark-gray-primary;
-	}
-
-	@include break-small() {
-		.editor-post-title,
-		.editor-post-title__block {
+		@include break-small() {
 			padding: 0;
 		}
 	}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index b34d8a1375b66c..9929a6699674f3 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -39,7 +39,9 @@ function VisualEditor() {
 					<WritingFlow>
 						<ObserveTyping>
 							<CopyHandler>
-								<PostTitle />
+								<div className="edit-post-visual-editor__post-title-wrapper">
+									<PostTitle />
+								</div>
 								<BlockList />
 							</CopyHandler>
 						</ObserveTyping>
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index b29292d18308af..acdf055d22faa1 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -42,40 +42,27 @@
 	margin-right: auto;
 }
 
+// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks
+// .block-editor-block-list__layout and block-editor-block-list__block
+// We need to have two DOM elements.
+.edit-post-visual-editor__post-title-wrapper {
+	// This padding is needed to match the block root container padding
+	padding-left: $block-padding;
+	padding-right: $block-padding;
 
-// The base width of the title should match that of blocks even if it isn't a block.
-// @todo: This duplicates CSS from line 49 in block-list/style.scss, and should be
-// removed when the Title field becomes an actual block.
-.editor-post-title {
-	// Beyond the mobile breakpoint, compensate for side UI.
 	@include break-small() {
-		padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
-		padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
+		padding-left: $block-side-ui-width;
+		padding-right: $block-side-ui-width;
 	}
-}
-
-.edit-post-visual-editor .editor-post-title__block {
-	// Center.
-	margin-left: auto;
-	margin-right: auto;
 
-	// Apply default block margin below the post title.
-	// This ensures the first block on the page is in a good position.
-	// This rule can be retired once the title becomes an actual block.
-	margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
+	.editor-post-title {
+		// Center.
+		margin-left: auto;
+		margin-right: auto;
 
-	// Stack borders.
-	> div {
-		margin-left: 0;
-		margin-right: 0;
-	}
-
-	// Stretch to mimic outline padding on desktop.
-	// Note that we can't target the textarea as it can't be stretched.
-	@include break-small() {
-		> div {
-			margin-left: -$block-padding - $block-side-ui-clearance;
-			margin-right: -$block-padding - $block-side-ui-clearance;
-		}
+		// Apply default block margin below the post title.
+		// This ensures the first block on the page is in a good position.
+		// This rule can be retired once the title becomes an actual block.
+		margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
 	}
 }
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index c0e285bc77546d..a1872f964f952d 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -1,4 +1,14 @@
 .edit-site-block-editor__block-list {
 	padding-bottom: $grid-unit-30;
 	padding-top: $grid-unit-30 + 5;
+
+	padding-left: $block-padding;
+	padding-right: $block-padding;
+
+	// Full-wide. (to account for the padddings added above)
+	.block-editor-block-list__block[data-align="full"],
+	.block-editor-block-list__block.alignfull {
+		margin-left: -$block-padding;
+		margin-right: -$block-padding;
+	}
 }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index ea1b3bbf782c8f..11531062934865 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -18,6 +18,7 @@ import { EntityProvider } from '@wordpress/core-data';
 import {
 	__experimentalEditorSkeleton as EditorSkeleton,
 	__experimentalFullscreenMode as FullscreenMode,
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -61,6 +62,7 @@ function Editor( { settings: _settings } ) {
 
 	return template ? (
 		<>
+			<EditorStyles styles={ settings.styles } />
 			<FullscreenMode isActive={ isFullscreenActive } />
 			<SlotFillProvider>
 				<DropZoneProvider>
diff --git a/packages/edit-site/src/components/template-switcher/preview.js b/packages/edit-site/src/components/template-switcher/preview.js
index 03cf6399e8d916..ac1eda08993832 100644
--- a/packages/edit-site/src/components/template-switcher/preview.js
+++ b/packages/edit-site/src/components/template-switcher/preview.js
@@ -23,7 +23,7 @@ function TemplatePreview( { item } ) {
 	);
 	return (
 		<div className="edit-site-template-switcher__preview">
-			{ !! blocks && <BlockPreview blocks={ blocks } autoHeight /> }
+			{ !! blocks && <BlockPreview blocks={ blocks } /> }
 		</div>
 	);
 }
diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss
index 2f1160bd17c77b..248f5d4e4ff856 100644
--- a/packages/edit-widgets/src/components/widget-area/style.scss
+++ b/packages/edit-widgets/src/components/widget-area/style.scss
@@ -2,11 +2,6 @@
 	max-width: $widget-area-width;
 	margin: 0 auto 30px;
 
-	// Reduce padding inside widget areas
-	.block-editor-block-list__layout {
-		padding-left: $block-side-ui-width + $block-padding;
-		padding-right: $block-side-ui-width + $block-padding;
-	}
 	// By default the default block appender inserter has a negative position,
 	// but given that on the widget screen we have 0 padding we need to remove the negative position.
 	.block-editor-default-block-appender .block-editor-inserter,
diff --git a/packages/editor/src/components/post-permalink/editor.js b/packages/editor/src/components/post-permalink/editor.js
deleted file mode 100644
index a09ee66ed984a8..00000000000000
--- a/packages/editor/src/components/post-permalink/editor.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { cleanForSlug } from '../../utils/url';
-
-class PostPermalinkEditor extends Component {
-	constructor( { permalinkParts, slug } ) {
-		super( ...arguments );
-
-		this.state = {
-			editedPostName: slug || permalinkParts.postName,
-		};
-
-		this.onSavePermalink = this.onSavePermalink.bind( this );
-	}
-
-	onSavePermalink( event ) {
-		const postName = cleanForSlug( this.state.editedPostName );
-
-		event.preventDefault();
-
-		this.props.onSave();
-
-		if ( postName === this.props.postName ) {
-			return;
-		}
-
-		this.props.editPost( {
-			slug: postName,
-		} );
-
-		this.setState( {
-			editedPostName: postName,
-		} );
-	}
-
-	render() {
-		const { prefix, suffix } = this.props.permalinkParts;
-		const { editedPostName } = this.state;
-
-		/* eslint-disable jsx-a11y/no-autofocus */
-		// Autofocus is allowed here, as this mini-UI is only loaded when the user clicks to open it.
-		return (
-			<form
-				className="editor-post-permalink-editor"
-				onSubmit={ this.onSavePermalink }
-			>
-				<span className="editor-post-permalink__editor-container">
-					<span className="editor-post-permalink-editor__prefix">
-						{ prefix }
-					</span>
-					<input
-						className="editor-post-permalink-editor__edit"
-						aria-label={ __( 'Edit post permalink' ) }
-						value={ editedPostName }
-						onChange={ ( event ) =>
-							this.setState( {
-								editedPostName: event.target.value,
-							} )
-						}
-						type="text"
-						autoFocus
-					/>
-					<span className="editor-post-permalink-editor__suffix">
-						{ suffix }
-					</span>
-					&lrm;
-				</span>
-				<Button
-					className="editor-post-permalink-editor__save"
-					isSecondary
-					onClick={ this.onSavePermalink }
-				>
-					{ __( 'Save' ) }
-				</Button>
-			</form>
-		);
-		/* eslint-enable jsx-a11y/no-autofocus */
-	}
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getPermalinkParts } = select( 'core/editor' );
-		return {
-			permalinkParts: getPermalinkParts(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( 'core/editor' );
-		return { editPost };
-	} ),
-] )( PostPermalinkEditor );
diff --git a/packages/editor/src/components/post-permalink/index.js b/packages/editor/src/components/post-permalink/index.js
deleted file mode 100644
index 1facb8432f41a6..00000000000000
--- a/packages/editor/src/components/post-permalink/index.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { ClipboardButton, Button, ExternalLink } from '@wordpress/components';
-import { safeDecodeURI, safeDecodeURIComponent } from '@wordpress/url';
-import { link as linkIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import PostPermalinkEditor from './editor.js';
-
-class PostPermalink extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.addVisibilityCheck = this.addVisibilityCheck.bind( this );
-		this.onVisibilityChange = this.onVisibilityChange.bind( this );
-
-		this.state = {
-			isCopied: false,
-			isEditingPermalink: false,
-		};
-	}
-
-	addVisibilityCheck() {
-		window.addEventListener( 'visibilitychange', this.onVisibilityChange );
-	}
-
-	onVisibilityChange() {
-		const { isEditable, refreshPost } = this.props;
-		// If the user just returned after having clicked the "Change Permalinks" button,
-		// fetch a new copy of the post from the server, just in case they enabled permalinks.
-		if ( ! isEditable && 'visible' === document.visibilityState ) {
-			refreshPost();
-		}
-	}
-
-	componentDidUpdate( prevProps, prevState ) {
-		// If we've just stopped editing the permalink, focus on the new permalink.
-		if ( prevState.isEditingPermalink && ! this.state.isEditingPermalink ) {
-			this.linkElement.focus();
-		}
-	}
-
-	componentWillUnmount() {
-		window.removeEventListener(
-			'visibilitychange',
-			this.addVisibilityCheck
-		);
-	}
-
-	render() {
-		const {
-			isEditable,
-			isNew,
-			isPublished,
-			isViewable,
-			permalinkParts,
-			postLink,
-			postSlug,
-		} = this.props;
-
-		if ( isNew || ! isViewable || ! permalinkParts || ! postLink ) {
-			return null;
-		}
-
-		const { isCopied, isEditingPermalink } = this.state;
-		const ariaLabel = isCopied
-			? __( 'Permalink copied' )
-			: __( 'Copy the permalink' );
-
-		const { prefix, suffix } = permalinkParts;
-		const samplePermalink = isEditable
-			? prefix + postSlug + suffix
-			: prefix;
-
-		return (
-			<div className="editor-post-permalink">
-				<ClipboardButton
-					className={ classnames( 'editor-post-permalink__copy', {
-						'is-copied': isCopied,
-					} ) }
-					text={ samplePermalink }
-					label={ ariaLabel }
-					onCopy={ () => this.setState( { isCopied: true } ) }
-					aria-disabled={ isCopied }
-					icon={ linkIcon }
-				/>
-
-				<span className="editor-post-permalink__label">
-					{ __( 'Permalink:' ) }
-				</span>
-
-				{ ! isEditingPermalink && (
-					<ExternalLink
-						className="editor-post-permalink__link"
-						href={ ! isPublished ? postLink : samplePermalink }
-						target="_blank"
-						ref={ ( linkElement ) =>
-							( this.linkElement = linkElement )
-						}
-					>
-						{ safeDecodeURI( samplePermalink ) }
-						&lrm;
-					</ExternalLink>
-				) }
-
-				{ isEditingPermalink && (
-					<PostPermalinkEditor
-						slug={ postSlug }
-						onSave={ () =>
-							this.setState( { isEditingPermalink: false } )
-						}
-					/>
-				) }
-
-				{ isEditable && ! isEditingPermalink && (
-					<Button
-						className="editor-post-permalink__edit"
-						isSecondary
-						onClick={ () =>
-							this.setState( { isEditingPermalink: true } )
-						}
-					>
-						{ __( 'Edit' ) }
-					</Button>
-				) }
-			</div>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			isEditedPostNew,
-			isPermalinkEditable,
-			getCurrentPost,
-			getPermalinkParts,
-			getEditedPostAttribute,
-			isCurrentPostPublished,
-			getEditedPostSlug,
-		} = select( 'core/editor' );
-		const { getPostType } = select( 'core' );
-
-		const { link } = getCurrentPost();
-
-		const postTypeName = getEditedPostAttribute( 'type' );
-		const postType = getPostType( postTypeName );
-
-		return {
-			isNew: isEditedPostNew(),
-			postLink: link,
-			permalinkParts: getPermalinkParts(),
-			postSlug: safeDecodeURIComponent( getEditedPostSlug() ),
-			isEditable: isPermalinkEditable(),
-			isPublished: isCurrentPostPublished(),
-			isViewable: get( postType, [ 'viewable' ], false ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { refreshPost } = dispatch( 'core/editor' );
-		return { refreshPost };
-	} ),
-] )( PostPermalink );
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
deleted file mode 100644
index 241250696123cf..00000000000000
--- a/packages/editor/src/components/post-permalink/style.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-.editor-post-permalink {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: wrap;
-	padding: $grid-unit-10 $grid-unit-10 0;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	white-space: nowrap;
-	background-clip: padding-box;
-
-	// Block UI appearance.
-	border: $border-width solid $dark-gray-primary;
-	border-radius: $radius-block-ui;
-	background-color: $white;
-
-	// Put toolbar snugly to edge on mobile.
-	margin-left: -$block-padding - $border-width; // This hides the border off the edge of the screen.
-	margin-right: -$block-padding - $border-width;
-	@include break-mobile() {
-		padding: $grid-unit-05;
-	}
-	@include break-small() {
-		margin-left: -$border-width;
-		margin-right: -$border-width;
-	}
-
-	// Increase specificity to override margins set on label element.
-	&.editor-post-permalink > * {
-		margin-bottom: $grid-unit-10;
-
-		@include break-mobile() {
-			margin-bottom: 0;
-		}
-	}
-
-	// Prevent button shrinking in IE11 when other items have a 100% flex basis.
-	// This should be safe to apply in all browsers because we don't want these
-	// buttons to shrink anyway.
-	button {
-		flex-shrink: 0;
-	}
-}
-
-.editor-post-permalink__copy {
-	border-radius: 4px;
-	padding: 6px;
-}
-
-.editor-post-permalink__copy.is-copied {
-	opacity: 0.3;
-}
-
-.editor-post-permalink__label {
-	margin: 0 10px 0 5px;
-	font-weight: 600;
-}
-
-.editor-post-permalink__link {
-	color: $dark-gray-200;
-	text-decoration: underline;
-	margin-right: 10px;
-	flex-grow: 1;
-	overflow: hidden;
-	position: relative;
-	white-space: nowrap;
-	text-align: left;
-}
-
-.editor-post-permalink-editor {
-	width: 100%;
-	min-width: 20%;
-	display: inline-flex;
-	align-items: center;
-
-	.editor-post-permalink__editor-container {
-		flex: 0 1 100%;
-		display: flex;
-		overflow: hidden; // This enables serious flex shrinking.
-		padding: $border-width 0; // Necessary for the overflow to not crop the focus style.
-
-		.editor-post-permalink-editor__prefix {
-			flex: 1 1 auto;
-
-			@include break-small {
-				flex: 1 0 auto;
-			}
-		}
-
-		.editor-post-permalink-editor__edit {
-			flex: 1 1 100%;
-		}
-	}
-
-	// Higher specificity required to override core margin styles.
-	.editor-post-permalink-editor__save {
-		margin-left: auto;
-	}
-}
-
-.editor-post-permalink-editor__prefix {
-	color: $dark-gray-300;
-	min-width: 20%;
-	overflow: hidden;
-	position: relative;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.editor-post-permalink input[type="text"].editor-post-permalink-editor__edit {
-	// Input fields are created with inherent widths.
-	// By supplying both a (any) width and a min-width, we allow it to scale in a flex container.
-	min-width: 10%;
-	width: 100%;
-	margin: 0 3px;
-	padding: 2px 4px;
-}
-
-.editor-post-permalink-editor__suffix {
-	color: $dark-gray-300;
-	margin-right: 6px;
-	flex: 0 0 0%;
-}
-
-.editor-post-permalink-editor__prefix {
-	text-align: left;
-}
-
-/* rtl:begin:ignore */
-.editor-post-permalink__link {
-	text-align: left;
-}
-.editor-post-permalink__editor-container,
-.editor-post-permalink__link {
-	direction: ltr;
-}
-.editor-post-permalink__link::after {
-	@include long-content-fade($direction:right, $size: 20%, $edge: 0);
-}
-/* rtl:end:ignore */
-
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index 3a5f17a8f68536..306e9e7c99113d 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -3,7 +3,6 @@
  */
 import Textarea from 'react-autosize-textarea';
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,13 +12,12 @@ import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { withFocusOutside, VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import PostPermalink from '../post-permalink';
 import PostTypeSupportCheck from '../post-type-support-check';
 
 /**
@@ -41,10 +39,6 @@ class PostTitle extends Component {
 		};
 	}
 
-	handleFocusOutside() {
-		this.onUnselect();
-	}
-
 	onSelect() {
 		this.setState( { isSelected: true } );
 		this.props.clearSelectedBlock();
@@ -71,7 +65,6 @@ class PostTitle extends Component {
 			hasFixedToolbar,
 			isCleanNewPost,
 			isFocusMode,
-			isPostTypeViewable,
 			instanceId,
 			placeholder,
 			title,
@@ -79,53 +72,48 @@ class PostTitle extends Component {
 		const { isSelected } = this.state;
 
 		// The wp-block className is important for editor styles.
-		const className = classnames( 'wp-block editor-post-title__block', {
-			'is-selected': isSelected,
-			'is-focus-mode': isFocusMode,
-			'has-fixed-toolbar': hasFixedToolbar,
-		} );
+		const className = classnames(
+			'wp-block editor-post-title editor-post-title__block',
+			{
+				'is-selected': isSelected,
+				'is-focus-mode': isFocusMode,
+				'has-fixed-toolbar': hasFixedToolbar,
+			}
+		);
 		const decodedPlaceholder = decodeEntities( placeholder );
 
 		return (
 			<PostTypeSupportCheck supportKeys="title">
-				<div className="editor-post-title">
-					<div className={ className }>
-						<div>
-							<VisuallyHidden
-								as="label"
-								htmlFor={ `post-title-${ instanceId }` }
-							>
-								{ decodedPlaceholder || __( 'Add title' ) }
-							</VisuallyHidden>
-							<Textarea
-								id={ `post-title-${ instanceId }` }
-								className="editor-post-title__input"
-								value={ title }
-								onChange={ this.onChange }
-								placeholder={
-									decodedPlaceholder || __( 'Add title' )
-								}
-								onFocus={ this.onSelect }
-								onKeyDown={ this.onKeyDown }
-								onKeyPress={ this.onUnselect }
-								/*
-									Only autofocus the title when the post is entirely empty.
-									This should only happen for a new post, which means we
-									focus the title on new post so the author can start typing
-									right away, without needing to click anything.
-								*/
-								/* eslint-disable jsx-a11y/no-autofocus */
-								autoFocus={
-									document.body === document.activeElement &&
-									isCleanNewPost
-								}
-								/* eslint-enable jsx-a11y/no-autofocus */
-							/>
-						</div>
-						{ isSelected && isPostTypeViewable && (
-							<PostPermalink />
-						) }
-					</div>
+				<div className={ className }>
+					<VisuallyHidden
+						as="label"
+						htmlFor={ `post-title-${ instanceId }` }
+					>
+						{ decodedPlaceholder || __( 'Add title' ) }
+					</VisuallyHidden>
+					<Textarea
+						id={ `post-title-${ instanceId }` }
+						className="editor-post-title__input"
+						value={ title }
+						onChange={ this.onChange }
+						placeholder={ decodedPlaceholder || __( 'Add title' ) }
+						onFocus={ this.onSelect }
+						onBlur={ this.onUnselect }
+						onKeyDown={ this.onKeyDown }
+						onKeyPress={ this.onUnselect }
+						/*
+							Only autofocus the title when the post is entirely empty.
+							This should only happen for a new post, which means we
+							focus the title on new post so the author can start typing
+							right away, without needing to click anything.
+						*/
+						/* eslint-disable jsx-a11y/no-autofocus */
+						autoFocus={
+							document.body === document.activeElement &&
+							isCleanNewPost
+						}
+						/* eslint-enable jsx-a11y/no-autofocus */
+					/>
 				</div>
 			</PostTypeSupportCheck>
 		);
@@ -135,14 +123,11 @@ class PostTitle extends Component {
 const applyWithSelect = withSelect( ( select ) => {
 	const { getEditedPostAttribute, isCleanNewPost } = select( 'core/editor' );
 	const { getSettings } = select( 'core/block-editor' );
-	const { getPostType } = select( 'core' );
-	const postType = getPostType( getEditedPostAttribute( 'type' ) );
 	const { titlePlaceholder, focusMode, hasFixedToolbar } = getSettings();
 
 	return {
 		isCleanNewPost: isCleanNewPost(),
 		title: getEditedPostAttribute( 'title' ),
-		isPostTypeViewable: get( postType, [ 'viewable' ], false ),
 		placeholder: titlePlaceholder,
 		isFocusMode: focusMode,
 		hasFixedToolbar,
@@ -169,6 +154,5 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 export default compose(
 	applyWithSelect,
 	applyWithDispatch,
-	withInstanceId,
-	withFocusOutside
+	withInstanceId
 )( PostTitle );
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 8760c20f196ace..351423d657b235 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -1,12 +1,7 @@
-.editor-post-title__block {
+.editor-post-title {
 	position: relative;
-	padding: 5px 0;
 	font-size: $editor-font-size;
 
-	@include break-small() {
-		padding: 5px $block-side-ui-clearance;
-	}
-
 	.editor-post-title__input {
 		display: block;
 		width: 100%;
@@ -18,7 +13,7 @@
 		color: $dark-gray-900;
 		transition: border 0.1s ease-out, box-shadow 0.1s linear;
 		@include reduce-motion("transition");
-		padding: #{ $block-padding + 5px } $block-padding;
+		padding: #{ $block-padding + 5px } 0;
 		word-break: keep-all;
 
 		// Stack borders on mobile.
@@ -68,24 +63,3 @@
 		}
 	}
 }
-
-.editor-post-title .editor-post-permalink {
-	font-size: $default-font-size;
-	color: $dark-gray-900;
-	height: auto;
-	position: relative;
-	top: -2px;
-	width: 100%;
-
-	@include break-mobile() {
-		position: absolute;
-		top: -$button-size + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size
-		right: 0;
-		flex-wrap: nowrap;
-		width: auto;
-	}
-	@include break-small() {
-		left: $block-side-ui-clearance;
-		right: $block-side-ui-clearance;
-	}
-}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 69a2dbbd958892..555b7b88f02509 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -12,7 +12,10 @@ import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { EntityProvider } from '@wordpress/core-data';
-import { BlockEditorProvider, transformStyles } from '@wordpress/block-editor';
+import {
+	BlockEditorProvider,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -134,23 +137,6 @@ class EditorProvider extends Component {
 
 	componentDidMount() {
 		this.props.updateEditorSettings( this.props.settings );
-
-		if ( ! this.props.settings.styles ) {
-			return;
-		}
-
-		const updatedStyles = transformStyles(
-			this.props.settings.styles,
-			'.editor-styles-wrapper'
-		);
-
-		map( updatedStyles, ( updatedCSS ) => {
-			if ( updatedCSS ) {
-				const node = document.createElement( 'style' );
-				node.innerHTML = updatedCSS;
-				document.body.appendChild( node );
-			}
-		} );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -197,27 +183,30 @@ class EditorProvider extends Component {
 		);
 
 		return (
-			<EntityProvider kind="root" type="site">
-				<EntityProvider
-					kind="postType"
-					type={ post.type }
-					id={ post.id }
-				>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ resetEditorBlocksWithoutUndoLevel }
-						onChange={ resetEditorBlocks }
-						selectionStart={ selectionStart }
-						selectionEnd={ selectionEnd }
-						settings={ editorSettings }
-						useSubRegistry={ false }
+			<>
+				<EditorStyles styles={ settings.styles } />
+				<EntityProvider kind="root" type="site">
+					<EntityProvider
+						kind="postType"
+						type={ post.type }
+						id={ post.id }
 					>
-						{ children }
-						<ReusableBlocksButtons />
-						<ConvertToGroupButtons />
-					</BlockEditorProvider>
+						<BlockEditorProvider
+							value={ blocks }
+							onInput={ resetEditorBlocksWithoutUndoLevel }
+							onChange={ resetEditorBlocks }
+							selectionStart={ selectionStart }
+							selectionEnd={ selectionEnd }
+							settings={ editorSettings }
+							useSubRegistry={ false }
+						>
+							{ children }
+							<ReusableBlocksButtons />
+							<ConvertToGroupButtons />
+						</BlockEditorProvider>
+					</EntityProvider>
 				</EntityProvider>
-			</EntityProvider>
+			</>
 		);
 	}
 }
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 83a75edd9013ac..88ed59125a939b 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -9,7 +9,6 @@
 @import "./components/post-format/style.scss";
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
-@import "./components/post-permalink/style.scss";
 @import "./components/post-publish-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
diff --git a/readme.txt b/readme.txt
index 821d45e050fc2e..267d78d75d8454 100644
--- a/readme.txt
+++ b/readme.txt
@@ -52,4 +52,4 @@ The four phases of the project are Editing, Customization, Collaboration, and Mu
 
 == Changelog ==
 
-To read the changelog for Gutenberg 7.8.0-rc.1, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v7.8.0-rc.1">release page</a>.
+To read the changelog for Gutenberg 7.8.0, please navigate to the <a href="https://github.com/WordPress/gutenberg/releases/tag/v7.8.0">release page</a>.
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index f358ac613196e7..73dea5ec7db1bd 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Components/AnglePickerControl Default 1`] = `
+<div
+  className="components-base-control components-angle-picker-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <label
+      className="components-base-control__label"
+      htmlFor="components-angle-picker-control__input-0"
+    >
+      Angle
+    </label>
+    <div
+      aria-hidden="true"
+      className="components-angle-picker-control__angle-circle"
+      onMouseDown={[Function]}
+    >
+      <div
+        className="components-angle-picker-control__angle-circle-indicator-wrapper"
+      >
+        <span
+          className="components-angle-picker-control__angle-circle-indicator"
+        />
+      </div>
+    </div>
+    <input
+      className="components-angle-picker-control__input-field"
+      id="components-angle-picker-control__input-0"
+      max={360}
+      min={0}
+      onChange={[Function]}
+      step="1"
+      type="number"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Animate Appear Bottom Left 1`] = `
 <div
   className="components-animate__appear is-from-left is-from-bottom components-notice is-success is-dismissible"
@@ -2803,309 +2842,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components/Experimental/Text Body 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Body
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Body Small 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Body Small
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Button 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Button
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Caption 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Caption
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Default 1`] = `
-Array [
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 32px;
-  line-height: 40px;
-}
-
-<h1
-    className="emotion-0 emotion-1"
-  >
-    Title Large
-  </h1>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-<h2
-    className="emotion-0 emotion-1"
-  >
-    Title Medium
-  </h2>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 28px;
-}
-
-<h3
-    className="emotion-0 emotion-1"
-  >
-    Title Small
-  </h3>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Subtitle
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Subtitle Small
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Body
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Body Small
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Button
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Caption
-  </p>,
-  .emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-<p
-    className="emotion-0 emotion-1"
-  >
-    Label
-  </p>,
-]
-`;
-
-exports[`Storyshots Components/Experimental/Text Label 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Label
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Subtitle 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Subtitle
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Subtitle Small 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-<p
-  className="emotion-0 emotion-1"
->
-  Subtitle Small
-</p>
-`;
-
-exports[`Storyshots Components/Experimental/Text Title Large 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 32px;
-  line-height: 40px;
-}
-
-<h1
-  className="emotion-0 emotion-1"
->
-  Title Large
-</h1>
-`;
-
-exports[`Storyshots Components/Experimental/Text Title Medium 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-<h2
-  className="emotion-0 emotion-1"
->
-  Title Medium
-</h2>
-`;
-
-exports[`Storyshots Components/Experimental/Text Title Small 1`] = `
-.emotion-0 {
-  margin: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 28px;
-}
-
-<h3
-  className="emotion-0 emotion-1"
->
-  Title Small
-</h3>
-`;
-
 exports[`Storyshots Components/ExternalLink Default 1`] = `
 <a
   className="components-external-link"
@@ -8063,6 +7799,153 @@ exports[`Storyshots Components/TabPanel Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Text Default 1`] = `
+Array [
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 40px;
+}
+
+<h1
+    className="emotion-0 emotion-1"
+  >
+    Title Large
+  </h1>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+<h2
+    className="emotion-0 emotion-1"
+  >
+    Title Medium
+  </h2>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+}
+
+<h3
+    className="emotion-0 emotion-1"
+  >
+    Title Small
+  </h3>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Subtitle
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Subtitle Small
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Body
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Body Small
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Button
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Caption
+  </p>,
+  .emotion-0 {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+<p
+    className="emotion-0 emotion-1"
+  >
+    Label
+  </p>,
+]
+`;
+
 exports[`Storyshots Components/TextControl Default 1`] = `
 <div
   className="components-base-control"
@@ -8913,45 +8796,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|AnglePickerControl Default 1`] = `
-<div
-  className="components-base-control components-angle-picker-control"
->
-  <div
-    className="components-base-control__field"
-  >
-    <label
-      className="components-base-control__label"
-      htmlFor="components-angle-picker-control__input-0"
-    >
-      Angle
-    </label>
-    <div
-      aria-hidden="true"
-      className="components-angle-picker-control__angle-circle"
-      onMouseDown={[Function]}
-    >
-      <div
-        className="components-angle-picker-control__angle-circle-indicator-wrapper"
-      >
-        <span
-          className="components-angle-picker-control__angle-circle-indicator"
-        />
-      </div>
-    </div>
-    <input
-      className="components-angle-picker-control__input-field"
-      id="components-angle-picker-control__input-0"
-      max={360}
-      min={0}
-      onChange={[Function]}
-      step="1"
-      type="number"
-    />
-  </div>
-</div>
-`;
-
 exports[`Storyshots Icons/Icon Default 1`] = `
 Array [
   <div>
diff --git a/tsconfig.json b/tsconfig.json
index 7a0eb51600233b..d470e66c01e3c4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
 		"allowSyntheticDefaultImports": true,
 		"checkJs": true,
 		"jsx": "preserve",
-		"lib": ["dom", "esnext"],
+		"lib": ["dom", "esnext", "es2020.string"],
 		"module": "commonjs",
 		"noEmit": true,
 		"resolveJsonModule": true,
@@ -31,6 +31,7 @@
 		"noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 	},
 	"include": [
+		"./bin/api-docs/update-api-docs.js",
 		"./packages/a11y/**/*.js",
 		"./packages/blob/**/*.js",
 		"./packages/dom-ready/**/*.js",