Experiment: support for non-contiguous blocks in selection

blocks/api/factory.js

@@ -22,6 +22,8 @@ import { __ } from '@wordpress/i18n';
  */
 import { getBlockType } from './registration';
 
+let counter = 0;
+
 /**
  * Returns a block object given its type and attributes.
  *
@@ -46,10 +48,13 @@ export function createBlock( name, blockAttributes = {} ) {
 		return result;
 	}, {} );
 
+	counter++;
+
 	// Blocks are stored with a unique ID, the assigned type name,
 	// and the block attributes.
 	return {
-		uid: uuid(),
+		// uid: uuid(),
+		uid: counter + '-block',
 		name,
 		isValid: true,
 		attributes,

editor/actions.js

@@ -122,12 +122,44 @@ export function stopMultiSelect() {
 
 export function multiSelect( start, end ) {
 	return {
-		type: 'MULTI_SELECT',
+		type: 'ADD_SELECTION_RANGE',
 		start,
 		end,
 	};
 }
 
+export function combineRange( start, end ) {
+	return {
+		type: 'COMBINE_SELECTION_RANGE',
+		start,
+		end,
+	};
+}
+
+export function setSelection( start, end, selected, focusUid ) {
+	return {
+		type: 'SET_SELECTION',
+		start,
+		end,
+		selected,
+		focusUid,
+	};
+}
+
+export function toggleSelection( uid, focusUid = null ) {
+	return {
+		type: 'TOGGLE_SELECTION',
+		uid,
+		focusUid,
+	};
+}
+
+export function startNavigation() {
+	return {
+		type: 'START_NAVIGATION',
+	};
+}
+
 export function clearSelectedBlock() {
 	return {
 		type: 'CLEAR_SELECTED_BLOCK',

editor/components/block-mover/index.js

@@ -16,7 +16,7 @@ import { getBlockType } from '@wordpress/blocks';
  */
 import './style.scss';
 import { getBlockMoverLabel } from './mover-label';
-import { isFirstBlock, isLastBlock, getBlockIndex, getBlock } from '../../selectors';
+import { isFirstBlock, isLastBlock, getBlockIndex, getBlock, isNavigating } from '../../selectors';
 import { selectBlock } from '../../actions';
 
 export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, firstIndex } ) {
@@ -27,6 +27,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 	return (
 		<div className="editor-block-mover">
 			<IconButton
+				onKeyDown={ ( evt ) => evt.stopPropagation() }
 				className="editor-block-mover__control"
 				onClick={ isFirst ? null : onMoveUp }
 				icon="arrow-up-alt2"
@@ -42,6 +43,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 				aria-disabled={ isFirst }
 			/>
 			<IconButton
+				onKeyDown={ ( evt ) => evt.stopPropagation() }
 				className="editor-block-mover__control"
 				onClick={ isLast ? null : onMoveDown }
 				icon="arrow-down-alt2"
@@ -69,11 +71,12 @@ export default connect(
 			isLast: isLastBlock( state, last( ownProps.uids ) ),
 			firstIndex: getBlockIndex( state, first( ownProps.uids ) ),
 			blockType: block ? getBlockType( block.name ) : null,
+			isNavigating: isNavigating( state ),
 		} );
 	},
 	( dispatch, ownProps ) => ( {
 		onMoveDown() {
-			if ( ownProps.uids.length === 1 ) {
+			if ( ownProps.uids.length === 1 && ! isNavigating ) {
 				dispatch( selectBlock( first( ownProps.uids ) ) );
 			}
 
@@ -83,7 +86,7 @@ export default connect(
 			} );
 		},
 		onMoveUp() {
-			if ( ownProps.uids.length === 1 ) {
+			if ( ownProps.uids.length === 1 && ! isNavigating ) {
 				dispatch( selectBlock( first( ownProps.uids ) ) );
 			}
 

editor/components/block-settings-menu/index.js

@@ -35,6 +35,7 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 
 				return (
 					<IconButton
+						onKeyDown={ ( evt ) => evt.stopPropagation() }
 						className={ toggleClassname }
 						onClick={ () => {
 							if ( uids.length === 1 ) {
@@ -51,7 +52,9 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 			} }
 			renderContent={ ( { onClose } ) => (
 				// Should this just use a DropdownMenu instead of a DropDown ?
-				<NavigableMenu className="editor-block-settings-menu__content">
+				<NavigableMenu className="editor-block-settings-menu__content"
+					onKeyDown={ ( evt ) => evt.stopPropagation() }
+				>
 					<BlockInspectorButton onClick={ onClose } />
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }

editor/components/block-switcher/index.js

@@ -24,10 +24,11 @@ import { getBlock } from '../../selectors';
  */
 const { DOWN } = keycodes;
 
-function BlockSwitcher( { blocks, onTransform } ) {
+function BlockSwitcher( { blocks, onTransform, uids } ) {
 	if ( ! blocks || ! blocks[ 0 ] ) {
 		return null;
 	}
+
 	const isMultiBlock = blocks.length > 1;
 	const sourceBlockName = blocks[ 0 ].name;
 

editor/components/writing-flow/index.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import 'element-closest';
-import { find, reverse } from 'lodash';
+import { find, reverse, includes } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -25,14 +25,16 @@ import {
 	getMultiSelectedBlocksStartUid,
 	getMultiSelectedBlocksEndUid,
 	getMultiSelectedBlocks,
+	getMultiSelectedBlockUids,
 	getSelectedBlock,
+	isNavigating,
 } from '../../selectors';
-import { multiSelect } from '../../actions';
+import { multiSelect, focusBlock, selectBlock, combineRange, setSelection, toggleSelection } from '../../actions';
 
 /**
  * Module Constants
  */
-const { UP, DOWN, LEFT, RIGHT } = keycodes;
+const { UP, DOWN, LEFT, RIGHT, SPACE, ENTER } = keycodes;
 
 class WritingFlow extends Component {
 	constructor() {
@@ -98,6 +100,14 @@ class WritingFlow extends Component {
 		} );
 	}
 
+	focusBlock( blocks, focusedUid, delta ) {
+		console.log( 'focusedUid', focusedUid );
+		const lastIndex = blocks.indexOf( focusedUid );
+		const nextIndex = Math.max( 0, Math.min( blocks.length - 1, lastIndex + delta ) );
+		console.log(' blocks', blocks[nextIndex ]);
+		this.props.focusBlock( blocks[ nextIndex ], { } );
+	}
+
 	expandSelection( blocks, currentStartUid, currentEndUid, delta ) {
 		const lastIndex = blocks.indexOf( currentEndUid );
 		const nextIndex = Math.max( 0, Math.min( blocks.length - 1, lastIndex + delta ) );
@@ -112,7 +122,7 @@ class WritingFlow extends Component {
 	}
 
 	onKeyDown( event ) {
-		const { selectedBlock, selectionStart, selectionEnd, blocks, hasMultiSelection } = this.props;
+		const { selectedBlock, selectionStart, selectionEnd, blocks, hasMultiSelection, focusedBlock } = this.props;
 
 		const { keyCode, target } = event;
 		const isUp = keyCode === UP;
@@ -127,20 +137,46 @@ class WritingFlow extends Component {
 
 		const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
 
+		const focusedUid = focusedBlock;
+
+		console.log( 'focusedUid', focusedUid, focusedBlock, this.props.stateDump );
+
+		const wayward = focusedUid !== selectionEnd;
+
 		if ( ! isVertical ) {
 			this.verticalRect = null;
 		} else if ( ! this.verticalRect ) {
 			this.verticalRect = computeCaretRect( target );
 		}
 
-		if ( isNav && isShift && hasMultiSelection ) {
+		// NOTE: This is going to stop up moving away from blocks (e.g. post title) in navigation mode.
+
+		// Also, space and enter on the other buttons are now being intercepted.
+
+		if ( focusedUid && isNav && isShift && this.props.inNavigationMode ) {
 			// Shift key is down and existing block selection
 			event.preventDefault();
-			this.expandSelection( blocks, selectionStart, selectionEnd, isReverse ? -1 : +1 );
-		} else if ( isNav && isShift && this.isEditableEdge( isReverse, target ) && isNavEdge( target, isReverse, true ) ) {
+
+			// If the focus has shifted away from the ranged selection, spawn another one.
+			if ( wayward ) {
+				const lastIndex = blocks.indexOf( focusedUid );
+				const nextIndex = Math.max( 0, Math.min( blocks.length - 1, lastIndex + ( isReverse ? -1 : +1 ) ) );
+				if ( event.ctrlKey || event.metaKey ) {
+					this.props.combineRange( focusedUid, blocks[ nextIndex ] || focusedUid );
+				} else {
+					this.props.setSelection( focusedUid, blocks[ nextIndex ] || focusedUid, [ ], null );
+				}
+			} else {
+				this.expandSelection( blocks, selectionStart, selectionEnd, isReverse ? -1 : +1 );
+			}
+		} else if ( focusedUid, isNav && isShift && this.isEditableEdge( isReverse, target ) && isNavEdge( target, isReverse, true ) ) {
 			// Shift key is down, but no existing block selection
 			event.preventDefault();
-			this.expandSelection( blocks, selectedBlock.uid, selectedBlock.uid, isReverse ? -1 : +1 );
+			this.expandSelection( blocks, focusedUid, focusedUid, isReverse ? -1 : +1 );
+		} else if ( focusedUid && isNav && ! isShift && this.props.inNavigationMode ) {
+			console.log('FOCUS ON CURRENTLY', focusedUid );
+			this.focusBlock( blocks, focusedUid, isReverse ? -1 : 1 );
+			event.preventDefault();
 		} else if ( isVertical && isVerticalEdge( target, isReverse, isShift ) ) {
 			const closestTabbable = this.getClosestTabbable( target, isReverse );
 			placeCaretAtVerticalEdge( closestTabbable, isReverse, this.verticalRect );
@@ -149,6 +185,26 @@ class WritingFlow extends Component {
 			const closestTabbable = this.getClosestTabbable( target, isReverse );
 			placeCaretAtHorizontalEdge( closestTabbable, isReverse );
 			event.preventDefault();
+		} else if ( focusedUid && this.props.inNavigationMode && keyCode === SPACE ) {
+			if ( event.metaKey || event.ctrlKey ) {
+				this.props.toggleSelection( focusedUid, focusedUid );
+			} else if ( includes( this.props.multiSelectedUids, focusedUid ) ) {
+				this.props.setSelection( focusedUid, null, [ ], focusedUid )
+
+				// Can't just always prevent default, because need to fire space on buttons. Or is that
+				// handled now with stopPropagation in the menus?
+				event.preventDefault();
+			} else {
+				// HERE LIES BAD CODE.
+				this.props.setSelection( focusedUid, focusedUid, [ ], focusedUid );
+			}
+
+			// event.preventDefault();
+			event.stopPropagation();
+		} else if ( focusedUid && this.props.inNavigationMode && keyCode === ENTER ) {
+			this.props.selectBlock( focusedUid );
+			// event.preventDefault();
+			event.stopPropagation();
 		}
 	}
 
@@ -176,12 +232,39 @@ export default connect(
 		blocks: getBlockUids( state ),
 		selectionStart: getMultiSelectedBlocksStartUid( state ),
 		selectionEnd: getMultiSelectedBlocksEndUid( state ),
-		hasMultiSelection: getMultiSelectedBlocks( state ).length > 1,
+
+		// Temporary hack
+		focusedBlock: state.blockSelection.focus && state.blockSelection.focus.uid,
+
+		multiSelectedUids: getMultiSelectedBlockUids( state ),
+
+		hasMultiSelection: getMultiSelectedBlocks( state ).length > 0,
+		inNavigationMode: isNavigating( state ),
 		selectedBlock: getSelectedBlock( state ),
+		stateDump: state,
 	} ),
 	( dispatch ) => ( {
 		onMultiSelect( start, end ) {
 			dispatch( multiSelect( start, end ) );
 		},
+		selectBlock( uid ) {
+			dispatch( selectBlock( uid ) );
+		},
+
+		focusBlock( uid, config ) {
+			dispatch( focusBlock( uid, config ) );
+		},
+
+		toggleSelection( uid, focusUid ) {
+			dispatch( toggleSelection( uid, focusUid ) );
+		},
+
+		setSelection( start, end, selected, focusUid ) {
+			dispatch( setSelection( start, end, selected, focusUid ) );
+		},
+
+		combineRange( start, end ) {
+			dispatch( combineRange( start, end ) );
+		},
 	} )
 )( WritingFlow );