From c442f0e1f463c357b27ba2e0b9918e71fa2f033c Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 17 Jan 2018 16:33:23 +1100
Subject: [PATCH] Add a unique id to inserter items

This lets the inserter do faster string comparison between inserter
items rather than deep object comparison.
---
 editor/components/inserter/group.js     | 18 ++++++++++++------
 editor/components/inserter/test/menu.js |  7 +++++++
 editor/store/selectors.js               |  3 +++
 editor/store/test/selectors.js          |  2 ++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/editor/components/inserter/group.js b/editor/components/inserter/group.js
index ab9abf50137275..359f3d2622d874 100644
--- a/editor/components/inserter/group.js
+++ b/editor/components/inserter/group.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual, find } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -29,9 +29,13 @@ export default class InserterGroup extends Component {
 	componentWillReceiveProps( nextProps ) {
 		if ( ! isEqual( this.props.items, nextProps.items ) ) {
 			this.activeItems = deriveActiveItems( nextProps.items );
+
 			// Try and preserve any still valid selected state.
-			const current = find( this.activeItems, ( item ) => isEqual( item, this.state.current ) );
-			if ( ! current ) {
+			const currentIsStillActive = this.state.current && this.activeItems.some( item =>
+				item.id === this.state.current.id
+			);
+
+			if ( ! currentIsStillActive ) {
 				this.setState( {
 					current: this.activeItems.length > 0 ? this.activeItems[ 0 ] : null,
 				} );
@@ -39,17 +43,19 @@ export default class InserterGroup extends Component {
 		}
 	}
 
-	renderItem( item, index ) {
+	renderItem( item ) {
 		const { current } = this.state;
 		const { onSelectItem } = this.props;
 
+		const isCurrent = current && current.id === item.id;
+
 		return (
 			<button
 				role="menuitem"
-				key={ index }
+				key={ item.id }
 				className="editor-inserter__block"
 				onClick={ () => onSelectItem( item ) }
-				tabIndex={ isEqual( current, item ) || item.isDisabled ? null : '-1' }
+				tabIndex={ isCurrent || item.isDisabled ? null : '-1' }
 				disabled={ item.isDisabled }
 			>
 				<BlockIcon icon={ item.icon } />
diff --git a/editor/components/inserter/test/menu.js b/editor/components/inserter/test/menu.js
index 1cdffc42d49280..57a5be1f0b7d31 100644
--- a/editor/components/inserter/test/menu.js
+++ b/editor/components/inserter/test/menu.js
@@ -10,6 +10,7 @@ import { noop } from 'lodash';
 import { InserterMenu, searchItems } from '../menu';
 
 const textItem = {
+	id: 'core/text-block',
 	name: 'core/text-block',
 	initialAttributes: {},
 	title: 'Text',
@@ -18,6 +19,7 @@ const textItem = {
 };
 
 const advancedTextItem = {
+	id: 'core/advanced-text-block',
 	name: 'core/advanced-text-block',
 	initialAttributes: {},
 	title: 'Advanced Text',
@@ -26,6 +28,7 @@ const advancedTextItem = {
 };
 
 const someOtherItem = {
+	id: 'core/some-other-block',
 	name: 'core/some-other-block',
 	initialAttributes: {},
 	title: 'Some Other Block',
@@ -34,6 +37,7 @@ const someOtherItem = {
 };
 
 const moreItem = {
+	id: 'core/more-block',
 	name: 'core/more-block',
 	initialAttributes: {},
 	title: 'More',
@@ -42,6 +46,7 @@ const moreItem = {
 };
 
 const youtubeItem = {
+	id: 'core-embed/youtube',
 	name: 'core-embed/youtube',
 	initialAttributes: {},
 	title: 'YouTube',
@@ -51,6 +56,7 @@ const youtubeItem = {
 };
 
 const textEmbedItem = {
+	id: 'core-embed/a-text-embed',
 	name: 'core-embed/a-text-embed',
 	initialAttributes: {},
 	title: 'A Text Embed',
@@ -59,6 +65,7 @@ const textEmbedItem = {
 };
 
 const reusableItem = {
+	id: 'core/block/123',
 	name: 'core/block',
 	initialAttributes: { ref: 123 },
 	title: 'My reusable block',
diff --git a/editor/store/selectors.js b/editor/store/selectors.js
index 4036afdc0068d0..82d1b82d40e311 100644
--- a/editor/store/selectors.js
+++ b/editor/store/selectors.js
@@ -1115,6 +1115,7 @@ export function getNotices( state ) {
  * block. Inserter items encapsulate both regular blocks and reusable blocks.
  * 
  * @typedef {Object} Editor.InserterItem
+ * @property {string}   id                Unique identifier for the item.
  * @property {string}   name              The type of block to create.
  * @property {Object}   initialAttributes Attributes to pass to the newly created block.
  * @property {string}   title             Title of the item, as it appears in the inserter.
@@ -1147,6 +1148,7 @@ function buildInserterItemFromBlockType( state, enabledBlockTypes, blockType ) {
 	}
 
 	return {
+		id: blockType.name,
 		name: blockType.name,
 		initialAttributes: {},
 		title: blockType.title,
@@ -1180,6 +1182,7 @@ function buildInserterItemFromReusableBlock( enabledBlockTypes, reusableBlock )
 	}
 
 	return {
+		id: `core/block/${ reusableBlock.id }`,
 		name: 'core/block',
 		initialAttributes: { ref: reusableBlock.id },
 		title: reusableBlock.title,
diff --git a/editor/store/test/selectors.js b/editor/store/test/selectors.js
index 08cea88df1912f..80fec0e5734560 100644
--- a/editor/store/test/selectors.js
+++ b/editor/store/test/selectors.js
@@ -2285,6 +2285,7 @@ describe( 'selectors', () => {
 
 			expect( getInserterItems( state, [ 'core/test-block' ] ) ).toEqual( [
 				{
+					id: 'core/test-block',
 					name: 'core/test-block',
 					initialAttributes: {},
 					title: 'test block',
@@ -2336,6 +2337,7 @@ describe( 'selectors', () => {
 
 			expect( getInserterItems( state, [ 'core/block' ] ) ).toEqual( [
 				{
+					id: 'core/block/123',
 					name: 'core/block',
 					initialAttributes: { ref: 123 },
 					title: 'My reusable block',