From 442a9c7dbbcda5185cd19296a78fd8667d65ff77 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Jun 2021 09:23:47 +1000
Subject: [PATCH 01/25] Link to widgets.php instead of
 themes.php?page=gutenberg-widgets (#32299)

---
 lib/init.php                                     | 16 +++++++++++++---
 .../src/legacy-widget/edit/preview.js            |  3 +--
 .../src/components/sidebar/widget-areas.js       |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/lib/init.php b/lib/init.php
index e22542766f87ed..f721b8f773f441 100644
--- a/lib/init.php
+++ b/lib/init.php
@@ -30,7 +30,10 @@ function gutenberg_menu() {
 		'gutenberg'
 	);
 
-	if ( gutenberg_use_widgets_block_editor() ) {
+	if (
+		gutenberg_use_widgets_block_editor() &&
+		! function_exists( 'wp_use_widgets_block_editor' )
+	) {
 		add_theme_page(
 			__( 'Widgets', 'gutenberg' ),
 			__( 'Widgets', 'gutenberg' ),
@@ -113,7 +116,11 @@ function gutenberg_site_editor_menu() {
  * @param WP_Admin_Bar $wp_admin_bar Core class used to implement the Toolbar API.
  */
 function modify_admin_bar( $wp_admin_bar ) {
-	if ( gutenberg_use_widgets_block_editor() && $wp_admin_bar->get_node( 'widgets' ) !== null ) {
+	if (
+		gutenberg_use_widgets_block_editor() &&
+		! function_exists( 'wp_use_widgets_block_editor' ) &&
+		$wp_admin_bar->get_node( 'widgets' ) !== null
+	) {
 		$wp_admin_bar->add_menu(
 			array(
 				'id'   => 'widgets',
@@ -137,7 +144,10 @@ function modify_welcome_panel() {
 	ob_start();
 	wp_welcome_panel();
 	$welcome_panel = ob_get_clean();
-	if ( gutenberg_use_widgets_block_editor() ) {
+	if (
+		gutenberg_use_widgets_block_editor() &&
+		! function_exists( 'wp_use_widgets_block_editor' )
+	) {
 		echo str_replace(
 			admin_url( 'widgets.php' ),
 			admin_url( 'themes.php?page=gutenberg-widgets' ),
diff --git a/packages/block-library/src/legacy-widget/edit/preview.js b/packages/block-library/src/legacy-widget/edit/preview.js
index 639d7a6d0874e2..39e4d65a51cb45 100644
--- a/packages/block-library/src/legacy-widget/edit/preview.js
+++ b/packages/block-library/src/legacy-widget/edit/preview.js
@@ -78,8 +78,7 @@ export default function Preview( { idBase, instance, isVisible } ) {
 						// TODO: This chokes when the query param is too big.
 						// Ideally, we'd render a <ServerSideRender>. Maybe by
 						// rendering one in an iframe via a portal.
-						src={ addQueryArgs( 'themes.php', {
-							page: 'gutenberg-widgets',
+						src={ addQueryArgs( 'widgets.php', {
 							'legacy-widget-preview': {
 								idBase,
 								instance,
diff --git a/packages/edit-widgets/src/components/sidebar/widget-areas.js b/packages/edit-widgets/src/components/sidebar/widget-areas.js
index 120f0bdb132ec2..42ebf5e652f9e7 100644
--- a/packages/edit-widgets/src/components/sidebar/widget-areas.js
+++ b/packages/edit-widgets/src/components/sidebar/widget-areas.js
@@ -59,7 +59,7 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 						<Button
 							href={ addQueryArgs( 'customize.php', {
 								'autofocus[panel]': 'widgets',
-								return: 'themes.php?page=gutenberg-widgets',
+								return: window.location.pathname,
 							} ) }
 							isTertiary
 						>

From 9afce789475e33d6f02356ece033fd3ff0b1f9a0 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Jun 2021 12:25:04 +1000
Subject: [PATCH 02/25] Fix legacy widget block preview iframe in plugin
 (#32300)

---
 lib/blocks.php                                | 18 +++++++++++++++
 .../block-library/src/legacy-widget/index.php | 23 ++++++++++++-------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index b92a656513714b..b5ce0a11cf80bd 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -5,6 +5,24 @@
  * @package gutenberg
  */
 
+/*
+ * Fixes the priority of register_block_core_legacy_widget().
+ *
+ * This hook was incorrectly added to Core with priority 20. #32300 fixes this
+ * but causes block registration warnings in the Gutenberg plugin until the
+ * changes are made in Core.
+ *
+ * This temporary fix can be removed after the changes to
+ * @wordpress/block-library in #32300 have been published to npm and updated in
+ * Core.
+ *
+ * See https://github.com/WordPress/gutenberg/pull/32300.
+ */
+if ( 20 === has_action( 'init', 'register_block_core_legacy_widget' ) ) {
+	remove_action( 'init', 'register_block_core_legacy_widget', 20 );
+	add_action( 'init', 'register_block_core_legacy_widget', 10 );
+}
+
 /**
  * Substitutes the implementation of a core-registered block type, if exists,
  * with the built result from the plugin.
diff --git a/packages/block-library/src/legacy-widget/index.php b/packages/block-library/src/legacy-widget/index.php
index 6a49111b8e6929..f8b64ab5c138ce 100644
--- a/packages/block-library/src/legacy-widget/index.php
+++ b/packages/block-library/src/legacy-widget/index.php
@@ -50,21 +50,25 @@ function render_block_core_legacy_widget( $attributes ) {
 }
 
 /**
- * On application init this does two things:
- *
- * - Registers the 'core/legacy-widget' block.
- * - Intercepts any request with legacy-widget-preview in the query param and,
- *   if set, renders a page containing a preview of the requested Legacy Widget
- *   block.
+ * Registers the 'core/legacy-widget' block.
  */
-function init_legacy_widget_block() {
+function register_block_core_legacy_widget() {
 	register_block_type_from_metadata(
 		__DIR__ . '/legacy-widget',
 		array(
 			'render_callback' => 'render_block_core_legacy_widget',
 		)
 	);
+}
+
+add_action( 'init', 'register_block_core_legacy_widget' );
 
+/**
+ * Intercepts any request with legacy-widget-preview in the query param and, if
+ * set, renders a page containing a preview of the requested Legacy Widget
+ * block.
+ */
+function handle_legacy_widget_preview_iframe() {
 	if ( empty( $_GET['legacy-widget-preview'] ) ) {
 		return;
 	}
@@ -110,4 +114,7 @@ function init_legacy_widget_block() {
 	exit;
 }
 
-add_action( 'init', 'init_legacy_widget_block' );
+// Ensure handle_legacy_widget_preview_iframe() is called after Core's
+// register_block_core_legacy_widget() (priority = 10) and after Gutenberg's
+// register_block_core_legacy_widget() (priority = 20).
+add_action( 'init', 'handle_legacy_widget_preview_iframe', 21 );

From 9efe447e8351849e089a7c35164cd634559b7789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <nosolosw@users.noreply.github.com>
Date: Tue, 1 Jun 2021 10:38:49 +0200
Subject: [PATCH 03/25] Generate classes from preset slugs in the same way
 (server & client) (#32352)

Other than making sure that the class doesn't contain spaces we no longer do any processing
in the client (camelCase to kebab-case, separate numbers as a different kebab word, etc).
---
 lib/class-wp-theme-json-gutenberg.php                 |  6 +++++-
 packages/block-editor/README.md                       |  2 +-
 .../block-editor/src/components/colors/test/utils.js  |  8 ++++----
 packages/block-editor/src/components/colors/utils.js  | 11 +++++++++--
 .../block-editor/src/components/font-sizes/utils.js   | 10 +++++++---
 .../src/components/editor/global-styles-renderer.js   |  9 ++++++++-
 6 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index f883bbe2e128eb..16c41bb15b160a 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -663,7 +663,11 @@ private static function compute_preset_classes( $settings, $selector ) {
 			foreach ( $values as $value ) {
 				foreach ( $preset['classes'] as $class ) {
 					$stylesheet .= self::to_ruleset(
-						self::append_to_selector( $selector, '.has-' . $value['slug'] . '-' . $class['class_suffix'] ),
+						// We don't want to use kebabCase here,
+						// see https://github.com/WordPress/gutenberg/issues/32347
+						// However, we need to make sure the generated class
+						// doesn't contain spaces.
+						self::append_to_selector( $selector, '.has-' . preg_replace( '/\s+/', '-', $value['slug'] ) . '-' . $class['class_suffix'] ),
 						array(
 							array(
 								'name'  => $class['property_name'],
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 726990f0ac3637..9ecd72ea0cb307 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -371,7 +371,7 @@ _Parameters_
 
 _Returns_
 
--   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
+-   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'.
 
 <a name="getFontSizeObjectByValue" href="#getFontSizeObjectByValue">#</a> **getFontSizeObjectByValue**
 
diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js
index 1ed18cef831c8d..6e97a8518be494 100644
--- a/packages/block-editor/src/components/colors/test/utils.js
+++ b/packages/block-editor/src/components/colors/test/utils.js
@@ -109,10 +109,10 @@ describe( 'color utils', () => {
 			).toBeUndefined();
 		} );
 
-		it( 'should return a class name with the color slug in kebab case', () => {
-			expect( getColorClassName( 'background', 'Light Purple' ) ).toBe(
-				'has-light-purple-background'
-			);
+		it( 'should return a class name with the color slug without spaces', () => {
+			expect(
+				getColorClassName( 'background', 'Light   Purple veryDark' )
+			).toBe( 'has-Light-Purple-veryDark-background' );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index 903d7033eedee9..00dcd5ea5b1f0f 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, map } from 'lodash';
+import { find, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
@@ -60,7 +60,14 @@ export function getColorClassName( colorContextName, colorSlug ) {
 		return undefined;
 	}
 
-	return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
+	// We don't want to use kebabCase from lodash here
+	// see https://github.com/WordPress/gutenberg/issues/32347
+	// However, we need to make sure the generated class
+	// doesn't contain spaces.
+	return `has-${ colorSlug.replace(
+		/\s+/g,
+		'-'
+	) }-${ colorContextName.replace( /\s+/g, '-' ) }`;
 }
 
 /**
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index 8604e9f287788a..8284dbe981abda 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { find } from 'lodash';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -55,12 +55,16 @@ export function getFontSizeObjectByValue( fontSizes, value ) {
  * @param {string} fontSizeSlug    Slug of the fontSize.
  *
  * @return {string} String with the class corresponding to the fontSize passed.
- *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
+ *                  The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {
 	if ( ! fontSizeSlug ) {
 		return;
 	}
 
-	return `has-${ kebabCase( fontSizeSlug ) }-font-size`;
+	// We don't want to use kebabCase from lodash here
+	// see https://github.com/WordPress/gutenberg/issues/32347
+	// However, we need to make sure the generated class
+	// doesn't contain spaces.
+	return `has-${ fontSizeSlug.replace( /\s+/g, '-' ) }-font-size`;
 }
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
index 70c284535cf9ae..45241512c0e7dc 100644
--- a/packages/edit-site/src/components/editor/global-styles-renderer.js
+++ b/packages/edit-site/src/components/editor/global-styles-renderer.js
@@ -83,7 +83,14 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 				classes.forEach( ( { classSuffix, propertyName } ) => {
 					const slug = preset.slug;
 					const value = preset[ valueKey ];
-					const classSelectorToUse = `.has-${ slug }-${ classSuffix }`;
+					// We don't want to use kebabCase from lodash here
+					// see https://github.com/WordPress/gutenberg/issues/32347
+					// However, we need to make sure the generated class
+					// doesn't contain spaces.
+					const classSelectorToUse = `.has-${ slug.replace(
+						/\s+/g,
+						'-'
+					) }-${ classSuffix }`;
 					const selectorToUse = `${ blockSelector }${ classSelectorToUse }`;
 					declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;
 				} );

From bde39f78880aefd6fa2b6acb7b7295bad32f2e6b Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 1 Jun 2021 18:59:49 +1000
Subject: [PATCH 04/25] Widgets editor: Fix error when saving empty Legacy
 Widget block (#32359)

---
 packages/edit-widgets/src/store/transformers.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/edit-widgets/src/store/transformers.js b/packages/edit-widgets/src/store/transformers.js
index 5cebf735efdc07..fb6f1fe546a43c 100644
--- a/packages/edit-widgets/src/store/transformers.js
+++ b/packages/edit-widgets/src/store/transformers.js
@@ -37,7 +37,11 @@ export function transformWidgetToBlock( widget ) {
 export function transformBlockToWidget( block, relatedWidget = {} ) {
 	let widget;
 
-	if ( block.name === 'core/legacy-widget' ) {
+	const isValidLegacyWidgetBlock =
+		block.name === 'core/legacy-widget' &&
+		( block.attributes.id || block.attributes.instance );
+
+	if ( isValidLegacyWidgetBlock ) {
 		widget = {
 			...relatedWidget,
 			id: block.attributes.id ?? relatedWidget.id,
@@ -56,13 +60,6 @@ export function transformBlockToWidget( block, relatedWidget = {} ) {
 		};
 	}
 
-	// Delete deprecated properties.
-	delete widget.description;
-	delete widget.name;
-	delete widget.number;
-	delete widget.settings;
-	delete widget.widget_class;
-
 	// Delete read-only properties.
 	delete widget.rendered;
 	delete widget.rendered_form;

From cde3a5af487d2daa7d7930293f9a5a2addb2b7df Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 1 Jun 2021 09:58:22 +0100
Subject: [PATCH 05/25] Update the appearance of the template details popover
 (#32042)

* Update the appearance of the template details popover

* Tweaks

* use secondary variant for delete button
---
 .../header/template-title/delete-template.js  |  4 ++--
 .../template-title/edit-template-title.js     |  3 +++
 .../header/template-title/style.scss          | 19 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 7a3f5d5c382073..d87246d758c417 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -45,9 +45,9 @@ export default function DeleteTemplate() {
 	return (
 		<MenuGroup className="edit-post-template-top-area__second-menu-group">
 			<MenuItem
+				className="edit-post-template-top-area__delete-template-button"
 				isDestructive
-				isTertiary
-				isLink
+				isSecondary
 				aria-label={ __( 'Delete template' ) }
 				onClick={ () => {
 					if (
diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
index feabafcb9fdd09..301574541f6f53 100644
--- a/packages/edit-post/src/components/header/template-title/edit-template-title.js
+++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js
@@ -40,6 +40,9 @@ export default function EditTemplateTitle() {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ templateTitle }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
+			) }
 			onChange={ ( newTitle ) => {
 				const settings = getEditorSettings();
 				const newAvailableTemplates = mapValues(
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index c537b7c05b539f..42872ac3d8c170 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -47,5 +47,22 @@
 }
 
 .edit-post-template-top-area__popover .components-popover__content {
-	min-width: 360px;
+	min-width: 280px;
+}
+
+.edit-post-template-top-area__second-menu-group {
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	padding: $grid-unit-15;
+	padding-bottom: 0;
+	border-top: $border-width solid $gray-300;
+
+	.edit-post-template-top-area__delete-template-button {
+		display: flex;
+		justify-content: center;
+
+		.components-menu-item__item {
+			margin-right: 0;
+		}
+	}
 }

From 29c3626a05a0f376bcdd60a5c44b7ca96df1675f Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Wed, 2 Jun 2021 08:13:56 +0800
Subject: [PATCH 06/25] Fix deselecting block when inspector is opened (#32361)

---
 .../customize-widgets/use-clear-selected-block.js      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js b/packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js
index 7de8d775213234..96205e71695c01 100644
--- a/packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js
+++ b/packages/customize-widgets/src/components/customize-widgets/use-clear-selected-block.js
@@ -29,8 +29,7 @@ export default function useClearSelectedBlock( sidebarControl, popoverRef ) {
 
 	useEffect( () => {
 		if ( popoverRef.current && sidebarControl ) {
-			const inspectorContainer =
-				sidebarControl.inspector.contentContainer[ 0 ];
+			const inspector = sidebarControl.inspector;
 			const container = sidebarControl.container[ 0 ];
 			const ownerDocument = container.ownerDocument;
 			const ownerWindow = ownerDocument.defaultView;
@@ -42,11 +41,12 @@ export default function useClearSelectedBlock( sidebarControl, popoverRef ) {
 					// 2. The element should exist in the DOM (not deleted).
 					element &&
 					ownerDocument.contains( element ) &&
-					// 3. It should also not exist in the container, inspector, nor the popover.
+					// 3. It should also not exist in the container, the popover, nor the dialog.
 					! container.contains( element ) &&
 					! popoverRef.current.contains( element ) &&
-					! inspectorContainer.contains( element ) &&
-					! element.closest( '[role="dialog"]' )
+					! element.closest( '[role="dialog"]' ) &&
+					// 4. The inspector should not be opened.
+					! inspector.expanded()
 				) {
 					clearSelectedBlock();
 				}

From 4af1b88fee0f804229d9db7ecc63261f53883654 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Wed, 2 Jun 2021 11:06:09 +1000
Subject: [PATCH 07/25] Display wide widgets as popovers in Customizer (#31736)

---
 .../src/legacy-widget/edit/form.js            | 46 ++++++++++++++++++-
 .../src/legacy-widget/edit/index.js           | 17 ++++++-
 .../src/legacy-widget/editor.scss             |  8 ++++
 packages/components/src/popover/index.js      |  4 +-
 packages/components/src/popover/utils.js      | 15 ++++--
 .../customize-widgets/src/filters/index.js    |  1 +
 .../src/filters/wide-widget-display.js        | 26 +++++++++++
 7 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 packages/customize-widgets/src/filters/wide-widget-display.js

diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js
index cae1bab7010758..eb8abefb6dc586 100644
--- a/packages/block-library/src/legacy-widget/edit/form.js
+++ b/packages/block-library/src/legacy-widget/edit/form.js
@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -5,7 +9,8 @@ import { useRef, useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
-
+import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -17,11 +22,14 @@ export default function Form( {
 	id,
 	idBase,
 	instance,
+	isWide,
 	onChangeInstance,
 	onChangeHasPreview,
 } ) {
 	const ref = useRef();
 
+	const isMediumLargeViewport = useViewportMatch( 'small' );
+
 	// We only want to remount the control when the instance changes
 	// *externally*. For example, if the user performs an undo. To do this, we
 	// keep track of changes made to instance by the control itself and then
@@ -68,7 +76,41 @@ export default function Form( {
 
 			control.destroy();
 		};
-	}, [ id, idBase, instance, onChangeInstance, onChangeHasPreview ] );
+	}, [
+		id,
+		idBase,
+		instance,
+		onChangeInstance,
+		onChangeHasPreview,
+		isMediumLargeViewport,
+	] );
+
+	if ( isWide && isMediumLargeViewport ) {
+		return (
+			<div
+				className={ classnames( {
+					'wp-block-legacy-widget__container': isVisible,
+				} ) }
+			>
+				{ isVisible && (
+					<h3 className="wp-block-legacy-widget__edit-form-title">
+						{ title }
+					</h3>
+				) }
+				<Popover
+					focusOnMount={ false }
+					position="middle right"
+					__unstableForceXAlignment
+				>
+					<div
+						ref={ ref }
+						className="wp-block-legacy-widget__edit-form"
+						hidden={ ! isVisible }
+					></div>
+				</Popover>
+			</div>
+		);
+	}
 
 	return (
 		<div
diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js
index ff726f596adb1f..d4c15dd46da9b9 100644
--- a/packages/block-library/src/legacy-widget/edit/index.js
+++ b/packages/block-library/src/legacy-widget/edit/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -27,8 +32,16 @@ import ConvertToBlocksButton from './convert-to-blocks-button';
 
 export default function Edit( props ) {
 	const { id, idBase } = props.attributes;
+	const { isWide = false } = props;
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'is-wide-widget': isWide,
+		} ),
+	} );
+
 	return (
-		<div { ...useBlockProps() }>
+		<div { ...blockProps }>
 			{ ! id && ! idBase ? (
 				<Empty { ...props } />
 			) : (
@@ -77,6 +90,7 @@ function NotEmpty( {
 	setAttributes,
 	clientId,
 	isSelected,
+	isWide = false,
 } ) {
 	const [ hasPreview, setHasPreview ] = useState( null );
 
@@ -168,6 +182,7 @@ function NotEmpty( {
 				id={ id }
 				idBase={ idBase }
 				instance={ instance }
+				isWide={ isWide }
 				onChangeInstance={ setInstance }
 				onChangeHasPreview={ setHasPreview }
 			/>
diff --git a/packages/block-library/src/legacy-widget/editor.scss b/packages/block-library/src/legacy-widget/editor.scss
index 1282f2a528be1d..710e4d905879cf 100644
--- a/packages/block-library/src/legacy-widget/editor.scss
+++ b/packages/block-library/src/legacy-widget/editor.scss
@@ -86,3 +86,11 @@
 	margin: 0 0 5px;
 	font-weight: 500;
 }
+
+// When wide widget is selected it opens in a popover but its container should still have a bit of height.
+.is-selected {
+	.wp-block-legacy-widget__container {
+		padding: $grid-unit-10 $grid-unit-15;
+		min-height: 50px;
+	}
+}
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index fa29974e28cf86..3d2d3e650c4e84 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -261,6 +261,7 @@ const Popover = (
 		__unstableObserveElement,
 		__unstableBoundaryParent,
 		__unstableForcePosition,
+		__unstableForceXAlignment,
 		/* eslint-enable no-unused-vars */
 		...contentProps
 	},
@@ -354,7 +355,8 @@ const Popover = (
 				containerRef.current,
 				relativeOffsetTop,
 				boundaryElement,
-				__unstableForcePosition
+				__unstableForcePosition,
+				__unstableForceXAlignment
 			);
 
 			if (
diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js
index 3d23ae71fb211c..f7021198085a21 100644
--- a/packages/components/src/popover/utils.js
+++ b/packages/components/src/popover/utils.js
@@ -21,6 +21,7 @@ const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
  * @param {string}  chosenYAxis           yAxis to be used.
  * @param {Element} boundaryElement       Boundary element.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
+ * @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis
  *
  * @return {Object} Popover xAxis position and constraints.
  */
@@ -32,7 +33,8 @@ export function computePopoverXAxisPosition(
 	stickyBoundaryElement,
 	chosenYAxis,
 	boundaryElement,
-	forcePosition
+	forcePosition,
+	forceXAlignment
 ) {
 	const { width } = contentSize;
 
@@ -64,7 +66,7 @@ export function computePopoverXAxisPosition(
 
 	if ( corner === 'right' ) {
 		leftAlignmentX = anchorRect.right;
-	} else if ( chosenYAxis !== 'middle' ) {
+	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
 		leftAlignmentX = anchorMidPoint;
 	}
 
@@ -72,7 +74,7 @@ export function computePopoverXAxisPosition(
 
 	if ( corner === 'left' ) {
 		rightAlignmentX = anchorRect.left;
-	} else if ( chosenYAxis !== 'middle' ) {
+	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
 		rightAlignmentX = anchorMidPoint;
 	}
 
@@ -285,6 +287,7 @@ export function computePopoverYAxisPosition(
  *                                        relative positioned parent container.
  * @param {Element} boundaryElement       Boundary element.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
+ *  @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis
  *
  * @return {Object} Popover position and constraints.
  */
@@ -296,7 +299,8 @@ export function computePopoverPosition(
 	anchorRef,
 	relativeOffsetTop,
 	boundaryElement,
-	forcePosition
+	forcePosition,
+	forceXAlignment
 ) {
 	const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );
 
@@ -318,7 +322,8 @@ export function computePopoverPosition(
 		stickyBoundaryElement,
 		yAxisPosition.yAxis,
 		boundaryElement,
-		forcePosition
+		forcePosition,
+		forceXAlignment
 	);
 
 	return {
diff --git a/packages/customize-widgets/src/filters/index.js b/packages/customize-widgets/src/filters/index.js
index fdae4d488b83d2..07b68a610103ab 100644
--- a/packages/customize-widgets/src/filters/index.js
+++ b/packages/customize-widgets/src/filters/index.js
@@ -3,3 +3,4 @@
  */
 import './move-to-sidebar';
 import './replace-media-upload';
+import './wide-widget-display';
diff --git a/packages/customize-widgets/src/filters/wide-widget-display.js b/packages/customize-widgets/src/filters/wide-widget-display.js
new file mode 100644
index 00000000000000..abcaa3514b640e
--- /dev/null
+++ b/packages/customize-widgets/src/filters/wide-widget-display.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+
+const { wp } = window;
+
+const withWideWidgetDisplay = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { idBase } = props.attributes;
+		const isWide =
+			wp.customize.Widgets.data.availableWidgets.find(
+				( widget ) => widget.id_base === idBase
+			)?.is_wide ?? false;
+
+		return <BlockEdit { ...props } isWide={ isWide } />;
+	},
+	'withWideWidgetDisplay'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/customize-widgets/wide-widget-display',
+	withWideWidgetDisplay
+);

From 7bb8d1d3c3c4c9d26769ff6f0f32c69c10f2ff9d Mon Sep 17 00:00:00 2001
From: Udit Desai <desaiuditd@users.noreply.github.com>
Date: Wed, 2 Jun 2021 20:25:08 +1000
Subject: [PATCH 08/25] Prevent saving the post before previewing in
 locked/read-only mode. (#32341)

* Prevent saving the post before previewing in locked/read-only mode.

* Fix nit, remove extra comment.
---
 .../src/components/post-preview-button/index.js      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index d7ee759c8b5d2e..dee9d26963c561 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -159,9 +159,13 @@ export class PostPreviewButton extends Component {
 		// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus
 		this.previewWindow.focus();
 
-		// If we don't need to autosave the post before previewing, then we simply
-		// load the Preview URL in the Preview tab.
-		if ( ! this.props.isAutosaveable ) {
+		if (
+			// If we don't need to autosave the post before previewing, then we simply
+			// load the Preview URL in the Preview tab.
+			! this.props.isAutosaveable ||
+			// Do not save or overwrite the post, if the post is already locked.
+			this.props.isPostLocked
+		) {
 			this.setPreviewWindowLink( event.target.href );
 			return;
 		}
@@ -232,6 +236,7 @@ export default compose( [
 			isEditedPostSaveable,
 			isEditedPostAutosaveable,
 			getEditedPostPreviewLink,
+			isPostLocked,
 		} = select( 'core/editor' );
 		const { getPostType } = select( 'core' );
 
@@ -250,6 +255,7 @@ export default compose( [
 				[ 'draft', 'auto-draft' ].indexOf(
 					getEditedPostAttribute( 'status' )
 				) !== -1,
+			isPostLocked: isPostLocked(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

From e4e4a62c301f1378d61f12a4751a9222b830c511 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 2 Jun 2021 11:36:30 +0100
Subject: [PATCH 09/25] Fix allowed patterns check (#32376)

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
---
 .../block-pattern-setup/use-patterns-setup.js | 16 ++++---------
 .../use-transformed-patterns.js               | 16 ++-----------
 packages/block-editor/src/store/selectors.js  | 24 +++++++------------
 3 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
index 709e127ded6428..1b6a90b87457a0 100644
--- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
+++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
@@ -14,23 +14,17 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) {
 			const {
 				getBlockRootClientId,
 				__experimentalGetPatternsByBlockTypes,
-				__experimentalGetParsedPattern,
 				__experimentalGetAllowedPatterns,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-			let patterns = [];
 			if ( filterPatternsFn ) {
-				patterns = __experimentalGetAllowedPatterns(
-					rootClientId
-				).filter( filterPatternsFn );
-			} else {
-				patterns = __experimentalGetPatternsByBlockTypes(
-					blockName,
-					rootClientId
+				return __experimentalGetAllowedPatterns( rootClientId ).filter(
+					filterPatternsFn
 				);
 			}
-			return patterns.map( ( { name } ) =>
-				__experimentalGetParsedPattern( name )
+			return __experimentalGetPatternsByBlockTypes(
+				blockName,
+				rootClientId
 			);
 		},
 		[ clientId, blockName, filterPatternsFn ]
diff --git a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
index 0ce374fbbc8cbc..7f8c956ea69883 100644
--- a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
+++ b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
@@ -3,13 +3,11 @@
  */
 import { useMemo } from '@wordpress/element';
 import { cloneBlock } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { getMatchingBlockByName, getRetainedBlockAttributes } from './utils';
-import { store as blockEditorStore } from '../../store';
 
 /**
  * Mutate the matched block's attributes by getting
@@ -96,19 +94,9 @@ export const getPatternTransformedBlocks = (
  */
 // TODO tests
 const useTransformedPatterns = ( patterns, selectedBlocks ) => {
-	const parsedPatterns = useSelect(
-		( select ) =>
-			patterns.map( ( { name } ) =>
-				select( blockEditorStore ).__experimentalGetParsedPattern(
-					name
-				)
-			),
-		[ patterns ]
-	);
-
 	return useMemo(
 		() =>
-			parsedPatterns.reduce( ( accumulator, _pattern ) => {
+			patterns.reduce( ( accumulator, _pattern ) => {
 				const transformedBlocks = getPatternTransformedBlocks(
 					selectedBlocks,
 					_pattern.blocks
@@ -121,7 +109,7 @@ const useTransformedPatterns = ( patterns, selectedBlocks ) => {
 				}
 				return accumulator;
 			}, [] ),
-		[ parsedPatterns, selectedBlocks ]
+		[ patterns, selectedBlocks ]
 	);
 };
 
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 8dabce62e33568..de8dd02b2c0e4e 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -30,7 +30,6 @@ import {
 } from '@wordpress/blocks';
 import { SVG, Rect, G, Path } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
-import { parse as parseBlocks } from '@wordpress/block-serialization-default-parser';
 
 /**
  * A block selection object.
@@ -1830,17 +1829,11 @@ const getAllAllowedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
 		const { allowedBlockTypes } = getSettings( state );
-		const parsedPatterns = patterns.map( ( pattern ) => ( {
-			...pattern,
-			// We only need the overall block structure of the pattern. So, for
-			// performance reasons, we can parse the pattern's content using
-			// the raw blocks parser, also known as the "stage I" block parser.
-			// This is about 250x faster than the full parse that the Block API
-			// offers.
-			blockNodes: parseBlocks( pattern.content ),
-		} ) );
-		const allowedPatterns = parsedPatterns.filter( ( { blockNodes } ) =>
-			checkAllowListRecursive( blockNodes, allowedBlockTypes )
+		const parsedPatterns = patterns.map( ( { name } ) =>
+			__experimentalGetParsedPattern( state, name )
+		);
+		const allowedPatterns = parsedPatterns.filter( ( { blocks } ) =>
+			checkAllowListRecursive( blocks, allowedBlockTypes )
 		);
 		return allowedPatterns;
 	},
@@ -1863,11 +1856,12 @@ export const __experimentalGetAllowedPatterns = createSelector(
 		const availableParsedPatterns = getAllAllowedPatterns( state );
 		const patternsAllowed = filter(
 			availableParsedPatterns,
-			( { blockNodes } ) =>
-				blockNodes.every( ( { blockName } ) =>
-					canInsertBlockType( state, blockName, rootClientId )
+			( { blocks } ) =>
+				blocks.every( ( { name } ) =>
+					canInsertBlockType( state, name, rootClientId )
 				)
 		);
+
 		return patternsAllowed;
 	},
 	( state, rootClientId ) => [

From 1029bcb0a477d6d7ded80c4dc6eb05a8b42a49de Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 2 Jun 2021 13:25:50 +0400
Subject: [PATCH 10/25] SuggestionsList: Try to use a unique "key" (#32344)

---
 .../components/src/form-token-field/suggestions-list.js     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/form-token-field/suggestions-list.js b/packages/components/src/form-token-field/suggestions-list.js
index af8a2141352abc..0f8b44c4068a0e 100644
--- a/packages/components/src/form-token-field/suggestions-list.js
+++ b/packages/components/src/form-token-field/suggestions-list.js
@@ -110,7 +110,11 @@ class SuggestionsList extends Component {
 							id={ `components-form-token-suggestions-${ this.props.instanceId }-${ index }` }
 							role="option"
 							className={ classeName }
-							key={ this.props.displayTransform( suggestion ) }
+							key={
+								suggestion?.value
+									? suggestion.value
+									: this.props.displayTransform( suggestion )
+							}
 							onMouseDown={ this.handleMouseDown }
 							onClick={ this.handleClick( suggestion ) }
 							onMouseEnter={ this.handleHover( suggestion ) }

From 0b4b1173cf7e3a285ebcacd7872c7007e71f3188 Mon Sep 17 00:00:00 2001
From: Kerry Liu <gwwar@users.noreply.github.com>
Date: Tue, 1 Jun 2021 08:04:03 -0700
Subject: [PATCH 11/25] Buttons: move options to constants to avoid unneeded
 renders (#32356)

---
 packages/block-library/src/buttons/edit.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 7b1243ccb47da6..913daf0f92e0c0 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -20,6 +20,17 @@ import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
+const LAYOUT = {
+	type: 'default',
+	alignments: [],
+};
+const VERTICAL_JUSTIFY_CONTROLS = [ 'left', 'center', 'right' ];
+const HORIZONTAL_JUSTIFY_CONTROLS = [
+	'left',
+	'center',
+	'right',
+	'space-between',
+];
 
 function ButtonsEdit( {
 	attributes: { contentJustification, orientation },
@@ -35,17 +46,14 @@ function ButtonsEdit( {
 		allowedBlocks: ALLOWED_BLOCKS,
 		template: BUTTONS_TEMPLATE,
 		orientation,
-		__experimentalLayout: {
-			type: 'default',
-			alignments: [],
-		},
+		__experimentalLayout: LAYOUT,
 		templateInsertUpdatesSelection: true,
 	} );
 
 	const justifyControls =
 		orientation === 'vertical'
-			? [ 'left', 'center', 'right' ]
-			: [ 'left', 'center', 'right', 'space-between' ];
+			? VERTICAL_JUSTIFY_CONTROLS
+			: HORIZONTAL_JUSTIFY_CONTROLS;
 
 	return (
 		<>

From 14d4ba65991c5b7cb267d201aa3ca401f80d64f0 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Wed, 2 Jun 2021 14:43:58 +0200
Subject: [PATCH 12/25] Try: Fix notices below block toolbars. (#32238)

---
 packages/base-styles/_z-index.scss                 |  4 ----
 packages/components/src/notice/style.scss          |  1 -
 .../src/components/editor-notices/style.scss       | 14 ++------------
 3 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 30d87dbd0ed908..80794990713ff3 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -114,10 +114,6 @@ $z-layers: (
 	// Show the FSE template previews above the editor and any open block toolbars
 	".edit-site-navigation-panel__preview": 32,
 
-	// Show notices below expanded editor bar
-	// .edit-post-header { z-index: 30 }
-	".components-notice-list": 29,
-
 	// Above the block list and the header.
 	".block-editor-block-list__block-popover": 31,
 
diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
index a234df4ce92b21..a4b4838a99cc80 100644
--- a/packages/components/src/notice/style.scss
+++ b/packages/components/src/notice/style.scss
@@ -76,7 +76,6 @@
 	// The notice should never be wider than the viewport, or the close button might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
 	box-sizing: border-box;
-	z-index: z-index(".components-notice-list");
 
 	.components-notice__content {
 		margin-top: $grid-unit-15;
diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss
index 8ce8fb9004e33c..f3b1f76285874f 100644
--- a/packages/editor/src/components/editor-notices/style.scss
+++ b/packages/editor/src/components/editor-notices/style.scss
@@ -1,22 +1,12 @@
-// Dismissible notices.
-.components-editor-notices__dismissible {
-	position: sticky;
-	top: 0;
-	right: 0;
-	color: $gray-900;
-}
-
-// Non-dismissible notices.
+// Dismissible & non-dismissible notices.
+.components-editor-notices__dismissible,
 .components-editor-notices__pinned {
 	position: relative;
 	left: 0;
 	top: 0;
 	right: 0;
 	color: $gray-900;
-}
 
-.components-editor-notices__dismissible,
-.components-editor-notices__pinned {
 	.components-notice {
 		box-sizing: border-box;
 		margin: 0;

From ab6be5d90ef49645d7b24a1dd0b7398a9aa0c424 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 2 Jun 2021 14:55:53 +0300
Subject: [PATCH 13/25] Allow non-latin characters in slugs (#32232)

* fixes #24710

* Additional test

* typo

* fix failing tests

* update test description

* update docs
---
 packages/editor/src/utils/test/url.js |  4 ++++
 packages/editor/src/utils/url.js      | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/utils/test/url.js b/packages/editor/src/utils/test/url.js
index ffe0568bbc502f..39588ee4f029be 100644
--- a/packages/editor/src/utils/test/url.js
+++ b/packages/editor/src/utils/test/url.js
@@ -8,6 +8,10 @@ describe( 'cleanForSlug()', () => {
 		expect( cleanForSlug( '/Is th@t Déjà_vu? ' ) ).toBe( 'is-tht-deja_vu' );
 	} );
 
+	it( 'Should allow non-latin characters', () => {
+		expect( cleanForSlug( 'Καλημέρα Κόσμε' ) ).toBe( 'καλημέρα-κόσμε' );
+	} );
+
 	it( 'Should return an empty string for missing argument', () => {
 		expect( cleanForSlug() ).toBe( '' );
 	} );
diff --git a/packages/editor/src/utils/url.js b/packages/editor/src/utils/url.js
index bf2130be9caa7f..3ce364af1f9c20 100644
--- a/packages/editor/src/utils/url.js
+++ b/packages/editor/src/utils/url.js
@@ -28,11 +28,11 @@ export function getWPAdminURL( page, query ) {
  * This replicates some of what sanitize_title() does in WordPress core, but
  * is only designed to approximate what the slug will be.
  *
- * Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin
- * letters. Removes combining diacritical marks. Converts whitespace, periods,
+ * Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin letters.
+ * Removes combining diacritical marks. Converts whitespace, periods,
  * and forward slashes to hyphens. Removes any remaining non-word characters
- * except hyphens. Converts remaining string to lowercase. It does not account
- * for octets, HTML entities, or other encoded characters.
+ * except hyphens and underscores. Converts remaining string to lowercase.
+ * It does not account for octets, HTML entities, or other encoded characters.
  *
  * @param {string} string Title or slug to be processed
  *
@@ -45,7 +45,7 @@ export function cleanForSlug( string ) {
 	return trim(
 		deburr( string )
 			.replace( /[\s\./]+/g, '-' )
-			.replace( /[^\w-]+/g, '' )
+			.replace( /[^\p{L}\p{N}_-]+/gu, '' )
 			.toLowerCase(),
 		'-'
 	);

From 4bbea095976b20072c36fbdad1a5110ed1e7a698 Mon Sep 17 00:00:00 2001
From: Kerry Liu <gwwar@users.noreply.github.com>
Date: Wed, 2 Jun 2021 08:28:17 -0700
Subject: [PATCH 14/25] Experimental Layout: pass the same object when no data
 changes (#32380)

---
 packages/block-library/src/group/edit.js      | 26 ++++++++++-----
 .../block-library/src/post-content/edit.js    | 25 +++++++++-----
 .../block-library/src/query/edit/index.js     | 26 +++++++++------
 .../src/template-part/edit/inner-blocks.js    | 26 ++++++++++-----
 .../src/components/visual-editor/index.js     | 33 ++++++++++---------
 .../src/components/block-editor/index.js      | 12 ++++---
 6 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index bcc3273771f493..4814c173afe7a8 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -12,6 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
@@ -29,10 +30,21 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
 	const { contentSize, wideSize } = usedLayout;
-	const alignments =
-		contentSize || wideSize
-			? [ 'wide', 'full' ]
-			: [ 'left', 'center', 'right' ];
+	const _layout = useMemo( () => {
+		if ( themeSupportsLayout ) {
+			const alignments =
+				contentSize || wideSize
+					? [ 'wide', 'full' ]
+					: [ 'left', 'center', 'right' ];
+			return {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments,
+			};
+		}
+		return undefined;
+	}, [ themeSupportsLayout, contentSize, wideSize ] );
+
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(
 		themeSupportsLayout
@@ -43,11 +55,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: {
-				type: 'default',
-				// Find a way to inject this in the support flag code (hooks).
-				alignments: themeSupportsLayout ? alignments : undefined,
-			},
+			__experimentalLayout: _layout,
 		}
 	);
 
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index 146ba624df7778..2d39dae73a0b26 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -12,6 +12,7 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
 
 function Content( { layout, postType, postId } ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
@@ -21,10 +22,20 @@ function Content( { layout, postType, postId } ) {
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
 	const { contentSize, wideSize } = usedLayout;
-	const alignments =
-		contentSize || wideSize
-			? [ 'wide', 'full' ]
-			: [ 'left', 'center', 'right' ];
+	const _layout = useMemo( () => {
+		if ( themeSupportsLayout ) {
+			const alignments =
+				contentSize || wideSize
+					? [ 'wide', 'full' ]
+					: [ 'left', 'center', 'right' ];
+			return {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments,
+			};
+		}
+		return undefined;
+	}, [ themeSupportsLayout, contentSize, wideSize ] );
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,
@@ -36,11 +47,7 @@ function Content( { layout, postType, postId } ) {
 			value: blocks,
 			onInput,
 			onChange,
-			__experimentalLayout: {
-				type: 'default',
-				// Find a way to inject this in the support flag code (hooks).
-				alignments: themeSupportsLayout ? alignments : undefined,
-			},
+			__experimentalLayout: _layout,
 		}
 	);
 	return <div { ...props } />;
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index 82a1bc5825d92a..4612033981426f 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorAdvancedControls,
@@ -44,18 +44,24 @@ export function QueryContent( { attributes, setAttributes } ) {
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
 	const { contentSize, wideSize } = usedLayout;
-	const alignments =
-		contentSize || wideSize
-			? [ 'wide', 'full' ]
-			: [ 'left', 'center', 'right' ];
 	const blockProps = useBlockProps();
+	const _layout = useMemo( () => {
+		if ( themeSupportsLayout ) {
+			const alignments =
+				contentSize || wideSize
+					? [ 'wide', 'full' ]
+					: [ 'left', 'center', 'right' ];
+			return {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments,
+			};
+		}
+		return undefined;
+	}, [ themeSupportsLayout, contentSize, wideSize ] );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		__experimentalLayout: {
-			type: 'default',
-			// Find a way to inject this in the support flag code (hooks).
-			alignments: themeSupportsLayout ? alignments : undefined,
-		},
+		__experimentalLayout: _layout,
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index ab08775d01c940..ae25b10bf401a9 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -9,6 +9,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 export default function TemplatePartInnerBlocks( {
 	postId: id,
@@ -24,10 +25,21 @@ export default function TemplatePartInnerBlocks( {
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
 	const { contentSize, wideSize } = usedLayout;
-	const alignments =
-		contentSize || wideSize
-			? [ 'wide', 'full' ]
-			: [ 'left', 'center', 'right' ];
+	const _layout = useMemo( () => {
+		if ( themeSupportsLayout ) {
+			const alignments =
+				contentSize || wideSize
+					? [ 'wide', 'full' ]
+					: [ 'left', 'center', 'right' ];
+			return {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments,
+			};
+		}
+		return undefined;
+	}, [ themeSupportsLayout, contentSize, wideSize ] );
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -40,11 +52,7 @@ export default function TemplatePartInnerBlocks( {
 		renderAppender: hasInnerBlocks
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
-		__experimentalLayout: {
-			type: 'default',
-			// Find a way to inject this in the support flag code (hooks).
-			alignments: themeSupportsLayout ? alignments : undefined,
-		},
+		__experimentalLayout: _layout,
 	} );
 	return <TagName { ...innerBlocksProps } />;
 }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index e7fd72736bc8b4..a1bd43cd8cca0b 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -31,7 +31,7 @@ import {
 	__unstableIframe as Iframe,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 } from '@wordpress/block-editor';
-import { useRef } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
@@ -137,10 +137,6 @@ export default function VisualEditor( { styles } ) {
 	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
 	const defaultLayout = useSetting( 'layout' );
 	const { contentSize, wideSize } = defaultLayout || {};
-	const alignments =
-		contentSize || wideSize
-			? [ 'wide', 'full' ]
-			: [ 'left', 'center', 'right' ];
 
 	let animatedStyles = isTemplateMode
 		? templateModeStyles
@@ -174,6 +170,21 @@ export default function VisualEditor( { styles } ) {
 		wrapperBlockName
 	);
 
+	const layout = useMemo( () => {
+		if ( themeSupportsLayout ) {
+			const alignments =
+				contentSize || wideSize
+					? [ 'wide', 'full' ]
+					: [ 'left', 'center', 'right' ];
+			return {
+				type: 'default',
+				// Find a way to inject this in the support flag code (hooks).
+				alignments,
+			};
+		}
+		return undefined;
+	}, [ themeSupportsLayout, contentSize, wideSize ] );
+
 	return (
 		<div
 			className={ classnames( 'edit-post-visual-editor', {
@@ -225,17 +236,7 @@ export default function VisualEditor( { styles } ) {
 								) }
 								<RecursionProvider>
 									<BlockList
-										__experimentalLayout={
-											themeSupportsLayout
-												? {
-														type: 'default',
-														// Find a way to inject this in the support flag code (hooks).
-														alignments: themeSupportsLayout
-															? alignments
-															: undefined,
-												  }
-												: undefined
-										}
+										__experimentalLayout={ layout }
 									/>
 								</RecursionProvider>
 							</WritingFlow>
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index ebe97e3e7ea7b5..701941770a0451 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -30,6 +30,12 @@ import { SidebarInspectorFill } from '../sidebar';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 
+const LAYOUT = {
+	type: 'default',
+	// At the root level of the site editor, no alignments should be allowed.
+	alignments: [],
+};
+
 export default function BlockEditor( { setIsInserterOpen } ) {
 	const { settings, templateType, page, deviceType } = useSelect(
 		( select ) => {
@@ -94,11 +100,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						<WritingFlow>
 							<BlockList
 								className="edit-site-block-editor__block-list"
-								__experimentalLayout={ {
-									type: 'default',
-									// At the root level of the site editor, no alignments should be allowed.
-									alignments: [],
-								} }
+								__experimentalLayout={ LAYOUT }
 							/>
 						</WritingFlow>
 					</Iframe>

From bbc0041d5bb4d9b97cafcdf5c52e989ea371ecc7 Mon Sep 17 00:00:00 2001
From: thisissandip <69596988+thisissandip@users.noreply.github.com>
Date: Thu, 3 Jun 2021 15:50:31 +0530
Subject: [PATCH 15/25] Fixed random collapse of the color settings section
 (#32388)

---
 packages/block-editor/src/hooks/style.js | 28 ++++++++++++++----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index c0410a7c7b92f9..5fe41775a51ee0 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -243,9 +243,7 @@ export const withBlockControls = createHigherOrderComponent(
 const withElementsStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const elements = props.attributes.style?.elements;
-		if ( ! elements ) {
-			return <BlockListBlock { ...props } />;
-		}
+
 		const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
 			BlockListBlock
 		) }`;
@@ -256,17 +254,23 @@ const withElementsStyles = createHigherOrderComponent(
 
 		return (
 			<>
-				<style
-					dangerouslySetInnerHTML={ {
-						__html: styles,
-					} }
-				/>
+				{ elements && (
+					<style
+						dangerouslySetInnerHTML={ {
+							__html: styles,
+						} }
+					/>
+				) }
+
 				<BlockListBlock
 					{ ...props }
-					className={ classnames(
-						props.classname,
-						blockElementsContainerIdentifier
-					) }
+					className={
+						elements &&
+						classnames(
+							props.classname,
+							blockElementsContainerIdentifier
+						)
+					}
 				/>
 			</>
 		);

From b9d9d71e34f94373ebfd27415951cf80cbe297d2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 3 Jun 2021 13:37:09 +0100
Subject: [PATCH 16/25] Fix the layout definition in the template mode (#32425)

---
 packages/block-editor/src/hooks/duotone.js            |  2 +-
 packages/block-editor/src/hooks/style.js              | 11 ++++++-----
 .../src/components/sidebar/template/actions.js        |  4 +++-
 .../edit-post/src/components/visual-editor/index.js   |  8 ++++++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 6ec04dee153863..c4845b34b49f83 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -224,7 +224,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 		);
 		const selectorsGroup = selectorsScoped.join( ', ' );
 
-		const className = classnames( props?.classname, id );
+		const className = classnames( props?.className, id );
 
 		return (
 			<>
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 5fe41775a51ee0..e05f32c88bd132 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -265,11 +265,12 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						elements &&
-						classnames(
-							props.classname,
-							blockElementsContainerIdentifier
-						)
+						elements
+							? classnames(
+									props.className,
+									blockElementsContainerIdentifier
+							  )
+							: props.className
 					}
 				/>
 			</>
diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js
index 2568f4881f3b25..b7a0ccec82e7b1 100644
--- a/packages/edit-post/src/components/sidebar/template/actions.js
+++ b/packages/edit-post/src/components/sidebar/template/actions.js
@@ -84,7 +84,9 @@ function PostTemplateActions() {
 								createBlock( 'core/site-tagline' ),
 								createBlock( 'core/separator' ),
 								createBlock( 'core/post-title' ),
-								createBlock( 'core/post-content' ),
+								createBlock( 'core/post-content', {
+									layout: { inherit: true },
+								} ),
 							];
 							__unstableSwitchToTemplateMode( {
 								slug:
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index a1bd43cd8cca0b..9164bdfd2c9549 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -171,6 +171,10 @@ export default function VisualEditor( { styles } ) {
 	);
 
 	const layout = useMemo( () => {
+		if ( isTemplateMode ) {
+			return { type: 'default' };
+		}
+
 		if ( themeSupportsLayout ) {
 			const alignments =
 				contentSize || wideSize
@@ -183,7 +187,7 @@ export default function VisualEditor( { styles } ) {
 			};
 		}
 		return undefined;
-	}, [ themeSupportsLayout, contentSize, wideSize ] );
+	}, [ isTemplateMode, themeSupportsLayout, contentSize, wideSize ] );
 
 	return (
 		<div
@@ -222,7 +226,7 @@ export default function VisualEditor( { styles } ) {
 							styles={ styles }
 							style={ { paddingBottom } }
 						>
-							{ themeSupportsLayout && (
+							{ themeSupportsLayout && ! isTemplateMode && (
 								<LayoutStyle
 									selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
 									layout={ defaultLayout }

From ebfe9f773f4c2fd58291ff5c5f88aa91bd9ddd2f Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Wed, 2 Jun 2021 18:32:36 +0100
Subject: [PATCH 17/25] Group typographic block supports under a `typography`
 key (#32252)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Squashed commits:
[ce2c0f8856] Update lib/block-supports/typography.php

Co-authored-by: André <nosolosw@users.noreply.github.com>
[a27fe6e2c7] Update: Typography supports shape.
---
 lib/block-supports/typography.php             | 48 ++++++++++++-------
 lib/blocks.php                                | 38 +++++++++++++++
 .../block-editor/src/hooks/font-appearance.js |  4 +-
 .../block-editor/src/hooks/font-family.js     |  2 +-
 packages/block-editor/src/hooks/font-size.js  |  2 +-
 .../block-editor/src/hooks/line-height.js     |  2 +-
 .../block-editor/src/hooks/text-decoration.js |  3 +-
 .../block-editor/src/hooks/text-transform.js  |  3 +-
 packages/block-library/src/button/block.json  |  6 ++-
 packages/block-library/src/code/block.json    |  4 +-
 packages/block-library/src/heading/block.json |  7 ++-
 packages/block-library/src/list/block.json    |  5 +-
 .../block-library/src/loginout/block.json     |  4 +-
 .../block-library/src/navigation/block.json   | 18 +++----
 .../block-library/src/paragraph/block.json    |  6 ++-
 .../block-library/src/post-author/block.json  |  8 ++--
 .../src/post-comments-count/block.json        |  6 ++-
 .../src/post-comments-form/block.json         |  6 ++-
 .../src/post-comments-link/block.json         |  6 ++-
 .../src/post-comments/block.json              |  8 ++--
 .../block-library/src/post-date/block.json    |  6 ++-
 .../block-library/src/post-excerpt/block.json |  6 ++-
 .../block-library/src/post-terms/block.json   |  6 ++-
 .../block-library/src/post-title/block.json   |  8 ++--
 .../block-library/src/preformatted/block.json |  4 +-
 .../src/query-pagination-next/block.json      |  6 ++-
 .../src/query-pagination-previous/block.json  |  6 ++-
 .../block-library/src/query-title/block.json  |  8 ++--
 .../block-library/src/site-tagline/block.json | 10 ++--
 .../block-library/src/site-title/block.json   | 14 +++---
 .../src/term-description/block.json           |  6 ++-
 packages/block-library/src/verse/block.json   |  6 ++-
 packages/blocks/src/api/constants.js          | 14 +++---
 33 files changed, 194 insertions(+), 92 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index fed915d6005075..35c97490946485 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -15,19 +15,26 @@ function gutenberg_register_typography_support( $block_type ) {
 		return;
 	}
 
-	$has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
-	$has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
-	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
-
-	$has_typography_support = $has_font_size_support
-		|| $has_font_weight_support
+	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	if ( ! $typography_supports ) {
+		return;
+	}
+
+	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
+	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
+	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
+	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
+	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
+	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+
+	$has_typography_support = $has_font_family_support
+		|| $has_font_size_support
 		|| $has_font_style_support
+		|| $has_font_weight_support
 		|| $has_line_height_support
-		|| $has_text_transform_support
-		|| $has_text_decoration_support;
+		|| $has_text_decoration_support
+		|| $has_text_transform_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -65,13 +72,18 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$classes    = array();
 	$styles     = array();
 
-	$has_font_family_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontFamily' ), false );
-	$has_font_style_support      = _wp_array_get( $block_type->supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $block_type->supports, array( '__experimentalFontWeight' ), false );
-	$has_font_size_support       = _wp_array_get( $block_type->supports, array( 'fontSize' ), false );
-	$has_line_height_support     = _wp_array_get( $block_type->supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $block_type->supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $block_type->supports, array( '__experimentalTextTransform' ), false );
+	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	if ( ! $typography_supports ) {
+		return array();
+	}
+
+	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
+	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
+	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
+	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
+	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
+	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
+	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
 	$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
 
diff --git a/lib/blocks.php b/lib/blocks.php
index b5ce0a11cf80bd..470148668e8921 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -430,3 +430,41 @@ function gutenberg_block_has_support( $block_type, $feature, $default = false )
 
 	return true === $block_support || is_array( $block_support );
 }
+
+/**
+ * Updates the shape of supports for declaring fontSize and lineHeight.
+ *
+ * @param array $metadata Metadata for registering a block type.
+ * @return array          Metadata for registering a block type with the supports shape updated.
+ */
+function gutenberg_migrate_old_typography_shape( $metadata ) {
+	// Temporarily disable migrations from core blocks until core block.json are updated.
+	if ( isset( $metadata['supports'] ) && false === strpos( $metadata['file'], '/wp-includes/blocks/' ) ) {
+		$typography_keys = array(
+			'__experimentalFontFamily',
+			'__experimentalFontStyle',
+			'__experimentalFontWeight',
+			'__experimentalLetterSpacing',
+			'__experimentalTextDecoration',
+			'__experimentalTextTransform',
+			'fontSize',
+			'lineHeight',
+		);
+		foreach ( $typography_keys as $typography_key ) {
+			$support_for_key = _wp_array_get( $metadata['supports'], array( $typography_key ), null );
+			if ( null !== $support_for_key ) {
+				trigger_error(
+					/* translators: %1$s: Block type, %2$s: typography supports key e.g: fontSize, lineHeight etc... */
+					sprintf( __( 'Block %1$s is declaring %2$s support on block.json under supports.%2$s. %2$s support is now declared under supports.typography.%2$s.', 'gutenberg' ), $metadata['name'], $typography_key ),
+					headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE
+				);
+				gutenberg_experimental_set( $metadata['supports'], array( 'typography', $typography_key ), $support_for_key );
+				unset( $metadata['supports'][ $typography_key ] );
+			}
+		}
+	}
+	return $metadata;
+}
+
+
+add_filter( 'block_type_metadata', 'gutenberg_migrate_old_typography_shape' );
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
index 2268d27587f768..641985f69e4845 100644
--- a/packages/block-editor/src/hooks/font-appearance.js
+++ b/packages/block-editor/src/hooks/font-appearance.js
@@ -13,12 +13,12 @@ import { cleanEmptyObject } from './utils';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-export const FONT_STYLE_SUPPORT_KEY = '__experimentalFontStyle';
+export const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-export const FONT_WEIGHT_SUPPORT_KEY = '__experimentalFontWeight';
+export const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 
 /**
  * Inspector control panel containing the font appearance options.
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index f2c7e3f8ca14d7..d3a13bfc87d5e4 100644
--- a/packages/block-editor/src/hooks/font-family.js
+++ b/packages/block-editor/src/hooks/font-family.js
@@ -15,7 +15,7 @@ import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
 
-export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
 const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
 	const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index c1605289ccbdcf..498ea20769fac0 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -18,7 +18,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 
-export const FONT_SIZE_SUPPORT_KEY = 'fontSize';
+export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
 /**
  * Filters registered block settings, extending attributes to include
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index 9490f04a95051e..1d57366878b214 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -10,7 +10,7 @@ import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 
-export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight';
+export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
 /**
  * Inspector control panel containing the line height related configuration
diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js
index 97585ddd1a0e7a..b75054be29c104 100644
--- a/packages/block-editor/src/hooks/text-decoration.js
+++ b/packages/block-editor/src/hooks/text-decoration.js
@@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-export const TEXT_DECORATION_SUPPORT_KEY = '__experimentalTextDecoration';
+export const TEXT_DECORATION_SUPPORT_KEY =
+	'typography.__experimentalTextDecoration';
 
 /**
  * Inspector control panel containing the text decoration options.
diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js
index f25dfb0b698c78..cfc7b426d81131 100644
--- a/packages/block-editor/src/hooks/text-transform.js
+++ b/packages/block-editor/src/hooks/text-transform.js
@@ -14,7 +14,8 @@ import { cleanEmptyObject } from './utils';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-export const TEXT_TRANSFORM_SUPPORT_KEY = '__experimentalTextTransform';
+export const TEXT_TRANSFORM_SUPPORT_KEY =
+	'typography.__experimentalTextTransform';
 
 /**
  * Inspector control panel containing the text transform options.
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 3cb59a7fd653eb..f2e4a52debd81a 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -61,13 +61,15 @@
 			"__experimentalSkipSerialization": true,
 			"gradients": true
 		},
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"reusable": false,
 		"__experimentalBorder": {
 			"radius": true,
 			"__experimentalSkipSerialization": true
 		},
-		"__experimentalFontFamily": true,
 		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"styles": [
diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
index 8cb922288730f9..8ea75ed6dacb98 100644
--- a/packages/block-library/src/code/block.json
+++ b/packages/block-library/src/code/block.json
@@ -14,7 +14,9 @@
 	},
 	"supports": {
 		"anchor": true,
-		"fontSize": true
+		"typography": {
+			"fontSize": true
+		}
 	},
 	"style": "wp-block-code"
 }
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index fbfd5408d36b88..69ec1ba3741a41 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -32,8 +32,11 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontWeight": true
+		},
 		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true
 	},
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index d1106c8fcdfbfc..278dbad0d0a688 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -37,7 +37,10 @@
 	"supports": {
 		"anchor": true,
 		"className": false,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"color": {
 			"gradients": true
 		},
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index 117ec3c60e1fe5..dfb40f7a066378 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -18,6 +18,8 @@
 	},
 	"supports": {
 		"className": true,
-		"fontSize": false
+		"typography": {
+			"fontSize": false
+		}
 	}
 }
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index d27fdc579ccd94..bb9a24dab353c4 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -63,14 +63,16 @@
 		"anchor": true,
 		"html": false,
 		"inserter": true,
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontStyle": true,
-		"__experimentalFontWeight": true,
-		"__experimentalTextTransform": true,
-		"color": true,
-		"__experimentalFontFamily": true,
-		"__experimentalTextDecoration": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalTextTransform": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true
+		},
+		"color": true
 	},
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index b10ea9eef980e0..d05e48a7bebe23 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -35,8 +35,10 @@
 		"color": {
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true
 	},
diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index 3eb4a201901849..13862e66042eaf 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -27,12 +27,14 @@
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
 		"html": false,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true
-		},
-		"lineHeight": true
+		}
 	},
 	"editorStyle": "wp-block-post-author-editor",
 	"style": "wp-block-post-author"
diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
index 8eb4071c228d84..90e7b30bedc6b9 100644
--- a/packages/block-library/src/post-comments-count/block.json
+++ b/packages/block-library/src/post-comments-count/block.json
@@ -16,7 +16,9 @@
 		"color": {
 			"gradients": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index 30b6997c61dcf3..f0e20a32841d82 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -17,8 +17,10 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	},
 	"style": "wp-block-post-comments-form"
 }
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
index bfba33ed2ff44d..cbabeda389c935 100644
--- a/packages/block-library/src/post-comments-link/block.json
+++ b/packages/block-library/src/post-comments-link/block.json
@@ -13,11 +13,13 @@
 	},
 	"supports": {
 		"html": false,
-		"fontSize": true,
 		"color": {
 			"link": true,
 			"text": false
 		},
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json
index d7156c7a4b0a58..4853bbf750ce1d 100644
--- a/packages/block-library/src/post-comments/block.json
+++ b/packages/block-library/src/post-comments/block.json
@@ -14,12 +14,14 @@
 	"supports": {
 		"html": false,
 		"align": [ "wide", "full" ],
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true
-		},
-		"lineHeight": true
+		}
 	},
 	"style": "wp-block-post-comments"
 }
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index dbd837a037343f..ca03fce4ad2a39 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -24,7 +24,9 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index bc654a1c2cf84b..26e2425d1a1cd4 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -24,12 +24,14 @@
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"html": false,
-		"fontSize": true,
 		"color": {
 			"gradients": true,
 			"link": true
 		},
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",
 	"style": "wp-block-post-excerpt"
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index 6aff9d449c0f99..1f9f61738eb599 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -16,11 +16,13 @@
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"html": false,
-		"fontSize": true,
 		"color": {
 			"gradients": true,
 			"link": true
 		},
-		"lineHeight": true
+		"typography": {
+			"lineHeight": true,
+			"fontSize": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 21c1c52537db86..803d1d5a1690f6 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -35,9 +35,11 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontFamily": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true
+		}
 	},
 	"style": "wp-block-post-title"
 }
diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index ece56338db0df7..6deb40540b6c0a 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -20,7 +20,9 @@
 		"color": {
 			"gradients": true
 		},
-		"fontSize": true
+		"typography": {
+			"fontSize": true
+		}
 	},
 	"style": "wp-block-preformatted"
 }
diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json
index d3f018907d9efb..afc69d6e14a3bd 100644
--- a/packages/block-library/src/query-pagination-next/block.json
+++ b/packages/block-library/src/query-pagination-next/block.json
@@ -19,7 +19,9 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json
index ace5b5fbf32afc..78a53867d0b7a5 100644
--- a/packages/block-library/src/query-pagination-previous/block.json
+++ b/packages/block-library/src/query-pagination-previous/block.json
@@ -19,7 +19,9 @@
 			"gradients": true,
 			"link": true
 		},
-		"fontSize": true,
-		"lineHeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index a78e9b77a58c79..3e5d43fc50846d 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -23,9 +23,11 @@
 		"color": {
 			"gradients": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontFamily": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true
+		}
 	},
 	"editorStyle": "wp-block-query-title-editor"
 }
diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
index d85e68f3e1d0b6..d18b9517241349 100644
--- a/packages/block-library/src/site-tagline/block.json
+++ b/packages/block-library/src/site-tagline/block.json
@@ -20,9 +20,11 @@
 			"margin": true,
 			"padding": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontFamily": true,
-		"__experimentalTextTransform": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true
+		}
 	}
 }
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
index 26ee7c601f107b..3e16e62071a32e 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -26,11 +26,13 @@
 			"padding": true,
 			"margin": true
 		},
-		"fontSize": true,
-		"lineHeight": true,
-		"__experimentalFontFamily": true,
-		"__experimentalTextTransform": true,
-		"__experimentalFontStyle": true,
-		"__experimentalFontWeight": true
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true
+		}
 	}
 }
diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json
index ea15d18ab6534c..e54b59978a395f 100644
--- a/packages/block-library/src/term-description/block.json
+++ b/packages/block-library/src/term-description/block.json
@@ -13,10 +13,12 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"fontSize": true,
-		"lineHeight": true,
 		"color": {
 			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
 		}
 	},
 	"editorStyle": "wp-block-term-description-editor"
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index 5e86c1518083d5..ec080e7c1ed13c 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -25,8 +25,10 @@
 			"gradients": true,
 			"link": true
 		},
-		"__experimentalFontFamily": true,
-		"fontSize": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
 		"spacing": {
 			"padding": true
 		}
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 33c017933ad76c..f21ea3138a62ee 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -52,23 +52,23 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	fontFamily: {
 		value: [ 'typography', 'fontFamily' ],
-		support: [ '__experimentalFontFamily' ],
+		support: [ 'typography', '__experimentalFontFamily' ],
 	},
 	fontSize: {
 		value: [ 'typography', 'fontSize' ],
-		support: [ 'fontSize' ],
+		support: [ 'typography', 'fontSize' ],
 	},
 	fontStyle: {
 		value: [ 'typography', 'fontStyle' ],
-		support: [ '__experimentalFontStyle' ],
+		support: [ 'typography', '__experimentalFontStyle' ],
 	},
 	fontWeight: {
 		value: [ 'typography', 'fontWeight' ],
-		support: [ '__experimentalFontWeight' ],
+		support: [ 'typography', '__experimentalFontWeight' ],
 	},
 	lineHeight: {
 		value: [ 'typography', 'lineHeight' ],
-		support: [ 'lineHeight' ],
+		support: [ 'typography', 'lineHeight' ],
 	},
 	margin: {
 		value: [ 'spacing', 'margin' ],
@@ -82,11 +82,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
-		support: [ '__experimentalTextDecoration' ],
+		support: [ 'typography', '__experimentalTextDecoration' ],
 	},
 	textTransform: {
 		value: [ 'typography', 'textTransform' ],
-		support: [ '__experimentalTextTransform' ],
+		support: [ 'typography', '__experimentalTextTransform' ],
 	},
 };
 

From fcf8da886970cc25695918d21c90cf6a397f2a1c Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 4 Jun 2021 11:18:41 +0300
Subject: [PATCH 18/25] Fix site-logo not getting removed on remove_theme_mod
 (#32370)

* change site-logo sync hook

* Don't pollute the global variables

Co-authored-by: Weston Ruter <westonruter@google.com>

* cs

* Hook in setup_theme

Co-authored-by: Weston Ruter <westonruter@google.com>
---
 .../block-library/src/site-logo/index.php     | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 46af15ad6dbc66..44d63505cc4ffb 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -111,24 +111,35 @@ function _override_custom_logo_theme_mod( $custom_logo ) {
 /**
  * Updates the site_logo option when the custom_logo theme-mod gets updated.
  *
- * @param string $custom_logo The custom logo set by a theme.
+ * This function is hooked on "update_option_theme_mods_$theme" and not
+ * "pre_set_theme_mod_custom_logo" because by hooking in `update_option`
+ * the function accounts for remove_theme_mod() as well.
  *
- * @return string The custom logo.
+ * @param mixed $old_value The old option value.
+ * @param mixed $value     The new option value.
  */
-function _sync_custom_logo_to_site_logo( $custom_logo ) {
+function _sync_custom_logo_to_site_logo( $old_value, $value ) {
 	// Delete the option when the custom logo does not exist or was removed.
 	// This step ensures the option stays in sync.
-	if ( empty( $custom_logo ) ) {
+	if ( empty( $value['custom_logo'] ) ) {
 		delete_option( 'site_logo' );
 	} else {
 		remove_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo' );
-		update_option( 'site_logo', $custom_logo );
+		update_option( 'site_logo', $value['custom_logo'] );
 		add_action( 'update_option_site_logo', '_sync_site_logo_to_custom_logo', 10, 2 );
 	}
-	return $custom_logo;
 }
 
-add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
+/**
+ * Hooks `_sync_custom_logo_to_site_logo` in `update_option_theme_mods_$theme`.
+ *
+ * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer.
+ */
+function _sync_custom_logo_to_site_logo_on_setup_theme() {
+	$theme = get_option( 'stylesheet' );
+	add_action( "update_option_theme_mods_$theme", '_sync_custom_logo_to_site_logo', 10, 2 );
+}
+add_action( 'setup_theme', '_sync_custom_logo_to_site_logo_on_setup_theme', 11 );
 
 /**
  * Updates the custom_logo theme-mod when the site_logo option gets updated.

From 7fbf2b4a025a05110cf3d720f6f2ca31a0079b09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <nosolosw@users.noreply.github.com>
Date: Fri, 4 Jun 2021 12:13:30 +0200
Subject: [PATCH 19/25] Make syntax errors in `theme.json` visible to users
 (#32404)

---
 lib/class-wp-theme-json-resolver-gutenberg.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index 987f3e5400fc26..bcdedda86f30b7 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -74,7 +74,7 @@ private static function read_json_file( $file_path ) {
 
 			$json_decoding_error = json_last_error();
 			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				error_log( 'Error when decoding file schema: ' . json_last_error_msg() );
+				trigger_error( "Error when decoding a theme.json schema at path $file_path " . json_last_error_msg() );
 				return $config;
 			}
 
@@ -367,7 +367,7 @@ public static function get_user_data() {
 
 			$json_decoding_error = json_last_error();
 			if ( JSON_ERROR_NONE !== $json_decoding_error ) {
-				error_log( 'Error when decoding user schema: ' . json_last_error_msg() );
+				trigger_error( 'Error when decoding a theme.json schema for user data. ' . json_last_error_msg() );
 				return new WP_Theme_JSON_Gutenberg( $config );
 			}
 

From 3ada8719b09f5468db19379aec5616d0751a7319 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Fri, 4 Jun 2021 14:50:17 +0100
Subject: [PATCH 20/25] Update: Skip typography serialization (#32444)

---
 lib/block-supports/typography.php             |  8 +++----
 packages/block-editor/src/hooks/font-size.js  |  7 ++++--
 packages/block-editor/src/hooks/style.js      | 23 +++++++------------
 packages/block-editor/src/hooks/typography.js |  1 +
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 35c97490946485..cbec13e959c98d 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -85,13 +85,11 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
-	$skip_font_size_support_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipFontSizeSerialization' ), false );
-
-	// Covers all typography features _except_ font size.
-	$skip_typography_serialization = _wp_array_get( $block_type->supports, array( '__experimentalSkipTypographySerialization' ), false );
+	// Covers all typography features.
+	$skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false );
 
 	// Font Size.
-	if ( $has_font_size_support && ! $skip_font_size_support_serialization ) {
+	if ( $has_font_size_support && ! $skip_typography_serialization ) {
 		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
 		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
 
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 498ea20769fac0..e678f31abd48cf 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -58,7 +58,10 @@ function addSaveProps( props, blockType, attributes ) {
 	}
 
 	if (
-		hasBlockSupport( blockType, '__experimentalSkipFontSizeSerialization' )
+		hasBlockSupport(
+			blockType,
+			'typography.__experimentalSkipSerialization'
+		)
 	) {
 		return props;
 	}
@@ -182,7 +185,7 @@ const withFontSizeInlineStyles = createHigherOrderComponent(
 			! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||
 			hasBlockSupport(
 				blockName,
-				'__experimentalSkipFontSizeSerialization'
+				'typography.__experimentalSkipSerialization'
 			) ||
 			! fontSize ||
 			style?.typography?.fontSize
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index e05f32c88bd132..bb029d8723519d 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -3,18 +3,15 @@
  */
 import {
 	capitalize,
-	find,
 	first,
 	forEach,
 	get,
 	has,
 	isEmpty,
-	isEqual,
 	kebabCase,
 	map,
 	omit,
 	startsWith,
-	without,
 } from 'lodash';
 import classnames from 'classnames';
 
@@ -35,8 +32,11 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
  */
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
-import { FONT_SIZE_SUPPORT_KEY } from './font-size';
-import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography';
+import {
+	TypographyPanel,
+	TYPOGRAPHY_SUPPORT_KEY,
+	TYPOGRAPHY_SUPPORT_KEYS,
+} from './typography';
 import { SPACING_SUPPORT_KEY, SpacingPanel } from './spacing';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 
@@ -140,16 +140,9 @@ const skipSerializationPaths = {
 	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		COLOR_SUPPORT_KEY,
 	],
-	[ `__experimentalSkipFontSizeSerialization` ]: [ 'typography', 'fontSize' ],
-	[ `__experimentalSkipTypographySerialization` ]: without(
-		TYPOGRAPHY_SUPPORT_KEYS,
-		FONT_SIZE_SUPPORT_KEY
-	).map(
-		( feature ) =>
-			find( STYLE_PROPERTY, ( property ) =>
-				isEqual( property.support, [ feature ] )
-			)?.value
-	),
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		TYPOGRAPHY_SUPPORT_KEY,
+	],
 };
 
 /**
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 5edc061a0220f4..00e0e362b03839 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -48,6 +48,7 @@ import {
 	useIsTextTransformDisabled,
 } from './text-transform';
 
+export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,

From b978190ecbc5e037008f2886cbf245306ba20d98 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 7 Jun 2021 10:01:53 +0100
Subject: [PATCH 21/25] Fix alligned blocks (#32454)

---
 packages/block-editor/src/components/block-list/block.js    | 1 +
 .../src/components/block-list/use-block-props/index.js      | 6 ++++--
 packages/block-editor/src/utils/dom.js                      | 4 +---
 packages/block-library/src/navigation/edit.js               | 5 +++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 0923dcb99adcc0..d06c286e430f50 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -161,6 +161,7 @@ function BlockListBlock( {
 		clientId,
 		className,
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
+		isAligned,
 	};
 	const memoizedValue = useMemo( () => value, Object.values( value ) );
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index bbffe084d575c7..4c4c5a6612ad9e 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -58,7 +58,7 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * @return {Object} Props to pass to the element to mark as a block.
  */
 export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
-	const { clientId, className, wrapperProps = {} } = useContext(
+	const { clientId, className, wrapperProps = {}, isAligned } = useContext(
 		BlockListBlockContext
 	);
 	const {
@@ -141,7 +141,9 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-title': blockTitle,
 		className: classnames(
 			// The wp-block className is important for editor styles.
-			'wp-block block-editor-block-list__block',
+			classnames( 'block-editor-block-list__block', {
+				'wp-block': ! isAligned,
+			} ),
 			className,
 			props.className,
 			wrapperProps.className,
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 3a6db1685aebb1..4416f8eb4861e8 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -1,6 +1,4 @@
-// Consider the block appender to be a child block of its own, which also has
-// this class.
-const BLOCK_SELECTOR = '.wp-block';
+const BLOCK_SELECTOR = '.block-editor-block-list__block';
 
 /**
  * Returns true if two elements are contained within the same block.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 99adf28132389b..4d1be5cfa700b9 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -196,10 +196,15 @@ export default compose( [
 		const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
 			selectedBlockId,
 		] )?.length;
+
 		return {
 			isImmediateParentOfSelectedBlock,
 			selectedBlockHasDescendants,
 			hasExistingNavItems: !! innerBlocks.length,
+
+			// This prop is already available but computing it here ensures it's
+			// fresh compared to isImmediateParentOfSelectedBlock
+			isSelected: selectedBlockId === clientId,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientId } ) => {

From 09339db0b741101762bd30872b8a46eb9ae0e416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <nosolosw@users.noreply.github.com>
Date: Fri, 4 Jun 2021 19:29:14 +0200
Subject: [PATCH 22/25] Letter spacing should also respect skip serialization
 flag (#32459)

---
 lib/block-supports/typography.php | 42 ++++++++++++-------------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index cbec13e959c98d..8129d96bb7e132 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -68,15 +68,20 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
-	$attributes = array();
-	$classes    = array();
-	$styles     = array();
-
 	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
 	if ( ! $typography_supports ) {
 		return array();
 	}
 
+	$skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false );
+	if ( $skip_typography_serialization ) {
+		return array();
+	}
+
+	$attributes = array();
+	$classes    = array();
+	$styles     = array();
+
 	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
 	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
 	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
@@ -85,15 +90,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
-	// Covers all typography features.
-	$skip_typography_serialization = _wp_array_get( $typography_supports, array( '__experimentalSkipSerialization' ), false );
-
-	// Font Size.
-	if ( $has_font_size_support && ! $skip_typography_serialization ) {
+	if ( $has_font_size_support ) {
 		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
 		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
 
-		// Apply required class or style.
 		if ( $has_named_font_size ) {
 			$classes[] = sprintf( 'has-%s-font-size', $block_attributes['fontSize'] );
 		} elseif ( $has_custom_font_size ) {
@@ -101,10 +101,8 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		}
 	}
 
-	// Font Family.
-	if ( $has_font_family_support && ! $skip_typography_serialization ) {
+	if ( $has_font_family_support ) {
 		$has_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );
-		// Apply required class and style.
 		if ( $has_font_family ) {
 			$font_family = $block_attributes['style']['typography']['fontFamily'];
 			if ( strpos( $font_family, 'var:preset|font-family' ) !== false ) {
@@ -118,43 +116,35 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		}
 	}
 
-	// Font style.
-	if ( $has_font_style_support && ! $skip_typography_serialization ) {
-		// Apply font style.
+	if ( $has_font_style_support ) {
 		$font_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
 		if ( $font_style ) {
 			$styles[] = $font_style;
 		}
 	}
 
-	// Font weight.
-	if ( $has_font_weight_support && ! $skip_typography_serialization ) {
-		// Apply font weight.
+	if ( $has_font_weight_support ) {
 		$font_weight = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
 		if ( $font_weight ) {
 			$styles[] = $font_weight;
 		}
 	}
 
-	// Line Height.
-	if ( $has_line_height_support && ! $skip_typography_serialization ) {
+	if ( $has_line_height_support ) {
 		$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
-		// Add the style (no classes for line-height).
 		if ( $has_line_height ) {
 			$styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
 		}
 	}
 
-	// Text Decoration.
-	if ( $has_text_decoration_support && ! $skip_typography_serialization ) {
+	if ( $has_text_decoration_support ) {
 		$text_decoration_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
 		if ( $text_decoration_style ) {
 			$styles[] = $text_decoration_style;
 		}
 	}
 
-	// Text Transform.
-	if ( $has_text_transform_support && ! $skip_typography_serialization ) {
+	if ( $has_text_transform_support ) {
 		$text_transform_style = gutenberg_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
 		if ( $text_transform_style ) {
 			$styles[] = $text_transform_style;

From 61ce1f49947ba1a6f126b02d5d99067de22e2b85 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 3 Jun 2021 16:42:11 +0400
Subject: [PATCH 23/25] Fix block toolbar overlap with header (#32424)

---
 packages/block-editor/src/components/block-tools/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 35f8a4f12dcb56..e511a41fabe92c 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -115,6 +115,7 @@
 
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
+	display: inline-flex;
 	border: $border-width solid $gray-900;
 	border-radius: $radius-block-ui;
 	background-color: $white;

From 476b88fc72560c76e70c6a1beb9c8da186fe4373 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Mon, 7 Jun 2021 19:03:09 +0900
Subject: [PATCH 24/25] Fixed loss of list content when switching list types.
 (#32432)

* add `value` to dependencies

* Add the variables used in setRecordFromProps to dependencies.

* use _value.current  instead of value

* revert change

* add tagName to __unstableDependencies

* add e2e test.

* format

* fix snapshot
---
 .../src/components/rich-text/index.js         |  2 +-
 .../blocks/__snapshots__/list.test.js.snap    |  4 +++
 .../specs/editor/blocks/list.test.js          | 32 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 37104129aaf6ef..b7770120e0afef 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -229,7 +229,7 @@ function RichTextWrapper(
 		__unstableMultilineTag: multilineTag,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
-		__unstableDependencies: dependencies,
+		__unstableDependencies: [ ...dependencies, tagName ],
 		__unstableAfterParse: addEditorOnlyFormats,
 		__unstableBeforeSerialize: removeEditorOnlyFormats,
 		__unstableAddInvisibleFormats: addInvisibleFormats,
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/list.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/list.test.js.snap
index c2421bc8c80e2f..a07d125536586f 100644
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/list.test.js.snap
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/list.test.js.snap
@@ -200,6 +200,10 @@ exports[`List should insert a line break on shift+enter in a non trailing list i
 <!-- /wp:list -->"
 `;
 
+exports[`List should not change the contents when you change the list type to Unordered 1`] = `"<li>a</li><li>b</li><li>c</li>"`;
+
+exports[`List should not change the contents when you change the list type to Ordered 1`] = `"<li>1</li><li>2</li><li>3</li>"`;
+
 exports[`List should not indent list on space with modifier 1`] = `
 "<!-- wp:list -->
 <ul><li>1</li><li> </li></ul>
diff --git a/packages/e2e-tests/specs/editor/blocks/list.test.js b/packages/e2e-tests/specs/editor/blocks/list.test.js
index ddc115e2195c45..b75f79bb7af532 100644
--- a/packages/e2e-tests/specs/editor/blocks/list.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/list.test.js
@@ -507,4 +507,36 @@ describe( 'List', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should not change the contents when you change the list type to Ordered', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '* 1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+		await clickBlockToolbarButton( 'Ordered' );
+
+		const content = await page.$eval(
+			'.wp-block-list',
+			( el ) => el.innerHTML
+		);
+		expect( content ).toMatchSnapshot();
+	} );
+
+	it( 'should not change the contents when you change the list type to Unordered', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1. a' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'b' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'c' );
+		await clickBlockToolbarButton( 'Unordered' );
+
+		const content = await page.$eval(
+			'.wp-block-list',
+			( el ) => el.innerHTML
+		);
+		expect( content ).toMatchSnapshot();
+	} );
 } );

From 9117c0cc2d56ca5637616274adf9cebef4bee758 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 7 Jun 2021 12:07:53 +0100
Subject: [PATCH 25/25] Avoid keeping the same client ID when transforming
 blocks (#32453)

* Avoid keeping the same client ID when transforming blocks

* Fix unit tests
---
 packages/blocks/src/api/factory.js      | 22 +++++++---------------
 packages/blocks/src/api/test/factory.js |  4 ----
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
index f01edef37f4f48..a0fab5c32cd39c 100644
--- a/packages/blocks/src/api/factory.js
+++ b/packages/blocks/src/api/factory.js
@@ -5,7 +5,7 @@ import { v4 as uuid } from 'uuid';
 import {
 	every,
 	castArray,
-	findIndex,
+	some,
 	isObjectLike,
 	filter,
 	first,
@@ -538,28 +538,18 @@ export function switchToBlockType( blocks, name ) {
 		return null;
 	}
 
-	const firstSwitchedBlock = findIndex(
+	const hasSwitchedBlock = some(
 		transformationResults,
 		( result ) => result.name === name
 	);
 
 	// Ensure that at least one block object returned by the transformation has
 	// the expected "destination" block type.
-	if ( firstSwitchedBlock < 0 ) {
+	if ( ! hasSwitchedBlock ) {
 		return null;
 	}
 
-	return transformationResults.map( ( result, index ) => {
-		const transformedBlock = {
-			...result,
-			// The first transformed block whose type matches the "destination"
-			// type gets to keep the existing client ID of the first block.
-			clientId:
-				index === firstSwitchedBlock
-					? firstBlock.clientId
-					: result.clientId,
-		};
-
+	const ret = transformationResults.map( ( result ) => {
 		/**
 		 * Filters an individual transform result from block transformation.
 		 * All of the original blocks are passed, since transformations are
@@ -570,10 +560,12 @@ export function switchToBlockType( blocks, name ) {
 		 */
 		return applyFilters(
 			'blocks.switchToBlockType.transformedBlock',
-			transformedBlock,
+			result,
 			blocks
 		);
 	} );
+
+	return ret;
 }
 
 /**
diff --git a/packages/blocks/src/api/test/factory.js b/packages/blocks/src/api/test/factory.js
index a840f65135cc61..fc38d753e997b6 100644
--- a/packages/blocks/src/api/test/factory.js
+++ b/packages/blocks/src/api/test/factory.js
@@ -1537,15 +1537,11 @@ describe( 'block factory', () => {
 			// to keep the existing block's client ID.
 			expect( transformedBlocks ).toHaveLength( 2 );
 			expect( transformedBlocks[ 0 ] ).toHaveProperty( 'clientId' );
-			expect( transformedBlocks[ 0 ].clientId ).not.toBe(
-				block.clientId
-			);
 			expect( transformedBlocks[ 0 ].name ).toBe( 'core/text-block' );
 			expect( transformedBlocks[ 0 ].isValid ).toBe( true );
 			expect( transformedBlocks[ 0 ].attributes ).toEqual( {
 				value: 'chicken ribs',
 			} );
-			expect( transformedBlocks[ 1 ].clientId ).toBe( block.clientId );
 			expect( transformedBlocks[ 1 ] ).toHaveProperty( 'clientId' );
 			expect( transformedBlocks[ 1 ].name ).toBe(
 				'core/updated-text-block'