Multi-select: do not leave editable focus at end. Do not show hover U…

…I while selecting.

editor/actions.js

@@ -108,6 +108,18 @@ export function selectBlock( uid ) {
 	};
 }
 
+export function startMultiSelect() {
+	return {
+		type: 'START_MULTI_SELECT',
+	};
+}
+
+export function stopMultiSelect() {
+	return {
+		type: 'STOP_MULTI_SELECT',
+	};
+}
+
 export function multiSelect( start, end ) {
 	return {
 		type: 'MULTI_SELECT',

editor/block-settings-menu/index.js

@@ -40,7 +40,7 @@ class BlockSettingsMenu extends Component {
 
 	render() {
 		const { opened } = this.state;
-		const { uids } = this.props;
+		const { uids, focus } = this.props;
 		const toggleClassname = classnames( 'editor-block-settings-menu__toggle', 'editor-block-settings-menu__control', {
 			'is-opened': opened,
 		} );
@@ -52,6 +52,7 @@ class BlockSettingsMenu extends Component {
 					onClick={ this.toggleMenu }
 					icon="ellipsis"
 					label={ opened ? __( 'Close Settings Menu' ) : __( 'Open Settings Menu' ) }
+					focus={ focus }
 				/>
 
 				{ opened && <BlockSettingsMenuContent uids={ uids } /> }

editor/modes/visual-editor/block-list.js

@@ -25,7 +25,7 @@ import {
 	getMultiSelectedBlocks,
 	getMultiSelectedBlockUids,
 } from '../../selectors';
-import { insertBlock, multiSelect } from '../../actions';
+import { insertBlock, startMultiSelect, stopMultiSelect, multiSelect } from '../../actions';
 
 const INSERTION_POINT_PLACEHOLDER = '[[insertion-point]]';
 
@@ -138,6 +138,8 @@ class VisualEditorBlockList extends Component {
 		// Capture scroll on all elements.
 		window.addEventListener( 'scroll', this.onScroll, true );
 		window.addEventListener( 'mouseup', this.onSelectionEnd );
+
+		this.props.onStartMultiSelect();
 	}
 
 	onSelectionChange( uid ) {
@@ -169,6 +171,8 @@ class VisualEditorBlockList extends Component {
 		window.removeEventListener( 'mousemove', this.onPointerMove );
 		window.removeEventListener( 'scroll', this.onScroll, true );
 		window.removeEventListener( 'mouseup', this.onSelectionEnd );
+
+		this.props.onStopMultiSelect();
 	}
 
 	appendDefaultBlock() {
@@ -244,6 +248,12 @@ export default connect(
 		onInsertBlock( block ) {
 			dispatch( insertBlock( block ) );
 		},
+		onStartMultiSelect() {
+			dispatch( startMultiSelect() );
+		},
+		onStopMultiSelect() {
+			dispatch( stopMultiSelect() );
+		},
 		onMultiSelect( start, end ) {
 			dispatch( multiSelect( start, end ) );
 		},

editor/modes/visual-editor/block.js

@@ -40,6 +40,7 @@ import {
 import {
 	getBlock,
 	getBlockFocus,
+	isMultiSelecting,
 	getBlockIndex,
 	getEditedPostAttribute,
 	getMultiSelectedBlockUids,
@@ -306,12 +307,13 @@ 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 isProperlyHovered = isHovered && ! this.props.isSelecting;
 		const { error } = this.state;
 		const wrapperClassname = classnames( 'editor-visual-editor__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
-			'is-hovered': isHovered,
+			'is-hovered': isProperlyHovered,
 		} );
 
 		const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -339,11 +341,18 @@ class VisualEditorBlock extends Component {
 				{ ...wrapperProps }
 			>
 				<BlockDropZone index={ order } />
-				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
-				{ ( showUI || isHovered ) && <BlockRightMenu uids={ [ block.uid ] } /> }
+				{ ( showUI || isProperlyHovered ) && <BlockMover uids={ [ block.uid ] } /> }
+				{ ( showUI || isProperlyHovered ) && <BlockRightMenu uids={ [ block.uid ] } /> }
 				{ showUI && isValid && mode === 'visual' && <BlockToolbar uid={ block.uid } /> }
-				{ isFirstMultiSelected && <BlockMover uids={ multiSelectedBlockUids } /> }
-				{ isFirstMultiSelected && <BlockRightMenu uids={ multiSelectedBlockUids } /> }
+				{ isFirstMultiSelected && ! this.props.isSelecting &&
+					<BlockMover uids={ multiSelectedBlockUids } />
+				}
+				{ isFirstMultiSelected && ! this.props.isSelecting &&
+					<BlockRightMenu
+						uids={ multiSelectedBlockUids }
+						focus={ true }
+					/>
+				}
 				<div
 					ref={ this.bindBlockNode }
 					onKeyPress={ this.maybeStartTyping }
@@ -403,6 +412,7 @@ export default connect(
 			isFirstMultiSelected: isFirstMultiSelectedBlock( state, ownProps.uid ),
 			isHovered: isBlockHovered( state, ownProps.uid ),
 			focus: getBlockFocus( state, ownProps.uid ),
+			isSelecting: isMultiSelecting( state ),
 			isTyping: isTyping( state ),
 			order: getBlockIndex( state, ownProps.uid ),
 			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),

editor/reducer.js

@@ -314,6 +314,13 @@ export function blockSelection( state = { start: null, end: null, focus: null },
 				end: null,
 				focus: null,
 			};
+		case 'START_MULTI_SELECT':
+			return {
+				...state,
+				isMultiSelecting: true,
+			};
+		case 'STOP_MULTI_SELECT':
+			return omit( state, 'isMultiSelecting' );
 		case 'MULTI_SELECT':
 			return {
 				start: action.start,

editor/selectors.js

@@ -728,6 +728,17 @@ export function getBlockFocus( state, uid ) {
 
 	return state.blockSelection.focus;
 }
+
+/**
+ * Whether in the process of multi-selecting or not.
+ *
+ * @param  {Object} state Global application state
+ * @return {Boolean}      True if multi-selecting, false if not.
+ */
+export function isMultiSelecting( state ) {
+	return !! state.blockSelection.isMultiSelecting;
+}
+
 /**
  * Returns thee block's editing mode
  *