Writing Flow: More reliable block clear via focus bubbling (#5543)

editor/components/block-list/layout.js

@@ -26,7 +26,6 @@ import './style.scss';
 import BlockListBlock from './block';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from './ignore-nested-events';
-import BlockSelectionClearer from '../block-selection-clearer';
 import DefaultBlockAppender from '../default-block-appender';
 import {
 	isSelectionEnabled,
@@ -216,7 +215,7 @@ class BlockListLayout extends Component {
 		} );
 
 		return (
-			<BlockSelectionClearer className={ classes }>
+			<div className={ classes }>
 				{ !! blockUIDs.length && <BlockInsertionPoint rootUID={ rootUID } layout={ defaultLayout } /> }
 				{ map( blockUIDs, ( uid, blockIndex ) => (
 					<BlockListBlock
@@ -241,7 +240,7 @@ class BlockListLayout extends Component {
 						layout={ defaultLayout }
 					/>
 				</IgnoreNestedEvents>
-			</BlockSelectionClearer>
+			</div>
 		);
 	}
 }

editor/components/block-selection-clearer/index.js

@@ -1,31 +1,34 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { clearSelectedBlock } from '../../store/actions';
+import { withDispatch } from '@wordpress/data';
 
 class BlockSelectionClearer extends Component {
 	constructor() {
 		super( ...arguments );
+
 		this.bindContainer = this.bindContainer.bind( this );
-		this.onClick = this.onClick.bind( this );
+		this.clearSelectionIfFocusTarget = this.clearSelectionIfFocusTarget.bind( this );
 	}
 
 	bindContainer( ref ) {
 		this.container = ref;
 	}
 
-	onClick( event ) {
+	/**
+	 * Clears the selected block on focus if the container is the target of the
+	 * focus. This assumes no other descendents have received focus until event
+	 * has bubbled to the container.
+	 *
+	 * @param {FocusEvent} event Focus event.
+	 */
+	clearSelectionIfFocusTarget( event ) {
 		if ( event.target === this.container ) {
 			this.props.clearSelectedBlock();
 		}
@@ -34,23 +37,18 @@ class BlockSelectionClearer extends Component {
 	render() {
 		const { ...props } = this.props;
 
-		// Disable reason: Clicking the canvas should clear the selection
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
 			<div
-				onMouseDown={ this.onClick }
-				onTouchStart={ this.onClick }
+				tabIndex={ -1 }
+				onFocus={ this.clearSelectionIfFocusTarget }
 				ref={ this.bindContainer }
 				{ ...omit( props, 'clearSelectedBlock' ) }
 			/>
 		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	}
 }
 
-export default connect(
-	undefined,
-	{
-		clearSelectedBlock,
-	},
-)( BlockSelectionClearer );
+export default withDispatch( ( dispatch ) => {
+	const { clearSelectedBlock } = dispatch( 'core/editor' );
+	return { clearSelectedBlock };
+} )( BlockSelectionClearer );