Navigation Mode

editor/actions.js

@@ -93,11 +93,25 @@ export function updateBlock( uid, updates ) {
 	};
 }
 
-export function focusBlock( uid, config ) {
+export function focusBlock( uid ) {
 	return {
 		type: 'UPDATE_FOCUS',
 		uid,
-		config,
+		config: {
+			target: 'block',
+			options: { },
+		},
+	};
+}
+
+export function focusBlockEdit( uid, config ) {
+	return {
+		type: 'UPDATE_FOCUS',
+		uid,
+		config: {
+			target: 'blockEdit',
+			options: config || {},
+		},
 	};
 }
 

editor/block-toolbar/index.js

@@ -25,6 +25,8 @@ import BlockDeleteButton from '../block-settings-menu/block-delete-button';
 import { isMac } from '../utils/dom';
 import { getBlockMode } from '../selectors';
 
+import { focusBlockEdit } from '../actions';
+
 /**
  * Module Constants
  */
@@ -97,13 +99,8 @@ class BlockToolbar extends Component {
 			return;
 		}
 
-		// Is there a better way to focus the selected block
-		// TODO: separate focused/selected block state and use Redux actions instead
-		const selectedBlock = document.querySelector( '.editor-visual-editor__block.is-selected .editor-visual-editor__block-edit' );
-		if ( !! selectedBlock ) {
-			event.stopPropagation();
-			selectedBlock.focus();
-		}
+		this.props.focusBlockEdit();
+		event.stopPropagation();
 	}
 
 	render() {
@@ -161,6 +158,14 @@ class BlockToolbar extends Component {
 	}
 }
 
-export default connect( ( state, ownProps ) => ( {
-	mode: getBlockMode( state, ownProps.uid ),
-} ) )( BlockToolbar );
+export default connect(
+	( state, ownProps ) => ( {
+		mode: getBlockMode( state, ownProps.uid ),
+	} ),
+
+	( dispatch, ownProps ) => ( {
+		focusBlockEdit( ) {
+			dispatch( focusBlockEdit( ownProps.uid ) )
+		},
+	} ),
+)( BlockToolbar );

editor/modes/visual-editor/block.js

@@ -28,6 +28,7 @@ import {
 	clearSelectedBlock,
 	editPost,
 	focusBlock,
+	focusBlockEdit,
 	insertBlocks,
 	mergeBlocks,
 	removeBlocks,
@@ -81,7 +82,7 @@ class VisualEditorBlock extends Component {
 	}
 
 	componentDidMount() {
-		if ( this.props.focus ) {
+		if ( this.props.focus && this.props.focus.target === 'block' ) {
 			this.node.focus();
 		}
 
@@ -113,7 +114,7 @@ class VisualEditorBlock extends Component {
 		}
 
 		// Focus node when focus state is programmatically transferred.
-		if ( this.props.focus && ! prevProps.focus && ! this.node.contains( document.activeElement ) ) {
+		if ( this.props.focus !== prevProps.focus && this.props.focus && this.props.focus.target === 'block' ) {
 			this.node.focus();
 		}
 
@@ -225,8 +226,9 @@ class VisualEditorBlock extends Component {
 	}
 
 	onFocus( event ) {
+		const { onFocusBlock } = this.props;
 		if ( event.target === this.node ) {
-			this.props.onSelect();
+			onFocusBlock( this.props.uid );
 		}
 	}
 
@@ -249,24 +251,38 @@ class VisualEditorBlock extends Component {
 	}
 
 	onKeyDown( event ) {
+		const { uid, onRemove, previousBlock, nextBlock, onFocusBlockEdit, onFocusBlock } = this.props;
+
 		const { keyCode, target } = event;
 
+		const focusOnContainer = target === this.node;
+
 		switch ( keyCode ) {
 			case ENTER:
 				// Insert default block after current block if enter and event
 				// not already handled by descendant.
-				if ( target === this.node ) {
+				if ( focusOnContainer ) {
 					event.preventDefault();
-
-					this.props.onInsertBlocks( [
-						createBlock( 'core/paragraph' ),
-					], this.props.order + 1 );
+					event.stopPropagation();
+					onFocusBlockEdit( this.props.uid );
 				}
 				break;
 
 			case UP:
-			case RIGHT:
+				if ( focusOnContainer && previousBlock ) {
+					event.preventDefault();
+					event.stopPropagation();
+					onFocusBlock( previousBlock.uid );
+				}
+				break;
 			case DOWN:
+				if ( focusOnContainer && nextBlock ) {
+					event.preventDefault();
+					event.stopPropagation();
+					onFocusBlock( nextBlock.uid );
+				}
+				break;
+			case RIGHT:
 			case LEFT:
 				// Arrow keys do not fire keypress event, but should still
 				// trigger typing mode.
@@ -276,20 +292,20 @@ class VisualEditorBlock extends Component {
 			case BACKSPACE:
 			case DELETE:
 				// Remove block on backspace.
-				if ( target === this.node ) {
+				if ( focusOnContainer ) {
 					event.preventDefault();
-					const { uid, onRemove, previousBlock, onFocus } = this.props;
 					onRemove( uid );
 
 					if ( previousBlock ) {
-						onFocus( previousBlock.uid, { offset: -1 } );
+						onFocusBlockEdit( previousBlock.uid, { offset: -1 } );
 					}
 				}
 				break;
 
 			case ESCAPE:
-				// Deselect on escape.
-				this.props.onDeselect();
+				if ( ! focusOnContainer ) {
+					onFocusBlock( this.props.uid );
+				}
 				break;
 		}
 	}
@@ -322,17 +338,22 @@ class VisualEditorBlock extends Component {
 
 		// Generate the wrapper class names handling the different states of the block.
 		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
-		const showUI = isSelected && ( ! this.props.isTyping || focus.collapsed === false );
+
+		const isNavigating = focus && focus.target === 'block';
+
+		// Ignoring focus collapsed ... probably want to add that.
+		const showUI = isSelected && ( ! this.props.isTyping && focus && focus.target === 'blockEdit' );
 		const isProperlyHovered = isHovered && ! this.props.isSelecting;
 		const { error } = this.state;
 		const wrapperClassName = classnames( 'editor-visual-editor__block', {
 			'has-warning': ! isValid || !! error,
-			'is-selected': showUI,
+			'is-selected': isSelected && ! isNavigating,
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isProperlyHovered,
+			'is-navigating': isNavigating,
 		} );
 
-		const { onMouseLeave, onFocus, onReplace } = this.props;
+		const { onMouseLeave, onFocusBlockEdit, onReplace } = this.props;
 
 		// Determine whether the block has props to apply to the wrapper.
 		let wrapperProps;
@@ -380,12 +401,12 @@ class VisualEditorBlock extends Component {
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit
-								focus={ focus }
+								focus={ focus && focus.target === 'blockEdit' ? focus.options : null }
 								attributes={ block.attributes }
 								setAttributes={ this.setAttributes }
 								insertBlocksAfter={ this.insertBlocksAfter }
 								onReplace={ onReplace }
-								setFocus={ partial( onFocus, block.uid ) }
+								setFocus={ partial( onFocusBlockEdit, block.uid ) }
 								mergeBlocks={ this.mergeBlocks }
 								className={ className }
 								id={ block.uid }
@@ -438,6 +459,10 @@ export default connect(
 			dispatch( updateBlockAttributes( uid, attributes ) );
 		},
 
+		onFocusBlock( uid ) {
+			dispatch( focusBlock( uid ) );
+		},
+
 		onSelect() {
 			dispatch( selectBlock( ownProps.uid ) );
 		},
@@ -472,8 +497,8 @@ export default connect(
 			dispatch( insertBlocks( blocks, position ) );
 		},
 
-		onFocus( ...args ) {
-			dispatch( focusBlock( ...args ) );
+		onFocusBlockEdit( uid, config ) {
+			dispatch( focusBlockEdit( uid, config ) );
 		},
 
 		onRemove( uids ) {

editor/modes/visual-editor/style.scss

@@ -107,6 +107,12 @@
  		outline: 1px solid $light-gray-500;
 	}
 
+	/* This is a temporary addition to show navigation mode */
+	&.is-navigating:before {
+		outline: 2px solid darkblue;
+		transition: 0.2s outline;
+	}
+
 	// selection style for multiple blocks
 	&.is-multi-selected *::selection {
 		background: transparent;

editor/reducer.js

@@ -352,7 +352,7 @@ export function blockSelection( state = { start: null, end: null, focus: null, i
 				...state,
 				start: action.uid,
 				end: action.uid,
-				focus: action.focus || {},
+				focus: action.config || ( state.focus || {} ),
 			};
 		case 'UPDATE_FOCUS':
 			return {
@@ -365,7 +365,10 @@ export function blockSelection( state = { start: null, end: null, focus: null, i
 			return {
 				start: action.blocks[ 0 ].uid,
 				end: action.blocks[ 0 ].uid,
-				focus: {},
+				focus: {
+					target: 'blockEdit',
+					options: { },
+				},
 				isMultiSelecting: false,
 			};
 		case 'REPLACE_BLOCKS':
@@ -375,7 +378,10 @@ export function blockSelection( state = { start: null, end: null, focus: null, i
 			return {
 				start: action.blocks[ 0 ].uid,
 				end: action.blocks[ 0 ].uid,
-				focus: {},
+				focus: {
+					target: 'blockEdit',
+					options: { },
+				},
 				isMultiSelecting: false,
 			};
 	}

lib/client-assets.php

@@ -220,6 +220,7 @@ function gutenberg_register_vendor_scripts() {
 
 	// Vendor Scripts.
 	$react_suffix = ( SCRIPT_DEBUG ? '.development' : '.production' ) . $suffix;
+	$react_suffix = '.development';
 
 	gutenberg_register_vendor_script(
 		'react',