Update the edit site save modal UI

docs/designers-developers/developers/data/data-core.md

@@ -153,21 +153,6 @@ _Returns_
 
 -   `?Object`: Record.
 
-<a name="getEntityRecordChangesByRecord" href="#getEntityRecordChangesByRecord">#</a> **getEntityRecordChangesByRecord**
-
-Returns a map of objects with each edited
-raw entity record and its corresponding edits.
-
-The map is keyed by entity `kind => name => key => { rawRecord, edits }`.
-
-_Parameters_
-
--   _state_ `Object`: State tree.
-
-_Returns_
-
--   (unknown type): The map of edited records with their edits.
-
 <a name="getEntityRecordEdits" href="#getEntityRecordEdits">#</a> **getEntityRecordEdits**
 
 Returns the specified entity record's edits.

packages/components/src/base-control/style.scss

@@ -22,5 +22,5 @@
 }
 
 .components-base-control + .components-base-control {
-	margin-bottom: $grid-unit-20;
+	margin-top: $grid-unit-20;
 }

packages/components/src/color-picker/style.scss

@@ -244,7 +244,7 @@
 	margin-right: 4px;
 
 	.components-base-control + .components-base-control {
-		margin-bottom: 0;
+		margin-top: 0;
 	}
 
 	.components-base-control__field {

packages/core-data/README.md

@@ -366,21 +366,6 @@ _Returns_
 
 -   `?Object`: Record.
 
-<a name="getEntityRecordChangesByRecord" href="#getEntityRecordChangesByRecord">#</a> **getEntityRecordChangesByRecord**
-
-Returns a map of objects with each edited
-raw entity record and its corresponding edits.
-
-The map is keyed by entity `kind => name => key => { rawRecord, edits }`.
-
-_Parameters_
-
--   _state_ `Object`: State tree.
-
-_Returns_
-
--   (unknown type): The map of edited records with their edits.
-
 <a name="getEntityRecordEdits" href="#getEntityRecordEdits">#</a> **getEntityRecordEdits**
 
 Returns the specified entity record's edits.

packages/core-data/package.json

@@ -28,6 +28,7 @@
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/url": "file:../url",
 		"equivalent-key-map": "^0.2.2",

packages/core-data/src/entities.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { upperFirst, camelCase, map, find } from 'lodash';
+import { upperFirst, camelCase, map, find, get, startCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -12,29 +17,49 @@ import { apiFetch, select } from './controls';
 export const DEFAULT_ENTITY_KEY = 'id';
 
 export const defaultEntities = [
-	{ name: 'site', kind: 'root', baseURL: '/wp/v2/settings' },
-	{ name: 'postType', kind: 'root', key: 'slug', baseURL: '/wp/v2/types' },
+	{
+		label: __( 'Site' ),
+		name: 'site',
+		kind: 'root',
+		baseURL: '/wp/v2/settings',
+	},
+	{
+		label: __( 'Post Type' ),
+		name: 'postType',
+		kind: 'root',
+		key: 'slug',
+		baseURL: '/wp/v2/types',
+	},
 	{
 		name: 'media',
 		kind: 'root',
 		baseURL: '/wp/v2/media',
 		plural: 'mediaItems',
+		label: __( 'Media' ),
 	},
 	{
 		name: 'taxonomy',
 		kind: 'root',
 		key: 'slug',
 		baseURL: '/wp/v2/taxonomies',
 		plural: 'taxonomies',
+		label: __( 'Taxonomy' ),
 	},
 	{
 		name: 'widgetArea',
 		kind: 'root',
 		baseURL: '/__experimental/widget-areas',
 		plural: 'widgetAreas',
 		transientEdits: { blocks: true },
+		label: __( 'Widget area' ),
+	},
+	{
+		label: __( 'User' ),
+		name: 'user',
+		kind: 'root',
+		baseURL: '/wp/v2/users',
+		plural: 'users',
 	},
-	{ name: 'user', kind: 'root', baseURL: '/wp/v2/users', plural: 'users' },
 ];
 
 export const kinds = [
@@ -54,12 +79,19 @@ function* loadPostTypeEntities() {
 			kind: 'postType',
 			baseURL: '/wp/v2/' + postType.rest_base,
 			name,
+			label: postType.labels.singular_name,
 			transientEdits: {
 				blocks: true,
 				selectionStart: true,
 				selectionEnd: true,
 			},
 			mergedEdits: { meta: true },
+			getTitle( record ) {
+				if ( name === 'wp_template_part' || name === 'wp_template' ) {
+					return startCase( record.slug );
+				}
+				return get( record, [ 'title', 'rendered' ], record.id );
+			},
 		};
 	} );
 }
@@ -78,6 +110,7 @@ function* loadTaxonomyEntities() {
 			kind: 'taxonomy',
 			baseURL: '/wp/v2/' + taxonomy.rest_base,
 			name,
+			label: taxonomy.labels.singular_name,
 		};
 	} );
 }

packages/core-data/src/selectors.js

@@ -15,6 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { REDUCER_KEY } from './name';
 import { getQueriedItems } from './queried-data';
+import { DEFAULT_ENTITY_KEY } from './entities';
 
 /**
  * Returns true if a request is in progress for embed preview data, or false
@@ -193,56 +194,54 @@ export function getEntityRecords( state, kind, name, query ) {
 }
 
 /**
- * Returns a map of objects with each edited
- * raw entity record and its corresponding edits.
- *
- * The map is keyed by entity `kind => name => key => { rawRecord, edits }`.
+ * Returns the  list of dirty entity records.
  *
  * @param {Object} state State tree.
  *
- * @return {{ [kind: string]: { [name: string]: { [key: string]: { rawRecord: Object<string,*>, edits: Object<string,*> } } } }} The map of edited records with their edits.
+ * @return {[{ title: string, key: string, name: string, kind: string }]} The list of updated records
  */
-export const getEntityRecordChangesByRecord = createSelector(
+export const __experimentalGetDirtyEntityRecords = createSelector(
 	( state ) => {
 		const {
 			entities: { data },
 		} = state;
-		return Object.keys( data ).reduce( ( acc, kind ) => {
+		const dirtyRecords = [];
+		Object.keys( data ).forEach( ( kind ) => {
 			Object.keys( data[ kind ] ).forEach( ( name ) => {
-				const editsKeys = Object.keys(
+				const primaryKeys = Object.keys(
 					data[ kind ][ name ].edits
-				).filter( ( editsKey ) =>
-					hasEditsForEntityRecord( state, kind, name, editsKey )
+				).filter( ( primaryKey ) =>
+					hasEditsForEntityRecord( state, kind, name, primaryKey )
 				);
-				if ( editsKeys.length ) {
-					if ( ! acc[ kind ] ) {
-						acc[ kind ] = {};
-					}
-					if ( ! acc[ kind ][ name ] ) {
-						acc[ kind ][ name ] = {};
-					}
-					editsKeys.forEach(
-						( editsKey ) =>
-							( acc[ kind ][ name ][ editsKey ] = {
-								rawRecord: getRawEntityRecord(
-									state,
-									kind,
-									name,
-									editsKey
-								),
-								edits: getEntityRecordNonTransientEdits(
-									state,
-									kind,
-									name,
-									editsKey
-								),
-							} )
-					);
+
+				if ( primaryKeys.length ) {
+					const entity = getEntity( state, kind, name );
+					primaryKeys.forEach( ( primaryKey ) => {
+						const entityRecord = getEntityRecord(
+							state,
+							kind,
+							name,
+							primaryKey
+						);
+						dirtyRecords.push( {
+							// We avoid using primaryKey because it's transformed into a string
+							// when it's used as an object key.
+							key:
+								entityRecord[
+									entity.key || DEFAULT_ENTITY_KEY
+								],
+							title: ! entity.getTitle
+								? ''
+								: entity.getTitle( entityRecord ),
+							name,
+							kind,
+						} );
+					} );
 				}
 			} );
+		} );
 
-			return acc;
-		}, {} );
+		return dirtyRecords;
 	},
 	( state ) => [ state.entities.data ]
 );

packages/edit-site/package.json

@@ -36,7 +36,8 @@
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/url": "file:../url",
 		"file-saver": "^2.0.2",
-		"jszip": "^3.2.2"
+		"jszip": "^3.2.2",
+		"lodash": "^4.17.15"
 	},
 	"publishConfig": {
 		"access": "public"

packages/edit-site/src/components/save-button/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { some } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -33,29 +38,15 @@ export default function SaveButton() {
 	}, [ slug ] );
 
 	const { isDirty, isSaving } = useSelect( ( select ) => {
-		const { getEntityRecordChangesByRecord, isSavingEntityRecord } = select(
-			'core'
-		);
-		const entityRecordChangesByRecord = getEntityRecordChangesByRecord();
-		const changedKinds = Object.keys( entityRecordChangesByRecord );
+		const {
+			__experimentalGetDirtyEntityRecords,
+			isSavingEntityRecord,
+		} = select( 'core' );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		return {
-			isDirty: changedKinds.length > 0,
-			isSaving: changedKinds.some( ( changedKind ) =>
-				Object.keys(
-					entityRecordChangesByRecord[ changedKind ]
-				).some( ( changedName ) =>
-					Object.keys(
-						entityRecordChangesByRecord[ changedKind ][
-							changedName
-						]
-					).some( ( changedKey ) =>
-						isSavingEntityRecord(
-							changedKind,
-							changedName,
-							changedKey
-						)
-					)
-				)
+			isDirty: dirtyEntityRecords.length > 0,
+			isSaving: some( dirtyEntityRecords, ( record ) =>
+				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
 		};
 	} );

packages/editor/package.json

@@ -51,7 +51,6 @@
 		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
-		"equivalent-key-map": "^0.2.2",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"react-autosize-textarea": "^3.0.2",