Inserter: Enable inserting a block using the inserter

blocks/api/factory.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import uuid from 'uuid/v4';
+
+/**
+ * Returns a block object given its type and attributes
+ *
+ * @param  {Object} blockType   BlockType
+ * @param  {Object} attributes  Block attributes
+ * @return {Object}             Block object
+ */
+export function createBlock( blockType, attributes = {} ) {
+	return {
+		uid: uuid(),
+		blockType,
+		attributes
+	};
+}

blocks/api/index.js

@@ -4,6 +4,7 @@
 import * as query from 'hpq';
 
 export { query };
+export { createBlock } from './factory';
 export { default as parse } from './parser';
 export { default as serialize } from './serializer';
 export { getCategories } from './categories';

blocks/api/parser.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import * as query from 'hpq';
-import uuid from 'uuid/v4';
 
 /**
  * Internal dependencies
  */
 import { parse as grammarParse } from './post.pegjs';
 import { getBlockSettings, getUnknownTypeHandler } from './registration';
+import { createBlock } from './factory';
 
 /**
  * Returns the block attributes of a registered block node given its settings.
@@ -53,12 +53,9 @@ export default function parse( content ) {
 
 		// Include in set only if settings were determined
 		if ( settings ) {
-			memo.push( {
-				blockType,
-				uid: uuid(),
-				rawContent: blockNode.rawContent,
-				attributes: getBlockAttributes( blockNode, settings )
-			} );
+			memo.push(
+				createBlock( blockType, getBlockAttributes( blockNode, settings ) )
+			);
 		}
 
 		return memo;

blocks/api/test/factory.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import { createBlock } from '../factory';
+
+describe( 'block factory', () => {
+	describe( 'createBlock()', () => {
+		it( 'should create a block given its blockType and attributes', () => {
+			const block = createBlock( 'core/test-block', {
+				align: 'left'
+			} );
+
+			expect( block.blockType ).to.eql( 'core/test-block' );
+			expect( block.attributes ).to.eql( {
+				align: 'left'
+			} );
+			expect( block.uid ).to.be.a( 'string' );
+		} );
+	} );
+} );

blocks/api/test/parser.js

@@ -101,7 +101,6 @@ describe( 'block parser', () => {
 			expect( parsed[ 0 ].attributes ).to.eql( {
 				content: 'Ribs & Chicken'
 			} );
-			expect( parsed[ 0 ].rawContent ).to.equal( 'Ribs' );
 			expect( parsed[ 0 ].uid ).to.be.a( 'string' );
 		} );
 

blocks/components/editable/index.js

@@ -45,7 +45,8 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onInit() {
-		this.editor.setContent( this.props.value );
+		const { value = '' } = this.props;
+		this.editor.setContent( value );
 	}
 
 	onChange() {

editor/components/inserter/index.js

@@ -8,6 +8,7 @@ class Inserter extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
 		this.toggle = this.toggle.bind( this );
+		this.close = this.close.bind( this );
 		this.state = {
 			opened: false
 		};
@@ -19,6 +20,12 @@ class Inserter extends wp.element.Component {
 		} );
 	}
 
+	close() {
+		this.setState( {
+			opened: false
+		} );
+	}
+
 	render() {
 		const { opened } = this.state;
 		const { position } = this.props;
@@ -30,7 +37,7 @@ class Inserter extends wp.element.Component {
 					label={ wp.i18n.__( 'Insert block' ) }
 					onClick={ this.toggle }
 					className="editor-inserter__toggle" />
-				{ opened && <InserterMenu position={ position } /> }
+				{ opened && <InserterMenu position={ position } onSelect={ this.close } /> }
 			</div>
 		);
 	}

editor/components/inserter/menu.js

@@ -1,46 +1,96 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import Dashicon from 'components/dashicon';
 
-function InserterMenu( { position = 'top' } ) {
-	const blocks = wp.blocks.getBlocks();
-	const blocksByCategory = blocks.reduce( ( groups, block ) => {
-		if ( ! groups[ block.category ] ) {
-			groups[ block.category ] = [];
-		}
-		groups[ block.category ].push( block );
-		return groups;
-	}, {} );
-	const categories = wp.blocks.getCategories();
+class InserterMenu extends wp.element.Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			filterValue: ''
+		};
+		this.filter = this.filter.bind( this );
+	}
 
-	return (
-		<div className={ `editor-inserter__menu is-${ position }` }>
-			<div className="editor-inserter__arrow" />
-			<div className="editor-inserter__content">
-				{ categories
-					.map( ( category ) => !! blocksByCategory[ category.slug ] && (
-						<div key={ category.slug }>
-							<div className="editor-inserter__separator">{ category.title }</div>
-							<div className="editor-inserter__category-blocks">
-								{ blocksByCategory[ category.slug ].map( ( { slug, title, icon } ) => (
-									<div key={ slug } className="editor-inserter__block">
-										<Dashicon icon={ icon } />
-										{ title }
-									</div>
-								) ) }
+	filter( event ) {
+		this.setState( {
+			filterValue: event.target.value
+		} );
+	}
+
+	selectBlock( slug ) {
+		return () => {
+			this.props.onInsertBlock( slug );
+			this.props.onSelect();
+			this.setState( { filterValue: '' } );
+		};
+	}
+
+	render() {
+		const { position = 'top' } = this.props;
+		const blocks = wp.blocks.getBlocks();
+		const isShownBlock = block => block.title.toLowerCase().indexOf( this.state.filterValue.toLowerCase() ) !== -1;
+		const blocksByCategory = blocks.reduce( ( groups, block ) => {
+			if ( ! isShownBlock( block ) ) {
+				return groups;
+			}
+			if ( ! groups[ block.category ] ) {
+				groups[ block.category ] = [];
+			}
+			groups[ block.category ].push( block );
+			return groups;
+		}, {} );
+		const categories = wp.blocks.getCategories();
+
+		return (
+			<div className={ `editor-inserter__menu is-${ position }` }>
+				<div className="editor-inserter__arrow" />
+				<div className="editor-inserter__content">
+					{ categories
+						.map( ( category ) => !! blocksByCategory[ category.slug ] && (
+							<div key={ category.slug }>
+								<div className="editor-inserter__separator">{ category.title }</div>
+								<div className="editor-inserter__category-blocks">
+									{ blocksByCategory[ category.slug ].map( ( { slug, title, icon } ) => (
+										<button
+											key={ slug }
+											className="editor-inserter__block"
+											onClick={ this.selectBlock( slug ) }
+										>
+											<Dashicon icon={ icon } />
+											{ title }
+										</button>
+									) ) }
+								</div>
 							</div>
-						</div>
-					) )
-				}
+						) )
+					}
+				</div>
+				<input
+					type="search"
+					placeholder={ wp.i18n.__( 'Search…' ) }
+					className="editor-inserter__search"
+					onChange={ this.filter }
+				/>
 			</div>
-			<input
-				type="search"
-				placeholder={ wp.i18n.__( 'Search…' ) }
-				className="editor-inserter__search" />
-		</div>
-	);
+		);
+	}
 }
 
-export default InserterMenu;
+export default connect(
+	undefined,
+	( dispatch ) => ( {
+		onInsertBlock( slug ) {
+			dispatch( {
+				type: 'INSERT_BLOCK',
+				block: wp.blocks.createBlock( slug )
+			} );
+		}
+	} )
+)( InserterMenu );

editor/components/inserter/style.scss

@@ -7,7 +7,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-  z-index: 1;
+	z-index: 1;
 }
 
 .editor-inserter__toggle {
@@ -140,6 +140,7 @@ input[type=search].editor-inserter__search {
 	align-items: center;
 	cursor: pointer;
 	border: 1px solid transparent;
+	background: none;
 
 	&:hover {
 		border: 1px solid $dark-gray-500;

editor/modes/visual-editor/block.js

@@ -84,8 +84,8 @@ function VisualEditorBlock( props ) {
 export default connect(
 	( state, ownProps ) => ( {
 		block: state.blocks.byUid[ ownProps.uid ],
-		isSelected: !! state.blocks.selected[ ownProps.uid ],
-		isHovered: !! state.blocks.hovered[ ownProps.uid ]
+		isSelected: state.blocks.selected === ownProps.uid,
+		isHovered: state.blocks.hovered === ownProps.uid
 	} ),
 	( dispatch, ownProps ) => ( {
 		onChange( updates ) {

editor/state.js

@@ -26,6 +26,12 @@ export const blocks = combineReducers( {
 						...action.updates
 					}
 				};
+
+			case 'INSERT_BLOCK':
+				return {
+					...state,
+					[ action.block.uid ]: action.block
+				};
 		}
 
 		return state;
@@ -62,35 +68,53 @@ export const blocks = combineReducers( {
 					action.uid,
 					...state.slice( index + 2 )
 				];
+
+			case 'INSERT_BLOCK':
+				return [
+					...state,
+					action.block.uid
+				];
 		}
 
 		return state;
 	},
-	selected( state = {}, action ) {
+	selected( state = null, action ) {
 		switch ( action.type ) {
 			case 'TOGGLE_BLOCK_SELECTED':
-				return {
-					...state,
-					[ action.uid ]: action.selected
-				};
+				if ( action.selected ) {
+					return action.uid;
+				}
+
+				if ( ! action.selected && action.uid === state ) {
+					return null;
+				}
+
+				return state;
+			case 'MOVE_BLOCK_UP':
+			case 'MOVE_BLOCK_DOWN':
+				return action.uid;
+			case 'INSERT_BLOCK':
+				return action.block.uid;
 		}
 
 		return state;
 	},
-	hovered( state = {}, action ) {
+	hovered( state = null, action ) {
 		switch ( action.type ) {
 			case 'TOGGLE_BLOCK_HOVERED':
-				return {
-					...state,
-					[ action.uid ]: action.hovered
-				};
+				if ( action.hovered ) {
+					return action.uid;
+				}
+
+				if ( ! action.hovered && action.uid === state ) {
+					return null;
+				}
+
+				return state;
 
 			case 'TOGGLE_BLOCK_SELECTED':
-				if ( state[ action.uid ] ) {
-					return {
-						...state,
-						[ action.uid ]: false
-					};
+				if ( state === action.uid ) {
+					return null;
 				}
 				break;
 		}