From 624381f0350cc38f11b046afdb23666555e45d9f Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Thu, 27 Apr 2017 12:32:13 -0400
Subject: [PATCH 1/5] Fixes #515. Add keyboard navigation to the inserter. This
 introduces RxJS as a library, which could be very useful for other aspects of
 this project. Accessibility review would be awesome.

---
 editor/components/button/index.js           |   1 +
 editor/components/inserter/helpers/index.js |  83 ++++++++++++++
 editor/components/inserter/index.js         |   8 +-
 editor/components/inserter/menu.js          | 115 ++++++++++++++++----
 editor/components/inserter/style.scss       |   4 +-
 package.json                                |   4 +-
 webpack.config.js                           |   7 +-
 7 files changed, 198 insertions(+), 24 deletions(-)
 create mode 100644 editor/components/inserter/helpers/index.js

diff --git a/editor/components/button/index.js b/editor/components/button/index.js
index 4f56ecd2b7e46d..34342d0909d631 100644
--- a/editor/components/button/index.js
+++ b/editor/components/button/index.js
@@ -16,6 +16,7 @@ function Button( { isPrimary, isLarge, isToggled, className, ...additionalProps
 		<button
 			type="button"
 			{ ...additionalProps }
+			ref={ additionalProps.buttonRef }
 			className={ classes } />
 	);
 }
diff --git a/editor/components/inserter/helpers/index.js b/editor/components/inserter/helpers/index.js
new file mode 100644
index 00000000000000..e2a979e9809123
--- /dev/null
+++ b/editor/components/inserter/helpers/index.js
@@ -0,0 +1,83 @@
+/**
+ * Helpers associated with the Inserter Component.
+ *
+ * This file contains a group of functions that help in managing the inserter.
+ */
+
+export const isShownBlock = state => block => block.title.toLowerCase().indexOf( state.filterValue.toLowerCase() ) !== -1;
+
+export const listVisibleBlocksByCategory = ( state ) => ( blocks ) => {
+	return blocks.reduce( ( groups, block ) => {
+		if ( ! isShownBlock( state )( block ) ) {
+			return groups;
+		}
+		if ( ! groups[ block.category ] ) {
+			groups[ block.category ] = [];
+		}
+		groups[ block.category ].push( block );
+		return groups;
+	}, {} );
+};
+
+const flattenObjectIntoArray = ( object ) => {
+	let list = [];
+	for ( const key in object ) {
+		list.push( object[ key ] );
+	}
+	list = list.reduce( ( values, objectValue ) => values.concat( objectValue ), [] );
+
+	return list;
+};
+
+const nextFocusableRef = ( component ) => {
+	const visibleBlocksByCategory = flattenObjectIntoArray( listVisibleBlocksByCategory( component.state )( component.blockTypes ) );
+	const focusables = visibleBlocksByCategory.map( blockType => blockType.slug ).concat( 'search' );
+
+	if ( null === component.state.focusedElementRef ) {
+		return focusables[ 0 ];
+	}
+
+	const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
+	const nextIndex = currentIndex + 1;
+	const highestIndex = focusables.length - 1;
+
+	// Check boundary so that the index is does not exceed the length.
+	if ( nextIndex > highestIndex ) {
+		// Cycle back to other end.
+		return focusables[ 0 ];
+	}
+
+	return focusables[ nextIndex ];
+};
+
+const previousFocusableRef = ( component ) => {
+	const visibleBlocksByCategory = flattenObjectIntoArray( listVisibleBlocksByCategory( component.state )( component.blockTypes ) );
+	const focusables = visibleBlocksByCategory.map( blockType => blockType.slug ).concat( 'search' );
+
+	// Initiate the menu with the first block.
+	if ( null === component.state.focusedElementRef ) {
+		return focusables[ 0 ];
+	}
+
+	const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
+	const nextIndex = currentIndex - 1;
+	const lowestIndex = 0;
+
+	// Check boundary so that the index is does not exceed the length.
+	if ( nextIndex < lowestIndex ) {
+		// Cycle back to other end.
+		return focusables[ focusables.length - 1 ];
+	}
+
+	return focusables[ nextIndex ];
+};
+
+export const focusNextFocusableRef = ( component ) => {
+	const next = nextFocusableRef( component );
+	component.changeMenuSelection( next );
+};
+
+export const focusPreviousFocusableRef = ( component ) => {
+	const previous = previousFocusableRef( component );
+	component.changeMenuSelection( previous );
+};
diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
index cb74a423946b6a..154b8abcc6a21c 100644
--- a/editor/components/inserter/index.js
+++ b/editor/components/inserter/index.js
@@ -12,6 +12,7 @@ import IconButton from 'components/icon-button';
 class Inserter extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
+		this.nodes = {};
 		this.toggle = this.toggle.bind( this );
 		this.close = this.close.bind( this );
 		this.state = {
@@ -20,6 +21,10 @@ class Inserter extends wp.element.Component {
 	}
 
 	toggle() {
+		if ( this.state.opened === true ) {
+			this.nodes.toggle.focus();
+		}
+
 		this.setState( {
 			opened: ! this.state.opened
 		} );
@@ -51,8 +56,9 @@ class Inserter extends wp.element.Component {
 					onClick={ this.toggle }
 					className="editor-inserter__toggle"
 					aria-haspopup="true"
+					buttonRef={ ( node ) => this.nodes.toggle = node }
 					aria-expanded={ opened ? 'true' : 'false' } />
-				{ opened && <InserterMenu position={ position } onSelect={ this.close } /> }
+				{ opened && <InserterMenu position={ position } onSelect={ this.close } closeMenu={ this.toggle } /> }
 			</div>
 		);
 	}
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index f6a5954faf2308..ba0cf01191e86a 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -2,21 +2,84 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/filter';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import Dashicon from 'components/dashicon';
+import { focusNextFocusableRef, focusPreviousFocusableRef, listVisibleBlocksByCategory } from './helpers';
 
 class InserterMenu extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
+		this.blockTypes = wp.blocks.getBlocks();
+		this.categories = wp.blocks.getCategories();
+		this.nodes = {};
 		this.state = {
-			filterValue: ''
+			filterValue: '',
+			focusedElementRef: null
 		};
 		this.filter = this.filter.bind( this );
 		this.instanceId = this.constructor.instances++;
+		this.isShownBlock = this.isShownBlock.bind( this );
+		this.changeMenuSelection = this.changeMenuSelection.bind( this );
+		this.setSearchFocus = this.setSearchFocus.bind( this );
+		this.bindReferenceNode = this.bindReferenceNode.bind( this );
+	}
+
+	bindReferenceNode( nodeName ) {
+		const binder = ( node ) => this.nodes[ nodeName ] = node;
+		binder.bind( this );
+
+		return binder;
+	}
+
+	componentDidMount() {
+		// Build a stream of keydown events on component mount.
+		this.keyStream$ = Observable.fromEvent( document, 'keydown' );
+
+		// Out of keydown stream build a stream matching arrow down and arrow right.
+		this.focusNextFocusableRef$ = this.keyStream$.filter( keydown => keydown.code === 'ArrowDown' || keydown.code === 'ArrowRight' || ( keydown.code === 'Tab' && keydown.shiftKey === false ) );
+
+		// Out of keydown stream build a stream matching arrow left and arrow up.
+		this.focusPreviousFocusableRef$ = this.keyStream$.filter( keydown => keydown.code === 'ArrowUp' || keydown.code === 'ArrowLeft' || ( keydown.code === 'Tab' && keydown.shiftKey === true ) );
+
+		// Get escape key presses.
+		this.closeInserter$ = this.keyStream$.filter( keydown => keydown.code === 'Escape' );
+
+		// Create subscriptions for our next and previous blockType focus actions.
+		this.nextBlockSubscription = this.focusNextFocusableRef$.subscribe( ( keydown ) => {
+			keydown.preventDefault();
+			focusNextFocusableRef( this );
+		} );
+		this.previousBlockSubscription = this.focusPreviousFocusableRef$.subscribe( ( keydown ) => {
+			keydown.preventDefault();
+			focusPreviousFocusableRef( this );
+		} );
+		this.closeInserterSubscription = this.closeInserter$.subscribe( () => {
+			this.props.closeMenu();
+		} );
+	}
+
+	componentWillUnmount() {
+		// Unsubscribe from the stream.
+		this.nextBlockSubscription.unsubscribe();
+		this.previousBlockSubscription.unsubscribe();
+		this.closeInserterSubscription.unsubscribe();
+
+		// These deletes are most likely not necessary but memory leaks can be pretty ugly.
+		delete this.nextBlockSubscription;
+		delete this.previousBlockSubscription;
+		delete this.closeInserterSubscription;
+		delete this.closeInserter$;
+		delete this.focusPreviousFocusableRef$;
+		delete this.focusNextFocusableRef$;
+		delete this.keyStreamSubscription;
+		delete this.keyStream$;
 	}
 
 	filter( event ) {
@@ -25,36 +88,46 @@ class InserterMenu extends wp.element.Component {
 		} );
 	}
 
+	isShownBlock( block ) {
+		return block.title.toLowerCase().indexOf( this.state.filterValue.toLowerCase() ) !== -1;
+	}
+
 	selectBlock( slug ) {
 		return () => {
 			this.props.onInsertBlock( slug );
 			this.props.onSelect();
-			this.setState( { filterValue: '' } );
+			this.setState( {
+				filterValue: '',
+				focusedElementRef: null
+			} );
 		};
 	}
 
+	changeMenuSelection( refName ) {
+		this.setState( {
+			focusedElementRef: refName
+		} );
+
+		// Focus the DOM node.
+		this.nodes[ refName ].focus();
+	}
+
+	setSearchFocus() {
+		this.changeMenuSelection( 'search' );
+	}
+
 	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();
+		const blocks = this.blockTypes;
+		const visibleBlocksByCategory = listVisibleBlocksByCategory( this.state )( blocks );
+		const categories = this.categories;
 
 		return (
-			<div className={ `editor-inserter__menu is-${ position }` }>
+			<div className={ `editor-inserter__menu is-${ position }` } tabIndex="0">
 				<div className="editor-inserter__arrow" />
-				<div className="editor-inserter__content">
+				<div role="menu" className="editor-inserter__content">
 					{ categories
-						.map( ( category ) => !! blocksByCategory[ category.slug ] && (
+						.map( ( category ) => !! visibleBlocksByCategory[ category.slug ] && (
 							<div key={ category.slug }>
 								<div
 									className="editor-inserter__separator"
@@ -69,12 +142,14 @@ class InserterMenu extends wp.element.Component {
 									tabIndex="0"
 									aria-labelledby={ `editor-inserter__separator-${ category.slug }-${ this.instanceId }` }
 								>
-									{ blocksByCategory[ category.slug ].map( ( { slug, title, icon } ) => (
+									{ visibleBlocksByCategory[ category.slug ].map( ( { slug, title, icon } ) => (
 										<button
 											role="menuitem"
 											key={ slug }
 											className="editor-inserter__block"
 											onClick={ this.selectBlock( slug ) }
+											ref={ this.bindReferenceNode( slug ) }
+											tabIndex="-1"
 										>
 											<Dashicon icon={ icon } />
 											{ title }
@@ -94,6 +169,8 @@ class InserterMenu extends wp.element.Component {
 					placeholder={ wp.i18n.__( 'Search…' ) }
 					className="editor-inserter__search"
 					onChange={ this.filter }
+					onClick={ this.setSearchFocus }
+					ref={ this.bindReferenceNode( 'search' ) }
 				/>
 			</div>
 		);
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index 183812df025db2..58c21ae257cbc0 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -21,7 +21,8 @@
 	outline: none;
 	transition: color .2s ease;
 
-	&:hover {
+	&:hover,
+	&:focus {
 		color: $blue-medium;
 	}
 }
@@ -145,6 +146,7 @@ input[type=search].editor-inserter__search {
 	&:focus {
 		border: 1px solid $dark-gray-500;
 		outline: none;
+		position: relative;
 	}
 
 	&:active,
diff --git a/package.json b/package.json
index 054c6f78192cb4..65c1e91ad4abfa 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "style-loader": "^0.14.1",
     "tinymce": "^4.5.6",
     "webpack": "^2.2.1",
-    "webpack-node-externals": "^1.5.4"
+    "webpack-node-externals": "^1.5.4",
+    "webpack-rxjs-externals": "^1.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -72,6 +73,7 @@
     "react-redux": "^5.0.4",
     "react-slot-fill": "^1.0.0-alpha.11",
     "redux": "^3.6.0",
+    "rxjs": "^5.3.0",
     "uuid": "^3.0.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 352778f3eedfca..3e26b76f84052e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,7 @@ const config = {
 	externals: {
 		react: 'React',
 		'react-dom': 'ReactDOM',
-		'react-dom/server': 'ReactDOMServer'
+		'react-dom/server': 'ReactDOMServer',
 	},
 	resolve: {
 		alias: {
@@ -104,7 +104,10 @@ switch ( process.env.NODE_ENV ) {
 			'./editor/index.js',
 			...glob.sync( `./{${ Object.keys( config.entry ).join() }}/**/test/*.js` )
 		];
-		config.externals = [ require( 'webpack-node-externals' )() ];
+		config.externals = [
+			require( 'webpack-node-externals' )(),
+			require( 'webpack-rxjs-externals' )()
+		];
 		config.output = {
 			filename: 'build/test.js',
 			path: __dirname

From f8a52f7adbab279b62ed8ffc1c5c679f97d5deb3 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Tue, 2 May 2017 20:14:28 -0400
Subject: [PATCH 2/5] Removing RxJS and consolidating into component.

---
 editor/components/inserter/helpers/index.js |  83 ---------
 editor/components/inserter/menu.js          | 196 +++++++++++++++-----
 package.json                                |   4 +-
 webpack.config.js                           |   7 +-
 4 files changed, 151 insertions(+), 139 deletions(-)
 delete mode 100644 editor/components/inserter/helpers/index.js

diff --git a/editor/components/inserter/helpers/index.js b/editor/components/inserter/helpers/index.js
deleted file mode 100644
index e2a979e9809123..00000000000000
--- a/editor/components/inserter/helpers/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Helpers associated with the Inserter Component.
- *
- * This file contains a group of functions that help in managing the inserter.
- */
-
-export const isShownBlock = state => block => block.title.toLowerCase().indexOf( state.filterValue.toLowerCase() ) !== -1;
-
-export const listVisibleBlocksByCategory = ( state ) => ( blocks ) => {
-	return blocks.reduce( ( groups, block ) => {
-		if ( ! isShownBlock( state )( block ) ) {
-			return groups;
-		}
-		if ( ! groups[ block.category ] ) {
-			groups[ block.category ] = [];
-		}
-		groups[ block.category ].push( block );
-		return groups;
-	}, {} );
-};
-
-const flattenObjectIntoArray = ( object ) => {
-	let list = [];
-	for ( const key in object ) {
-		list.push( object[ key ] );
-	}
-	list = list.reduce( ( values, objectValue ) => values.concat( objectValue ), [] );
-
-	return list;
-};
-
-const nextFocusableRef = ( component ) => {
-	const visibleBlocksByCategory = flattenObjectIntoArray( listVisibleBlocksByCategory( component.state )( component.blockTypes ) );
-	const focusables = visibleBlocksByCategory.map( blockType => blockType.slug ).concat( 'search' );
-
-	if ( null === component.state.focusedElementRef ) {
-		return focusables[ 0 ];
-	}
-
-	const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
-	const nextIndex = currentIndex + 1;
-	const highestIndex = focusables.length - 1;
-
-	// Check boundary so that the index is does not exceed the length.
-	if ( nextIndex > highestIndex ) {
-		// Cycle back to other end.
-		return focusables[ 0 ];
-	}
-
-	return focusables[ nextIndex ];
-};
-
-const previousFocusableRef = ( component ) => {
-	const visibleBlocksByCategory = flattenObjectIntoArray( listVisibleBlocksByCategory( component.state )( component.blockTypes ) );
-	const focusables = visibleBlocksByCategory.map( blockType => blockType.slug ).concat( 'search' );
-
-	// Initiate the menu with the first block.
-	if ( null === component.state.focusedElementRef ) {
-		return focusables[ 0 ];
-	}
-
-	const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
-	const nextIndex = currentIndex - 1;
-	const lowestIndex = 0;
-
-	// Check boundary so that the index is does not exceed the length.
-	if ( nextIndex < lowestIndex ) {
-		// Cycle back to other end.
-		return focusables[ focusables.length - 1 ];
-	}
-
-	return focusables[ nextIndex ];
-};
-
-export const focusNextFocusableRef = ( component ) => {
-	const next = nextFocusableRef( component );
-	component.changeMenuSelection( next );
-};
-
-export const focusPreviousFocusableRef = ( component ) => {
-	const previous = previousFocusableRef( component );
-	component.changeMenuSelection( previous );
-};
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index ba0cf01191e86a..5fbd52e4a2501b 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -2,16 +2,12 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/filter';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import Dashicon from 'components/dashicon';
-import { focusNextFocusableRef, focusPreviousFocusableRef, listVisibleBlocksByCategory } from './helpers';
 
 class InserterMenu extends wp.element.Component {
 	constructor() {
@@ -29,6 +25,126 @@ class InserterMenu extends wp.element.Component {
 		this.changeMenuSelection = this.changeMenuSelection.bind( this );
 		this.setSearchFocus = this.setSearchFocus.bind( this );
 		this.bindReferenceNode = this.bindReferenceNode.bind( this );
+		this.onKeyDown = this.onKeyDown.bind( this );
+		this.listVisibleBlocksByCategory = this.listVisibleBlocksByCategory.bind( this );
+	}
+
+	componentDidMount() {
+		document.addEventListener( 'keydown', this.onKeyDown );
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener( 'keydown', this.onKeyDown );
+	}
+
+	isShown( filterValue, string ) {
+		return string.toLowerCase().indexOf( filterValue.toLowerCase() ) !== -1;
+	}
+
+	isShownBlock( filterValue, block ) {
+		return this.isShown( filterValue, block.title );
+	}
+
+	visibleFocusables( nodes, filterValue ) {
+		const focusables = [];
+
+		for ( const refName in nodes ) {
+			if ( this.isShown( filterValue, refName ) && 'search' !== refName ) {
+				focusables.push( refName );
+			}
+		}
+
+		// Add search regardless at the end.
+		focusables.push( 'search' );
+
+		return focusables;
+	}
+
+	nextFocusableRef( component ) {
+		const focusables = this.visibleFocusables( component.nodes, component.state.filterValue );
+
+		// Initiate the menu with the first block.
+		if ( null === component.state.focusedElementRef ) {
+			return focusables[ 0 ];
+		}
+
+		const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
+		return this.nextFocusInList( currentIndex, focusables );
+	}
+
+	previousFocusableRef( component ) {
+		const focusables = this.visibleFocusables( component.nodes, component.state.filterValue );
+
+		// Initiate the menu with the first block.
+		if ( null === component.state.focusedElementRef ) {
+			return focusables[ 0 ];
+		}
+
+		const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
+		return this.previousFocusInList( currentIndex, focusables );
+	}
+
+	/**
+	 * Get the next focusable element in list.
+	 *
+	 * @param {int} currentIndex Current index in the list.
+	 * @param {array} focusables List of focusable elements attached to node references.
+	 * @return {string} Name of the next focus.
+	 */
+	nextFocusInList( currentIndex, focusables ) {
+		const nextIndex = currentIndex + 1;
+		const highestIndex = focusables.length - 1;
+
+		// Check boundary so that the index is does not exceed the length.
+		if ( nextIndex > highestIndex ) {
+			// Cycle back to other end.
+			return focusables[ 0 ];
+		}
+
+		return focusables[ nextIndex ];
+	}
+
+	/**
+	 * Get the previousFocusInList.
+	 *
+	 * @param {int} currentIndex Current index in the list.
+	 * @param {array} focusables List of focusable elements attached to node references.
+	 * @return {string} Name of the previous focus.
+	 */
+	previousFocusInList( currentIndex, focusables ) {
+		const nextIndex = currentIndex - 1;
+		const lowestIndex = 0;
+
+		// Check boundary so that the index is does not exceed the length.
+		if ( nextIndex < lowestIndex ) {
+			// Cycle back to other end.
+			return focusables[ focusables.length - 1 ];
+		}
+
+		return focusables[ nextIndex ];
+	}
+
+	focusNextFocusableRef( component ) {
+		const next = component.nextFocusableRef( component );
+		component.changeMenuSelection( next );
+	}
+
+	focusPreviousFocusableRef( component ) {
+		const previous = component.previousFocusableRef( component );
+		component.changeMenuSelection( previous );
+	}
+
+	listVisibleBlocksByCategory( blocks ) {
+		return blocks.reduce( ( groups, block ) => {
+			if ( ! this.isShownBlock( this.state.filterValue, block ) ) {
+				return groups;
+			}
+			if ( ! groups[ block.category ] ) {
+				groups[ block.category ] = [];
+			}
+			groups[ block.category ].push( block );
+			return groups;
+		}, {} );
 	}
 
 	bindReferenceNode( nodeName ) {
@@ -38,48 +154,20 @@ class InserterMenu extends wp.element.Component {
 		return binder;
 	}
 
-	componentDidMount() {
-		// Build a stream of keydown events on component mount.
-		this.keyStream$ = Observable.fromEvent( document, 'keydown' );
-
-		// Out of keydown stream build a stream matching arrow down and arrow right.
-		this.focusNextFocusableRef$ = this.keyStream$.filter( keydown => keydown.code === 'ArrowDown' || keydown.code === 'ArrowRight' || ( keydown.code === 'Tab' && keydown.shiftKey === false ) );
-
-		// Out of keydown stream build a stream matching arrow left and arrow up.
-		this.focusPreviousFocusableRef$ = this.keyStream$.filter( keydown => keydown.code === 'ArrowUp' || keydown.code === 'ArrowLeft' || ( keydown.code === 'Tab' && keydown.shiftKey === true ) );
-
-		// Get escape key presses.
-		this.closeInserter$ = this.keyStream$.filter( keydown => keydown.code === 'Escape' );
+	isNextKeydown( keydown ) {
+		return keydown.code === 'ArrowDown'
+			|| keydown.code === 'ArrowRight'
+			|| ( keydown.code === 'Tab' && keydown.shiftKey === false );
+	}
 
-		// Create subscriptions for our next and previous blockType focus actions.
-		this.nextBlockSubscription = this.focusNextFocusableRef$.subscribe( ( keydown ) => {
-			keydown.preventDefault();
-			focusNextFocusableRef( this );
-		} );
-		this.previousBlockSubscription = this.focusPreviousFocusableRef$.subscribe( ( keydown ) => {
-			keydown.preventDefault();
-			focusPreviousFocusableRef( this );
-		} );
-		this.closeInserterSubscription = this.closeInserter$.subscribe( () => {
-			this.props.closeMenu();
-		} );
+	isPreviousKeydown( keydown ) {
+		return keydown.code === 'ArrowUp'
+			|| keydown.code === 'ArrowLeft'
+			|| ( keydown.code === 'Tab' && keydown.shiftKey === true );
 	}
 
-	componentWillUnmount() {
-		// Unsubscribe from the stream.
-		this.nextBlockSubscription.unsubscribe();
-		this.previousBlockSubscription.unsubscribe();
-		this.closeInserterSubscription.unsubscribe();
-
-		// These deletes are most likely not necessary but memory leaks can be pretty ugly.
-		delete this.nextBlockSubscription;
-		delete this.previousBlockSubscription;
-		delete this.closeInserterSubscription;
-		delete this.closeInserter$;
-		delete this.focusPreviousFocusableRef$;
-		delete this.focusNextFocusableRef$;
-		delete this.keyStreamSubscription;
-		delete this.keyStream$;
+	isEscapeKey( keydown ) {
+		return keydown.code === 'Escape';
 	}
 
 	filter( event ) {
@@ -88,10 +176,6 @@ class InserterMenu extends wp.element.Component {
 		} );
 	}
 
-	isShownBlock( block ) {
-		return block.title.toLowerCase().indexOf( this.state.filterValue.toLowerCase() ) !== -1;
-	}
-
 	selectBlock( slug ) {
 		return () => {
 			this.props.onInsertBlock( slug );
@@ -103,6 +187,22 @@ class InserterMenu extends wp.element.Component {
 		};
 	}
 
+	onKeyDown( keydown ) {
+		keydown.preventDefault();
+
+		if ( this.isNextKeydown( keydown ) ) {
+			this.focusNextFocusableRef( this );
+		}
+
+		if ( this.isPreviousKeydown( keydown ) ) {
+			this.focusPreviousFocusableRef( this );
+		}
+
+		if ( this.isEscapeKey( keydown ) ) {
+			this.props.closeMenu();
+		}
+	}
+
 	changeMenuSelection( refName ) {
 		this.setState( {
 			focusedElementRef: refName
@@ -119,7 +219,7 @@ class InserterMenu extends wp.element.Component {
 	render() {
 		const { position = 'top' } = this.props;
 		const blocks = this.blockTypes;
-		const visibleBlocksByCategory = listVisibleBlocksByCategory( this.state )( blocks );
+		const visibleBlocksByCategory = this.listVisibleBlocksByCategory( blocks );
 		const categories = this.categories;
 
 		return (
diff --git a/package.json b/package.json
index 65c1e91ad4abfa..054c6f78192cb4 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,7 @@
     "style-loader": "^0.14.1",
     "tinymce": "^4.5.6",
     "webpack": "^2.2.1",
-    "webpack-node-externals": "^1.5.4",
-    "webpack-rxjs-externals": "^1.0.0"
+    "webpack-node-externals": "^1.5.4"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -73,7 +72,6 @@
     "react-redux": "^5.0.4",
     "react-slot-fill": "^1.0.0-alpha.11",
     "redux": "^3.6.0",
-    "rxjs": "^5.3.0",
     "uuid": "^3.0.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 3e26b76f84052e..352778f3eedfca 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,7 @@ const config = {
 	externals: {
 		react: 'React',
 		'react-dom': 'ReactDOM',
-		'react-dom/server': 'ReactDOMServer',
+		'react-dom/server': 'ReactDOMServer'
 	},
 	resolve: {
 		alias: {
@@ -104,10 +104,7 @@ switch ( process.env.NODE_ENV ) {
 			'./editor/index.js',
 			...glob.sync( `./{${ Object.keys( config.entry ).join() }}/**/test/*.js` )
 		];
-		config.externals = [
-			require( 'webpack-node-externals' )(),
-			require( 'webpack-rxjs-externals' )()
-		];
+		config.externals = [ require( 'webpack-node-externals' )() ];
 		config.output = {
 			filename: 'build/test.js',
 			path: __dirname

From 7fd578bae86714a4d759d059b10d1f1ab06d2321 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Wed, 3 May 2017 18:59:46 -0400
Subject: [PATCH 3/5] Cleaning up stuff.

Cleaning up the implementation to be more block centric rather than UI
centric.  Hopefully this is good enough :).
---
 editor/components/inserter/menu.js | 248 +++++++++++++++--------------
 1 file changed, 131 insertions(+), 117 deletions(-)

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 5fbd52e4a2501b..7054ca18d7f33c 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { flow } from 'lodash';
 
 /**
  * Internal dependencies
@@ -17,7 +18,7 @@ class InserterMenu extends wp.element.Component {
 		this.nodes = {};
 		this.state = {
 			filterValue: '',
-			focusedElementRef: null
+			currentFocus: null
 		};
 		this.filter = this.filter.bind( this );
 		this.instanceId = this.constructor.instances++;
@@ -26,7 +27,10 @@ class InserterMenu extends wp.element.Component {
 		this.setSearchFocus = this.setSearchFocus.bind( this );
 		this.bindReferenceNode = this.bindReferenceNode.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
-		this.listVisibleBlocksByCategory = this.listVisibleBlocksByCategory.bind( this );
+		this.getVisibleBlocks = this.getVisibleBlocks.bind( this );
+		this.getVisibleBlocksByCategory = this.getVisibleBlocksByCategory.bind( this );
+		this.getCategoryIndex = this.getCategoryIndex.bind( this );
+		this.sortBlocksByCategory = this.sortBlocksByCategory.bind( this );
 	}
 
 	componentDidMount() {
@@ -37,114 +41,8 @@ class InserterMenu extends wp.element.Component {
 		document.removeEventListener( 'keydown', this.onKeyDown );
 	}
 
-	isShown( filterValue, string ) {
-		return string.toLowerCase().indexOf( filterValue.toLowerCase() ) !== -1;
-	}
-
-	isShownBlock( filterValue, block ) {
-		return this.isShown( filterValue, block.title );
-	}
-
-	visibleFocusables( nodes, filterValue ) {
-		const focusables = [];
-
-		for ( const refName in nodes ) {
-			if ( this.isShown( filterValue, refName ) && 'search' !== refName ) {
-				focusables.push( refName );
-			}
-		}
-
-		// Add search regardless at the end.
-		focusables.push( 'search' );
-
-		return focusables;
-	}
-
-	nextFocusableRef( component ) {
-		const focusables = this.visibleFocusables( component.nodes, component.state.filterValue );
-
-		// Initiate the menu with the first block.
-		if ( null === component.state.focusedElementRef ) {
-			return focusables[ 0 ];
-		}
-
-		const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
-		return this.nextFocusInList( currentIndex, focusables );
-	}
-
-	previousFocusableRef( component ) {
-		const focusables = this.visibleFocusables( component.nodes, component.state.filterValue );
-
-		// Initiate the menu with the first block.
-		if ( null === component.state.focusedElementRef ) {
-			return focusables[ 0 ];
-		}
-
-		const currentIndex = focusables.findIndex( ( elementRef ) => elementRef === component.state.focusedElementRef );
-		return this.previousFocusInList( currentIndex, focusables );
-	}
-
-	/**
-	 * Get the next focusable element in list.
-	 *
-	 * @param {int} currentIndex Current index in the list.
-	 * @param {array} focusables List of focusable elements attached to node references.
-	 * @return {string} Name of the next focus.
-	 */
-	nextFocusInList( currentIndex, focusables ) {
-		const nextIndex = currentIndex + 1;
-		const highestIndex = focusables.length - 1;
-
-		// Check boundary so that the index is does not exceed the length.
-		if ( nextIndex > highestIndex ) {
-			// Cycle back to other end.
-			return focusables[ 0 ];
-		}
-
-		return focusables[ nextIndex ];
-	}
-
-	/**
-	 * Get the previousFocusInList.
-	 *
-	 * @param {int} currentIndex Current index in the list.
-	 * @param {array} focusables List of focusable elements attached to node references.
-	 * @return {string} Name of the previous focus.
-	 */
-	previousFocusInList( currentIndex, focusables ) {
-		const nextIndex = currentIndex - 1;
-		const lowestIndex = 0;
-
-		// Check boundary so that the index is does not exceed the length.
-		if ( nextIndex < lowestIndex ) {
-			// Cycle back to other end.
-			return focusables[ focusables.length - 1 ];
-		}
-
-		return focusables[ nextIndex ];
-	}
-
-	focusNextFocusableRef( component ) {
-		const next = component.nextFocusableRef( component );
-		component.changeMenuSelection( next );
-	}
-
-	focusPreviousFocusableRef( component ) {
-		const previous = component.previousFocusableRef( component );
-		component.changeMenuSelection( previous );
-	}
-
-	listVisibleBlocksByCategory( blocks ) {
-		return blocks.reduce( ( groups, block ) => {
-			if ( ! this.isShownBlock( this.state.filterValue, block ) ) {
-				return groups;
-			}
-			if ( ! groups[ block.category ] ) {
-				groups[ block.category ] = [];
-			}
-			groups[ block.category ].push( block );
-			return groups;
-		}, {} );
+	isShownBlock( block ) {
+		return block.title.toLowerCase().indexOf( this.state.filterValue.toLowerCase() ) !== -1;
 	}
 
 	bindReferenceNode( nodeName ) {
@@ -182,30 +80,146 @@ class InserterMenu extends wp.element.Component {
 			this.props.onSelect();
 			this.setState( {
 				filterValue: '',
-				focusedElementRef: null
+				currentFocus: null
 			} );
 		};
 	}
 
-	onKeyDown( keydown ) {
-		keydown.preventDefault();
+	getVisibleBlocks( blockTypes ) {
+		return blockTypes.filter( this.isShownBlock );
+	}
+
+	getCategoryIndex( item ) {
+		const categories = this.categories;
+		return categories.findIndex( ( category ) => category.slug === item.slug );
+	}
+
+	sortBlocksByCategory( blockTypes ) {
+		return blockTypes.sort( ( a, b ) => {
+			return this.getCategoryIndex( a ) - this.getCategoryIndex( b );
+		} );
+	}
+
+	groupByCategory( blockTypes ) {
+		return blockTypes.reduce( ( accumulator, block ) => {
+			// If already an array push block on else add array of block.
+			if ( Array.isArray( accumulator[ block.category ] ) ) {
+				accumulator[ block.category ].push( block );
+				return accumulator;
+			}
+
+			accumulator[ block.category ] = [ block ];
+			return accumulator;
+		}, {} );
+	}
+
+	getVisibleBlocksByCategory( blockTypes ) {
+		return flow(
+			this.getVisibleBlocks,
+			this.sortBlocksByCategory,
+			this.groupByCategory
+		)( blockTypes );
+	}
+
+	findNext( currentBlock, blockTypes ) {
+		/**
+		 * 'search' or null are the values that will trigger iterating back to
+		 * the top of the list of block types.
+		 */
+		if ( null === currentBlock || 'search' === currentBlock ) {
+			return blockTypes[ 0 ].slug;
+		}
+
+		const currentIndex = blockTypes.findIndex( ( blockType ) => currentBlock === blockType.slug );
+		const nextIndex = currentIndex + 1;
+		const highestIndex = blockTypes.length - 1;
+
+		/**
+		 * Default currently for going past the blocks is search, may need to be
+		 * revised in the future as more focusable elements are added.
+		 */
+		if ( nextIndex > highestIndex ) {
+			return 'search';
+		}
 
+		// Return the slug of the next block type.
+		return blockTypes[ nextIndex ].slug;
+	}
+
+	findPrevious( currentBlock, blockTypes ) {
+		/**
+		 * null will trigger iterating back to the top of the list of block
+		 * types.
+		 */
+		if ( null === currentBlock ) {
+			return blockTypes[ 0 ].slug;
+		}
+
+		const highestIndex = blockTypes.length - 1;
+
+		// If the search bar is focused navigate to the bottom of the block list.
+		if ( 'search' === currentBlock ) {
+			return blockTypes[ highestIndex ].slug;
+		}
+
+		const currentIndex = blockTypes.findIndex( ( blockType ) => currentBlock === blockType.slug );
+		const previousIndex = currentIndex - 1;
+		const lowestIndex = 0;
+
+		/**
+		 * Default currently for going past the blocks is search, may need to be
+		 * revised in the future as more non block focusable elements are added.
+		 */
+		if ( previousIndex < lowestIndex ) {
+			return 'search';
+		}
+
+		// Return the slug of the next block type.
+		return blockTypes[ previousIndex ].slug;
+	}
+
+	focusNext( component ) {
+		const sortedByCategory = flow(
+			this.getVisibleBlocks,
+			this.sortBlocksByCategory,
+		)( component.blockTypes );
+		const currentBlock = component.state.currentFocus;
+
+		const nextBlock = this.findNext( currentBlock, sortedByCategory );
+		this.changeMenuSelection( nextBlock );
+	}
+
+	focusPrevious( component ) {
+		const sortedByCategory = flow(
+			this.getVisibleBlocks,
+			this.sortBlocksByCategory,
+		)( component.blockTypes );
+		const currentBlock = component.state.currentFocus;
+
+		const nextBlock = this.findPrevious( currentBlock, sortedByCategory );
+		this.changeMenuSelection( nextBlock );
+	}
+
+	onKeyDown( keydown ) {
 		if ( this.isNextKeydown( keydown ) ) {
-			this.focusNextFocusableRef( this );
+			keydown.preventDefault();
+			this.focusNext( this );
 		}
 
 		if ( this.isPreviousKeydown( keydown ) ) {
-			this.focusPreviousFocusableRef( this );
+			keydown.preventDefault();
+			this.focusPrevious( this );
 		}
 
 		if ( this.isEscapeKey( keydown ) ) {
+			keydown.preventDefault();
 			this.props.closeMenu();
 		}
 	}
 
 	changeMenuSelection( refName ) {
 		this.setState( {
-			focusedElementRef: refName
+			currentFocus: refName
 		} );
 
 		// Focus the DOM node.
@@ -219,7 +233,7 @@ class InserterMenu extends wp.element.Component {
 	render() {
 		const { position = 'top' } = this.props;
 		const blocks = this.blockTypes;
-		const visibleBlocksByCategory = this.listVisibleBlocksByCategory( blocks );
+		const visibleBlocksByCategory = this.getVisibleBlocksByCategory( blocks );
 		const categories = this.categories;
 
 		return (

From 153adb2a193f4ca56d0ff783ac5faf80b26a6af4 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Thu, 4 May 2017 12:01:11 -0400
Subject: [PATCH 4/5] Making revisions.

Made changes pointed out by Riad.
---
 editor/components/button/index.js   |  4 +--
 editor/components/inserter/index.js |  6 ++--
 editor/components/inserter/menu.js  | 46 ++++++++++++++++-------------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/editor/components/button/index.js b/editor/components/button/index.js
index 34342d0909d631..aa75369858b275 100644
--- a/editor/components/button/index.js
+++ b/editor/components/button/index.js
@@ -4,7 +4,7 @@
 import './style.scss';
 import classnames from 'classnames';
 
-function Button( { isPrimary, isLarge, isToggled, className, ...additionalProps } ) {
+function Button( { isPrimary, isLarge, isToggled, className, buttonRef, ...additionalProps } ) {
 	const classes = classnames( 'editor-button', className, {
 		button: ( isPrimary || isLarge ),
 		'button-primary': isPrimary,
@@ -16,7 +16,7 @@ function Button( { isPrimary, isLarge, isToggled, className, ...additionalProps
 		<button
 			type="button"
 			{ ...additionalProps }
-			ref={ additionalProps.buttonRef }
+			ref={ buttonRef }
 			className={ classes } />
 	);
 }
diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
index 154b8abcc6a21c..fdba0ae012c1da 100644
--- a/editor/components/inserter/index.js
+++ b/editor/components/inserter/index.js
@@ -21,8 +21,8 @@ class Inserter extends wp.element.Component {
 	}
 
 	toggle() {
-		if ( this.state.opened === true ) {
-			this.nodes.toggle.focus();
+		if ( this.state.opened ) {
+			this.toggleNode.focus();
 		}
 
 		this.setState( {
@@ -56,7 +56,7 @@ class Inserter extends wp.element.Component {
 					onClick={ this.toggle }
 					className="editor-inserter__toggle"
 					aria-haspopup="true"
-					buttonRef={ ( node ) => this.nodes.toggle = node }
+					buttonRef={ ( node ) => this.toggleNode = node }
 					aria-expanded={ opened ? 'true' : 'false' } />
 				{ opened && <InserterMenu position={ position } onSelect={ this.close } closeMenu={ this.toggle } /> }
 			</div>
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 7054ca18d7f33c..0f30f653089bef 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -23,13 +23,9 @@ class InserterMenu extends wp.element.Component {
 		this.filter = this.filter.bind( this );
 		this.instanceId = this.constructor.instances++;
 		this.isShownBlock = this.isShownBlock.bind( this );
-		this.changeMenuSelection = this.changeMenuSelection.bind( this );
 		this.setSearchFocus = this.setSearchFocus.bind( this );
-		this.bindReferenceNode = this.bindReferenceNode.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.getVisibleBlocks = this.getVisibleBlocks.bind( this );
-		this.getVisibleBlocksByCategory = this.getVisibleBlocksByCategory.bind( this );
-		this.getCategoryIndex = this.getCategoryIndex.bind( this );
 		this.sortBlocksByCategory = this.sortBlocksByCategory.bind( this );
 	}
 
@@ -46,10 +42,7 @@ class InserterMenu extends wp.element.Component {
 	}
 
 	bindReferenceNode( nodeName ) {
-		const binder = ( node ) => this.nodes[ nodeName ] = node;
-		binder.bind( this );
-
-		return binder;
+		return ( node ) => this.nodes[ nodeName ] = node;
 	}
 
 	isNextKeydown( keydown ) {
@@ -89,14 +82,13 @@ class InserterMenu extends wp.element.Component {
 		return blockTypes.filter( this.isShownBlock );
 	}
 
-	getCategoryIndex( item ) {
-		const categories = this.categories;
-		return categories.findIndex( ( category ) => category.slug === item.slug );
-	}
-
 	sortBlocksByCategory( blockTypes ) {
+		const getCategoryIndex = ( item ) => {
+			return this.categories.findIndex( ( category ) => category.slug === item.slug );
+		};
+
 		return blockTypes.sort( ( a, b ) => {
-			return this.getCategoryIndex( a ) - this.getCategoryIndex( b );
+			return getCategoryIndex( a ) - getCategoryIndex( b );
 		} );
 	}
 
@@ -136,10 +128,12 @@ class InserterMenu extends wp.element.Component {
 
 		/**
 		 * Default currently for going past the blocks is search, may need to be
-		 * revised in the future as more focusable elements are added.
+		 * revised in the future as more focusable elements are added. This
+		 * returns a null value, which currently implies that search will be set
+		 * as the next focus.
 		 */
 		if ( nextIndex > highestIndex ) {
-			return 'search';
+			return null;
 		}
 
 		// Return the slug of the next block type.
@@ -168,10 +162,12 @@ class InserterMenu extends wp.element.Component {
 
 		/**
 		 * Default currently for going past the blocks is search, may need to be
-		 * revised in the future as more non block focusable elements are added.
+		 * revised in the future as more focusable elements are added. This
+		 * returns a null value, which currently implies that search will be set
+		 * as the next focus.
 		 */
 		if ( previousIndex < lowestIndex ) {
-			return 'search';
+			return null;
 		}
 
 		// Return the slug of the next block type.
@@ -185,7 +181,12 @@ class InserterMenu extends wp.element.Component {
 		)( component.blockTypes );
 		const currentBlock = component.state.currentFocus;
 
-		const nextBlock = this.findNext( currentBlock, sortedByCategory );
+		let nextBlock = this.findNext( currentBlock, sortedByCategory );
+
+		if ( nextBlock === null ) {
+			nextBlock = 'search';
+		}
+
 		this.changeMenuSelection( nextBlock );
 	}
 
@@ -196,7 +197,12 @@ class InserterMenu extends wp.element.Component {
 		)( component.blockTypes );
 		const currentBlock = component.state.currentFocus;
 
-		const nextBlock = this.findPrevious( currentBlock, sortedByCategory );
+		let nextBlock = this.findPrevious( currentBlock, sortedByCategory );
+
+		if ( nextBlock === null ) {
+			nextBlock = 'search';
+		}
+
 		this.changeMenuSelection( nextBlock );
 	}
 

From 1e9551aec4cba5b47221c1a57032b458badae287 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Thu, 4 May 2017 13:13:54 -0400
Subject: [PATCH 5/5] More changes.

Adding some minor changes.  Maintainability improvements, and cleaning
up unused code.  Fix an error condition where the list of blocks is
empty. Fix arrow key behavior in search field so that left and right
arrow keys can move the cursor properly.
---
 editor/components/inserter/index.js |  1 -
 editor/components/inserter/menu.js  | 56 ++++++++++++++++++++++-------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
index fdba0ae012c1da..891ca84308c356 100644
--- a/editor/components/inserter/index.js
+++ b/editor/components/inserter/index.js
@@ -12,7 +12,6 @@ import IconButton from 'components/icon-button';
 class Inserter extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
-		this.nodes = {};
 		this.toggle = this.toggle.bind( this );
 		this.close = this.close.bind( this );
 		this.state = {
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 0f30f653089bef..4de924cfd37056 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -47,13 +47,19 @@ class InserterMenu extends wp.element.Component {
 
 	isNextKeydown( keydown ) {
 		return keydown.code === 'ArrowDown'
-			|| keydown.code === 'ArrowRight'
 			|| ( keydown.code === 'Tab' && keydown.shiftKey === false );
 	}
 
+	isArrowRight( keydown ) {
+		return keydown.code === 'ArrowRight';
+	}
+
+	isArrowLeft( keydown ) {
+		return keydown.code === 'ArrowLeft';
+	}
+
 	isPreviousKeydown( keydown ) {
 		return keydown.code === 'ArrowUp'
-			|| keydown.code === 'ArrowLeft'
 			|| ( keydown.code === 'Tab' && keydown.shiftKey === true );
 	}
 
@@ -115,10 +121,10 @@ class InserterMenu extends wp.element.Component {
 
 	findNext( currentBlock, blockTypes ) {
 		/**
-		 * 'search' or null are the values that will trigger iterating back to
+		 * null is the value that will trigger iterating back to
 		 * the top of the list of block types.
 		 */
-		if ( null === currentBlock || 'search' === currentBlock ) {
+		if ( null === currentBlock ) {
 			return blockTypes[ 0 ].slug;
 		}
 
@@ -179,14 +185,15 @@ class InserterMenu extends wp.element.Component {
 			this.getVisibleBlocks,
 			this.sortBlocksByCategory,
 		)( component.blockTypes );
-		const currentBlock = component.state.currentFocus;
 
-		let nextBlock = this.findNext( currentBlock, sortedByCategory );
-
-		if ( nextBlock === null ) {
-			nextBlock = 'search';
+		// If the block list is empty return early.
+		if ( ! sortedByCategory.length ) {
+			return;
 		}
 
+		const currentBlock = component.state.currentFocus;
+
+		const nextBlock = this.findNext( currentBlock, sortedByCategory );
 		this.changeMenuSelection( nextBlock );
 	}
 
@@ -197,12 +204,12 @@ class InserterMenu extends wp.element.Component {
 		)( component.blockTypes );
 		const currentBlock = component.state.currentFocus;
 
-		let nextBlock = this.findPrevious( currentBlock, sortedByCategory );
-
-		if ( nextBlock === null ) {
-			nextBlock = 'search';
+		// If the block list is empty return early.
+		if ( ! sortedByCategory.length ) {
+			return;
 		}
 
+		const nextBlock = this.findPrevious( currentBlock, sortedByCategory );
 		this.changeMenuSelection( nextBlock );
 	}
 
@@ -217,6 +224,24 @@ class InserterMenu extends wp.element.Component {
 			this.focusPrevious( this );
 		}
 
+		/**
+		 * Left and right arrow keys need to be handled seperately so that
+		 * default cursor behavior can be handled in the search field.
+		 */
+		if ( this.isArrowRight( keydown ) ) {
+			if ( this.state.currentFocus === 'search' ) {
+				return;
+			}
+			this.focusNext( this );
+		}
+
+		if ( this.isArrowLeft( keydown ) ) {
+			if ( this.state.currentFocus === 'search' ) {
+				return;
+			}
+			this.focusPrevious( this );
+		}
+
 		if ( this.isEscapeKey( keydown ) ) {
 			keydown.preventDefault();
 			this.props.closeMenu();
@@ -224,6 +249,10 @@ class InserterMenu extends wp.element.Component {
 	}
 
 	changeMenuSelection( refName ) {
+		if ( refName === null ) {
+			refName = 'search';
+		}
+
 		this.setState( {
 			currentFocus: refName
 		} );
@@ -291,6 +320,7 @@ class InserterMenu extends wp.element.Component {
 					onChange={ this.filter }
 					onClick={ this.setSearchFocus }
 					ref={ this.bindReferenceNode( 'search' ) }
+					tabIndex="-1"
 				/>
 			</div>
 		);