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 <[email protected]>
Co-authored-by: jasmussen <[email protected]>

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 }

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>
 	);
 }

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>

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;
+}