Move data logic out of the inserter

Moves the logic that determines which items should appear in the inserter into dedicated selector functions. This way, the logic is easier to test and can be re-used.
WordPress · Jan 17, 2018 · 6759f55 · 6759f55
1 parent 64b6017
commit 6759f55
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 298 deletions.
diff --git a/editor/components/inserter/group.js b/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 { onSelectItem } = 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={ () => onSelectItem( 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>
 		);
 	}

diff --git a/editor/components/inserter/index.js b/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
 				) );
 			},