From cca1f55f048f027df49f0c08e757e73f73a54193 Mon Sep 17 00:00:00 2001
From: Seth Miller <seth@flexperception.com>
Date: Mon, 15 Apr 2024 04:41:53 -0400
Subject: [PATCH 01/35] Combobox: Add links to related components (#60726)

Co-authored-by: flexseth <flexseth@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/components/src/combobox-control/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 9b64076be32402..b84e01b7d6a077 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -110,8 +110,8 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 
 ## Related components
 
--   Like this component, but without a search input, the `CustomSelectControl` component.
+-   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.
 
--   To select one option from a set, when you want to show all the available options at once, use the `Radio` component.
--   To select one or more items from a set, use the `CheckboxControl` component.
--   To toggle a single setting on or off, use the `ToggleControl` component.
+-   To select one option from a set, when you want to show all the available options at once, use the [`RadioControl`](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/) component.
+-   To select one or more items from a set, use the [`CheckboxControl`](https://developer.wordpress.org/block-editor/reference-guides/components/checkbox-control/) component.
+-   To toggle a single setting on or off, use the [`ToggleControl`](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/) component.

From d9a6429054e8bf0fa930c921472b4c3109ed2012 Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+sunil25393@users.noreply.github.com>
Date: Mon, 15 Apr 2024 18:59:27 +0530
Subject: [PATCH 02/35] Add loading state on image upload in featured image,
 Site logo and Cover blocks (#59519)

Co-authored-by: sunil25393 <sunil25393@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 packages/block-library/src/cover/editor.scss  | 15 +++-
 .../src/post-featured-image/edit.js           | 66 ++++++++++-----
 .../src/post-featured-image/editor.scss       | 17 ++++
 packages/block-library/src/site-logo/edit.js  | 82 +++++++++++--------
 .../block-library/src/site-logo/editor.scss   | 21 ++++-
 5 files changed, 139 insertions(+), 62 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 4e2a07ffe8e4ee..6aa10657ec6f2e 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -30,9 +30,18 @@
 	}
 
 	// Applied while media is being uploaded
-	&.is-transient::before {
-		background-color: #fff;
-		opacity: 0.3;
+	&.is-transient {
+		position: relative;
+
+		&::before {
+			background-color: #fff;
+			content: "";
+			height: 100%;
+			opacity: 0.3;
+			position: absolute;
+			width: 100%;
+			z-index: 1;
+		}
 	}
 
 	// Shown while media is being uploaded
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index d1d03c0d4b52a1..25133a2babcfc0 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -14,6 +15,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Button,
+	Spinner,
 	TextControl,
 } from '@wordpress/components';
 import {
@@ -27,7 +29,7 @@ import {
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -70,6 +72,7 @@ export default function PostFeaturedImageEdit( {
 		linkTarget,
 		useFirstImageFromPost,
 	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
 		'postType',
@@ -144,6 +147,9 @@ export default function PostFeaturedImageEdit( {
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
+		className: classnames( {
+			'is-transient': temporaryURL,
+		} ),
 	} );
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
@@ -173,11 +179,23 @@ export default function PostFeaturedImageEdit( {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
+
+		if ( value?.url && isBlobURL( value.url ) ) {
+			setTemporaryURL( value.url );
+		}
 	};
 
+	// Reset temporary url when media is available.
+	useEffect( () => {
+		if ( mediaUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ mediaUrl, temporaryURL ] );
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const controls = blockEditingMode === 'default' && (
@@ -241,7 +259,7 @@ export default function PostFeaturedImageEdit( {
 	/**
 	 * A Post Featured Image block should not have image replacement
 	 * or upload options in the following cases:
-	 * - Is placed in a Query Loop. This is a consious decision to
+	 * - Is placed in a Query Loop. This is a conscious decision to
 	 * prevent content editing of different posts in Query Loop, and
 	 * this could change in the future.
 	 * - Is in a context where it does not have a postId (for example
@@ -289,7 +307,7 @@ export default function PostFeaturedImageEdit( {
 	 * - It has no image assigned yet
 	 * Then display the placeholder with the image upload option.
 	 */
-	if ( ! featuredImage ) {
+	if ( ! featuredImage && ! temporaryURL ) {
 		image = (
 			<MediaPlaceholder
 				onSelect={ onSelectImage }
@@ -315,24 +333,28 @@ export default function PostFeaturedImageEdit( {
 		);
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
-		image = ! media ? (
-			placeholder()
-		) : (
-			<img
-				className={ borderProps.className }
-				src={ mediaUrl }
-				alt={
-					media.alt_text
-						? sprintf(
-								// translators: %s: The image's alt text.
-								__( 'Featured image: %s' ),
-								media.alt_text
-						  )
-						: __( 'Featured image' )
-				}
-				style={ imageStyles }
-			/>
-		);
+		image =
+			! media && ! temporaryURL ? (
+				placeholder()
+			) : (
+				<>
+					<img
+						className={ borderProps.className }
+						src={ temporaryURL || mediaUrl }
+						alt={
+							media && media?.alt_text
+								? sprintf(
+										// translators: %s: The image's alt text.
+										__( 'Featured image: %s' ),
+										media.alt_text
+								  )
+								: __( 'Featured image' )
+						}
+						style={ imageStyles }
+					/>
+					{ temporaryURL && <Spinner /> }
+				</>
+			);
 	}
 
 	/**
@@ -343,7 +365,7 @@ export default function PostFeaturedImageEdit( {
 	 */
 	return (
 		<>
-			{ controls }
+			{ ! temporaryURL && controls }
 			{ !! media && ! isDescendentOfQueryLoop && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index cf532100da4e00..a7f46e4c0a4ba9 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -115,6 +115,23 @@
 			pointer-events: auto;
 		}
 	}
+
+	// When image being uploaded.
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Show spinner while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index fc4bcae2d2b0f3..af7ae6f7a8f120 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -73,9 +73,7 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( 'custom-logo-link', {
-		'is-transient': isBlobURL( logoUrl ),
-	} );
+	const classes = classnames( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -113,17 +111,20 @@ const SiteLogo = ( {
 	}
 
 	const img = (
-		<img
-			className="custom-logo"
-			src={ logoUrl }
-			alt={ alt }
-			onLoad={ ( event ) => {
-				setNaturalSize( {
-					naturalWidth: event.target.naturalWidth,
-					naturalHeight: event.target.naturalHeight,
-				} );
-			} }
-		/>
+		<>
+			<img
+				className="custom-logo"
+				src={ logoUrl }
+				alt={ alt }
+				onLoad={ ( event ) => {
+					setNaturalSize( {
+						naturalWidth: event.target.naturalWidth,
+						naturalHeight: event.target.naturalHeight,
+					} );
+				} }
+			/>
+			{ isBlobURL( logoUrl ) && <Spinner /> }
+		</>
 	);
 
 	let imgWrapper = img;
@@ -434,6 +435,7 @@ export default function LogoEdit( {
 		};
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -480,6 +482,7 @@ export default function LogoEdit( {
 
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
+			setTemporaryURL( media.url );
 			setLogo( undefined );
 			return;
 		}
@@ -495,6 +498,7 @@ export default function LogoEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const onFilesDrop = ( filesList ) => {
@@ -503,6 +507,7 @@ export default function LogoEdit( {
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
+					setTemporaryURL( image.url );
 					return;
 				}
 				onInitialSelectLogo( image );
@@ -517,7 +522,7 @@ export default function LogoEdit( {
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && (
+	const controls = canUserEdit && logoUrl && ! temporaryURL && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -528,22 +533,32 @@ export default function LogoEdit( {
 	if ( isLoading ) {
 		logoImage = <Spinner />;
 	}
-	if ( !! logoUrl ) {
+
+	// Reset temporary url when logoUrl is available.
+	useEffect( () => {
+		if ( logoUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ logoUrl, temporaryURL ] );
+
+	if ( !! logoUrl || !! temporaryURL ) {
 		logoImage = (
-			<SiteLogo
-				alt={ alt }
-				attributes={ attributes }
-				className={ className }
-				isSelected={ isSelected }
-				setAttributes={ setAttributes }
-				logoUrl={ logoUrl }
-				setLogo={ setLogo }
-				logoId={ mediaItemData?.id || siteLogoId }
-				siteUrl={ url }
-				setIcon={ setIcon }
-				iconId={ siteIconId }
-				canUserEdit={ canUserEdit }
-			/>
+			<>
+				<SiteLogo
+					alt={ alt }
+					attributes={ attributes }
+					className={ className }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+					logoUrl={ temporaryURL || logoUrl }
+					setLogo={ setLogo }
+					logoId={ mediaItemData?.id || siteLogoId }
+					siteUrl={ url }
+					setIcon={ setIcon }
+					iconId={ siteIconId }
+					canUserEdit={ canUserEdit }
+				/>
+			</>
 		);
 	}
 	const placeholder = ( content ) => {
@@ -568,6 +583,7 @@ export default function LogoEdit( {
 
 	const classes = classnames( className, {
 		'is-default-size': ! width,
+		'is-transient': temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( { className: classes } );
@@ -631,8 +647,8 @@ export default function LogoEdit( {
 		<div { ...blockProps }>
 			{ controls }
 			{ mediaInspectorPanel }
-			{ !! logoUrl && logoImage }
-			{ ! logoUrl && ! canUserEdit && (
+			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
+			{ ! temporaryURL && ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
 					{ !! isLoading && (
 						<span className="components-placeholder__preview">
@@ -641,7 +657,7 @@ export default function LogoEdit( {
 					) }
 				</Placeholder>
 			) }
-			{ ! logoUrl && canUserEdit && (
+			{ ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 71fc0bfaeca3f6..3395f01e3f4f78 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -17,10 +17,6 @@
 		&:focus {
 			box-shadow: none;
 		}
-
-		&.is-transient img {
-			opacity: 0.3;
-		}
 	}
 
 	img {
@@ -28,6 +24,23 @@
 		height: auto;
 		max-width: 100%;
 	}
+
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Shown while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			margin: 0;
+		}
+	}
 }
 
 // Provide special styling for the placeholder.

From 06b353778db9a11600a2f08898d52cd34ebb2edb Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 15 Apr 2024 09:44:03 -0400
Subject: [PATCH 03/35] Fix external link indicator in Link Control (#60439)

* Add display inline

* target the new span rather than the svg

* use clip

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
---
 .../src/components/link-control/style.scss           | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index e635dcf90632f0..91428274a99140 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -249,6 +249,7 @@ $block-editor-link-control-number-of-actions: 1;
 		border-radius: $radius-block-ui;
 		line-height: 1.1;
 
+
 		&:focus {
 			box-shadow: none;
 		}
@@ -268,8 +269,15 @@ $block-editor-link-control-number-of-actions: 1;
 			font-weight: normal;
 		}
 
-		svg {
-			display: none; // specifically requested to be removed visually as well.
+		.components-external-link__icon {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0); // specifically requested to be removed visually as well.
+			border: 0;
 		}
 	}
 }

From 2cebea7f2858287c800e79f50de7fcd5c4b7990c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 16 Apr 2024 01:31:13 +0900
Subject: [PATCH 04/35] DimensionControl: Fix story config (#60703)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/dimension-control/stories/index.story.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 0698125c446ca7..1220be3d4eea1f 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -29,10 +29,10 @@ export default {
 				mobile,
 			},
 		},
-		parameters: {
-			controls: { expanded: true },
-			docs: { canvas: { sourceState: 'shown' } },
-		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 } as Meta< typeof DimensionControl >;
 

From b06dbb940239d4e90afe5b1a34d0097b6e7e7b1d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 16 Apr 2024 01:34:54 +0900
Subject: [PATCH 05/35] Navigation: Soft deprecate component (#59182)

* Navigation: Soft deprecate component

* Set up redirect

* Add deprecation notice in Storybook

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                         | 4 ++++
 packages/components/src/navigation/README.md             | 4 ++++
 packages/components/src/navigation/back-button/index.tsx | 3 +++
 packages/components/src/navigation/group/index.tsx       | 3 +++
 packages/components/src/navigation/index.tsx             | 2 ++
 packages/components/src/navigation/item/index.tsx        | 3 +++
 packages/components/src/navigation/menu/index.tsx        | 3 +++
 .../components/src/navigation/stories/index.story.tsx    | 8 +++++++-
 storybook/manager-head.html                              | 9 +++++++++
 9 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 48827c815c5854..e2f363bbca8f66 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecation
+
+-   `Navigation`: Soft deprecate component ([#59182](https://github.com/WordPress/gutenberg/pull/59182)).
+
 ### Enhancements
 
 -   `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
index 3a1fa992611b62..b294eb78331eef 100644
--- a/packages/components/src/navigation/README.md
+++ b/packages/components/src/navigation/README.md
@@ -1,5 +1,9 @@
 # Navigation
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `Navigator` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
diff --git a/packages/components/src/navigation/back-button/index.tsx b/packages/components/src/navigation/back-button/index.tsx
index 182faa8773726d..f1fb79ae40d484 100644
--- a/packages/components/src/navigation/back-button/index.tsx
+++ b/packages/components/src/navigation/back-button/index.tsx
@@ -64,6 +64,9 @@ function UnforwardedNavigationBackButton(
 	);
 }
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export const NavigationBackButton = forwardRef(
 	UnforwardedNavigationBackButton
 );
diff --git a/packages/components/src/navigation/group/index.tsx b/packages/components/src/navigation/group/index.tsx
index cd91fb97365d26..60febcf7644569 100644
--- a/packages/components/src/navigation/group/index.tsx
+++ b/packages/components/src/navigation/group/index.tsx
@@ -19,6 +19,9 @@ import type { NavigationGroupProps } from '../types';
 
 let uniqueId = 0;
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationGroup( {
 	children,
 	className,
diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx
index dfc1b26cb33ad0..9ccd4f46e5f182 100644
--- a/packages/components/src/navigation/index.tsx
+++ b/packages/components/src/navigation/index.tsx
@@ -28,6 +28,8 @@ const noop = () => {};
 /**
  * Render a navigation list with optional groupings and hierarchy.
  *
+ * @deprecated Use `Navigator` instead.
+ *
  * ```jsx
  * import {
  *   __experimentalNavigation as Navigation,
diff --git a/packages/components/src/navigation/item/index.tsx b/packages/components/src/navigation/item/index.tsx
index 2fd1aebefcbbac..d234ed1a549b59 100644
--- a/packages/components/src/navigation/item/index.tsx
+++ b/packages/components/src/navigation/item/index.tsx
@@ -22,6 +22,9 @@ import type { NavigationItemProps } from '../types';
 
 const noop = () => {};
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationItem( props: NavigationItemProps ) {
 	const {
 		badge,
diff --git a/packages/components/src/navigation/menu/index.tsx b/packages/components/src/navigation/menu/index.tsx
index b001bd0fa0f3d8..8fcddf3faddb9e 100644
--- a/packages/components/src/navigation/menu/index.tsx
+++ b/packages/components/src/navigation/menu/index.tsx
@@ -23,6 +23,9 @@ import { MenuUI } from '../styles/navigation-styles';
 
 import type { NavigationMenuProps } from '../types';
 
+/**
+ * @deprecated Use `Navigator` instead.
+ */
 export function NavigationMenu( props: NavigationMenuProps ) {
 	const {
 		backButtonLabel,
diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx
index e0a3f1e1397576..2f09ace29f16e5 100644
--- a/packages/components/src/navigation/stories/index.story.tsx
+++ b/packages/components/src/navigation/stories/index.story.tsx
@@ -19,8 +19,14 @@ import { MoreExamplesStory } from './utils/more-examples';
 import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
+/**
+ * Render a navigation list with optional groupings and hierarchy.
+ *
+ * This component is deprecated. Consider using `Navigator` instead.
+ */
 const meta: Meta< typeof Navigation > = {
-	title: 'Components (Experimental)/Navigation',
+	title: 'Components (Deprecated)/Navigation',
+	id: 'components-navigation',
 	component: Navigation,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index 21ee902c02a36d..629f06bf98edf9 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -1,10 +1,19 @@
 <script>
 	( function redirectIfStoryMoved() {
+		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'navigation' ];
 		const REDIRECTS = [
 			{
 				from: /\/components-deprecated-/,
 				to: '/components-',
 			},
+			{
+				from: new RegExp(
+					`\/components-experimental-(?=${ PREVIOUSLY_EXPERIMENTAL_COMPONENTS.map(
+						( str ) => `${ str }\\b`
+					).join( '|' ) })`
+				),
+				to: '/components-',
+			},
 		];
 
 		const params = new URLSearchParams( window.location.search );

From a5882a2bebf1d7a90f5765421451f51c071733e6 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 15 Apr 2024 18:48:34 +0200
Subject: [PATCH 06/35] Update: Avoid two useSelect calls on PostActions.
 (#60752)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../editor/src/components/post-actions/index.js    | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
index 379231b0a9dff0..f32c90dd156c19 100644
--- a/packages/editor/src/components/post-actions/index.js
+++ b/packages/editor/src/components/post-actions/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState, Fragment, Children } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,24 +40,17 @@ const POST_ACTIONS_WHILE_EDITING = [
 ];
 
 export default function PostActions( { onActionPerformed } ) {
-	const { postType, postId } = useSelect( ( select ) => {
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+	const { postType, item } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPost } = select( editorStore );
 		return {
 			postType: getCurrentPostType(),
-			postId: getCurrentPostId(),
+			item: getCurrentPost(),
 		};
 	} );
 	const actions = usePostActions(
 		onActionPerformed,
 		POST_ACTIONS_WHILE_EDITING
 	);
-	const item = useSelect(
-		( select ) => {
-			const { getEditedEntityRecord } = select( coreStore );
-			return getEditedEntityRecord( 'postType', postType, postId );
-		},
-		[ postType, postId ]
-	);
 
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(

From ee773ce1bdee16b2f1a544efb3d4abc82dd17403 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 15 Apr 2024 19:04:10 +0200
Subject: [PATCH 07/35] Fix: Missing items parameter and or missing
 onActionPerformed calls. (#60753)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 packages/editor/src/components/post-actions/actions.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 8dded54a6a7564..a6ff1f77486c99 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -428,7 +428,7 @@ const renamePostAction = {
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	RenderModal: ( { items, closeModal } ) => {
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
 		const originalTitle = decodeEntities(
 			typeof item.title === 'string' ? item.title : item.title.rendered
@@ -455,6 +455,7 @@ const renamePostAction = {
 				createSuccessNotice( __( 'Name updated' ), {
 					type: 'snackbar',
 				} );
+				onActionPerformed?.( items );
 			} catch ( error ) {
 				const errorMessage =
 					error.message && error.code !== 'unknown_error'
@@ -582,7 +583,7 @@ const resetTemplateAction = {
 						variant="primary"
 						onClick={ async () => {
 							await onConfirm( items );
-							onActionPerformed?.();
+							onActionPerformed?.( items );
 							closeModal();
 						} }
 					>
@@ -650,7 +651,7 @@ const deleteTemplateAction = {
 							await removeTemplates( templates, {
 								allowUndo: false,
 							} );
-							onActionPerformed?.();
+							onActionPerformed?.( templates );
 							closeModal();
 						} }
 					>
@@ -676,7 +677,7 @@ const renameTemplateAction = {
 		}
 		return true;
 	},
-	RenderModal: ( { items: templates, closeModal } ) => {
+	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
 		const template = templates[ 0 ];
 		const title = decodeEntities( template.title.rendered );
 		const [ editedTitle, setEditedTitle ] = useState( title );
@@ -718,6 +719,7 @@ const renameTemplateAction = {
 						type: 'snackbar',
 					}
 				);
+				onActionPerformed?.( templates );
 			} catch ( error ) {
 				const fallbackErrorMessage =
 					template.type === TEMPLATE_POST_TYPE

From 0469173a4876818ce5a47e7bf8d05d9d61a5a34e Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 15 Apr 2024 14:32:55 -0400
Subject: [PATCH 08/35] Layout: Apply negative margin to full child blocks of
 custom padding (#60716)

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
---
 lib/block-supports/layout.php | 48 +++++++++++++++++------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 2403583c66156b..554a88b4eeec3f 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -292,32 +292,32 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					'declarations' => array( 'max-width' => 'none' ),
 				)
 			);
+		}
 
-			if ( isset( $block_spacing ) ) {
-				$block_spacing_values = gutenberg_style_engine_get_styles(
-					array(
-						'spacing' => $block_spacing,
-					)
-				);
+		if ( isset( $block_spacing ) ) {
+			$block_spacing_values = gutenberg_style_engine_get_styles(
+				array(
+					'spacing' => $block_spacing,
+				)
+			);
 
-				/*
-				 * Handle negative margins for alignfull children of blocks with custom padding set.
-				 * They're added separately because padding might only be set on one side.
-				 */
-				if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
-					$padding_right   = $block_spacing_values['declarations']['padding-right'];
-					$layout_styles[] = array(
-						'selector'     => "$selector > .alignfull",
-						'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
-					);
-				}
-				if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
-					$padding_left    = $block_spacing_values['declarations']['padding-left'];
-					$layout_styles[] = array(
-						'selector'     => "$selector > .alignfull",
-						'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
-					);
-				}
+			/*
+			 * Handle negative margins for alignfull children of blocks with custom padding set.
+			 * They're added separately because padding might only be set on one side.
+			 */
+			if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
+				$padding_right   = $block_spacing_values['declarations']['padding-right'];
+				$layout_styles[] = array(
+					'selector'     => "$selector > .alignfull",
+					'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
+				);
+			}
+			if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
+				$padding_left    = $block_spacing_values['declarations']['padding-left'];
+				$layout_styles[] = array(
+					'selector'     => "$selector > .alignfull",
+					'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
+				);
 			}
 		}
 

From 0926d979b3c2dfe320b674dece4b2b0905bcc261 Mon Sep 17 00:00:00 2001
From: Shail Mehta <shailmehta25@gmail.com>
Date: Tue, 16 Apr 2024 02:13:31 +0530
Subject: [PATCH 09/35] Added @return after @global in php doc (#60611)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 lib/global-styles-and-settings.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php
index 9419ae4a716b98..70b3f7078e62ac 100644
--- a/lib/global-styles-and-settings.php
+++ b/lib/global-styles-and-settings.php
@@ -207,7 +207,7 @@ function gutenberg_get_global_styles_base_custom_css() {
  *
  * @since 6.6.0
  *
- *  @global WP_Styles $wp_styles
+ * @global WP_Styles $wp_styles
  */
 function gutenberg_add_global_styles_block_custom_css() {
 	global $wp_styles;
@@ -247,9 +247,9 @@ function gutenberg_add_global_styles_block_custom_css() {
 /**
  * Adds global style rules to the inline style for each block.
  *
- * @return void
- *
  * @global WP_Styles $wp_styles
+ *
+ * @return void
  */
 function gutenberg_add_global_styles_for_blocks() {
 	global $wp_styles;

From 22426139cb3335ad1d1c30d45665497ad43ed4a1 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:37:49 +1000
Subject: [PATCH 10/35] Global styles: background UI control labels (#60264)

* Trying to change the header labels for background
- Background > Background image
- Using the title/url of the current image in the media uploader component

* Simplify copy

* We don't need this wild check now that https://github.com/WordPress/gutenberg/pull/60265 is merged

* Remove placeholder image icon and center text

* Fix spacing
Harmonize tools panels

* the background size panel displays by default in the site editor for top-level styles, but only when there's an image available.
Using constant for "image"

* Update copy for unset image

* Update border of button to match site logo upload button


Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
---
 .../src/components/block-inspector/index.js   |  2 +-
 .../global-styles/background-panel.js         | 50 ++++++++++---------
 .../src/components/global-styles/style.scss   | 10 +---
 .../inspector-controls-tabs/styles-tab.js     |  2 +-
 .../global-styles/background-panel.js         | 10 ++++
 .../src/components/global-styles/root-menu.js |  4 +-
 .../global-styles/screen-background.js        |  2 +-
 7 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 136cdef91286e2..5c52ca62e01d69 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -300,7 +300,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					<InspectorControls.Slot group="styles" />
 					<InspectorControls.Slot
 						group="background"
-						label={ __( 'Background' ) }
+						label={ __( 'Background image' ) }
 					/>
 					<PositionControls />
 					<div>
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index c1354bbc4a4e14..ef1f9673d601f9 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -40,6 +40,10 @@ import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
 
 const IMAGE_BACKGROUND_TYPE = 'image';
+const DEFAULT_CONTROLS = {
+	backgroundImage: true,
+	backgroundSize: false,
+};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -135,28 +139,30 @@ export const backgroundPositionToCoords = ( value ) => {
 };
 
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
-	const imgLabel = label || getFilename( imgUrl );
+	const imgLabel =
+		label || getFilename( imgUrl ) || __( 'Add background image' );
+
 	return (
 		<ItemGroup as="span">
-			<HStack justify="flex-start" as="span">
-				<span
-					className={ classnames(
-						'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
-						{
-							'has-image': imgUrl,
-						}
-					) }
-					aria-hidden
-				>
-					{ imgUrl && (
+			<HStack justify={ imgUrl ? 'flex-start' : 'center' } as="span">
+				{ imgUrl && (
+					<span
+						className={ classnames(
+							'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',
+							{
+								'has-image': imgUrl,
+							}
+						) }
+						aria-hidden
+					>
 						<span
 							className="block-editor-global-styles-background-panel__inspector-image-indicator"
 							style={ {
 								backgroundImage: `url(${ imgUrl })`,
 							} }
 						/>
-					) }
-				</span>
+					</span>
+				) }
 				<FlexItem as="span">
 					<Truncate
 						numberOfLines={ 1 }
@@ -247,7 +253,7 @@ function BackgroundImageToolsPanelItem( {
 
 	const onFilesDrop = ( filesList ) => {
 		mediaUpload( {
-			allowedTypes: [ 'image' ],
+			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
@@ -295,7 +301,7 @@ function BackgroundImageToolsPanelItem( {
 					onSelect={ onSelectMedia }
 					name={
 						<InspectorImagePreview
-							label={ __( 'Background image' ) }
+							label={ title }
 							filename={ title || __( 'Untitled' ) }
 							url={ url }
 						/>
@@ -518,6 +524,7 @@ function BackgroundToolsPanel( {
 	value,
 	panelId,
 	children,
+	headerLabel,
 } ) {
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
@@ -527,8 +534,8 @@ function BackgroundToolsPanel( {
 	return (
 		<VStack
 			as={ ToolsPanel }
-			spacing={ 6 }
-			label={ __( 'Background' ) }
+			spacing={ 4 }
+			label={ headerLabel }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
@@ -538,11 +545,6 @@ function BackgroundToolsPanel( {
 	);
 }
 
-const DEFAULT_CONTROLS = {
-	backgroundImage: true,
-	backgroundSize: true,
-};
-
 export default function BackgroundPanel( {
 	as: Wrapper = BackgroundToolsPanel,
 	value,
@@ -552,6 +554,7 @@ export default function BackgroundPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	defaultValues = {},
+	headerLabel = __( 'Background image' ),
 } ) {
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -568,6 +571,7 @@ export default function BackgroundPanel( {
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
+			headerLabel={ headerLabel }
 		>
 			<BackgroundImageToolsPanelItem
 				onChange={ onChange }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index ab4407cd9b911b..1630ac2abde574 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -81,7 +81,7 @@
 
 	button.components-button {
 		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
+		box-shadow: inset 0 0 0 $border-width $gray-400;
 		width: 100%;
 		display: block;
 		height: $grid-unit-50;
@@ -111,17 +111,11 @@
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-	background: #fff linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); // Show a diagonal line (crossed out) for empty background image.
-	border-radius: $radius-round !important; // Override the default border-radius inherited from FlexItem.
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	display: block;
 	width: 20px;
 	height: 20px;
 	flex: none;
-
-	&.has-image {
-		background: #fff; // No diagonal line for non-empty background image. A background color is in use to account for partially transparent images.
-	}
+	background: #fff;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index 8386b545c72500..e45805a51391a4 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -30,7 +30,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background' ) }
+				label={ __( 'Background image' ) }
 			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index cae8bdba61871f..2addf109873aae 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,13 +29,22 @@ export default function BackgroundPanel() {
 	} );
 	const [ settings ] = useGlobalSetting( '' );
 
+	const defaultControls = {
+		backgroundImage: true,
+		backgroundSize:
+			!! style?.background?.backgroundImage &&
+			!! inheritedStyle?.background?.backgroundImage,
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
+			headerLabel={ __( 'Image' ) }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultControls={ defaultControls }
 		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 97598635f7b859..c747efee635d88 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -64,9 +64,9 @@ function RootMenu() {
 					<NavigationButtonAsItem
 						icon={ image }
 						path="/background"
-						aria-label={ __( 'Background styles' ) }
+						aria-label={ __( 'Background image styles' ) }
 					>
-						{ __( 'Background' ) }
+						{ __( 'Background image' ) }
 					</NavigationButtonAsItem>
 				) }
 			</ItemGroup>
diff --git a/packages/edit-site/src/components/global-styles/screen-background.js b/packages/edit-site/src/components/global-styles/screen-background.js
index 5e8a7832a42b46..e6d338ffcbef1e 100644
--- a/packages/edit-site/src/components/global-styles/screen-background.js
+++ b/packages/edit-site/src/components/global-styles/screen-background.js
@@ -20,7 +20,7 @@ function ScreenBackground() {
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Background' ) } />
+			<ScreenHeader title={ __( 'Background image' ) } />
 			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);

From 5727784de928e67ec07761cc92060ac08b07bc83 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:25:59 +1000
Subject: [PATCH 11/35] Separator block: Reduce default border styles to avoid
 conflicts with global styles (#60740)

Unlinked contributors: dashkevych.

Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
---
 .../block-library/src/separator/style.scss    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index 84622211e5a207..d40dd2f05844ed 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/packages/block-library/src/separator/style.scss
@@ -1,12 +1,4 @@
 .wp-block-separator {
-	border-top: 2px solid currentColor;
-	// Default, thin style, is stored in theme.scss so it can be opted out of
-
-	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
-	border-left: none;
-	border-right: none;
-	border-bottom: none;
-
 	// Dots style
 	&.is-style-dots {
 		// Override any background themes often set on the hr tag for this style.
@@ -28,3 +20,14 @@
 		}
 	}
 }
+
+// Lowest specificity to avoid overriding global styles.
+:where(.wp-block-separator) {
+	border-top: 2px solid currentColor;
+	// Default, thin style, is stored in theme.scss so it can be opted out of
+
+	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+}

From d454559fb38a3b69b504697b7b3853c84dc1cbf7 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Apr 2024 13:05:33 +0900
Subject: [PATCH 12/35] Try: Add new `textAlign` block support (#59531)

* Try: Add new `textAlign` block support

* Remove `justify` option

* Add unit test

* Move definition from `textAlign` to `typography.textAlign`

* Update documentation

* Update block.json schema

* Try to fix block.json schema unit test

* Add support for dynamic blocks

* Add skipSerialization support

* Fix prop order in lib/theme.json

* Update useTypographyProps hook

* Fix PHPCS errors

* Update fixtures

* Fix JS hok namespace and attribute definition

* Dont't use HTML_TAG_Processor to apply text-align class

* Apply support as inline style instead of class name

* Remove unnecessary code

* Output as class name instead of inline style

* Update fixtures

* Add `TEXT_ALIGN_SUPPORT_KEY` to `TYPOGRAPHY_SUPPORT_KEYS` and remove `addAttribute` filter

* Include `text-align` when pasting styles

* Update theme.json schema

* Update Global Settings & Styles documentation

* Update fixtures

* Add `textAlign` to `useBlockSettings`

* Make styles work in the Site Editor

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>
Co-authored-by: jhned <jhned@git.wordpress.org>
---
 .../themes/global-settings-and-styles.md      |   1 +
 .../block-api/block-supports.md               |  63 ++++++-
 .../theme-json-reference/theme-json-living.md |   2 +
 lib/block-supports/typography.php             |  19 +-
 lib/class-wp-theme-json-gutenberg.php         |   3 +
 lib/theme.json                                |   1 +
 .../src/components/use-paste-styles/index.js  |   2 +
 packages/block-editor/src/hooks/index.js      |   4 +
 packages/block-editor/src/hooks/supports.js   |  24 +++
 .../block-editor/src/hooks/test/text-align.js | 114 +++++++++++
 .../src/hooks/test/use-typography-props.js    |   4 +-
 packages/block-editor/src/hooks/text-align.js | 178 ++++++++++++++++++
 packages/block-editor/src/hooks/typography.js |   2 +
 .../src/hooks/use-typography-props.js         |   5 +-
 packages/block-editor/src/hooks/utils.js      |   4 +
 packages/blocks/src/api/constants.js          |   5 +
 schemas/json/block.json                       |  16 ++
 schemas/json/theme.json                       |   9 +
 18 files changed, 445 insertions(+), 11 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/test/text-align.js
 create mode 100644 packages/block-editor/src/hooks/text-align.js

diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md
index cd5557d40e55c6..37f0ee8951c3c9 100644
--- a/docs/how-to-guides/themes/global-settings-and-styles.md
+++ b/docs/how-to-guides/themes/global-settings-and-styles.md
@@ -265,6 +265,7 @@ The settings section has the following structure:
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
+			"textAlign": true,
 			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
index 057047434eb69d..b327cd0c03a9ee 100644
--- a/docs/reference-guides/block-api/block-supports.md
+++ b/docs/reference-guides/block-api/block-supports.md
@@ -149,13 +149,13 @@ When a background image is selected, the image data is stored in the `style.back
 When a background images is selected and its position or size are changed, the background-position is stored in the `style.background.backgroundPosition` and its background-size in `style.background.backgroundSize` attribute.
 
 -   `style`: an attribute of `object` type with no default assigned. This is added when `backgroundImage` or `backgroundSize` support is declared. It stores the custom values set by the user.
-    -   `background`: an attribute of `object` type. 
-        - `backgroundImage`: an attribute of `object` type, containing information about the selected image 
+    -   `background`: an attribute of `object` type.
+        - `backgroundImage`: an attribute of `object` type, containing information about the selected image
             - `url`: type `string`, URL to the image
             - `id`: type `int`, media attachment ID
             - `source`: type `string`, at the moment the only value is `file`
-            - `title`: type `string`, title of the media attachment 
-        - `backgroundPosition`: an attribute of `string` type, defining the background images position, selected by FocalPointPicker and used in CSS as the [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) value. 
+            - `title`: type `string`, title of the media attachment
+        - `backgroundPosition`: an attribute of `string` type, defining the background images position, selected by FocalPointPicker and used in CSS as the [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) value.
         - `backgroundSize`: an attribute of `string` type. defining the CSS [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) value.
 
 The block can apply a default background image, position and size by specifying its own attribute with a default. For example:
@@ -484,10 +484,10 @@ When the block declares support for `color.link`, the attributes definition is e
                         color: {
                             text: 'var:preset|color|contrast',
                         },
-						":hover": { 
-							color: { 
-								text: "#000000" 
-							} 
+						":hover": {
+							color: {
+								text: "#000000"
+							}
 						}
                     }
                 }
@@ -973,6 +973,7 @@ supports: {
 -   Subproperties:
     -   `fontSize`: type `boolean`, default value `false`
     -   `lineHeight`: type `boolean`, default value `false`
+    -   `textAlign`: type `boolean` or `array`, default value `false`
 
 The presence of this object signals that a block supports some typography related properties. When it does, the block editor will show a typography UI allowing the user to control their values.
 
@@ -983,6 +984,8 @@ supports: {
         fontSize: true,
         // Enable support and UI control for line-height.
         lineHeight: true,
+        // Enable support and UI control for text alignment.
+        textAlign: true,
     },
 }
 ```
@@ -1063,3 +1066,47 @@ attributes: {
     }
 }
 ```
+
+### typography.textAlign
+
+_**Note:** Since WordPress 6.6._
+
+-   Type: `boolean` or `array`
+-   Default value: `false`
+
+This property adds block toolbar controls which allow to change block's text alignment.
+
+```js
+supports: {
+    typography: {
+        // Declare support for block's text alignment.
+        // This adds support for all the options:
+        // left, center, right.
+        textAlign: true
+    }
+}
+```
+
+```js
+supports: {
+    typography: {
+        // Declare support for specific text alignment options.
+        textAlign: [ 'left', 'right' ]
+    }
+}
+```
+
+When the block declares support for `textAlign`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default. For example:
+
+```js
+attributes: {
+    style: {
+        type: 'object',
+        default: {
+            typography: {
+                textAlign: 'value'
+            }
+        }
+    }
+}
+```
diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index 00b1f7971f3d91..0377f6a3c3e05d 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -185,6 +185,7 @@ Settings related to typography.
 | fluid | undefined | false |  |
 | letterSpacing | boolean | true |  |
 | lineHeight | boolean | false |  |
+| textAlign | boolean | true |  |
 | textColumns | boolean | false |  |
 | textDecoration | boolean | true |  |
 | writingMode | boolean | false |  |
@@ -268,6 +269,7 @@ Typography styles.
 | fontWeight | string, object |  |
 | letterSpacing | string, object |  |
 | lineHeight | string, object |  |
+| textAlign | string |  |
 | textColumns | string |  |
 | textDecoration | string, object |  |
 | writingMode | string, object |  |
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 8fceda4d5daba0..fa2a7b81e94e21 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -26,6 +26,7 @@ function gutenberg_register_typography_support( $block_type ) {
 	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
 	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
+	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
 	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
 	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
@@ -37,6 +38,7 @@ function gutenberg_register_typography_support( $block_type ) {
 		|| $has_font_weight_support
 		|| $has_letter_spacing_support
 		|| $has_line_height_support
+		|| $has_text_align_support
 		|| $has_text_columns_support
 		|| $has_text_decoration_support
 		|| $has_text_transform_support
@@ -95,6 +97,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
 	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
+	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
 	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
 	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
@@ -106,6 +109,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	$should_skip_font_style      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
 	$should_skip_font_weight     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
 	$should_skip_line_height     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
+	$should_skip_text_align      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' );
 	$should_skip_text_columns    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
 	$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
 	$should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
@@ -143,6 +147,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 			$typography_block_styles['lineHeight'] = $block_attributes['style']['typography']['lineHeight'] ?? null;
 	}
 
+	if ( $has_text_align_support && ! $should_skip_text_align ) {
+			$typography_block_styles['textAlign'] = $block_attributes['style']['typography']['textAlign'] ?? null;
+	}
+
 	if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
 		$typography_block_styles['textColumns'] = $block_attributes['style']['typography']['textColumns'] ?? null;
 	}
@@ -167,13 +175,22 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	}
 
 	$attributes = array();
+	$classnames = array();
 	$styles     = gutenberg_style_engine_get_styles(
 		array( 'typography' => $typography_block_styles ),
 		array( 'convert_vars_to_classnames' => true )
 	);
 
 	if ( ! empty( $styles['classnames'] ) ) {
-		$attributes['class'] = $styles['classnames'];
+		$classnames[] = $styles['classnames'];
+	}
+
+	if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['style']['typography']['textAlign'] ) ) {
+		$classnames[] = 'has-text-align-' . $block_attributes['style']['typography']['textAlign'];
+	}
+
+	if ( ! empty( $classnames ) ) {
+		$attributes['class'] = implode( ' ', $classnames );
 	}
 
 	if ( ! empty( $styles['css'] ) ) {
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index aafc20a2debd51..a665235d7e774e 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -244,6 +244,7 @@ class WP_Theme_JSON_Gutenberg {
 		'border-left-width'                 => array( 'border', 'left', 'width' ),
 		'border-left-style'                 => array( 'border', 'left', 'style' ),
 		'color'                             => array( 'color', 'text' ),
+		'text-align'                        => array( 'typography', 'textAlign' ),
 		'column-count'                      => array( 'typography', 'textColumns' ),
 		'font-family'                       => array( 'typography', 'fontFamily' ),
 		'font-size'                         => array( 'typography', 'fontSize' ),
@@ -436,6 +437,7 @@ class WP_Theme_JSON_Gutenberg {
 			'fontWeight'     => null,
 			'letterSpacing'  => null,
 			'lineHeight'     => null,
+			'textAlign'      => null,
 			'textColumns'    => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
@@ -531,6 +533,7 @@ class WP_Theme_JSON_Gutenberg {
 			'fontWeight'     => null,
 			'letterSpacing'  => null,
 			'lineHeight'     => null,
+			'textAlign'      => null,
 			'textColumns'    => null,
 			'textDecoration' => null,
 			'textTransform'  => null,
diff --git a/lib/theme.json b/lib/theme.json
index 2e40ccadffef85..ece76b5f63cb29 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -263,6 +263,7 @@
 			"fontWeight": true,
 			"letterSpacing": true,
 			"lineHeight": false,
+			"textAlign": false,
 			"textColumns": false,
 			"textDecoration": true,
 			"textTransform": true,
diff --git a/packages/block-editor/src/components/use-paste-styles/index.js b/packages/block-editor/src/components/use-paste-styles/index.js
index 9150776ad1158b..1c2a844488b862 100644
--- a/packages/block-editor/src/components/use-paste-styles/index.js
+++ b/packages/block-editor/src/components/use-paste-styles/index.js
@@ -15,6 +15,7 @@ import {
 	hasAlignSupport,
 	hasBorderSupport,
 	hasBackgroundColorSupport,
+	hasTextAlignSupport,
 	hasTextColorSupport,
 	hasGradientSupport,
 	hasCustomClassNameSupport,
@@ -59,6 +60,7 @@ const STYLE_ATTRIBUTES = {
 	align: hasAlignSupport,
 	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
 	backgroundColor: hasBackgroundColorSupport,
+	textAlign: hasTextAlignSupport,
 	textColor: hasTextColorSupport,
 	gradient: hasGradientSupport,
 	className: hasCustomClassNameSupport,
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 0c7c59b20ec674..ec5cf29b49c5a6 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -21,6 +21,7 @@ import dimensions from './dimensions';
 import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
+import textAlign from './text-align';
 import border from './border';
 import position from './position';
 import layout from './layout';
@@ -34,6 +35,7 @@ import './use-bindings-attributes';
 createBlockEditFilter(
 	[
 		align,
+		textAlign,
 		anchor,
 		customClassName,
 		style,
@@ -47,6 +49,7 @@ createBlockEditFilter(
 );
 createBlockListBlockFilter( [
 	align,
+	textAlign,
 	background,
 	style,
 	color,
@@ -60,6 +63,7 @@ createBlockListBlockFilter( [
 ] );
 createBlockSaveFilter( [
 	align,
+	textAlign,
 	anchor,
 	ariaLabel,
 	customClassName,
diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js
index 4e116494029bf1..75f2bdf2dc219e 100644
--- a/packages/block-editor/src/hooks/supports.js
+++ b/packages/block-editor/src/hooks/supports.js
@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * align e.g. settings found in `block.json`.
+ */
+const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
 /**
  * Key within block settings' supports array indicating support for text
  * columns e.g. settings found in `block.json`.
@@ -53,6 +58,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
@@ -212,6 +218,24 @@ export const hasBackgroundColorSupport = ( nameOrType ) => {
 	return colorSupport && colorSupport.background !== false;
 };
 
+/**
+ * Returns true if the block defines support for text-align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for text-align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getTextAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
 /**
  * Returns true if the block defines support for background color.
  *
diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js
new file mode 100644
index 00000000000000..3b7d338193b30b
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/text-align.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getValidTextAlignments, addAssignedTextAlign } from '../text-align';
+
+const noop = () => {};
+
+describe( 'textAlign', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+		edit: ( { children } ) => <>{ children }</>,
+	};
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'getValidTextAlignments()', () => {
+		it( 'should return an empty array if block does not define align support', () => {
+			expect( getValidTextAlignments() ).toEqual( [] );
+		} );
+
+		it( 'should return all custom text aligns set', () => {
+			expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [
+				'left',
+				'right',
+			] );
+		} );
+
+		it( 'should return all text aligns sorted when provided in the random order', () => {
+			expect(
+				getValidTextAlignments( [ 'right', 'center', 'left' ] )
+			).toEqual( [ 'left', 'center', 'right' ] );
+		} );
+
+		it( 'should return all text aligns if block defines text align support as true', () => {
+			expect( getValidTextAlignments( true ) ).toEqual( [
+				'left',
+				'center',
+				'right',
+			] );
+		} );
+
+		it( 'should remove incorrect text aligns', () => {
+			expect(
+				getValidTextAlignments( [ 'left', 'right', 'justify' ] )
+			).toEqual( [ 'left', 'right' ] );
+		} );
+	} );
+
+	describe( 'addAssignedTextAlign', () => {
+		it( 'should do nothing if block does not support text align', () => {
+			registerBlockType( 'core/foo', blockSettings );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					typography: {
+						textAlign: 'center',
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'foo',
+			} );
+		} );
+
+		it( 'should do add text align classname if block supports text align', () => {
+			registerBlockType( 'core/foo', {
+				...blockSettings,
+				supports: {
+					typography: {
+						textAlign: true,
+					},
+				},
+			} );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					style: {
+						typography: {
+							textAlign: 'center',
+						},
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'has-text-align-center foo',
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 77b2e0cdf33cb7..c226b7f8199b9f 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -12,13 +12,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textAlign: 'center',
 					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
 		};
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
-			className: 'has-tofu-font-family has-large-font-size',
+			className:
+				'has-tofu-font-family has-text-align-center has-large-font-size',
 			style: {
 				columnCount: 3,
 				letterSpacing: '22px',
diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js
new file mode 100644
index 00000000000000..daa8df6cc82106
--- /dev/null
+++ b/packages/block-editor/src/hooks/text-align.js
@@ -0,0 +1,178 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl, BlockControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+
+export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
+
+const TEXT_ALIGNMENT_OPTIONS = [
+	{
+		icon: alignLeft,
+		title: __( 'Align text left' ),
+		align: 'left',
+	},
+	{
+		icon: alignCenter,
+		title: __( 'Align text center' ),
+		align: 'center',
+	},
+	{
+		icon: alignRight,
+		title: __( 'Align text right' ),
+		align: 'right',
+	},
+];
+
+const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
+
+/**
+ * Returns the valid text alignments.
+ * Takes into consideration the text aligns supported by a block.
+ * Exported just for testing purposes, not exported outside the module.
+ *
+ * @param {?boolean|string[]} blockTextAlign Text aligns supported by the block.
+ *
+ * @return {string[]} Valid text alignments.
+ */
+export function getValidTextAlignments( blockTextAlign ) {
+	let validTextAlignments;
+	if ( Array.isArray( blockTextAlign ) ) {
+		validTextAlignments = VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
+			blockTextAlign.includes( textAlign )
+		);
+	} else if ( blockTextAlign === true ) {
+		// `true` includes all alignments...
+		validTextAlignments = [ ...VALID_TEXT_ALIGNMENTS ];
+	} else {
+		validTextAlignments = [];
+	}
+
+	return validTextAlignments;
+}
+
+function BlockEditTextAlignmentToolbarControlsPure( {
+	style,
+	name: blockName,
+	setAttributes,
+} ) {
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY )
+	);
+	const blockEditingMode = useBlockEditingMode();
+	if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) =>
+		validTextAlignments.includes( control.align )
+	);
+
+	const onChange = ( newTextAlignValue ) => {
+		const newStyle = {
+			...style,
+			typography: {
+				...style?.typography,
+				textAlign: newTextAlignValue,
+			},
+		};
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	return (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ style?.typography?.textAlign }
+				onChange={ onChange }
+				alignmentControls={ textAlignmentControls }
+			/>
+		</BlockControls>
+	);
+}
+
+export default {
+	edit: BlockEditTextAlignmentToolbarControlsPure,
+	useBlockProps,
+	addSaveProps: addAssignedTextAlign,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false );
+	},
+};
+
+function useBlockProps( { name, style } ) {
+	if ( ! style?.typography?.textAlign ) {
+		return null;
+	}
+
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY )
+	);
+
+	if ( ! validTextAlignments.length ) {
+		return null;
+	}
+
+	if (
+		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' )
+	) {
+		return null;
+	}
+
+	const textAlign = style.typography.textAlign;
+
+	const className = classnames( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
+	} );
+	return { className };
+}
+
+/**
+ * Override props assigned to save component to inject text alignment class
+ * name if block supports it.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addAssignedTextAlign( props, blockType, attributes ) {
+	if ( ! attributes?.style?.typography?.textAlign ) {
+		return props;
+	}
+
+	const { textAlign } = attributes.style.typography;
+	const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY );
+	const isTextAlignValid =
+		getValidTextAlignments( blockTextAlign ).includes( textAlign );
+	if (
+		isTextAlignValid &&
+		! shouldSkipSerialization(
+			blockType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'textAlign'
+		)
+	) {
+		props.className = classnames(
+			`has-text-align-${ textAlign }`,
+			props.className
+		);
+	}
+	return props;
+}
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index 12d0075527bec5..cf3f4327c8f034 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -17,6 +17,7 @@ import {
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
+import { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 
@@ -40,6 +41,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	WRITING_MODE_SUPPORT_KEY,
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index a63f77468c7233..3986bbf7cfe17e 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -45,9 +45,12 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
 		: '';
-
+	const textAlignClassName = !! attributes?.style?.typography?.textAlign
+		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
+		: '';
 	const className = classnames(
 		fontFamilyClassName,
+		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )
 	);
 
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 6d75f2c2a686d2..2148b2bb8e5ce7 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -220,6 +220,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textAlign,
 		textColumns,
 		textDecoration,
 		writingMode,
@@ -271,6 +272,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'typography.fontStyle',
 		'typography.fontWeight',
 		'typography.lineHeight',
+		'typography.textAlign',
 		'typography.textColumns',
 		'typography.textDecoration',
 		'typography.writingMode',
@@ -360,6 +362,7 @@ export function useBlockSettings( name, parentLayout ) {
 				fontStyle,
 				fontWeight,
 				lineHeight,
+				textAlign,
 				textColumns,
 				textDecoration,
 				textTransform,
@@ -402,6 +405,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textAlign,
 		textColumns,
 		textDecoration,
 		textTransform,
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 62933d69d764f4..08b4e084e2ec9b 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -228,6 +228,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		},
 		useEngine: true,
 	},
+	textAlign: {
+		value: [ 'typography', 'textAlign' ],
+		support: [ 'typography', 'textAlign' ],
+		useEngine: false,
+	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
 		support: [ 'typography', '__experimentalTextDecoration' ],
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 672de711be79f3..92bcecf90b9b60 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -597,6 +597,22 @@
 							"type": "boolean",
 							"description": "This value signals that a block supports the line-height CSS style property. When it does, the block editor will show an UI control for the user to set its value if the theme declares support.\n\nWhen the block declares support for lineHeight, its attributes definition is extended to include a new attribute style of object type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own style attribute with a default",
 							"default": false
+						},
+						"textAlign": {
+							"description": "This property adds block toolbar controls which allow to change block's text alignment.",
+							"oneOf": [
+								{
+									"type": "boolean"
+								},
+								{
+									"type": "array",
+									"items": {
+										"type": "string",
+										"enum": [ "left", "center", "right" ]
+									}
+								}
+							],
+							"default": false
 						}
 					}
 				},
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 63889366b7bd40..7cb34945b56810 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -551,6 +551,11 @@
 							"type": "boolean",
 							"default": false
 						},
+						"textAlign": {
+							"description": "Allow users to set the text align.",
+							"type": "boolean",
+							"default": true
+						},
 						"textColumns": {
 							"description": "Allow users to set the number of text columns.",
 							"type": "boolean",
@@ -1629,6 +1634,10 @@
 								}
 							]
 						},
+						"textAlign": {
+							"description": "Sets the `text-align` CSS property.",
+							"type": "string"
+						},
 						"textColumns": {
 							"description": "Sets the `column-count` CSS property.",
 							"type": "string"

From 9d77296b93e91fa0acf67ede5c0e205a0cb3b085 Mon Sep 17 00:00:00 2001
From: Ashesh Magar <45454049+asheshmagar@users.noreply.github.com>
Date: Tue, 16 Apr 2024 10:01:01 +0545
Subject: [PATCH 13/35] Font library: fix typo (#60751)

Co-authored-by: asheshmagar <asheshmagar@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
---
 .../font-library-modal/context.js             | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
index 26ec6ede016b2c..ca8fb54d5e4858 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -100,9 +100,9 @@ function FontLibraryProvider( { children } ) {
 	 * This function is called when the user activates or deactivates a font family.
 	 * It only updates the global styles post content in the database for new font families.
 	 * This avoids saving other styles/settings changed by the user using other parts of the editor.
-	 * 
+	 *
 	 * It uses the font families from the param to avoid using the font families from an outdated state.
-	 * 
+	 *
 	 * @param {Array} fonts - The font families that will be saved to the database.
 	 */
 	const saveFontFamilies = async ( fonts ) => {
@@ -137,7 +137,7 @@ function FontLibraryProvider( { children } ) {
 	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
 	 *
 	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
-	 * Avoids incosistencies with the fonts listed in the font library modal as base (unactivated).
+	 * Avoids inconsistencies with the fonts listed in the font library modal as base (inactivated).
 	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
 	 */
 	const baseThemeFonts = baseFontFamilies?.theme
@@ -283,27 +283,27 @@ function FontLibraryProvider( { children } ) {
 				}
 
 				// Install the fonts (upload the font files to the server and create the post in the database).
-				let sucessfullyInstalledFontFaces = [];
-				let unsucessfullyInstalledFontFaces = [];
+				let successfullyInstalledFontFaces = [];
+				let unsuccessfullyInstalledFontFaces = [];
 				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
 					const response = await batchInstallFontFaces(
 						installedFontFamily.id,
 						makeFontFacesFormData( fontFamilyToInstall )
 					);
-					sucessfullyInstalledFontFaces = response?.successes;
-					unsucessfullyInstalledFontFaces = response?.errors;
+					successfullyInstalledFontFaces = response?.successes;
+					unsuccessfullyInstalledFontFaces = response?.errors;
 				}
 
-				// Use the sucessfully installed font faces
+				// Use the successfully installed font faces
 				// As well as any font faces that were already installed (those will be activated)
 				if (
-					sucessfullyInstalledFontFaces?.length > 0 ||
+					successfullyInstalledFontFaces?.length > 0 ||
 					alreadyInstalledFontFaces?.length > 0
 				) {
 					// Use font data from REST API not from client to ensure
 					// correct font information is used.
 					installedFontFamily.fontFace = [
-						...sucessfullyInstalledFontFaces,
+						...successfullyInstalledFontFaces,
 					];
 
 					fontFamiliesToActivate.push( installedFontFamily );
@@ -321,13 +321,13 @@ function FontLibraryProvider( { children } ) {
 				if (
 					isANewFontFamily &&
 					fontFamilyToInstall?.fontFace?.length > 0 &&
-					sucessfullyInstalledFontFaces?.length === 0
+					successfullyInstalledFontFaces?.length === 0
 				) {
 					await fetchUninstallFontFamily( installedFontFamily.id );
 				}
 
 				installationErrors = installationErrors.concat(
-					unsucessfullyInstalledFontFaces
+					unsuccessfullyInstalledFontFaces
 				);
 			}
 

From 0399e921831229d63767898f3b6bd533912f5818 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 16 Apr 2024 09:41:33 +0400
Subject: [PATCH 14/35] Block Editor: Avoid errors when a block variation icon
 is an object (#60766)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ZafarKamal123 <zafarkamal@git.wordpress.org>
---
 .../src/components/block-variation-transforms/index.js        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index f005515a63f17b..bcaf7f9f6662ba 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -116,7 +116,9 @@ function VariationsToggleGroupControl( {
 				{ variations.map( ( variation ) => (
 					<ToggleGroupControlOptionIcon
 						key={ variation.name }
-						icon={ variation.icon }
+						icon={
+							<BlockIcon icon={ variation.icon } showColors />
+						}
 						value={ variation.name }
 						label={
 							selectedValue === variation.name

From 631b6e8cfb5f6a86cbc6b9365550d74f8a2d7498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:43:41 +0200
Subject: [PATCH 15/35] Fix translatable string in pagination modal (#60742)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
Co-authored-by: amieiro <amieiro@git.wordpress.org>
---
 .../block-library/src/query/edit/enhanced-pagination-modal.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
index 0411363e6e1a10..21838184f6bd6a 100644
--- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js
+++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -43,7 +43,7 @@ export default function EnhancedPaginationModal( {
 	if ( hasBlocksFromPlugins ) {
 		notice =
 			__(
-				'Currently, avoiding full page reloads is not possible when non-interactive or non-clientNavigation compatible blocks from plugins are present inside the Query block.'
+				'Currently, avoiding full page reloads is not possible when non-interactive or non-client Navigation compatible blocks from plugins are present inside the Query block.'
 			) +
 			' ' +
 			notice;

From 69b7c6ba43f983d82de7f80ba60f15459c240033 Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Tue, 16 Apr 2024 10:14:56 +0200
Subject: [PATCH 16/35] NavigatorProvider: move the same-location check to the
 goTo function (#60767)

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../src/navigator/navigator-provider/component.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 368e78d799d72d..15eb4d6bd3b1d3 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -80,6 +80,13 @@ function goTo(
 		...restOptions
 	} = options;
 
+	const isNavigatingToSamePath =
+		locationHistory.length > 0 &&
+		locationHistory[ locationHistory.length - 1 ].path === path;
+	if ( isNavigatingToSamePath ) {
+		return locationHistory;
+	}
+
 	const isNavigatingToPreviousPath =
 		isBack &&
 		locationHistory.length > 1 &&
@@ -157,13 +164,6 @@ function routerReducer(
 			locationHistory = goBack( state );
 			break;
 		case 'goto':
-			if (
-				locationHistory.length &&
-				action.path ===
-					locationHistory[ locationHistory.length - 1 ].path
-			) {
-				break;
-			}
 			locationHistory = goTo( state, action.path, action.options );
 			break;
 		case 'gotoparent':

From 403b4b8d014ef7f6edc15c822e455e109bf49c6d Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 16 Apr 2024 12:05:06 +0300
Subject: [PATCH 17/35] [Editor]:Get post content in PostContentInfo component
 (#60743)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 .../src/components/post-card-panel/index.js   | 80 +++++++++----------
 1 file changed, 39 insertions(+), 41 deletions(-)

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 757040f6336b69..a8419c0feb8c2f 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -19,6 +19,7 @@ import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { humanTimeDiff } from '@wordpress/date';
 import { decodeEntities } from '@wordpress/html-entities';
 import { count as wordCount } from '@wordpress/wordcount';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -32,40 +33,34 @@ import { unlock } from '../../lock-unlock';
 import TemplateAreas from '../template-areas';
 
 export default function PostCardPanel( { className, actions } ) {
-	const {
-		modified,
-		title,
-		templateInfo,
-		icon,
-		postType,
-		postContent,
-		isPostsPage,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			getCurrentPostType,
-			getCurrentPostId,
-			__experimentalGetTemplateInfo,
-		} = select( editorStore );
-		const { getEditedEntityRecord, getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		const _type = getCurrentPostType();
-		const _id = getCurrentPostId();
-		const _record = getEditedEntityRecord( 'postType', _type, _id );
-		const _templateInfo = __experimentalGetTemplateInfo( _record );
-		return {
-			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
-			modified: getEditedPostAttribute( 'modified' ),
-			id: _id,
-			postType: _type,
-			templateInfo: _templateInfo,
-			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
-				area: _record?.area,
-			} ),
-			isPostsPage: +_id === siteSettings?.page_for_posts,
-			postContent: getEditedPostAttribute( 'content' ),
-		};
-	}, [] );
+	const { modified, title, templateInfo, icon, postType, isPostsPage } =
+		useSelect( ( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostType,
+				getCurrentPostId,
+				__experimentalGetTemplateInfo,
+			} = select( editorStore );
+			const { getEditedEntityRecord, getEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _templateInfo = __experimentalGetTemplateInfo( _record );
+			return {
+				title:
+					_templateInfo?.title || getEditedPostAttribute( 'title' ),
+				modified: getEditedPostAttribute( 'modified' ),
+				id: _id,
+				postType: _type,
+				templateInfo: _templateInfo,
+				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+					area: _record?.area,
+				} ),
+				isPostsPage: +_id === siteSettings?.page_for_posts,
+			};
+		}, [] );
 	const description = templateInfo?.description;
 	const lastEditedText =
 		modified &&
@@ -111,9 +106,7 @@ export default function PostCardPanel( { className, actions } ) {
 							spacing={ 2 }
 						>
 							{ description && <Text>{ description }</Text> }
-							{ showPostContentInfo && (
-								<PostContentInfo postContent={ postContent } />
-							) }
+							{ showPostContentInfo && <PostContentInfo /> }
 							{ lastEditedText && (
 								<Text>{ lastEditedText }</Text>
 							) }
@@ -130,16 +123,21 @@ export default function PostCardPanel( { className, actions } ) {
 const AVERAGE_READING_RATE = 189;
 
 // This component renders the wordcount and reading time for the post.
-function PostContentInfo( { postContent } ) {
+function PostContentInfo() {
+	const postContent = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
+		[]
+	);
 	/*
 	 * translators: If your word count is based on single characters (e.g. East Asian characters),
 	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
 	 * Do not translate into your own language.
 	 */
 	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
-	const wordsCounted = postContent
-		? wordCount( postContent, wordCountType )
-		: 0;
+	const wordsCounted = useMemo(
+		() => ( postContent ? wordCount( postContent, wordCountType ) : 0 ),
+		[ postContent, wordCountType ]
+	);
 	if ( ! wordsCounted ) {
 		return null;
 	}

From 247e9b97ace3830a23fc76a55b7f02d65af75887 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 16 Apr 2024 10:11:22 +0100
Subject: [PATCH 18/35] Make checkbox size override-able, and reduce size in
 data views (#60475)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  4 ++
 .../src/checkbox-control/style.scss           | 46 +++++++++----------
 packages/dataviews/src/style.scss             | 33 +++++++------
 packages/dataviews/src/view-table.js          |  6 +--
 4 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e2f363bbca8f66..c6a32b22cdd6c9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -23,6 +23,10 @@
 
 -   `Tabs`: Fallback to first enabled tab if no active tab id ([#60681](https://github.com/WordPress/gutenberg/pull/60681)).
 
+### Internal
+
+-   `CheckboxControl`: Streamline size styles ([#60475](https://github.com/WordPress/gutenberg/pull/60475)).
+
 ## 27.3.0 (2024-04-03)
 
 ### Bug Fix
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 4121250a7308a2..1821d49b4fcf47 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,5 +1,11 @@
-$checkbox-input-size: 20px;
-$checkbox-input-size-sm: 24px; // Width & height for small viewports.
+.components-checkbox-control {
+	// Careful, these CSS vars have experimental overrides in Data Views (packages/dataviews/src/style.scss).
+	--checkbox-input-size: 24px; // Width & height for small viewports.
+
+	@include break-small() {
+		--checkbox-input-size: 20px;
+	}
+}
 
 .components-checkbox-control__input[type="checkbox"] {
 	@include checkbox-control;
@@ -14,13 +20,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	padding: 0 !important;
 	text-align: center;
 	vertical-align: top;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		height: $checkbox-input-size;
-		width: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	height: var(--checkbox-input-size);
 
 	appearance: none;
 	transition: 0.1s border-color ease-in-out;
@@ -51,29 +52,26 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	display: inline-block;
 	margin-right: 12px;
 	vertical-align: middle;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		width: $checkbox-input-size;
-		height: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	aspect-ratio: 1;
 }
 
 svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
+	--checkmark-size: var(--checkbox-input-size);
+
 	fill: $white;
 	cursor: pointer;
 	position: absolute;
-	left: 0;
-	top: 0;
-	width: $button-size-small;
-	height: $button-size-small;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: var(--checkmark-size);
+	height: var(--checkmark-size);
+	user-select: none;
+	pointer-events: none;
 
 	@include break-small() {
-		left: -2px;
-		top: -2px;
+		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
-	user-select: none;
-	pointer-events: none;
 }
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 1d6a6ec3b6c07b..681068dd5e9c64 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -92,10 +92,6 @@
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 		}
-
-		.components-checkbox-control__input-container {
-			margin: $grid-unit-05;
-		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -532,16 +528,25 @@
 	justify-content: center;
 }
 
-.dataviews-view-table-selection-checkbox label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
+.dataviews-view-table-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
+	label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 }
 
 .dataviews-filters__custom-menu-radio-item-prefix {
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index aa186bb8e85441..b217dfe7802bbc 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -298,8 +298,7 @@ function TableRow( {
 				<td
 					className="dataviews-view-table__checkbox-column"
 					style={ {
-						width: 20,
-						minWidth: 20,
+						width: '1%',
 					} }
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
@@ -426,8 +425,7 @@ function ViewTable( {
 							<th
 								className="dataviews-view-table__checkbox-column"
 								style={ {
-									width: 20,
-									minWidth: 20,
+									width: '1%',
 								} }
 								data-field-id="selection"
 								scope="col"

From c5105e0974b9124b570b7b43f6e0292d6f6862e4 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 16 Apr 2024 13:15:04 +0400
Subject: [PATCH 19/35] Post Featured Image: Optimize store subscriptions
 (#60770)

* Post Featured Image: Optimize store subscriptions
* Fix hook import

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
---
 .../post-featured-image/dimension-controls.js | 25 ++++++++++--
 .../src/post-featured-image/edit.js           | 40 +++++++------------
 .../post-featured-image/overlay-controls.js   |  9 ++---
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 3c380d3dfe0125..d59d586eb04b4a 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -10,7 +10,11 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { InspectorControls, useSettings } from '@wordpress/block-editor';
+import {
+	useSettings,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 const SCALE_OPTIONS = (
 	<>
@@ -51,12 +55,25 @@ const DimensionControls = ( {
 	clientId,
 	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
-	imageSizeOptions = [],
+	media,
 } ) => {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
+
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
 		/**
@@ -75,7 +92,7 @@ const DimensionControls = ( {
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
 	return (
-		<InspectorControls group="dimensions">
+		<>
 			<ToolsPanelItem
 				hasValue={ () => !! aspectRatio }
 				label={ __( 'Aspect ratio' ) }
@@ -230,7 +247,7 @@ const DimensionControls = ( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</InspectorControls>
+		</>
 	);
 };
 
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 25133a2babcfc0..14e9bfdc74a87b 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -24,7 +24,6 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
@@ -132,19 +131,6 @@ export default function PostFeaturedImageEdit( {
 
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
-
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
 		className: classnames( {
@@ -200,17 +186,21 @@ export default function PostFeaturedImageEdit( {
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<OverlayControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
-			<DimensionControls
-				clientId={ clientId }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				imageSizeOptions={ imageSizeOptions }
-			/>
+			<InspectorControls group="color">
+				<OverlayControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
+			<InspectorControls group="dimensions">
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+				/>
+			</InspectorControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
index 34abf4c958f5f1..3dabb60f77fb18 100644
--- a/packages/block-library/src/post-featured-image/overlay-controls.js
+++ b/packages/block-library/src/post-featured-image/overlay-controls.js
@@ -6,10 +6,9 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
-	InspectorControls,
 	withColors,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseGradient,
+	__experimentalUseGradient as useGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
@@ -23,7 +22,7 @@ const Overlay = ( {
 	setOverlayColor,
 } ) => {
 	const { dimRatio } = attributes;
-	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { gradientValue, setGradient } = useGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	if ( ! colorGradientSettings.hasColorsOrGradients ) {
@@ -31,7 +30,7 @@ const Overlay = ( {
 	}
 
 	return (
-		<InspectorControls group="color">
+		<>
 			<ColorGradientSettingsDropdown
 				__experimentalIsRenderedInSidebar
 				settings={ [
@@ -79,7 +78,7 @@ const Overlay = ( {
 					__next40pxDefaultSize
 				/>
 			</ToolsPanelItem>
-		</InspectorControls>
+		</>
 	);
 };
 

From 9140a5c679aee99eaf64f1379bca2bcba564939c Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 16 Apr 2024 12:27:50 +0200
Subject: [PATCH 20/35] Fix: Action button alignment on details panel. (#60773)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../src/components/sidebar-navigation-screen-page/index.js   | 5 ++++-
 packages/editor/src/components/post-actions/index.js         | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 3ac1e00127c0fb..d6a43fd9b6a911 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -108,7 +108,10 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 			) }
 			actions={
 				<>
-					<PostActions onActionPerformed={ onActionPerformed } />
+					<PostActions
+						onActionPerformed={ onActionPerformed }
+						buttonProps={ { size: 'default' } }
+					/>
 					<SidebarButton
 						onClick={ () => setCanvasMode( 'edit' ) }
 						label={ __( 'Edit' ) }
diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
index f32c90dd156c19..f671f7b038ee29 100644
--- a/packages/editor/src/components/post-actions/index.js
+++ b/packages/editor/src/components/post-actions/index.js
@@ -39,7 +39,7 @@ const POST_ACTIONS_WHILE_EDITING = [
 	'move-to-trash',
 ];
 
-export default function PostActions( { onActionPerformed } ) {
+export default function PostActions( { onActionPerformed, buttonProps } ) {
 	const { postType, item } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPost } = select( editorStore );
 		return {
@@ -88,6 +88,7 @@ export default function PostActions( { onActionPerformed } ) {
 						! primaryActions.length && ! secondaryActions.length
 					}
 					className="editor-all-actions-button"
+					{ ...buttonProps }
 				/>
 			}
 			placement="bottom-end"

From 639e068dbdd9bb380121952c58ed7c835ea895f1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 Apr 2024 11:42:39 +0100
Subject: [PATCH 21/35] Editor: Serve as a proxy for the interface package
 (#60748)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 .eslintrc.js                                  | 18 ++++++++
 package-lock.json                             |  6 +--
 .../lib/get-intermediate-representation.js    |  4 +-
 .../test/get-intermediate-representation.js   | 41 +++++++++++++++++++
 packages/edit-post/package.json               |  1 -
 .../edit-post/src/components/header/index.js  |  3 +-
 .../src/components/header/index.native.js     |  2 +-
 .../src/components/header/more-menu/index.js  |  3 +-
 .../header/plugin-more-menu-item/index.js     |  9 +++-
 .../plugin-sidebar-more-menu-item/index.js    |  9 +++-
 .../header/preferences-menu-item/index.js     |  9 +++-
 .../keyboard-shortcut-help-modal/index.js     |  4 +-
 .../edit-post/src/components/layout/index.js  | 15 +++----
 .../src/components/preferences-modal/index.js |  3 +-
 .../sidebar/plugin-sidebar/index.js           | 13 +++++-
 .../sidebar/settings-sidebar/index.js         |  5 +--
 .../src/hooks/commands/use-common-commands.js |  9 +++-
 .../index.js                                  |  5 ++-
 packages/edit-post/src/store/actions.js       |  8 +++-
 packages/edit-post/src/store/selectors.js     |  7 +++-
 packages/edit-post/src/store/test/actions.js  |  9 +++-
 packages/edit-post/src/style.scss             |  1 -
 packages/edit-site/package.json               |  1 -
 .../block-editor/block-inspector-button.js    |  5 ++-
 .../edit-site/src/components/editor/index.js  |  8 ++--
 .../src/components/header-edit-mode/index.js  |  4 +-
 .../header-edit-mode/more-menu/index.js       |  4 +-
 .../plugin-more-menu-item/index.js            |  9 +++-
 .../plugin-sidebar-more-menu-item/index.js    |  9 +++-
 .../keyboard-shortcut-help-modal/index.js     |  8 +++-
 .../keyboard-shortcuts/edit-mode.js           |  5 ++-
 .../edit-site/src/components/layout/index.js  |  3 +-
 .../edit-site/src/components/page/index.js    |  9 +++-
 .../src/components/pattern-modal/duplicate.js |  3 +-
 .../src/components/pattern-modal/rename.js    |  3 +-
 .../src/components/preferences-modal/index.js |  3 +-
 .../src/components/save-panel/index.js        |  4 +-
 .../sidebar-edit-mode/default-sidebar.js      | 13 ++++--
 .../global-styles-sidebar.js                  |  8 +++-
 .../src/components/sidebar-edit-mode/index.js |  4 +-
 .../sidebar-edit-mode/plugin-sidebar/index.js |  9 +++-
 .../src/components/welcome-guide/styles.js    |  5 ++-
 .../hooks/commands/use-edit-mode-commands.js  |  7 +++-
 packages/edit-site/src/index.js               |  9 +++-
 packages/edit-site/src/store/actions.js       |  8 +++-
 packages/edit-site/src/store/test/actions.js  |  9 +++-
 packages/edit-site/src/style.scss             |  1 -
 packages/editor/package.json                  |  1 +
 .../provider/with-registry-provider.js        |  1 +
 packages/editor/src/private-apis.js           |  9 ++++
 packages/editor/src/style.scss                |  2 +
 51 files changed, 266 insertions(+), 82 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5d7c6b40890510..9ac141fd09a04c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -407,6 +407,24 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: [ 'packages/edit-post/**', 'packages/edit-site/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						paths: [
+							...restrictedImports,
+							{
+								name: '@wordpress/interface',
+								message:
+									'The edit-post and edit-site package should not directly import the interface package. They should import them from the private APIs of the editor package instead.',
+							},
+						],
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/interactivity*/src/**' ],
 			rules: {
diff --git a/package-lock.json b/package-lock.json
index cbe3fc949f69df..55f2e0ad541189 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54088,7 +54088,6 @@
 				"@wordpress/hooks": "file:../hooks",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
@@ -54141,7 +54140,6 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
@@ -54243,6 +54241,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
@@ -69193,7 +69192,6 @@
 				"@wordpress/hooks": "file:../hooks",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
@@ -69237,7 +69235,6 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
@@ -69321,6 +69318,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/interface": "file:../interface",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
 				"@wordpress/media-utils": "file:../media-utils",
diff --git a/packages/docgen/lib/get-intermediate-representation.js b/packages/docgen/lib/get-intermediate-representation.js
index 2f8e155c575650..9f49fc4d4f93a2 100644
--- a/packages/docgen/lib/get-intermediate-representation.js
+++ b/packages/docgen/lib/get-intermediate-representation.js
@@ -20,7 +20,9 @@ const hasVariableWithName = ( node, name ) =>
 	node.declarations.some( ( declaration ) => {
 		if ( declaration.id.type === 'ObjectPattern' ) {
 			return declaration.id.properties.some(
-				( property ) => property.key.name === name
+				( property ) =>
+					property.key?.name === name ||
+					property.argument?.name === name
 			);
 		}
 		return declaration.id.name === name;
diff --git a/packages/docgen/test/get-intermediate-representation.js b/packages/docgen/test/get-intermediate-representation.js
index 43001aaedeeae3..e61f3101ad8438 100644
--- a/packages/docgen/test/get-intermediate-representation.js
+++ b/packages/docgen/test/get-intermediate-representation.js
@@ -284,6 +284,47 @@ describe( 'Intermediate Representation', () => {
 					} ),
 				] ) );
 
+			it( 'named identifier with RestElements', () => {
+				expect(
+					parse( `
+						/**
+						 * RestElement example.
+						 */
+						const { someKey, ...someApi } = { someKey: 2, restOne: 1, restTwo: 2 };
+
+						export {someApi};
+					` )
+				).toEqual( [
+					{
+						description: 'RestElement example.',
+						lineEnd: 6,
+						lineStart: 6,
+						name: 'someApi',
+						path: 'test-code.ts',
+						tags: [],
+					},
+				] );
+			} );
+
+			it( 'named identifier with undocumented RestElement', () => {
+				expect(
+					parse( `
+						const { someKey, ...otherKeys } = { someKey: 2, restOne: 1, restTwo: 2 };
+
+						export const someApi = {};
+					` )
+				).toEqual( [
+					{
+						description: 'Undocumented declaration.',
+						lineEnd: 3,
+						lineStart: 3,
+						name: 'someApi',
+						path: 'test-code.ts',
+						tags: [],
+					},
+				] );
+			} );
+
 			it( 'named identifier with destructuring', () =>
 				expect(
 					parse( `
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 2de988fa00d6cd..111161edddf505 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -45,7 +45,6 @@
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 0f692967b3ee1f..c600e5b94c6ee6 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -22,7 +22,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
@@ -42,7 +41,7 @@ import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { DocumentTools, PostViewLink, PreviewDropdown } =
+const { DocumentTools, PostViewLink, PreviewDropdown, PinnedItems } =
 	unlock( editorPrivateApis );
 
 const slideY = {
diff --git a/packages/edit-post/src/components/header/index.native.js b/packages/edit-post/src/components/header/index.native.js
index aada04e264490a..ff892dd6916606 100644
--- a/packages/edit-post/src/components/header/index.native.js
+++ b/packages/edit-post/src/components/header/index.native.js
@@ -7,7 +7,7 @@ import { Keyboard } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import '@wordpress/interface';
+import '@wordpress/editor';
 
 /**
  * Internal dependencies
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index 0924af9ecaf742..f39f8cb7adab11 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuGroup, DropdownMenu } from '@wordpress/components';
-import { ActionItem, PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { moreVertical } from '@wordpress/icons';
@@ -16,7 +15,7 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import WritingMenu from '../writing-menu';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ModeSwitcher, ActionItem, PinnedItems } = unlock( editorPrivateApis );
 
 const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
diff --git a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
index d9675974704626..10cba81c3ae24c 100644
--- a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
+++ b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
@@ -1,10 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { ActionItem } from '@wordpress/interface';
 import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
 import { withPluginContext } from '@wordpress/plugins';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ActionItem } = unlock( editorPrivateApis );
 
 /**
  * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
diff --git a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
index 133e5ae2ba301f..c8dda954b81932 100644
--- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis );
 
 /**
  * Renders a menu item in `Plugins` group in `More Menu` drop down,
diff --git a/packages/edit-post/src/components/header/preferences-menu-item/index.js b/packages/edit-post/src/components/header/preferences-menu-item/index.js
index 037a896fc7f070..09eb41c844cd2a 100644
--- a/packages/edit-post/src/components/header/preferences-menu-item/index.js
+++ b/packages/edit-post/src/components/header/preferences-menu-item/index.js
@@ -4,7 +4,14 @@
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Internal dependencies
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
index 666a24f2df4fc7..c393208713ce93 100644
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
@@ -14,7 +14,7 @@ import {
 } from '@wordpress/keyboard-shortcuts';
 import { withSelect, withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -22,7 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
+import { unlock } from '../../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
 	'edit-post/keyboard-shortcut-help';
 
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 6fc9ab570e5ac9..9c5b7623610837 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -28,12 +28,6 @@ import { ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import {
-	ComplementaryArea,
-	FullscreenMode,
-	InterfaceSkeleton,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
@@ -64,7 +58,14 @@ import useCommonCommands from '../../hooks/commands/use-common-commands';
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { InserterSidebar, ListViewSidebar } = unlock( editorPrivateApis );
+const {
+	InserterSidebar,
+	ListViewSidebar,
+	ComplementaryArea,
+	FullscreenMode,
+	InterfaceSkeleton,
+	interfaceStore,
+} = unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 326677aeffc5a1..b9232f628cf7fb 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -5,7 +5,6 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -19,7 +18,7 @@ import EnablePublishSidebarOption from './enable-publish-sidebar';
 const { PreferencesModalSection, PreferenceToggleControl } = unlock(
 	preferencesPrivateApis
 );
-const { PreferencesModal } = unlock( editorPrivateApis );
+const { PreferencesModal, interfaceStore } = unlock( editorPrivateApis );
 
 export const PREFERENCES_MODAL_NAME = 'edit-post/preferences';
 
diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
index ac0bf9f52bed5d..f62dccbadeecc0 100644
--- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
@@ -1,11 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { ComplementaryArea } from '@wordpress/interface';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ComplementaryArea } = unlock( editorPrivateApis );
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 27b85cffa08643..b80edf2e6483ee 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -15,7 +15,6 @@ import {
 } from '@wordpress/element';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
@@ -40,8 +39,8 @@ import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
-
+const { PostCardPanel, PostActions, interfaceStore } =
+	unlock( editorPrivateApis );
 const { Tabs } = unlock( componentsPrivateApis );
 const { PatternOverridesPanel } = unlock( editorPrivateApis );
 
diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
index d3d2024d009ceb..09fe186d90b03f 100644
--- a/packages/edit-post/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-post/src/hooks/commands/use-common-commands.js
@@ -13,8 +13,10 @@ import {
 } from '@wordpress/icons';
 import { useCommand } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -23,6 +25,9 @@ import { store as noticesStore } from '@wordpress/notices';
 import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
 import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function useCommonCommands() {
 	const { openGeneralSidebar, closeGeneralSidebar } =
diff --git a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js b/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
index 930f420a241299..6f222dd34e22cd 100644
--- a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
+++ b/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
@@ -5,12 +5,15 @@ import { MenuItem } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { displayShortcut } from '@wordpress/keycodes';
-import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
 	return (
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index f22edb94a3fee8..fec4ade849f4ed 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -2,9 +2,11 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 import { addFilter } from '@wordpress/hooks';
 
@@ -15,6 +17,8 @@ import { getMetaBoxContainer } from '../utils/meta-boxes';
 import { store as editPostStore } from '.';
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
  *
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 791b384d1e8185..eb752f14ace23a 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -2,10 +2,12 @@
  * WordPress dependencies
  */
 import { createSelector, createRegistrySelector } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -13,6 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
 
diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js
index cb872d30ee3e21..cb0a3fb32952a9 100644
--- a/packages/edit-post/src/store/test/actions.js
+++ b/packages/edit-post/src/store/test/actions.js
@@ -2,17 +2,22 @@
  * WordPress dependencies
  */
 import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '..';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function createRegistryWithStores() {
 	// Create a registry and register used stores.
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 4ba063905d8b2e..b408d73bae844f 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,4 +1,3 @@
-@import "../../interface/src/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 06acfe7c748b4f..c5562642076763 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -51,7 +51,6 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js
index 758ca50272adeb..295d318d6da75b 100644
--- a/packages/edit-site/src/components/block-editor/block-inspector-button.js
+++ b/packages/edit-site/src/components/block-editor/block-inspector-button.js
@@ -5,8 +5,8 @@ import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -14,6 +14,9 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editSiteStore } from '../../store';
 import { STORE_NAME } from '../../store/constants';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index ba04333b985bde..a95c671f8e7671 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -24,11 +24,6 @@ import {
 	store as blockEditorStore,
 	BlockInspector,
 } from '@wordpress/block-editor';
-import {
-	InterfaceSkeleton,
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
 import {
 	EditorKeyboardShortcutsRegister,
 	EditorKeyboardShortcuts,
@@ -68,6 +63,9 @@ const {
 	ExperimentalEditorProvider: EditorProvider,
 	InserterSidebar,
 	ListViewSidebar,
+	InterfaceSkeleton,
+	ComplementaryArea,
+	interfaceStore,
 } = unlock( editorPrivateApis );
 
 const interfaceLabels = {
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index aed1d9584b2ca6..c54098558798ac 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 import {
@@ -44,7 +43,8 @@ import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useShowBlockTools } = unlock( blockEditorPrivateApis );
-const { PostViewLink, PreviewDropdown } = unlock( editorPrivateApis );
+const { PostViewLink, PreviewDropdown, PinnedItems } =
+	unlock( editorPrivateApis );
 
 export default function HeaderEditMode() {
 	const {
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
index 00a61aa7492ec3..f297899e37b9d0 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -11,7 +11,6 @@ import {
 	VisuallyHidden,
 	DropdownMenu,
 } from '@wordpress/components';
-import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -39,7 +38,8 @@ import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import { unlock } from '../../../lock-unlock';
 
-const { ModeSwitcher } = unlock( editorPrivateApis );
+const { ModeSwitcher, ActionItem, interfaceStore } =
+	unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
index edb093a487e772..67c6f286e0b608 100644
--- a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
@@ -1,10 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { ActionItem } from '@wordpress/interface';
 import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
 import { withPluginContext } from '@wordpress/plugins';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ActionItem } = unlock( editorPrivateApis );
 
 /**
  * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
index 4d6c8008497241..18541ff76d12b9 100644
--- a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis );
 
 /**
  * Renders a menu item in `Plugins` group in `More Menu` drop down,
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js
index b1d85f88dd91ef..bc2d2f48dd9772 100644
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js
@@ -12,8 +12,13 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { store as interfaceStore } from '@wordpress/interface';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
 
 /**
  * Internal dependencies
@@ -22,6 +27,7 @@ import { textFormattingShortcuts } from './config';
 import Shortcut from './shortcut';
 import DynamicShortcut from './dynamic-shortcut';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 export const KEYBOARD_SHORTCUT_HELP_MODAL_NAME =
 	'edit-site/keyboard-shortcut-help';
 
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
index b3675c757ea018..33ca83afa32959 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
@@ -4,8 +4,8 @@
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as interfaceStore } from '@wordpress/interface';
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -13,6 +13,9 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editSiteStore } from '../../store';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function KeyboardShortcutsEditMode() {
 	const isBlockInspectorOpen = useSelect(
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 1ff31c973a99cd..51f55302f16e75 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -19,7 +19,6 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	CommandMenu,
@@ -31,6 +30,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -55,6 +55,7 @@ import useMovingAnimation from './animation';
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
index 02d0bd2e746eec..db3e1ad366430b 100644
--- a/packages/edit-site/src/components/page/index.js
+++ b/packages/edit-site/src/components/page/index.js
@@ -6,13 +6,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NavigableRegion } from '@wordpress/interface';
-import { EditorSnackbars } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import Header from './header';
+import { unlock } from '../../lock-unlock';
+
+const { NavigableRegion } = unlock( editorPrivateApis );
 
 export default function Page( {
 	title,
diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js
index 8de13e9cf39479..e59decbf8b260c 100644
--- a/packages/edit-site/src/components/pattern-modal/duplicate.js
+++ b/packages/edit-site/src/components/pattern-modal/duplicate.js
@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { getQueryArgs } from '@wordpress/url';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -17,6 +17,7 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { DuplicatePatternModal } = unlock( patternsPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternDuplicateModal() {
 	const { record } = useEditedEntityRecord();
diff --git a/packages/edit-site/src/components/pattern-modal/rename.js b/packages/edit-site/src/components/pattern-modal/rename.js
index 3175451bd16460..8c817172cc2099 100644
--- a/packages/edit-site/src/components/pattern-modal/rename.js
+++ b/packages/edit-site/src/components/pattern-modal/rename.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { RenamePatternModal } = unlock( patternsPrivateApis );
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternRenameModal() {
 	const { record: pattern } = useEditedEntityRecord();
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
index 4d719fedad234f..89d113cb8d1b71 100644
--- a/packages/edit-site/src/components/preferences-modal/index.js
+++ b/packages/edit-site/src/components/preferences-modal/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { store as interfaceStore } from '@wordpress/interface';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -10,7 +9,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import { unlock } from '../../lock-unlock';
 
-const { PreferencesModal } = unlock( editorPrivateApis );
+const { PreferencesModal, interfaceStore } = unlock( editorPrivateApis );
 
 export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
 
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 8a09a81ab38e5b..b3545e0566fca6 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -26,7 +25,8 @@ import { useActivateTheme } from '../../utils/use-activate-theme';
 import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
-const { EntitiesSavedStatesExtensible } = unlock( privateApis );
+const { EntitiesSavedStatesExtensible, NavigableRegion } =
+	unlock( privateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
index f92ca4c75929cb..7cbd18565e51f7 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
@@ -1,10 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	ComplementaryArea,
-	ComplementaryAreaMoreMenuItem,
-} from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ComplementaryArea, ComplementaryAreaMoreMenuItem } =
+	unlock( editorPrivateApis );
 
 export default function DefaultSidebar( {
 	className,
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
index 5cc0baa489ec73..db02312bbf5640 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
@@ -12,9 +12,11 @@ import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -26,6 +28,8 @@ import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 export default function GlobalStylesSidebar() {
 	const {
 		shouldClearCanvasContainerView,
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index 38b2ca0665cc4b..71eb093e980039 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -9,9 +9,9 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
-
+const { interfaceStore } = unlock( editorPrivateApis );
 const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
 	'EditSiteSidebarInspector'
 );
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
index 23eafa7b473054..a67dd885758c00 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { ComplementaryArea } from '@wordpress/interface';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ComplementaryArea } = unlock( editorPrivateApis );
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
diff --git a/packages/edit-site/src/components/welcome-guide/styles.js b/packages/edit-site/src/components/welcome-guide/styles.js
index f0e6f65a9e434d..8e832a2f7e88cc 100644
--- a/packages/edit-site/src/components/welcome-guide/styles.js
+++ b/packages/edit-site/src/components/welcome-guide/styles.js
@@ -4,14 +4,17 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideStyles() {
 	const { toggle } = useDispatch( preferencesStore );
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 0550a0d5978915..1ad5861d5d0a28 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -19,8 +19,10 @@ import {
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -36,6 +38,7 @@ import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index fccf8cb02bc548..d4479af7cc8535 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -10,8 +10,10 @@ import {
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { createRoot } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
-import { store as interfaceStore } from '@wordpress/interface';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -24,6 +26,9 @@ import {
 import './hooks';
 import { store as editSiteStore } from './store';
 import App from './components/app';
+import { unlock } from './lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Initializes the site editor screen.
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 2806568d627c84..dcdfd0cd576c21 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -4,9 +4,11 @@
 import { parse } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -20,6 +22,8 @@ import {
 } from '../utils/constants';
 import { unlock } from '../lock-unlock';
 
+const { interfaceStore } = unlock( editorPrivateApis );
+
 /**
  * Dispatches an action that toggles a feature flag.
  *
diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
index 05dd239d19c69f..3fbe5d19aa94e3 100644
--- a/packages/edit-site/src/store/test/actions.js
+++ b/packages/edit-site/src/store/test/actions.js
@@ -4,15 +4,20 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '..';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function createRegistryWithStores() {
 	// create a registry
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index f7fa1e35fffaab..32ad64f34fb514 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,4 +1,3 @@
-@import "../../interface/src/style.scss";
 @import "../../dataviews/src/style.scss";
 
 @import "./components/add-new-template/style.scss";
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 09fef01dea30cd..9b4068d2cd12c5 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -49,6 +49,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
diff --git a/packages/editor/src/components/provider/with-registry-provider.js b/packages/editor/src/components/provider/with-registry-provider.js
index d463c04f74d98e..32c30a9f8d6873 100644
--- a/packages/editor/src/components/provider/with-registry-provider.js
+++ b/packages/editor/src/components/provider/with-registry-provider.js
@@ -35,6 +35,7 @@ const withRegistryProvider = createHigherOrderComponent(
 					},
 					registry
 				);
+				// Todo: The interface store should also be created per instance.
 				newRegistry.registerStore( 'core/editor', storeConfig );
 				setSubRegistry( newRegistry );
 			}, [ registry ] );
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
index 4bdcbb1042b228..db5036d14df028 100644
--- a/packages/editor/src/private-apis.js
+++ b/packages/editor/src/private-apis.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
 /**
  * Internal dependencies
  */
@@ -20,6 +25,8 @@ import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
 import PostCardPanel from './components/post-card-panel';
 
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
 export const privateApis = {};
 lock( privateApis, {
 	DocumentTools,
@@ -41,4 +48,6 @@ lock( privateApis, {
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
 } );
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 865635f228891e..c5fae93c4ce536 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -1,3 +1,5 @@
+@import "../../interface/src/style.scss";
+
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
 @import "./components/document-bar/style.scss";

From 69b748a1eed8706b65dad64a89a34427b65d27b2 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 16 Apr 2024 13:00:11 +0200
Subject: [PATCH 22/35] Fix: remove unused css from page panels styles.
 (#60774)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../components/sidebar-edit-mode/page-panels/style.scss   | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index b57d3f6b3e9c98..426bf103bb41ab 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -1,11 +1,3 @@
-.edit-site-page-card__actions {
-	flex-shrink: 0;
-}
-
-.edit-site-page-panels__swap-template__confirm-modal__actions {
-	margin-top: $grid-unit-30;
-}
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;

From 72198da4b7544797db876f04d7312cdf3bc4bdd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Apr 2024 14:02:23 +0200
Subject: [PATCH 23/35] Patterns: add a "All Template Parts" section (#60775)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 .../src/components/page-patterns/header.js       |  6 ++++--
 .../src/components/page-patterns/search-items.js |  3 +++
 .../sidebar-navigation-screen-patterns/index.js  | 16 ++++++++++++++++
 packages/edit-site/src/utils/constants.js        |  1 +
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
index ce078900a52297..7cca997c7dd02e 100644
--- a/packages/edit-site/src/components/page-patterns/header.js
+++ b/packages/edit-site/src/components/page-patterns/header.js
@@ -40,8 +40,10 @@ export default function PatternsHeader( {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId
 		);
-		title = templatePartArea?.label;
-		description = templatePartArea?.description;
+		title = templatePartArea?.label || __( 'All Template Parts' );
+		description =
+			templatePartArea?.description ||
+			__( 'Includes every template part defined for any area.' );
 	} else if ( type === PATTERN_TYPES.theme ) {
 		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId
diff --git a/packages/edit-site/src/components/page-patterns/search-items.js b/packages/edit-site/src/components/page-patterns/search-items.js
index b5231964a78d68..8aa4b349f48d7c 100644
--- a/packages/edit-site/src/components/page-patterns/search-items.js
+++ b/packages/edit-site/src/components/page-patterns/search-items.js
@@ -16,6 +16,7 @@ const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
  * Internal dependencies
  */
 import {
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
@@ -48,6 +49,7 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
  */
 export const searchItems = ( items = [], searchInput = '', config = {} ) => {
 	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+
 	// Filter patterns by category: the default category indicates that all patterns will be shown.
 	const onlyFilterByCategory =
 		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
@@ -100,6 +102,7 @@ function getItemSearchRank( item, searchTerm, config ) {
 
 	let rank =
 		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		categoryId === TEMPLATE_PART_ALL_AREAS_CATEGORY ||
 		( categoryId === PATTERN_USER_CATEGORY &&
 			item.type === PATTERN_TYPES.user ) ||
 		hasCategory( item, categoryId )
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 587c24e326c2dd..933ef256cf0459 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -38,6 +38,22 @@ function TemplatePartGroup( { areas, currentArea, currentType } ) {
 				<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
 			</div>
 			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+				<CategoryItem
+					key="all"
+					count={ Object.values( areas )
+						.map(
+							( { templateParts } ) => templateParts?.length || 0
+						)
+						.reduce( ( acc, val ) => acc + val, 0 ) }
+					icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
+					label={ __( 'All template parts' ) }
+					id={ 'all-parts' }
+					type={ TEMPLATE_PART_POST_TYPE }
+					isActive={
+						currentArea === 'all-parts' &&
+						currentType === TEMPLATE_PART_POST_TYPE
+					}
+				/>
 				{ Object.entries( areas ).map(
 					( [ area, { label, templateParts } ] ) => (
 						<CategoryItem
diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js
index dfae1102df9215..395c59afdd6470 100644
--- a/packages/edit-site/src/utils/constants.js
+++ b/packages/edit-site/src/utils/constants.js
@@ -21,6 +21,7 @@ export const TEMPLATE_ORIGINS = {
 	plugin: 'plugin',
 };
 export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
+export const TEMPLATE_PART_ALL_AREAS_CATEGORY = 'all-parts';
 
 // Patterns.
 export const {

From bed12ce233810c8a7d31a1e6bd0056cb437763e0 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 16 Apr 2024 13:04:22 +0100
Subject: [PATCH 24/35] Site Editor: Support starter patterns (#60745)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 .../src/block/test/edit.native.js             |  1 +
 .../edit-post/src/components/layout/index.js  |  2 -
 packages/edit-post/src/style.scss             |  1 -
 .../editor/src/components/provider/index.js   |  2 +
 .../components/start-page-options/index.js    | 65 +++++++++++++------
 .../components/start-page-options/style.scss  |  2 +-
 packages/editor/src/style.scss                |  1 +
 7 files changed, 51 insertions(+), 23 deletions(-)
 rename packages/{edit-post => editor}/src/components/start-page-options/index.js (58%)
 rename packages/{edit-post => editor}/src/components/start-page-options/style.scss (83%)

diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js
index 0b719dd06609df..f184fa164ce71b 100644
--- a/packages/block-library/src/block/test/edit.native.js
+++ b/packages/block-library/src/block/test/edit.native.js
@@ -45,6 +45,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
 	meta: { footnotes: '' },
+	wp_pattern_category: [],
 } );
 
 beforeAll( () => {
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 9c5b7623610837..fe8f132f2568d9 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -50,7 +50,6 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
-import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -365,7 +364,6 @@ function Layout( { initialPost } ) {
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<InitPatternModal />
-			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index b408d73bae844f..7cae91f847a78c 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -10,7 +10,6 @@
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-page-options/style.scss";
 
 /**
  * Animations
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 5d4b2c0079a741..b1a2164e1274ef 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -26,6 +26,7 @@ import NavigationBlockEditingMode from './navigation-block-editing-mode';
 import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
 import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
+import StartPageOptions from '../start-page-options';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -267,6 +268,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 								<NavigationBlockEditingMode />
 							) }
 							<BlockRemovalWarnings />
+							<StartPageOptions />
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>
diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js
similarity index 58%
rename from packages/edit-post/src/components/start-page-options/index.js
rename to packages/editor/src/components/start-page-options/index.js
index 0ef3e166e8ee1a..70e7ecd642d4c5 100644
--- a/packages/edit-post/src/components/start-page-options/index.js
+++ b/packages/editor/src/components/start-page-options/index.js
@@ -3,19 +3,19 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../store';
+import { store as editorStore } from '../../store';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
@@ -23,11 +23,19 @@ function useStartPatterns() {
 	// the current post type is part of the postTypes declared.
 	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
 		( select ) => {
-			const { getPatternsByBlockTypes } = select( blockEditorStore );
-			const { getCurrentPostType } = select( editorStore );
+			const { getPatternsByBlockTypes, getBlocksByName } =
+				select( blockEditorStore );
+			const { getCurrentPostType, getRenderingMode } =
+				select( editorStore );
+			const rootClientId =
+				getRenderingMode() === 'post-only'
+					? ''
+					: getBlocksByName( 'core/post-content' )?.[ 0 ];
 			return {
-				blockPatternsWithPostContentBlockType:
-					getPatternsByBlockTypes( 'core/post-content' ),
+				blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
+					'core/post-content',
+					rootClientId
+				),
 				postType: getCurrentPostType(),
 			};
 		},
@@ -49,13 +57,21 @@ function useStartPatterns() {
 
 function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-	const { resetEditorBlocks } = useDispatch( editorStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
 			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
-				resetEditorBlocks( blocks );
+				editEntityRecord( 'postType', postType, postId, { blocks } );
 				onChoosePattern();
 			} }
 		/>
@@ -72,12 +88,11 @@ function StartPageOptionsModal( { onClose } ) {
 
 	return (
 		<Modal
-			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			isFullScreen
 			onRequestClose={ onClose }
 		>
-			<div className="edit-post-start-page-options__modal-content">
+			<div className="editor-start-page-options__modal-content">
 				<PatternSelection
 					blockPatterns={ startPatterns }
 					onChoosePattern={ onClose }
@@ -89,17 +104,29 @@ function StartPageOptionsModal( { onClose } ) {
 
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
-	const shouldEnableModal = useSelect( ( select ) => {
-		const { isCleanNewPost, getRenderingMode } = select( editorStore );
-		const { isFeatureActive } = select( editPostStore );
+	const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
+		const {
+			isEditedPostDirty,
+			isEditedPostEmpty,
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+		} = select( editorStore );
+		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
 
-		return (
-			getRenderingMode() === 'post-only' &&
-			! isFeatureActive( 'welcomeGuide' ) &&
-			isCleanNewPost()
-		);
+		return {
+			shouldEnableModal:
+				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
 	}, [] );
 
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
 	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}
diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss
similarity index 83%
rename from packages/edit-post/src/components/start-page-options/style.scss
rename to packages/editor/src/components/start-page-options/style.scss
index 52f3f5ff9a8889..129d670526c709 100644
--- a/packages/edit-post/src/components/start-page-options/style.scss
+++ b/packages/editor/src/components/start-page-options/style.scss
@@ -1,5 +1,5 @@
 // 2 column masonry layout.
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+.editor-start-page-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index c5fae93c4ce536..8d9737c2a4d0e8 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -32,5 +32,6 @@
 @import "./components/post-visibility/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
+@import "./components/start-page-options/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";

From 09849d7d6e24496386a459a192f255ac1fa0dd55 Mon Sep 17 00:00:00 2001
From: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Date: Tue, 16 Apr 2024 14:47:47 +0100
Subject: [PATCH 25/35] Font Library: Change Spinner to ProgressBar component
 (#60570)

* Replace Spinner with ProgressBar

* Fix unrelated dependency array

* Revert dependency array change

* Improve use of Spacer components

* Update packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

* Update packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>

* Replace ProgressBar with Spinner

* Add CSS for loading container

* Replace Spinner in InstalledFonts

* Replace Spinner in FontCollection

* Fix text wrap on font names

* Make demo text CSS more specific

* Simplify ProgressBar markup

* Remove unnecessary spaces

* Move centering offset to padding-top

* Add calculated top padding to loading wrapper element

---------

Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 .../font-library-modal/font-collection.js     | 470 +++++++++---------
 .../font-library-modal/installed-fonts.js     | 303 +++++------
 .../font-library-modal/style.scss             |  38 +-
 3 files changed, 427 insertions(+), 384 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 4368d72645959b..1a1853ac62a381 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -19,12 +19,12 @@ import {
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
-	Spinner,
 	FlexItem,
 	Flex,
 	Button,
 	DropdownMenu,
 	SearchControl,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
@@ -45,6 +45,8 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
+import { unlock } from '../../../lock-unlock';
+const { ProgressBar } = unlock( componentsPrivateApis );
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -136,6 +138,8 @@ function FontCollection( { slug } ) {
 		[ collectionFonts, filters ]
 	);
 
+	const isLoading = ! selectedCollection?.font_families && ! notice;
+
 	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
 	// The height of each font family item is 61px.
 	const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );
@@ -260,235 +264,255 @@ function FontCollection( { slug } ) {
 
 	return (
 		<div className="font-library-modal__tabpanel-layout">
-			<NavigatorProvider
-				initialPath="/"
-				className="font-library-modal__tabpanel-layout"
-			>
-				<NavigatorScreen path="/">
-					<HStack justify="space-between">
-						<VStack>
-							<Heading level={ 2 } size={ 13 }>
-								{ selectedCollection.name }
-							</Heading>
-							<Text>{ selectedCollection.description }</Text>
-						</VStack>
-						<ActionsComponent />
-					</HStack>
-					<Spacer margin={ 4 } />
-					<Flex>
-						<FlexItem>
-							<SearchControl
-								className="font-library-modal__search"
-								value={ filters.search }
-								placeholder={ __( 'Font name…' ) }
-								label={ __( 'Search' ) }
-								onChange={ debouncedUpdateSearchInput }
-								__nextHasNoMarginBottom
-								hideLabelFromVision={ false }
-							/>
-						</FlexItem>
-						<FlexItem>
-							<SelectControl
-								label={ __( 'Category' ) }
-								value={ filters.category }
-								onChange={ handleCategoryFilter }
-							>
-								{ categories &&
-									categories.map( ( category ) => (
-										<option
-											value={ category.slug }
-											key={ category.slug }
-										>
-											{ category.name }
-										</option>
-									) ) }
-							</SelectControl>
-						</FlexItem>
-					</Flex>
-
-					<Spacer margin={ 4 } />
-
-					{ ! selectedCollection?.font_families && ! notice && (
-						<Spinner />
-					) }
+			{ isLoading && (
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
+			) }
 
-					{ !! selectedCollection?.font_families?.length &&
-						! fonts.length && (
-							<Text>
-								{ __(
-									'No fonts found. Try with a different search term'
+			{ ! isLoading && (
+				<>
+					<NavigatorProvider
+						initialPath="/"
+						className="font-library-modal__tabpanel-layout"
+					>
+						<NavigatorScreen path="/">
+							<HStack justify="space-between">
+								<VStack>
+									<Heading level={ 2 } size={ 13 }>
+										{ selectedCollection.name }
+									</Heading>
+									<Text>
+										{ selectedCollection.description }
+									</Text>
+								</VStack>
+								<ActionsComponent />
+							</HStack>
+							<Spacer margin={ 4 } />
+							<Flex>
+								<FlexItem>
+									<SearchControl
+										className="font-library-modal__search"
+										value={ filters.search }
+										placeholder={ __( 'Font name…' ) }
+										label={ __( 'Search' ) }
+										onChange={ debouncedUpdateSearchInput }
+										__nextHasNoMarginBottom
+										hideLabelFromVision={ false }
+									/>
+								</FlexItem>
+								<FlexItem>
+									<SelectControl
+										label={ __( 'Category' ) }
+										value={ filters.category }
+										onChange={ handleCategoryFilter }
+									>
+										{ categories &&
+											categories.map( ( category ) => (
+												<option
+													value={ category.slug }
+													key={ category.slug }
+												>
+													{ category.name }
+												</option>
+											) ) }
+									</SelectControl>
+								</FlexItem>
+							</Flex>
+
+							<Spacer margin={ 4 } />
+
+							{ !! selectedCollection?.font_families?.length &&
+								! fonts.length && (
+									<Text>
+										{ __(
+											'No fonts found. Try with a different search term'
+										) }
+									</Text>
 								) }
+
+							<div className="font-library-modal__fonts-grid__main">
+								{ items.map( ( font ) => (
+									<FontCard
+										key={ font.font_family_settings.slug }
+										font={ font.font_family_settings }
+										navigatorPath={ '/fontFamily' }
+										onClick={ () => {
+											setSelectedFont(
+												font.font_family_settings
+											);
+										} }
+									/>
+								) ) }
+							</div>
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
+									onClick={ () => {
+										setSelectedFont( null );
+										setNotice( null );
+									} }
+									label={ __( 'Back' ) }
+								/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ selectedFont?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __( 'Select font variants to install.' ) }
 							</Text>
-						) }
-
-					<div className="font-library-modal__fonts-grid__main">
-						{ items.map( ( font ) => (
-							<FontCard
-								key={ font.font_family_settings.slug }
-								font={ font.font_family_settings }
-								navigatorPath={ '/fontFamily' }
-								onClick={ () => {
-									setSelectedFont(
-										font.font_family_settings
-									);
-								} }
-							/>
-						) ) }
-					</div>
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
-							onClick={ () => {
-								setSelectedFont( null );
-								setNotice( null );
-							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getSortedFontFaces( selectedFont ).map(
+									( face, i ) => (
+										<CollectionFontVariant
+											font={ selectedFont }
+											face={ face }
+											key={ `face${ i }` }
+											handleToggleVariant={
+												handleToggleVariant
+											}
+											selected={ isFontFontFaceInOutline(
+												selectedFont.slug,
+												selectedFont.fontFace
+													? face
+													: null, // If the font has no fontFace, we want to check if the font is in the outline
+												fontToInstallOutline
+											) }
+										/>
+									)
+								) }
+							</VStack>
+							<Spacer margin={ 16 } />
+						</NavigatorScreen>
+					</NavigatorProvider>
+
+					{ selectedFont && (
+						<Flex
+							justify="flex-end"
+							className="font-library-modal__tabpanel-layout__footer"
 						>
-							{ selectedFont?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
+							<Button
+								variant="primary"
+								onClick={ handleInstall }
+								isBusy={ isInstalling }
+								disabled={
+									fontsToInstall.length === 0 || isInstalling
+								}
+								__experimentalIsFocusable
 							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
+								{ __( 'Install' ) }
+							</Button>
+						</Flex>
 					) }
-					<Spacer margin={ 4 } />
-					<Text> { __( 'Select font variants to install.' ) } </Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getSortedFontFaces( selectedFont ).map(
-							( face, i ) => (
-								<CollectionFontVariant
-									font={ selectedFont }
-									face={ face }
-									key={ `face${ i }` }
-									handleToggleVariant={ handleToggleVariant }
-									selected={ isFontFontFaceInOutline(
-										selectedFont.slug,
-										selectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
-										fontToInstallOutline
-									) }
-								/>
-							)
-						) }
-					</VStack>
-					<Spacer margin={ 16 } />
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			{ selectedFont && (
-				<Flex
-					justify="flex-end"
-					className="font-library-modal__tabpanel-layout__footer"
-				>
-					<Button
-						variant="primary"
-						onClick={ handleInstall }
-						isBusy={ isInstalling }
-						disabled={ fontsToInstall.length === 0 || isInstalling }
-						__experimentalIsFocusable
-					>
-						{ __( 'Install' ) }
-					</Button>
-				</Flex>
-			) }
 
-			{ ! selectedFont && (
-				<Flex
-					justify="center"
-					className="font-library-modal__tabpanel-layout__footer"
-				>
-					<Button
-						label={ __( 'First page' ) }
-						size="compact"
-						onClick={ () => setPage( 1 ) }
-						disabled={ page === 1 }
-						__experimentalIsFocusable
-					>
-						<span>«</span>
-					</Button>
-					<Button
-						label={ __( 'Previous page' ) }
-						size="compact"
-						onClick={ () => setPage( page - 1 ) }
-						disabled={ page === 1 }
-						__experimentalIsFocusable
-					>
-						<span>‹</span>
-					</Button>
-					<HStack
-						justify="flex-start"
-						expanded={ false }
-						spacing={ 2 }
-					>
-						{ createInterpolateElement(
-							sprintf(
-								// translators: %s: Total number of pages.
-								_x(
-									'Page <CurrentPageControl /> of %s',
-									'paging'
-								),
-								totalPages
-							),
-							{
-								CurrentPageControl: (
-									<SelectControl
-										aria-label={ __( 'Current page' ) }
-										value={ page }
-										options={ [
-											...Array( totalPages ),
-										].map( ( e, i ) => {
-											return {
-												label: i + 1,
-												value: i + 1,
-											};
-										} ) }
-										onChange={ ( newPage ) =>
-											setPage( parseInt( newPage ) )
-										}
-										size={ 'compact' }
-										__nextHasNoMarginBottom
-									/>
-								),
-							}
-						) }
-					</HStack>
-					<Button
-						label={ __( 'Next page' ) }
-						size="compact"
-						onClick={ () => setPage( page + 1 ) }
-						disabled={ page === totalPages }
-						__experimentalIsFocusable
-					>
-						<span>›</span>
-					</Button>
-					<Button
-						label={ __( 'Last page' ) }
-						size="compact"
-						onClick={ () => setPage( totalPages ) }
-						disabled={ page === totalPages }
-						__experimentalIsFocusable
-					>
-						<span>»</span>
-					</Button>
-				</Flex>
+					{ ! selectedFont && (
+						<Flex
+							justify="center"
+							className="font-library-modal__tabpanel-layout__footer"
+						>
+							<Button
+								label={ __( 'First page' ) }
+								size="compact"
+								onClick={ () => setPage( 1 ) }
+								disabled={ page === 1 }
+								__experimentalIsFocusable
+							>
+								<span>«</span>
+							</Button>
+							<Button
+								label={ __( 'Previous page' ) }
+								size="compact"
+								onClick={ () => setPage( page - 1 ) }
+								disabled={ page === 1 }
+								__experimentalIsFocusable
+							>
+								<span>‹</span>
+							</Button>
+							<HStack
+								justify="flex-start"
+								expanded={ false }
+								spacing={ 2 }
+							>
+								{ createInterpolateElement(
+									sprintf(
+										// translators: %s: Total number of pages.
+										_x(
+											'Page <CurrentPageControl /> of %s',
+											'paging'
+										),
+										totalPages
+									),
+									{
+										CurrentPageControl: (
+											<SelectControl
+												aria-label={ __(
+													'Current page'
+												) }
+												value={ page }
+												options={ [
+													...Array( totalPages ),
+												].map( ( e, i ) => {
+													return {
+														label: i + 1,
+														value: i + 1,
+													};
+												} ) }
+												onChange={ ( newPage ) =>
+													setPage(
+														parseInt( newPage )
+													)
+												}
+												size={ 'compact' }
+												__nextHasNoMarginBottom
+											/>
+										),
+									}
+								) }
+							</HStack>
+							<Button
+								label={ __( 'Next page' ) }
+								size="compact"
+								onClick={ () => setPage( page + 1 ) }
+								disabled={ page === totalPages }
+								__experimentalIsFocusable
+							>
+								<span>›</span>
+							</Button>
+							<Button
+								label={ __( 'Last page' ) }
+								size="compact"
+								onClick={ () => setPage( totalPages ) }
+								disabled={ page === totalPages }
+								__experimentalIsFocusable
+							>
+								<span>»</span>
+							</Button>
+						</Flex>
+					) }
+				</>
 			) }
 		</div>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 16011a20e82fbd..b33bb1b639d000 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -15,7 +15,6 @@ import {
 	__experimentalVStack as VStack,
 	Flex,
 	Notice,
-	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
@@ -114,163 +113,171 @@ function InstalledFonts() {
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
-				<HStack align="center">
-					<Spacer />
-					<Spinner />
-					<Spacer />
-				</HStack>
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
 			) }
 
-			<NavigatorProvider
-				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
-			>
-				<NavigatorScreen path="/">
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					{ baseCustomFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Installed Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseCustomFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
+			{ ! isResolvingLibrary && (
+				<>
+					<NavigatorProvider
+						initialPath={
+							libraryFontSelected ? '/fontFamily' : '/'
+						}
+					>
+						<NavigatorScreen path="/">
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							{ baseCustomFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Installed Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseCustomFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+									<Spacer margin={ 8 } />
+								</>
+							) }
 
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-							<Spacer margin={ 2 } />
-							{ baseThemeFonts.map( ( font ) => (
-								<FontCard
-									font={ font }
-									key={ font.slug }
-									navigatorPath={ '/fontFamily' }
-									variantsText={ getFontCardVariantsText(
-										font
-									) }
+							{ baseThemeFonts.length > 0 && (
+								<>
+									<Text className="font-library-modal__subtitle">
+										{ __( 'Theme Fonts' ) }
+									</Text>
+									<Spacer margin={ 2 } />
+									{ baseThemeFonts.map( ( font ) => (
+										<FontCard
+											font={ font }
+											key={ font.slug }
+											navigatorPath={ '/fontFamily' }
+											variantsText={ getFontCardVariantsText(
+												font
+											) }
+											onClick={ () => {
+												handleSetLibraryFontSelected(
+													font
+												);
+											} }
+										/>
+									) ) }
+								</>
+							) }
+						</NavigatorScreen>
+
+						<NavigatorScreen path="/fontFamily">
+							<ConfirmDeleteDialog
+								font={ libraryFontSelected }
+								isOpen={ isConfirmDeleteOpen }
+								setIsOpen={ setIsConfirmDeleteOpen }
+								setNotice={ setNotice }
+								uninstallFontFamily={ uninstallFontFamily }
+								handleSetLibraryFontSelected={
+									handleSetLibraryFontSelected
+								}
+							/>
+
+							<Flex justify="flex-start">
+								<NavigatorToParentButton
+									icon={ chevronLeft }
+									size="small"
 									onClick={ () => {
-										handleSetLibraryFontSelected( font );
+										handleSetLibraryFontSelected( null );
 									} }
+									label={ __( 'Back' ) }
 								/>
-							) ) }
-						</>
-					) }
-				</NavigatorScreen>
-
-				<NavigatorScreen path="/fontFamily">
-					<ConfirmDeleteDialog
-						font={ libraryFontSelected }
-						isOpen={ isConfirmDeleteOpen }
-						setIsOpen={ setIsConfirmDeleteOpen }
-						setNotice={ setNotice }
-						uninstallFontFamily={ uninstallFontFamily }
-						handleSetLibraryFontSelected={
-							handleSetLibraryFontSelected
-						}
-					/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ libraryFontSelected?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __(
+									'Choose font variants. Keep in mind that too many variants could make your site slower.'
+								) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<Spacer margin={ 8 } />
+								{ getFontFacesToDisplay(
+									libraryFontSelected
+								).map( ( face, i ) => (
+									<LibraryFontVariant
+										font={ libraryFontSelected }
+										face={ face }
+										key={ `face${ i }` }
+									/>
+								) ) }
+							</VStack>
+						</NavigatorScreen>
+					</NavigatorProvider>
 
-					<Flex justify="flex-start">
-						<NavigatorToParentButton
-							icon={ chevronLeft }
-							size="small"
+					<HStack
+						justify="flex-end"
+						className="font-library-modal__tabpanel-layout__footer"
+					>
+						{ isInstalling && <ProgressBar /> }
+						{ shouldDisplayDeleteButton && (
+							<Button
+								isDestructive
+								variant="tertiary"
+								onClick={ handleUninstallClick }
+							>
+								{ __( 'Delete' ) }
+							</Button>
+						) }
+						<Button
+							variant="primary"
 							onClick={ () => {
-								handleSetLibraryFontSelected( null );
+								saveFontFamilies( fontFamilies );
 							} }
-							label={ __( 'Back' ) }
-						/>
-						<Heading
-							level={ 2 }
-							size={ 13 }
-							className="edit-site-global-styles-header"
+							disabled={ ! fontFamiliesHasChanges }
+							__experimentalIsFocusable
 						>
-							{ libraryFontSelected?.name }
-						</Heading>
-					</Flex>
-					{ notice && (
-						<>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</>
-					) }
-					<Spacer margin={ 4 } />
-					<Text>
-						{ __(
-							'Choose font variants. Keep in mind that too many variants could make your site slower.'
-						) }
-					</Text>
-					<Spacer margin={ 4 } />
-					<VStack spacing={ 0 }>
-						<Spacer margin={ 8 } />
-						{ getFontFacesToDisplay( libraryFontSelected ).map(
-							( face, i ) => (
-								<LibraryFontVariant
-									font={ libraryFontSelected }
-									face={ face }
-									key={ `face${ i }` }
-								/>
-							)
-						) }
-					</VStack>
-				</NavigatorScreen>
-			</NavigatorProvider>
-
-			<HStack
-				justify="flex-end"
-				className="font-library-modal__tabpanel-layout__footer"
-			>
-				{ isInstalling && <ProgressBar /> }
-				{ shouldDisplayDeleteButton && (
-					<Button
-						isDestructive
-						variant="tertiary"
-						onClick={ handleUninstallClick }
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				) }
-				<Button
-					variant="primary"
-					onClick={ () => {
-						saveFontFamilies( fontFamilies );
-					} }
-					disabled={ ! fontFamiliesHasChanges }
-					__experimentalIsFocusable
-				>
-					{ __( 'Update' ) }
-				</Button>
-			</HStack>
+							{ __( 'Update' ) }
+						</Button>
+					</HStack>
+				</>
+			) }
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index ccf4eb7ea623fc..201d4d87a3fb16 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -7,7 +7,6 @@ $footer-height: 70px;
 	// the content width, we should use that prop instead of this style.
 	// see https://github.com/WordPress/gutenberg/issues/54471.
 	&.font-library-modal {
-
 		@include break-medium() {
 			width: 65vw;
 		}
@@ -35,9 +34,22 @@ $footer-height: 70px;
 }
 
 .font-library-modal__tabpanel-layout {
-
 	margin-top: $grid-unit-40;
 
+	.font-library-modal__loading {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		align-items: center;
+		justify-content: center;
+		// Push down so that the progress bar is centered vertically.
+		// It should be 120px (72px modal header height + 48px tab height)
+		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+	}
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -72,19 +84,19 @@ $footer-height: 70px;
 	.font-library-modal__font-card__count {
 		color: $gray-700;
 	}
-}
 
-.font-library-modal__font-variant_demo-image {
-	display: block;
-	height: $grid-unit-30;
-	width: auto;
-}
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: $grid-unit-30;
+		width: auto;
+	}
 
-.font-library-modal__font-variant_demo-text {
-	white-space: nowrap;
-	flex-shrink: 0;
-	transition: opacity 0.3s ease-in-out;
-	@include reduce-motion("transition");
+	.font-library-modal__font-variant_demo-text {
+		white-space: nowrap;
+		flex-shrink: 0;
+		transition: opacity 0.3s ease-in-out;
+		@include reduce-motion("transition");
+	}
 }
 
 .font-library-modal__font-variant {

From 2f92336f51b473348d9dea82c624483028c81fc7 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 16 Apr 2024 16:13:48 +0200
Subject: [PATCH 26/35] Make sure Social icons links aren't empty and improve
 UI clarity (#60047)

* Make sure social links are not empty.

* Improve labels and descriptions.

* Move popover outside of button to make the Apply button tooltip work.

* socialLinkLabel fallbacks to the social media name so no need for undefined.

* Link text setting panel open by default.

* Remove the term media from social media.

* Change panel title to Settings.

* Improve labels.

* Prevent empty social links on front end.

* Fallback to social name in the editing UI.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 docs/reference-guides/core-blocks.md          |  4 +-
 .../block-library/src/social-link/block.json  |  2 +-
 .../block-library/src/social-link/edit.js     | 53 ++++++++++---------
 .../block-library/src/social-link/index.php   |  6 ++-
 .../block-library/src/social-links/block.json |  2 +-
 .../block-library/src/social-links/edit.js    |  2 +-
 6 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index d0eb25b807e6d7..3c8ee800d31aa4 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -860,7 +860,7 @@ Displays the name of this site. Update the block, and the changes apply everywhe
 
 ## Social Icon
 
-Display an icon linking to a social media profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
+Display an icon linking to a social profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
 
 -	**Name:** core/social-link
 -	**Category:** widgets
@@ -870,7 +870,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
 
 ## Social Icons
 
-Display icons linking to your social media profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
+Display icons linking to your social profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
 
 -	**Name:** core/social-links
 -	**Category:** widgets
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index d487465ef79664..37e8376f22ff09 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -5,7 +5,7 @@
 	"title": "Social Icon",
 	"category": "widgets",
 	"parent": [ "core/social-links" ],
-	"description": "Display an icon linking to a social media profile or site.",
+	"description": "Display an icon linking to a social profile or site.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index e08f8e6697cbae..8873a4ae220821 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -23,7 +23,7 @@ import {
 	PanelRow,
 	TextControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -58,7 +58,9 @@ const SocialLinkURLPopover = ( {
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )
 						}
-						placeholder={ __( 'Enter address' ) }
+						placeholder={ __( 'Enter social link' ) }
+						label={ __( 'Enter social link' ) }
+						hideLabelFromVision
 						disableSuggestions
 						onKeyDown={ ( event ) => {
 							if (
@@ -91,7 +93,7 @@ const SocialLinkEdit = ( {
 	setAttributes,
 	clientId,
 } ) => {
-	const { url, service, label, rel } = attributes;
+	const { url, service, label = '', rel } = attributes;
 	const {
 		showLabels,
 		iconColor,
@@ -113,7 +115,12 @@ const SocialLinkEdit = ( {
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
-	const socialLinkLabel = label ?? socialLinkName;
+	// The initial label (ie. the link text) is an empty string.
+	// We want to prevent empty links so that the link text always fallbacks to
+	// the social name, even when users enter and save an empty string or only
+	// spaces. The PHP render callback fallbacks to the social name as well.
+	const socialLinkText = label.trim() === '' ? socialLinkName : label;
+
 	const blockProps = useBlockProps( {
 		className: classes,
 		style: {
@@ -125,25 +132,19 @@ const SocialLinkEdit = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody
-					title={ sprintf(
-						/* translators: %s: name of the social service. */
-						__( '%s label' ),
-						socialLinkName
-					) }
-					initialOpen={ false }
-				>
+				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
 							__nextHasNoMarginBottom
-							label={ __( 'Link label' ) }
+							label={ __( 'Link text' ) }
 							help={ __(
-								'Briefly describe the link to help screen reader users.'
+								'The link text is visible when enabled from the parent Social Icons block.'
 							) }
-							value={ label || '' }
+							value={ label }
 							onChange={ ( value ) =>
-								setAttributes( { label: value || undefined } )
+								setAttributes( { label: value } )
 							}
+							placeholder={ socialLinkName }
 						/>
 					</PanelRow>
 				</PanelBody>
@@ -168,18 +169,18 @@ const SocialLinkEdit = ( {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>
-						{ socialLinkLabel }
+						{ socialLinkText }
 					</span>
-					{ isSelected && showURLPopover && (
-						<SocialLinkURLPopover
-							url={ url }
-							setAttributes={ setAttributes }
-							setPopover={ setPopover }
-							popoverAnchor={ popoverAnchor }
-							clientId={ clientId }
-						/>
-					) }
 				</Button>
+				{ isSelected && showURLPopover && (
+					<SocialLinkURLPopover
+						url={ url }
+						setAttributes={ setAttributes }
+						setPopover={ setPopover }
+						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
+					/>
+				) }
 			</li>
 		</>
 	);
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 69a145c0ff6028..5e2bc616d0e5ac 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -19,9 +19,11 @@
 function render_block_core_social_link( $attributes, $content, $block ) {
 	$open_in_new_tab = isset( $block->context['openInNewTab'] ) ? $block->context['openInNewTab'] : false;
 
+	$text = ! empty( $attributes['label'] ) ? trim( $attributes['label'] ) : '';
+
 	$service     = isset( $attributes['service'] ) ? $attributes['service'] : 'Icon';
 	$url         = isset( $attributes['url'] ) ? $attributes['url'] : false;
-	$label       = ! empty( $attributes['label'] ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$text        = $text ? $text : block_core_social_link_get_name( $service );
 	$rel         = isset( $attributes['rel'] ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
@@ -57,7 +59,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link  = '<li ' . $wrapper_attributes . '>';
 	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
-	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $label ) . '</span>';
+	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $text ) . '</span>';
 	$link .= '</a></li>';
 
 	$processor = new WP_HTML_Tag_Processor( $link );
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
index 0c8c7be1eba9a5..45dbd9d698953f 100644
--- a/packages/block-library/src/social-links/block.json
+++ b/packages/block-library/src/social-links/block.json
@@ -5,7 +5,7 @@
 	"title": "Social Icons",
 	"category": "widgets",
 	"allowedBlocks": [ "core/social-link" ],
-	"description": "Display icons linking to your social media profiles or sites.",
+	"description": "Display icons linking to your social profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
 	"attributes": {
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 38a68e7f2dab2c..52d26be50a6c9e 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -203,7 +203,7 @@ export function SocialLinksEdit( props ) {
 					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show labels' ) }
+						label={ __( 'Show text' ) }
 						checked={ showLabels }
 						onChange={ () =>
 							setAttributes( { showLabels: ! showLabels } )

From 9edfc4ca2d191d01340da35f372d027e349ed385 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Apr 2024 23:50:04 +0900
Subject: [PATCH 27/35] Latest Posts: Remove wrapper div and apply consistent
 class (#60728)

Unlinked contributors: dero, adrianahdez.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: AkmElias <akmelias@git.wordpress.org>
---
 packages/block-library/src/latest-posts/edit.js   | 6 +++---
 packages/block-library/src/latest-posts/index.php | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 0efe538b01f629..1ef7bd5e5fed7b 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -431,7 +431,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const dateFormat = getSettings().formats.date;
 
 	return (
-		<div>
+		<>
 			{ inspectorControls }
 			<BlockControls>
 				<ToolbarGroup controls={ layoutControls } />
@@ -518,7 +518,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
 										<a
-											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
 											onClick={
@@ -533,6 +532,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								</div>
 							) }
 							<a
+								className="wp-block-latest-posts__post-title"
 								href={ post.link }
 								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
@@ -582,6 +582,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 				} ) }
 			</ul>
-		</div>
+		</>
 	);
 }
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
index 6bff971beef576..913a9ae2d430e1 100644
--- a/packages/block-library/src/latest-posts/index.php
+++ b/packages/block-library/src/latest-posts/index.php
@@ -157,7 +157,7 @@ function render_block_core_latest_posts( $attributes ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
 					$trimmed_excerpt .= sprintf(
 						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
-						__( '… <a href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
+						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
 						esc_url( $post_link ),
 						esc_html( $title )
 					);

From 4bc0f224dca7a6af7c70af2301c8ac6d99bed8a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Tue, 16 Apr 2024 17:23:30 +0200
Subject: [PATCH 28/35] Pattern page: fix deps for `onActionPerformed`
 useCallback (#60784)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
---
 packages/edit-site/src/components/page-patterns/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 6fa84df7a01712..1f8521071530cc 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -451,7 +451,7 @@ export default function DataviewsPatterns() {
 				} );
 			}
 		},
-		[ history ]
+		[ history, categoryId, type ]
 	);
 	const [ editAction, viewRevisionsAction ] = usePostActions(
 		onActionPerformed,

From 3285175a8ddf64812d6c886725a33349d3af0702 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 17 Apr 2024 00:51:01 +0900
Subject: [PATCH 29/35] Components: Remove CSS hack for Internet Explorer 11
 (#60727)

* Components: Remove CSS hack for Internet Explorer 11

* Update changelog

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md                       |  1 +
 packages/components/src/placeholder/style.scss         | 10 +++-------
 .../components/src/toolbar/toolbar-group/style.scss    |  7 +------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c6a32b22cdd6c9..9378ab8d342e30 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -25,6 +25,7 @@
 
 ### Internal
 
+-   Remove CSS hack for Internet Explorer 11 ([#60727](https://github.com/WordPress/gutenberg/pull/60727)).
 -   `CheckboxControl`: Streamline size styles ([#60475](https://github.com/WordPress/gutenberg/pull/60475)).
 
 ## 27.3.0 (2024-04-03)
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index eda0dd3329d39c..fedf374063541b 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -8,18 +8,14 @@
 	text-align: left;
 	margin: 0;
 	color: $gray-900;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 
 	// Some editor styles unset this.
 	-moz-font-smoothing: subpixel-antialiased;
 	-webkit-font-smoothing: subpixel-antialiased;
 
-	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-	@supports (position: sticky) {
-		display: flex;
-		flex-direction: column;
-		justify-content: top;
-		align-items: flex-start;
-	}
 
 	// Block UI appearance.
 	border-radius: $radius-block-ui;
diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
index 487fd614045259..668968d40babbe 100644
--- a/packages/components/src/toolbar/toolbar-group/style.scss
+++ b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -56,12 +56,7 @@
 
 div.components-toolbar {
 	& > div {
-		// IE11 does not support `position: sticky`, or Flex very well, so use block.
-		display: block;
-		@supports (position: sticky) {
-			display: flex;
-		}
-
+		display: flex;
 		margin: 0;
 	}
 

From d9f628a7461f6463d173c3c8cab40e554e545acf Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Tue, 16 Apr 2024 17:03:36 +0000
Subject: [PATCH 30/35] Bump plugin version to 18.1.1

---
 gutenberg.php     | 2 +-
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/gutenberg.php b/gutenberg.php
index 8e7889224566ca..f9208c1856ebee 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.3
  * Requires PHP: 7.0
- * Version: 18.1.0
+ * Version: 18.1.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/package-lock.json b/package-lock.json
index 55f2e0ad541189..a225b5e1c111b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "18.1.0",
+	"version": "18.1.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "18.1.0",
+			"version": "18.1.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index c7043fa9cc06e6..2d4fd09fd87ea1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "18.1.0",
+	"version": "18.1.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",

From afd5df036980cfe0c5075d68148013672c6d86af Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 16 Apr 2024 19:14:07 +0200
Subject: [PATCH 31/35] Chore: Fix: Wrong JSDOC for an action return. (#60786)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 docs/reference-guides/data/data-core-edit-site.md | 2 +-
 packages/edit-site/src/store/actions.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index a2bc9ea1bfb968..1f050ca98576a3 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -371,7 +371,7 @@ Resolves the template for a page and displays both. If no path is given, attempt
 
 _Returns_
 
--   `number`: The resolved template ID for the page route.
+-   `Object`: Action object.
 
 ### setTemplate
 
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index dcdfd0cd576c21..fcb077283176ee 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -222,7 +222,7 @@ export function setEditedPostContext( context ) {
  *
  * @deprecated
  *
- * @return {number} The resolved template ID for the page route.
+ * @return {Object} Action object.
  */
 export function setPage() {
 	deprecated( "dispatch( 'core/edit-site' ).setPage", {

From b753c9064358490017596f2b00df0fda1e2ff893 Mon Sep 17 00:00:00 2001
From: Gutenberg Repository Automation <gutenberg@wordpress.org>
Date: Tue, 16 Apr 2024 17:20:10 +0000
Subject: [PATCH 32/35] Update Changelog for 18.1.1

---
 changelog.txt | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index 02864f4ea4bf25..735ee72bc9f23f 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,19 @@
 == Changelog ==
 
+= 18.1.1 =
+
+## Bug Fixes
+
+- Add null check to prevent errors in `get_block_template` filter ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+- Fix activating a theme in site editor when previewing ([60699](https://github.com/WordPress/gutenberg/pull/60699))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@okmttdhr @ntsekouras 
+
+
 = 18.1.0 =
 
 ## Changelog

From b29c95b085c3ceb36a59b407af26fbe5a509ef71 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 17 Apr 2024 11:30:30 +0800
Subject: [PATCH 33/35] Update @talldan in codeowners file, remove from
 edit-widgets package (#60800)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
---
 .github/CODEOWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index d356c6113543ea..c90179f0e80943 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -47,7 +47,7 @@
 /packages/block-editor/src/components/link-control  @getdave
 
 # Widgets
-/packages/edit-widgets                          @draganescu @talldan @adamziel @kevin940726
+/packages/edit-widgets                          @draganescu @adamziel @kevin940726
 /packages/customize-widgets
 /packages/widgets
 

From fb4d29db017cdc305536484bafd0cfd64af5132c Mon Sep 17 00:00:00 2001
From: Akira Tachibana <atachibana@unofficialtokyo.com>
Date: Wed, 17 Apr 2024 14:57:58 +0900
Subject: [PATCH 34/35] Docs: Update wording in Block Editor Handbook to
 reflect that all examples now use JSX (#56315)

Co-authored-by: atachibana <atachibana@git.wordpress.org>
Co-authored-by: juanmaguitar <juanmaguitar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 docs/getting-started/devenv/get-started-with-wp-scripts.md | 2 +-
 docs/how-to-guides/platform/custom-block-editor.md         | 2 +-
 docs/reference-guides/block-api/block-attributes.md        | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/docs/getting-started/devenv/get-started-with-wp-scripts.md b/docs/getting-started/devenv/get-started-with-wp-scripts.md
index b6271620514df4..16f1bbc6015b5b 100644
--- a/docs/getting-started/devenv/get-started-with-wp-scripts.md
+++ b/docs/getting-started/devenv/get-started-with-wp-scripts.md
@@ -4,7 +4,7 @@ The [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/referenc
 
 A JavaScript build step refers to the process of transforming, bundling, and optimizing JavaScript source code and related assets into a format suitable for production environments. These build steps often take modern JavaScript (ESNext and JSX) and convert it to a version compatible with most browsers. They can also bundle multiple files into one, minify the code to reduce file size and perform various other tasks to optimize the code.
 
-You will typically be working with ESNext and JSX when building for the Block Editor, and most examples in the Block Editor Handbook are written in these syntaxes. Learning how to set up a build step is essential. However, configuring the necessary tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), and [ESLint](https://eslint.org/) can become complex. This is where `wp-scripts` comes in. 
+You will typically be working with ESNext and JSX when building for the Block Editor, and all examples in the Block Editor Handbook are written in these syntaxes. Learning how to set up a build step is essential. However, configuring the necessary tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), and [ESLint](https://eslint.org/) can become complex. This is where `wp-scripts` comes in.
 
 Here are a few things that `wp-scripts` can do: 
 
diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
index 65f8c412c45d33..a7abb00adacec6 100644
--- a/docs/how-to-guides/platform/custom-block-editor.md
+++ b/docs/how-to-guides/platform/custom-block-editor.md
@@ -24,7 +24,7 @@ By the end of this article, you will have a solid understanding of the block edi
 
 ## Code syntax
 
-The code snippets in this guide use JSX syntax. However, you could use plain JavaScript if you prefer. However, once familiar with JSX, many developers find it easier to read and write, so most code examples in the Block Editor Handbook use this syntax.
+The code snippets in this guide use JSX syntax. However, you could use plain JavaScript if you prefer. However, once familiar with JSX, many developers find it easier to read and write, so all code examples in the Block Editor Handbook use this syntax.
 
 ## What you're going to be building
 
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index 935b38155f1e72..52a325ff9253de 100644
--- a/docs/reference-guides/block-api/block-attributes.md
+++ b/docs/reference-guides/block-api/block-attributes.md
@@ -375,9 +375,6 @@ Attribute definition:
 
 From here, meta attributes can be read and written by a block using the same interface as any attribute:
 
-
-{% JSX %}
-
 ```js
 edit( { attributes, setAttributes } ) {
 	function onChange( event ) {

From 671b9edf6873580de48a80d807d1c01d5041c259 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 17 Apr 2024 14:01:10 +0800
Subject: [PATCH 35/35] Improve docs for block variation `isActive` property
 (#60801)

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 .../block-api/block-variations.md             | 65 ++++++++++++++-----
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/docs/reference-guides/block-api/block-variations.md b/docs/reference-guides/block-api/block-variations.md
index 96930dc6b9b625..0440858810b65a 100644
--- a/docs/reference-guides/block-api/block-variations.md
+++ b/docs/reference-guides/block-api/block-variations.md
@@ -1,6 +1,6 @@
 # Variations
 
-The Block Variations API  allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied. 
+The Block Variations API  allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied.
 
 Variations are an excellent way to create iterations of existing blocks without building entirely new blocks from scratch.
 
@@ -55,8 +55,8 @@ Block variations can be declared during a block's registration by providing the
 To create a variation for an existing block, such as a Core block, use `wp.blocks.registerBlockVariation()`. This function accepts the name of the block and the object defining the variation.
 
 ```js
-wp.blocks.registerBlockVariation( 
-	'core/embed', 
+wp.blocks.registerBlockVariation(
+	'core/embed',
 	{
 		name: 'custom-embed',
 		attributes: { providerNameSlug: 'custom' },
@@ -66,7 +66,7 @@ wp.blocks.registerBlockVariation(
 
 ## Removing a block variation
 
-Block variations can also be easily removed. To do so, use `wp.blocks.unregisterBlockVariation()`. This function accepts the name of the block and the `name` of the variation that should be unregistered. 
+Block variations can also be easily removed. To do so, use `wp.blocks.unregisterBlockVariation()`. This function accepts the name of the block and the `name` of the variation that should be unregistered.
 
 ```js
 wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' );
@@ -84,9 +84,9 @@ variations: [
 		name: 'blue',
 		title: __( 'Blue Quote' ),
 		isDefault: true,
-		attributes: { 
-			color: 'blue', 
-			className: 'is-style-blue-quote' 
+		attributes: {
+			color: 'blue',
+			className: 'is-style-blue-quote'
 		},
 		icon: 'format-quote',
 		isActive: ( blockAttributes, variationAttributes ) =>
@@ -99,16 +99,16 @@ variations: [
 
 By default, all variations will show up in the Inserter in addition to the original block type item. However, setting the `isDefault` flag for any variations listed will override the regular block type in the Inserter. This is a great tool for curating the Editor experience to your specific needs.
 
-For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this: 
+For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this:
 
 ```js
  wp.blocks.registerBlockVariation(
-	'core/media-text', 
+	'core/media-text',
 	{
 		name: 'media-text-media-right',
 		title: __( 'Media & Text' ),
 		isDefault: true,
-		attributes: { 
+		attributes: {
 			mediaPosition: 'right'
 		}
 	}
@@ -125,20 +125,53 @@ The solution is to unregister the other variation before registering your variat
 
 ## Using `isActive`
 
-While the `isActive` property is optional, you will often want to use it to display information about the block variation after the block has been inserted. For example, this API is used in `useBlockDisplayInformation` hook to fetch and display proper information in places like the `BlockCard` or `Breadcrumbs` components.
+While the `isActive` property is optional, it's recommended. This API is used by the block editor to check which variation is active, and display the correct variation's title, icon and description when an instance of the variation is selected in the editor.
+
+If `isActive` is not set, the Editor cannot distinguish between an instance of the original block and your variation, so the original block information will be displayed.
+
+The property can be set to either a function or an array of strings (`string[]`).
 
-If `isActive` is not set, the Editor cannot distinguish between the original block and your variation, so the original block information will be displayed. 
+The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance).
 
-The property can use either a function or an array of strings (`string[]`). The function accepts `blockAttributes` and `variationAttributes`, which can be used to determine if a variation is active. In the Embed block, the primary differentiator is the `providerNameSlug` attribute, so if you wanted to determine if the YouTube Embed variation was active, you could do something like this: 
+As an example, in the core Embed block, the `providerNameSlug` attribute is used to determine the embed provider (e.g. 'youtube' or 'twitter'). The variations may be declared like this:
 
+```js
+const variations = [
+	{
+		name: 'twitter',
+		title: 'Twitter',
+		icon: embedTwitterIcon,
+		keywords: [ 'tweet', __( 'social' ) ],
+		description: __( 'Embed a tweet.' ),
+		patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ],
+		attributes: { providerNameSlug: 'twitter', responsive: true },
+	},
+	{
+		name: 'youtube',
+		title: 'YouTube',
+		icon: embedYouTubeIcon,
+		keywords: [ __( 'music' ), __( 'video' ) ],
+		description: __( 'Embed a YouTube video.' ),
+		patterns: [
+			/^https?:\/\/((m|www)\.)?youtube\.com\/.+/i,
+			/^https?:\/\/youtu\.be\/.+/i,
+		],
+		attributes: { providerNameSlug: 'youtube', responsive: true },
+	},
+	// ...
+]
 ```
+
+ The `isActive` function can compare the block instance value for `providerNameSlug` to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active:
+
+```js
 isActive: ( blockAttributes, variationAttributes ) =>
 	blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
 ```
 
-You can also use a `string[]` to tell which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example of the YouTube Embed variation, the string version would look like this:
+The `string[]` version is used to declare which attributes should be compared as a shorthand. Each attribute will be checked and the variation will be active if all of them match. Using the same example for the embed block, the string version would look like this:
 
-```
+```js
 isActive: [ 'providerNameSlug' ]
 ```
 
@@ -175,4 +208,4 @@ wp.blocks.registerBlockVariation(
 
 The `isActive` check on both variations tests the `textColor`, but each variations uses `vivid-red`. Since the `paragraph-red` variation is registered first, once the `paragraph-red-grey` variation is inserted into the Editor, it will have the title `Red Paragraph` instead of `Red/Grey Paragraph`. As soon as the Editor finds a match, it stops checking.
 
-There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for.
\ No newline at end of file
+There have been [discussions](https://github.com/WordPress/gutenberg/issues/41303#issuecomment-1526193087) around how the API can be improved, but as of WordPress 6.3, this remains an issue to watch out for.