Editor: Multi-Entity Saving UI Improvements

packages/editor/src/components/entities-saved-states/entity-type-list.js

@@ -6,20 +6,35 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { __, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
-import { page, layout } from '@wordpress/icons';
+import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
 
-const ENTITY_NAME_ICONS = {
-	site: layout,
-	page,
-};
+function getEntityDescription( entity, length ) {
+	switch ( entity ) {
+		case 'site':
+			return _n(
+				'This change will affect your whole site.',
+				'These changes will affect your whole site.',
+				length
+			);
+		case 'wp_template':
+			return _n(
+				'This change will affect pages and posts that use this template.',
+				'These changes will affect pages and posts that use these templates.',
+				length
+			);
+		case 'page':
+		case 'post':
+			return __( 'The following content has been modified.' );
+	}
+}
 
 export default function EntityTypeList( {
 	list,
@@ -33,13 +48,17 @@ export default function EntityTypeList( {
 			select( coreStore ).getEntity( firstRecord.kind, firstRecord.name ),
 		[ firstRecord.kind, firstRecord.name ]
 	);
-
-	// Set icon based on type of entity.
 	const { name } = firstRecord;
-	const icon = ENTITY_NAME_ICONS[ name ];
+	const entityLabel =
+		name === 'wp_template_part'
+			? _n( 'Template Part', 'Template Parts', list.length )
+			: entity.label;
+	// Set description based on type of entity.
+	const description = getEntityDescription( name, list.length );
 
 	return (
-		<PanelBody title={ entity.label } initialOpen={ true } icon={ icon }>
+		<PanelBody title={ entityLabel } initialOpen={ true }>
+			{ description && <PanelRow>{ description }</PanelRow> }
 			{ list.map( ( record ) => {
 				return (
 					<EntityRecordItem

packages/editor/src/components/entities-saved-states/index.js

@@ -68,9 +68,21 @@ export default function EntitiesSavedStates( { close } ) {
 	} = useDispatch( coreStore );
 
 	// To group entities by type.
-	const partitionedSavables = Object.values(
-		groupBy( dirtyEntityRecords, 'name' )
-	);
+	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );
+
+	// Sort entity groups.
+	const {
+		site: siteSavables,
+		wp_template: templateSavables,
+		wp_template_part: templatePartSavables,
+		...contentSavables
+	} = partitionedSavables;
+	const sortedPartitionedSavables = [
+		siteSavables,
+		templateSavables,
+		templatePartSavables,
+		...Object.values( contentSavables ),
+	].filter( Array.isArray );
 
 	// Unchecked entities to be ignored by save function.
 	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
@@ -160,15 +172,15 @@ export default function EntitiesSavedStates( { close } ) {
 			</div>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong>{ __( 'Select the changes you want to save' ) }</strong>
+				<strong>{ __( 'Are you ready to save?' ) }</strong>
 				<p>
 					{ __(
-						'Some changes may affect other areas of your site.'
+						'The following changes have been made to your site, templates, and content.'
 					) }
 				</p>
 			</div>
 
-			{ partitionedSavables.map( ( list ) => {
+			{ sortedPartitionedSavables.map( ( list ) => {
 				return (
 					<EntityTypeList
 						key={ list[ 0 ].name }