From 7bb91738415b6f55ad3322f16a2e612a24dff9ac Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 9 Dec 2024 16:53:17 +0100
Subject: [PATCH 01/11] Move buttons at the bottom when rendered withim a modal
 dialog.

---
 .../src/components/save-panel/index.js        |  22 +++-
 packages/editor/README.md                     |   1 +
 .../components/entities-saved-states/index.js | 104 +++++++++++-------
 3 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 95ec9b9ffc8c46..29ba0fee0eece1 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -31,7 +31,11 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
-const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
+const EntitiesSavedStatesForPreview = ( {
+	onClose,
+	renderDialog,
+	isWithinModalDialog,
+} ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
@@ -76,22 +80,32 @@ const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
 				renderDialog,
+				isWithinModalDialog,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog } ) => {
+const _EntitiesSavedStates = ( {
+	onClose,
+	renderDialog,
+	isWithinModalDialog,
+} ) => {
 	if ( isPreviewingTheme() ) {
 		return (
 			<EntitiesSavedStatesForPreview
 				onClose={ onClose }
 				renderDialog={ renderDialog }
+				isWithinModalDialog={ isWithinModalDialog }
 			/>
 		);
 	}
 	return (
-		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+		<EntitiesSavedStates
+			close={ onClose }
+			renderDialog={ renderDialog }
+			isWithinModalDialog={ isWithinModalDialog }
+		/>
 	);
 };
 
@@ -135,7 +149,7 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				<_EntitiesSavedStates onClose={ onClose } />
+				<_EntitiesSavedStates onClose={ onClose } isWithinModalDialog />
 			</Modal>
 		) : null;
 	}
diff --git a/packages/editor/README.md b/packages/editor/README.md
index 3119f3f289637a..680f02325a97a3 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -402,6 +402,7 @@ _Parameters_
 -   _props_ `Object`: The component props.
 -   _props.close_ `Function`: The function to close the dialog.
 -   _props.renderDialog_ `boolean`: Whether to render the component with modal dialog behavior.
+-   _props.isWithinModalDialog_ `boolean`: Whether this component is rendered within a Modal component.
 
 _Returns_
 
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 200473cccff706..c3229b482e054e 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -29,18 +34,24 @@ function identity( values ) {
 /**
  * Renders the component for managing saved states of entities.
  *
- * @param {Object}   props              The component props.
- * @param {Function} props.close        The function to close the dialog.
- * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
+ * @param {Object}   props                     The component props.
+ * @param {Function} props.close               The function to close the dialog.
+ * @param {boolean}  props.renderDialog        Whether to render the component with modal dialog behavior.
+ * @param {boolean}  props.isWithinModalDialog Whether this component is rendered within a Modal component.
  *
  * @return {React.ReactNode} The rendered component.
  */
-export default function EntitiesSavedStates( { close, renderDialog } ) {
+export default function EntitiesSavedStates( {
+	close,
+	renderDialog,
+	isWithinModalDialog,
+} ) {
 	const isDirtyProps = useIsDirty();
 	return (
 		<EntitiesSavedStatesExtensible
 			close={ close }
 			renderDialog={ renderDialog }
+			isWithinModalDialog={ isWithinModalDialog }
 			{ ...isDirtyProps }
 		/>
 	);
@@ -60,6 +71,7 @@ export default function EntitiesSavedStates( { close, renderDialog } ) {
  * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
  * @param {Array}    props.unselectedEntities    Array of unselected entities.
+ * @param {boolean}  props.isWithinModalDialog   Whether this component is rendered within a Modal component.
  *
  * @return {React.ReactNode} The rendered component.
  */
@@ -74,6 +86,7 @@ export function EntitiesSavedStatesExtensible( {
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
+	isWithinModalDialog,
 } ) {
 	const saveButtonRef = useRef();
 	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
@@ -119,46 +132,57 @@ export function EntitiesSavedStatesExtensible( {
 		? __( 'Select the items you want to save.' )
 		: undefined;
 
+	const actionButtons = (
+		<>
+			<FlexItem
+				isBlock={ isWithinModalDialog ? false : true }
+				as={ Button }
+				variant={ isWithinModalDialog ? 'tertiary' : 'secondary' }
+				size={ isWithinModalDialog ? undefined : 'compact' }
+				onClick={ dismissPanel }
+			>
+				{ __( 'Cancel' ) }
+			</FlexItem>
+			<FlexItem
+				isBlock={ isWithinModalDialog ? false : true }
+				as={ Button }
+				ref={ saveButtonRef }
+				variant="primary"
+				size={ isWithinModalDialog ? undefined : 'compact' }
+				disabled={ ! saveEnabled }
+				accessibleWhenDisabled
+				onClick={ () =>
+					saveDirtyEntities( {
+						onSave,
+						dirtyEntityRecords,
+						entitiesToSkip: unselectedEntities,
+						close,
+					} )
+				}
+				className="editor-entities-saved-states__save-button"
+				expanded={ isWithinModalDialog ? false : true }
+			>
+				{ saveLabel }
+			</FlexItem>
+		</>
+	);
+
 	return (
 		<div
 			ref={ renderDialog ? saveDialogRef : undefined }
 			{ ...( renderDialog && saveDialogProps ) }
-			className="entities-saved-states__panel"
+			className={ clsx( 'entities-saved-states__panel', {
+				'is-within-modal-dialog': isWithinModalDialog,
+			} ) }
 			role={ renderDialog ? 'dialog' : undefined }
 			aria-labelledby={ renderDialog ? dialogLabel : undefined }
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
-			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					size="compact"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					ref={ saveButtonRef }
-					variant="primary"
-					size="compact"
-					disabled={ ! saveEnabled }
-					accessibleWhenDisabled
-					onClick={ () =>
-						saveDirtyEntities( {
-							onSave,
-							dirtyEntityRecords,
-							entitiesToSkip: unselectedEntities,
-							close,
-						} )
-					}
-					className="editor-entities-saved-states__save-button"
-				>
-					{ saveLabel }
-				</FlexItem>
-			</Flex>
+			{ ! isWithinModalDialog && (
+				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+					{ actionButtons }
+				</Flex>
+			) }
 
 			<div className="entities-saved-states__text-prompt">
 				<div
@@ -166,7 +190,7 @@ export function EntitiesSavedStatesExtensible( {
 					id={ renderDialog ? dialogLabel : undefined }
 				>
 					<strong className="entities-saved-states__text-prompt--header">
-						{ __( 'Are you ready to save?' ) }
+						{ __( 'xxAre you ready to save?' ) }
 					</strong>
 					{ additionalPrompt }
 				</div>
@@ -198,6 +222,12 @@ export function EntitiesSavedStatesExtensible( {
 					/>
 				);
 			} ) }
+
+			{ isWithinModalDialog && (
+				<Flex direction="row" justify="flex-end">
+					{ actionButtons }
+				</Flex>
+			) }
 		</div>
 	);
 }

From a3aa1012f96456290fff459aebc9763e1e9ef7f7 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 10 Dec 2024 11:28:41 +0100
Subject: [PATCH 02/11] Refine styling.

---
 .../entities-saved-states/entity-type-list.js |  6 +++-
 .../components/entities-saved-states/index.js | 14 +++++---
 .../entities-saved-states/style.scss          | 36 +++++++++++++++++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/entities-saved-states/entity-type-list.js b/packages/editor/src/components/entities-saved-states/entity-type-list.js
index 71041dd9aebabd..7cdf4c41e0f1f9 100644
--- a/packages/editor/src/components/entities-saved-states/entity-type-list.js
+++ b/packages/editor/src/components/entities-saved-states/entity-type-list.js
@@ -94,7 +94,11 @@ export default function EntityTypeList( {
 	}
 
 	return (
-		<PanelBody title={ entityLabel } initialOpen>
+		<PanelBody
+			title={ entityLabel }
+			initialOpen
+			className="entities-saved-states__panel-body"
+		>
 			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index c3229b482e054e..9cf34499cdfb63 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -160,7 +160,6 @@ export function EntitiesSavedStatesExtensible( {
 					} )
 				}
 				className="editor-entities-saved-states__save-button"
-				expanded={ isWithinModalDialog ? false : true }
 			>
 				{ saveLabel }
 			</FlexItem>
@@ -190,11 +189,14 @@ export function EntitiesSavedStatesExtensible( {
 					id={ renderDialog ? dialogLabel : undefined }
 				>
 					<strong className="entities-saved-states__text-prompt--header">
-						{ __( 'xxAre you ready to save?' ) }
+						{ __( 'Are you ready to save?' ) }
 					</strong>
 					{ additionalPrompt }
 				</div>
-				<p id={ renderDialog ? dialogDescription : undefined }>
+				<p
+					id={ renderDialog ? dialogDescription : undefined }
+					className="entities-saved-states__text-prompt--changes-count"
+				>
 					{ isDirty
 						? createInterpolateElement(
 								sprintf(
@@ -224,7 +226,11 @@ export function EntitiesSavedStatesExtensible( {
 			} ) }
 
 			{ isWithinModalDialog && (
-				<Flex direction="row" justify="flex-end">
+				<Flex
+					direction="row"
+					justify="flex-end"
+					className="entities-saved-states__panel-footer"
+				>
 					{ actionButtons }
 				</Flex>
 			) }
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index e2c320678c322a..ba988b7621c585 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -16,6 +16,42 @@
 	}
 }
 
+.entities-saved-states__panel.is-within-modal-dialog {
+	.entities-saved-states__text-prompt {
+		padding: 0;
+	}
+
+	.entities-saved-states__panel-body {
+		padding-left: 0;
+		padding-right: 0;
+		border: 0;
+
+		> h2 {
+			margin-left: -1 * $grid-unit-20;
+			margin-right: -1 * $grid-unit-20;
+			margin-bottom: 0;
+
+			button {
+				font-size: $font-size-x-small;
+				text-transform: uppercase;
+			}
+		}
+	}
+
+	.entities-saved-states__text-prompt--header-wrapper {
+		display: none;
+	}
+
+	.entities-saved-states__text-prompt--changes-count {
+		margin-top: 0;
+		margin-bottom: $grid-unit-30;
+	}
+
+	.entities-saved-states__panel-footer {
+		margin-top: $grid-unit-20;
+	}
+}
+
 .entities-saved-states__description-heading {
 	font-size: $default-font-size;
 }

From ef42b20f72947a33de5992b3744c4d603ec808cd Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 10 Dec 2024 11:51:58 +0100
Subject: [PATCH 03/11] Make modal dialog header visible and fix labeling.

---
 packages/edit-site/src/components/save-panel/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 29ba0fee0eece1..fcf6df0d4cf81b 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -144,10 +144,7 @@ export default function SavePanel() {
 			<Modal
 				className="edit-site-save-panel__modal"
 				onRequestClose={ onClose }
-				__experimentalHideHeader
-				contentLabel={ __(
-					'Save site, content, and template changes'
-				) }
+				title={ __( 'Review changes' ) }
 			>
 				<_EntitiesSavedStates onClose={ onClose } isWithinModalDialog />
 			</Modal>

From 93943b48b15fb1b2d013b7d494f172ef15dc2ce3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 10 Dec 2024 13:02:18 +0100
Subject: [PATCH 04/11] Fix label and description when used with modal
 behavior.

---
 .../components/entities-saved-states/index.js | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 9cf34499cdfb63..abcace4155e535 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -122,10 +122,13 @@ export function EntitiesSavedStatesExtensible( {
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
 	} );
-	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
-	const dialogDescription = useInstanceId(
+	const dialogLabelId = useInstanceId(
 		EntitiesSavedStatesExtensible,
-		'description'
+		'entities-saved-states__panel-label'
+	);
+	const dialogDescriptionId = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'entities-saved-states__panel-description'
 	);
 
 	const selectItemsToSaveDescription = !! dirtyEntityRecords.length
@@ -174,8 +177,8 @@ export function EntitiesSavedStatesExtensible( {
 				'is-within-modal-dialog': isWithinModalDialog,
 			} ) }
 			role={ renderDialog ? 'dialog' : undefined }
-			aria-labelledby={ renderDialog ? dialogLabel : undefined }
-			aria-describedby={ renderDialog ? dialogDescription : undefined }
+			aria-labelledby={ renderDialog ? dialogLabelId : undefined }
+			aria-describedby={ renderDialog ? dialogDescriptionId : undefined }
 		>
 			{ ! isWithinModalDialog && (
 				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
@@ -184,34 +187,33 @@ export function EntitiesSavedStatesExtensible( {
 			) }
 
 			<div className="entities-saved-states__text-prompt">
-				<div
-					className="entities-saved-states__text-prompt--header-wrapper"
-					id={ renderDialog ? dialogLabel : undefined }
-				>
-					<strong className="entities-saved-states__text-prompt--header">
+				<div className="entities-saved-states__text-prompt--header-wrapper">
+					<strong
+						id={ renderDialog ? dialogLabelId : undefined }
+						className="entities-saved-states__text-prompt--header"
+					>
 						{ __( 'Are you ready to save?' ) }
 					</strong>
-					{ additionalPrompt }
 				</div>
-				<p
-					id={ renderDialog ? dialogDescription : undefined }
-					className="entities-saved-states__text-prompt--changes-count"
-				>
-					{ isDirty
-						? createInterpolateElement(
-								sprintf(
-									/* translators: %d: number of site changes waiting to be saved. */
-									_n(
-										'There is <strong>%d site change</strong> waiting to be saved.',
-										'There are <strong>%d site changes</strong> waiting to be saved.',
+				<div id={ renderDialog ? dialogDescriptionId : undefined }>
+					{ additionalPrompt }
+					<p className="entities-saved-states__text-prompt--changes-count">
+						{ isDirty
+							? createInterpolateElement(
+									sprintf(
+										/* translators: %d: number of site changes waiting to be saved. */
+										_n(
+											'There is <strong>%d site change</strong> waiting to be saved.',
+											'There are <strong>%d site changes</strong> waiting to be saved.',
+											dirtyEntityRecords.length
+										),
 										dirtyEntityRecords.length
 									),
-									dirtyEntityRecords.length
-								),
-								{ strong: <strong /> }
-						  )
-						: selectItemsToSaveDescription }
-				</p>
+									{ strong: <strong /> }
+							  )
+							: selectItemsToSaveDescription }
+					</p>
+				</div>
 			</div>
 
 			{ sortedPartitionedSavables.map( ( list ) => {

From d6ba1911f33f8602f374f4525c0c56cb0549e992 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 13 Dec 2024 09:22:30 +0100
Subject: [PATCH 05/11] Try modal dialog small size.

---
 packages/edit-site/src/components/save-panel/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index fcf6df0d4cf81b..1b96daea9fd69b 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -145,6 +145,7 @@ export default function SavePanel() {
 				className="edit-site-save-panel__modal"
 				onRequestClose={ onClose }
 				title={ __( 'Review changes' ) }
+				size="small"
 			>
 				<_EntitiesSavedStates onClose={ onClose } isWithinModalDialog />
 			</Modal>

From fafdc143f549963ae61a3bda5ac391a0a86eef96 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 13 Dec 2024 12:56:10 +0100
Subject: [PATCH 06/11] Adjust changes list margins.

---
 packages/editor/src/components/entities-saved-states/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index ba988b7621c585..d306cec0169a2d 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -59,7 +59,7 @@
 .entities-saved-states__changes {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin: $grid-unit-10 $grid-unit-20 0 $grid-unit-20;
+	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;
 	list-style: disc;
 
 	li {

From f0c94288efa48d930db5a32bfdc3d8d7fbff3b21 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 16 Dec 2024 09:58:44 +0100
Subject: [PATCH 07/11] Use default font size and color for the changes items.

---
 .../editor/src/components/entities-saved-states/style.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index d306cec0169a2d..4283a7ad1659d0 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -52,13 +52,8 @@
 	}
 }
 
-.entities-saved-states__description-heading {
-	font-size: $default-font-size;
-}
-
 .entities-saved-states__changes {
-	color: $gray-700;
-	font-size: $helptext-font-size;
+	font-size: $default-font-size;
 	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;
 	list-style: disc;
 

From 1278d8ef9afb3ed625bcd8e574112a4c5c060a36 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 17 Dec 2024 12:48:02 +0100
Subject: [PATCH 08/11] Fix displaying of longer checkbox labels.

---
 .../components/entities-saved-states/entity-record-item.js    | 1 +
 .../editor/src/components/entities-saved-states/style.scss    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js
index e8219c4cca7ae1..ba2e93088be93e 100644
--- a/packages/editor/src/components/entities-saved-states/entity-record-item.js
+++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js
@@ -64,6 +64,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 					}
 					checked={ checked }
 					onChange={ onChange }
+					className="entities-saved-states__change-control"
 				/>
 			</PanelRow>
 			{ hasPostMetaChanges && (
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 4283a7ad1659d0..e60401fb79d370 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -52,6 +52,10 @@
 	}
 }
 
+.entities-saved-states__change-control {
+	flex: 1;
+}
+
 .entities-saved-states__changes {
 	font-size: $default-font-size;
 	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;

From d9cb7d78a10aee28fc0be15f032c4aece7867a91 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 18 Dec 2024 10:02:52 +0100
Subject: [PATCH 09/11] Reduce changes count paragraph bottom margin.

---
 packages/editor/src/components/entities-saved-states/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index e60401fb79d370..1385c64d2ab6d5 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -44,7 +44,7 @@
 
 	.entities-saved-states__text-prompt--changes-count {
 		margin-top: 0;
-		margin-bottom: $grid-unit-30;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.entities-saved-states__panel-footer {

From 358d8dd050e14cf7f098c9bb6e7c090a3e7dc522 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 16 Jan 2025 16:12:00 +0100
Subject: [PATCH 10/11] Use more generic variant prop.

---
 .../src/components/save-panel/index.js        | 16 ++++------
 packages/editor/README.md                     |  2 +-
 .../components/entities-saved-states/index.js | 32 +++++++++----------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 1b96daea9fd69b..0327022b03f2b6 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -34,7 +34,7 @@ const { useLocation } = unlock( routerPrivateApis );
 const EntitiesSavedStatesForPreview = ( {
 	onClose,
 	renderDialog,
-	isWithinModalDialog,
+	variant,
 } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
@@ -80,23 +80,19 @@ const EntitiesSavedStatesForPreview = ( {
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
 				renderDialog,
-				isWithinModalDialog,
+				variant,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( {
-	onClose,
-	renderDialog,
-	isWithinModalDialog,
-} ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog, variant } ) => {
 	if ( isPreviewingTheme() ) {
 		return (
 			<EntitiesSavedStatesForPreview
 				onClose={ onClose }
 				renderDialog={ renderDialog }
-				isWithinModalDialog={ isWithinModalDialog }
+				variant={ variant }
 			/>
 		);
 	}
@@ -104,7 +100,7 @@ const _EntitiesSavedStates = ( {
 		<EntitiesSavedStates
 			close={ onClose }
 			renderDialog={ renderDialog }
-			isWithinModalDialog={ isWithinModalDialog }
+			variant={ variant }
 		/>
 	);
 };
@@ -147,7 +143,7 @@ export default function SavePanel() {
 				title={ __( 'Review changes' ) }
 				size="small"
 			>
-				<_EntitiesSavedStates onClose={ onClose } isWithinModalDialog />
+				<_EntitiesSavedStates onClose={ onClose } variant="inline" />
 			</Modal>
 		) : null;
 	}
diff --git a/packages/editor/README.md b/packages/editor/README.md
index 680f02325a97a3..d62016bc5b7343 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -402,7 +402,7 @@ _Parameters_
 -   _props_ `Object`: The component props.
 -   _props.close_ `Function`: The function to close the dialog.
 -   _props.renderDialog_ `boolean`: Whether to render the component with modal dialog behavior.
--   _props.isWithinModalDialog_ `boolean`: Whether this component is rendered within a Modal component.
+-   _props.variant_ `boolean`: Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
 
 _Returns_
 
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index abcace4155e535..bed5b71e1e064c 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -34,24 +34,24 @@ function identity( values ) {
 /**
  * Renders the component for managing saved states of entities.
  *
- * @param {Object}   props                     The component props.
- * @param {Function} props.close               The function to close the dialog.
- * @param {boolean}  props.renderDialog        Whether to render the component with modal dialog behavior.
- * @param {boolean}  props.isWithinModalDialog Whether this component is rendered within a Modal component.
+ * @param {Object}   props              The component props.
+ * @param {Function} props.close        The function to close the dialog.
+ * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
+ * @param {boolean}  props.variant      Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
  *
  * @return {React.ReactNode} The rendered component.
  */
 export default function EntitiesSavedStates( {
 	close,
 	renderDialog,
-	isWithinModalDialog,
+	variant,
 } ) {
 	const isDirtyProps = useIsDirty();
 	return (
 		<EntitiesSavedStatesExtensible
 			close={ close }
 			renderDialog={ renderDialog }
-			isWithinModalDialog={ isWithinModalDialog }
+			variant={ variant }
 			{ ...isDirtyProps }
 		/>
 	);
@@ -71,7 +71,7 @@ export default function EntitiesSavedStates( {
  * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
  * @param {Array}    props.unselectedEntities    Array of unselected entities.
- * @param {boolean}  props.isWithinModalDialog   Whether this component is rendered within a Modal component.
+ * @param {boolean}  props.variant               Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start.
  *
  * @return {React.ReactNode} The rendered component.
  */
@@ -86,7 +86,7 @@ export function EntitiesSavedStatesExtensible( {
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
-	isWithinModalDialog,
+	variant = 'default',
 } ) {
 	const saveButtonRef = useRef();
 	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
@@ -138,20 +138,20 @@ export function EntitiesSavedStatesExtensible( {
 	const actionButtons = (
 		<>
 			<FlexItem
-				isBlock={ isWithinModalDialog ? false : true }
+				isBlock={ variant === 'inline' ? false : true }
 				as={ Button }
-				variant={ isWithinModalDialog ? 'tertiary' : 'secondary' }
-				size={ isWithinModalDialog ? undefined : 'compact' }
+				variant={ variant === 'inline' ? 'tertiary' : 'secondary' }
+				size={ variant === 'inline' ? undefined : 'compact' }
 				onClick={ dismissPanel }
 			>
 				{ __( 'Cancel' ) }
 			</FlexItem>
 			<FlexItem
-				isBlock={ isWithinModalDialog ? false : true }
+				isBlock={ variant === 'inline' ? false : true }
 				as={ Button }
 				ref={ saveButtonRef }
 				variant="primary"
-				size={ isWithinModalDialog ? undefined : 'compact' }
+				size={ variant === 'inline' ? undefined : 'compact' }
 				disabled={ ! saveEnabled }
 				accessibleWhenDisabled
 				onClick={ () =>
@@ -174,13 +174,13 @@ export function EntitiesSavedStatesExtensible( {
 			ref={ renderDialog ? saveDialogRef : undefined }
 			{ ...( renderDialog && saveDialogProps ) }
 			className={ clsx( 'entities-saved-states__panel', {
-				'is-within-modal-dialog': isWithinModalDialog,
+				'is-within-modal-dialog': variant === 'inline',
 			} ) }
 			role={ renderDialog ? 'dialog' : undefined }
 			aria-labelledby={ renderDialog ? dialogLabelId : undefined }
 			aria-describedby={ renderDialog ? dialogDescriptionId : undefined }
 		>
-			{ ! isWithinModalDialog && (
+			{ variant === 'default' && (
 				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
 					{ actionButtons }
 				</Flex>
@@ -227,7 +227,7 @@ export function EntitiesSavedStatesExtensible( {
 				);
 			} ) }
 
-			{ isWithinModalDialog && (
+			{ variant === 'inline' && (
 				<Flex
 					direction="row"
 					justify="flex-end"

From d05a88c729dd792363dcf92ab21f3c7860d001a6 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 20 Jan 2025 09:25:35 +0100
Subject: [PATCH 11/11] Polish.

---
 .../components/entities-saved-states/index.js  | 18 ++++++++++--------
 .../entities-saved-states/style.scss           |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index bed5b71e1e064c..f849461b6a275e 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -135,23 +135,25 @@ export function EntitiesSavedStatesExtensible( {
 		? __( 'Select the items you want to save.' )
 		: undefined;
 
+	const isInline = variant === 'inline';
+
 	const actionButtons = (
 		<>
 			<FlexItem
-				isBlock={ variant === 'inline' ? false : true }
+				isBlock={ isInline ? false : true }
 				as={ Button }
-				variant={ variant === 'inline' ? 'tertiary' : 'secondary' }
-				size={ variant === 'inline' ? undefined : 'compact' }
+				variant={ isInline ? 'tertiary' : 'secondary' }
+				size={ isInline ? undefined : 'compact' }
 				onClick={ dismissPanel }
 			>
 				{ __( 'Cancel' ) }
 			</FlexItem>
 			<FlexItem
-				isBlock={ variant === 'inline' ? false : true }
+				isBlock={ isInline ? false : true }
 				as={ Button }
 				ref={ saveButtonRef }
 				variant="primary"
-				size={ variant === 'inline' ? undefined : 'compact' }
+				size={ isInline ? undefined : 'compact' }
 				disabled={ ! saveEnabled }
 				accessibleWhenDisabled
 				onClick={ () =>
@@ -174,13 +176,13 @@ export function EntitiesSavedStatesExtensible( {
 			ref={ renderDialog ? saveDialogRef : undefined }
 			{ ...( renderDialog && saveDialogProps ) }
 			className={ clsx( 'entities-saved-states__panel', {
-				'is-within-modal-dialog': variant === 'inline',
+				'is-inline': isInline,
 			} ) }
 			role={ renderDialog ? 'dialog' : undefined }
 			aria-labelledby={ renderDialog ? dialogLabelId : undefined }
 			aria-describedby={ renderDialog ? dialogDescriptionId : undefined }
 		>
-			{ variant === 'default' && (
+			{ ! isInline && (
 				<Flex className="entities-saved-states__panel-header" gap={ 2 }>
 					{ actionButtons }
 				</Flex>
@@ -227,7 +229,7 @@ export function EntitiesSavedStatesExtensible( {
 				);
 			} ) }
 
-			{ variant === 'inline' && (
+			{ isInline && (
 				<Flex
 					direction="row"
 					justify="flex-end"
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 1385c64d2ab6d5..d35feffa69308c 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -16,7 +16,7 @@
 	}
 }
 
-.entities-saved-states__panel.is-within-modal-dialog {
+.entities-saved-states__panel.is-inline {
 	.entities-saved-states__text-prompt {
 		padding: 0;
 	}