Refactor InserterMenu & VisualEditorInserter; allow recent/frequent reusable blocks to be inserted

editor/components/inserter/group.js

@@ -10,71 +10,91 @@ import { Component } from '@wordpress/element';
 import { NavigableMenu } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/blocks';
 
-function deriveActiveBlocks( blocks ) {
-	return blocks.filter( ( block ) => ! block.disabled );
+/**
+ * Determines the inserter items that are able to be selected. These are the
+ * inserter items which are not disabled.
+ * 
+ * @param {Editor.InserterItem[]}   items Inserter items to filter.
+ * @returns {Editor.InserterItem[]}       Active inserter items.
+ */
+function deriveActiveItems( items ) {
+	return items.filter( ( item ) => ! item.isDisabled );
 }
 
 export default class InserterGroup extends Component {
+	/**
+	 * @inheritdoc
+	 */
 	constructor() {
 		super( ...arguments );
 
 		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,
 		};
 	}
 
+	/**
+	 * @inheritdoc
+	 */
 	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 ) {
+	/**
+	 * Renders a single inserter item as it ought to appear in the menu.
+	 * 
+	 * @param {Editor.InserterItem} item  Inserter item.
+	 * @param {number}              index Index of the item.
+	 * @returns {JSX.Element}             Rendered menu button.
+	 */
+	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>
 		);
 	}
 
+	/**
+	 * Callback invoked when the user navigates the menu using their keyboard.
+	 * 
+	 * @param {number} index Index of the item selected by the user.
+	 */
 	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 +103,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
 				) );
 			},