Refactor the inserter and quick inserter

Changes the main inserter and the quick inserter to both use common
selectors which determine which items that should appear for insertion.
This means that common logic (e.g. is this block enabled?, has this
block already been used?) can be shared between the two inserters.

At the same time, also allow Reusable Blocks to appear in the MRU and
MFU inserter lists.

editor/components/inserter/group.js

@@ -10,8 +10,8 @@ import { Component } from '@wordpress/element';
 import { NavigableMenu } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/blocks';
 
-function deriveActiveBlocks( blocks ) {
-	return blocks.filter( ( block ) => ! block.disabled );
+function deriveActiveItems( items ) {
+	return items.filter( ( item ) => ! item.isDisabled );
 }
 
 export default class InserterGroup extends Component {
@@ -20,61 +20,56 @@ export default class InserterGroup extends Component {
 
 		this.onNavigate = this.onNavigate.bind( this );
 
-		this.activeBlocks = deriveActiveBlocks( this.props.blockTypes );
+		this.activeItems = deriveActiveItems( this.props.items );
 		this.state = {
-			current: this.activeBlocks.length > 0 ? this.activeBlocks[ 0 ].name : null,
+			current: this.activeItems.length > 0 ? this.activeItems[ 0 ] : null,
 		};
 	}
 
 	componentWillReceiveProps( nextProps ) {
-		if ( ! isEqual( this.props.blockTypes, nextProps.blockTypes ) ) {
-			this.activeBlocks = deriveActiveBlocks( nextProps.blockTypes );
+		if ( ! isEqual( this.props.items, nextProps.items ) ) {
+			this.activeItems = deriveActiveItems( nextProps.items );
 			// Try and preserve any still valid selected state.
-			const current = find( this.activeBlocks, { name: this.state.current } );
+			const current = find( this.activeItems, ( item ) => isEqual( item, this.state.current ) );
 			if ( ! current ) {
 				this.setState( {
-					current: this.activeBlocks.length > 0 ? this.activeBlocks[ 0 ].name : null,
+					current: this.activeItems.length > 0 ? this.activeItems[ 0 ] : null,
 				} );
 			}
 		}
 	}
 
-	renderItem( block ) {
+	renderItem( item, index ) {
 		const { current } = this.state;
-		const { selectBlock, bindReferenceNode } = this.props;
-		const { disabled } = block;
+		const { selectItem } = this.props;
 
 		return (
 			<button
 				role="menuitem"
-				key={ block.name === 'core/block' && block.initialAttributes ?
-					block.name + block.initialAttributes.ref :
-					block.name
-				}
+				key={ index }
 				className="editor-inserter__block"
-				onClick={ selectBlock( block ) }
-				ref={ bindReferenceNode( block.name ) }
-				tabIndex={ current === block.name || disabled ? null : '-1' }
-				disabled={ disabled }
+				onClick={ selectItem( item ) }
+				tabIndex={ isEqual( current, item ) || item.isDisabled ? null : '-1' }
+				disabled={ item.isDisabled }
 			>
-				<BlockIcon icon={ block.icon } />
-				{ block.title }
+				<BlockIcon icon={ item.icon } />
+				{ item.title }
 			</button>
 		);
 	}
 
 	onNavigate( index ) {
-		const { activeBlocks } = this;
-		const dest = activeBlocks[ index ];
+		const { activeItems } = this;
+		const dest = activeItems[ index ];
 		if ( dest ) {
 			this.setState( {
-				current: dest.name,
+				current: dest,
 			} );
 		}
 	}
 
 	render() {
-		const { labelledBy, blockTypes } = this.props;
+		const { labelledBy, items } = this.props;
 
 		return (
 			<NavigableMenu
@@ -83,7 +78,7 @@ export default class InserterGroup extends Component {
 				aria-labelledby={ labelledBy }
 				cycle={ false }
 				onNavigate={ this.onNavigate }>
-				{ blockTypes.map( this.renderItem, this ) }
+				{ items.map( this.renderItem, this ) }
 			</NavigableMenu>
 		);
 	}

editor/components/inserter/index.js

@@ -82,17 +82,12 @@ class Inserter extends Component {
 					</IconButton>
 				) }
 				renderContent={ ( { onClose } ) => {
-					const onInsert = ( name, initialAttributes ) => {
-						onInsertBlock(
-							name,
-							initialAttributes,
-							insertionPoint
-						);
-
+					const onSelect = ( item ) => {
+						onInsertBlock( item, insertionPoint );
 						onClose();
 					};
 
-					return <InserterMenu onSelect={ onInsert } />;
+					return <InserterMenu onSelect={ onSelect } />;
 				} }
 			/>
 		);
@@ -108,9 +103,9 @@ export default compose( [
 			};
 		},
 		( dispatch ) => ( {
-			onInsertBlock( name, initialAttributes, position ) {
+			onInsertBlock( item, position ) {
 				dispatch( insertBlock(
-					createBlock( name, initialAttributes ),
+					createBlock( item.name, item.initialAttributes ),
 					position
 				) );
 			},