Writing Flow: Fix focus/keyboard issues with multi-select

components/button/index.js

@@ -6,40 +6,61 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createElement } from '@wordpress/element';
+import { Component, createElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-function Button( {
-	href,
-	target,
-	isPrimary,
-	isLarge,
-	isSmall,
-	isToggled,
-	className,
-	disabled,
-	...additionalProps
-} ) {
-	const classes = classnames( 'components-button', className, {
-		button: ( isPrimary || isLarge ),
-		'button-primary': isPrimary,
-		'button-large': isLarge,
-		'button-small': isSmall,
-		'is-toggled': isToggled,
-	} );
-
-	const tag = href !== undefined && ! disabled ? 'a' : 'button';
-	const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
-
-	return createElement( tag, {
-		...tagProps,
-		...additionalProps,
-		className: classes,
-	} );
+class Button extends Component {
+	constructor( props ) {
+		super( props );
+		this.setRef = this.setRef.bind( this );
+	}
+
+	componentDidMount() {
+		if ( this.props.focus ) {
+			this.ref.focus();
+		}
+	}
+
+	setRef( ref ) {
+		this.ref = ref;
+	}
+
+	render() {
+		const {
+			href,
+			target,
+			isPrimary,
+			isLarge,
+			isSmall,
+			isToggled,
+			className,
+			disabled,
+			...additionalProps
+		} = this.props;
+		const classes = classnames( 'components-button', className, {
+			button: ( isPrimary || isLarge ),
+			'button-primary': isPrimary,
+			'button-large': isLarge,
+			'button-small': isSmall,
+			'is-toggled': isToggled,
+		} );
+
+		const tag = href !== undefined && ! disabled ? 'a' : 'button';
+		const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
+
+		delete additionalProps.focus;
+
+		return createElement( tag, {
+			...tagProps,
+			...additionalProps,
+			className: classes,
+			ref: this.setRef,
+		} );
+	}
 }
 
 export default Button;

components/icon-button/index.js

@@ -21,11 +21,11 @@ import Dashicon from '../dashicon';
 // is common to apply a ref to the button element (only supported in class)
 class IconButton extends Component {
 	render() {
-		const { icon, children, label, className, tooltip, ...additionalProps } = this.props;
+		const { icon, children, label, className, tooltip, focus, ...additionalProps } = this.props;
 		const classes = classnames( 'components-icon-button', className );
 
 		let element = (
-			<Button { ...additionalProps } aria-label={ label } className={ classes }>
+			<Button { ...additionalProps } aria-label={ label } className={ classes } focus={ focus }>
 				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
 				{ children }
 			</Button>

editor/block-settings-menu/index.js

@@ -20,7 +20,7 @@ import BlockDeleteButton from './block-delete-button';
 import { selectBlock } from '../actions';
 import UnknownConverter from './unknown-converter';
 
-function BlockSettingsMenu( { uids, onSelect } ) {
+function BlockSettingsMenu( { uids, onSelect, focus } ) {
 	const count = uids.length;
 
 	return (
@@ -32,6 +32,7 @@ function BlockSettingsMenu( { uids, onSelect } ) {
 				const toggleClassname = classnames( 'editor-block-settings-menu__toggle', {
 					'is-opened': isOpen,
 				} );
+
 				return (
 					<IconButton
 						className={ toggleClassname }
@@ -44,6 +45,7 @@ function BlockSettingsMenu( { uids, onSelect } ) {
 						icon="ellipsis"
 						label={ isOpen ? __( 'Close Settings Menu' ) : __( 'Open Settings Menu' ) }
 						aria-expanded={ isOpen }
+						focus={ focus }
 					/>
 				);
 			} }

editor/modes/visual-editor/block.js

@@ -321,7 +321,7 @@ 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 showUI = isSelected && ( ! this.props.isTyping || ( focus && focus.collapsed === false ) );
 		const isProperlyHovered = isHovered && ! this.props.isSelecting;
 		const { error } = this.state;
 		const wrapperClassName = classnames( 'editor-visual-editor__block', {
@@ -362,7 +362,10 @@ class VisualEditorBlock extends Component {
 					<BlockMover uids={ multiSelectedBlockUids } />
 				}
 				{ isFirstMultiSelected && ! this.props.isSelecting &&
-					<BlockSettingsMenu uids={ multiSelectedBlockUids } />
+					<BlockSettingsMenu
+						uids={ multiSelectedBlockUids }
+						focus={ true }
+					/>
 				}
 				<div
 					ref={ this.bindBlockNode }

editor/writing-flow/index.js

@@ -45,16 +45,6 @@ class WritingFlow extends Component {
 		this.verticalRect = null;
 	}
 
-	componentDidMount() {
-		document.addEventListener( 'keydown', this.onKeyDown );
-		document.addEventListener( 'mousedown', this.clearVerticalRect );
-	}
-
-	componentWillUnmount() {
-		document.removeEventListener( 'keydown', this.onKeyDown );
-		document.addEventListener( 'mousedown', this.clearVerticalRect );
-	}
-
 	bindContainer( ref ) {
 		this.container = ref;
 	}
@@ -166,11 +156,19 @@ class WritingFlow extends Component {
 	render() {
 		const { children } = this.props;
 
+		// Disable reason: Wrapper itself is non-interactive, but must capture
+		// bubbling events from children to determine focus transition intents.
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
-			<div ref={ this.bindContainer }>
+			<div
+				ref={ this.bindContainer }
+				onKeyDown={ this.onKeyDown }
+				onMouseDown={ this.clearVerticalRect }
+			>
 				{ children }
 			</div>
 		);
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 	}
 }