From 5b1126601f000e73f86864283143070d6a0d684b Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:33:32 +1100
Subject: [PATCH] This commit: (#58706)

- The individual global style changes are shown below the checkbox, typography $gray-700 color and $helptext-font-size.
- The individual items next to the checkbox are no longer bold, they are regular text.
- The wording has been changed for pages being edited, to avoid the widow. Instead of "The following content has been modified." it's "The following has been modified.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../entity-record-item.js                     |  5 +----
 .../entities-saved-states/entity-type-list.js | 16 +++++++-------
 .../components/entities-saved-states/index.js | 21 +++++++++++++++----
 .../entities-saved-states/style.scss          |  5 +++++
 4 files changed, 31 insertions(+), 16 deletions(-)

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 70ca2b83c4dfdf..15bdc8c2f22842 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
@@ -39,10 +39,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				label={
-					<strong>
-						{ decodeEntities( entityRecordTitle ) ||
-							__( 'Untitled' ) }
-					</strong>
+					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
 				}
 				checked={ checked }
 				onChange={ onChange }
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 cb050a370c4e34..ed2f4aeacfd763 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
@@ -30,7 +30,7 @@ function getEntityDescription( entity, count ) {
 			);
 		case 'page':
 		case 'post':
-			return __( 'The following content has been modified.' );
+			return __( 'The following has been modified.' );
 	}
 }
 
@@ -55,18 +55,15 @@ function GlobalStylesDescription( { record } ) {
 		}
 	);
 	return globalStylesChanges.length ? (
-		<>
-			<h3 className="entities-saved-states__description-heading">
-				{ __( 'Changes made to:' ) }
-			</h3>
-			<PanelRow>{ globalStylesChanges.join( ', ' ) }.</PanelRow>
-		</>
+		<PanelRow className="entities-saved-states__change-summary">
+			{ globalStylesChanges.join( ', ' ) }.
+		</PanelRow>
 	) : null;
 }
 
 function EntityDescription( { record, count } ) {
 	if ( 'globalStyles' === record?.name ) {
-		return <GlobalStylesDescription record={ record } />;
+		return null;
 	}
 	const description = getEntityDescription( record?.name, count );
 	return description ? <PanelRow>{ description }</PanelRow> : null;
@@ -117,6 +114,9 @@ export default function EntityTypeList( {
 					/>
 				);
 			} ) }
+			{ 'globalStyles' === firstRecord?.name && (
+				<GlobalStylesDescription record={ firstRecord } />
+			) }
 		</PanelBody>
 	);
 }
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 8e531ce5801017..413a27d27dfd39 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -2,9 +2,13 @@
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useRef,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
@@ -215,8 +219,17 @@ export function EntitiesSavedStatesExtensible( {
 				{ additionalPrompt }
 				<p>
 					{ isDirty
-						? __(
-								'The following changes have been made to your site, templates, and content.'
+						? 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.',
+										sortedPartitionedSavables.length
+									),
+									sortedPartitionedSavables.length
+								),
+								{ strong: <strong /> }
 						  )
 						: __( 'Select the items you want to save.' ) }
 				</p>
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 6fb981c22f9600..15878a14ff978e 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -19,3 +19,8 @@
 .entities-saved-states__description-heading {
 	font-size: $default-font-size;
 }
+
+.entities-saved-states__change-summary {
+	color: $gray-700;
+	font-size: $helptext-font-size;
+}