Update the edit site save modal UI (#20608)

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/core-data/src/test/selectors.js

@@ -10,7 +10,7 @@ import {
 	getEntityRecord,
 	__experimentalGetEntityRecordNoResolver,
 	getEntityRecords,
-	getEntityRecordChangesByRecord,
+	__experimentalGetDirtyEntityRecords,
 	getEntityRecordNonTransientEdits,
 	getEmbedPreview,
 	isPreviewEmbedFallback,
@@ -115,7 +115,7 @@ describe( 'getEntityRecords', () => {
 	} );
 } );
 
-describe( 'getEntityRecordChangesByRecord', () => {
+describe( '__experimentalGetDirtyEntityRecords', () => {
 	it( 'should return a map of objects with each raw edited entity record and its corresponding edits', () => {
 		const state = deepFreeze( {
 			entities: {
@@ -136,6 +136,7 @@ describe( 'getEntityRecordChangesByRecord', () => {
 										someRawProperty: {
 											raw: 'somePersistedRawValue',
 										},
+										id: 'someKey',
 									},
 								},
 							},
@@ -152,22 +153,9 @@ describe( 'getEntityRecordChangesByRecord', () => {
 				},
 			},
 		} );
-		expect( getEntityRecordChangesByRecord( state ) ).toEqual( {
-			someKind: {
-				someName: {
-					someKey: {
-						rawRecord: {
-							someProperty: 'somePersistedValue',
-							someRawProperty: 'somePersistedRawValue',
-						},
-						edits: {
-							someProperty: 'someEditedValue',
-							someRawProperty: 'someEditedRawValue',
-						},
-					},
-				},
-			},
-		} );
+		expect( __experimentalGetDirtyEntityRecords( state ) ).toEqual( [
+			{ kind: 'someKind', name: 'someName', key: 'someKey', title: '' },
+		] );
 	} );
 } );
 

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"