From de0cf1caa69e342cad7530eab9ea5d0d73ad6a7e Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 9 Mar 2018 18:49:57 -0500
Subject: [PATCH] Writing Flow: Redirect click below editor to last text field

---
 edit-post/components/visual-editor/index.js   | 13 ++--
 edit-post/components/visual-editor/style.scss | 14 ++++
 .../default-block-appender/index.js           | 14 +++-
 .../test/__snapshots__/index.js.snap          |  3 +
 editor/components/writing-flow/index.js       | 72 ++++++++++++++++---
 editor/components/writing-flow/style.scss     | 10 +++
 test/e2e/integration/002-adding-blocks.js     | 12 ++--
 7 files changed, 111 insertions(+), 27 deletions(-)
 create mode 100644 editor/components/writing-flow/style.scss

diff --git a/edit-post/components/visual-editor/index.js b/edit-post/components/visual-editor/index.js
index cdf593a640b01..15b1658deffd7 100644
--- a/edit-post/components/visual-editor/index.js
+++ b/edit-post/components/visual-editor/index.js
@@ -8,7 +8,6 @@ import {
 	WritingFlow,
 	ObserveTyping,
 	EditorGlobalKeyboardShortcuts,
-	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
 } from '@wordpress/editor';
 import { Fragment, compose } from '@wordpress/element';
@@ -23,12 +22,12 @@ import BlockInspectorButton from './block-inspector-button';
 
 function VisualEditor( { hasFixedToolbar, isLargeViewport } ) {
 	return (
-		<BlockSelectionClearer className="edit-post-visual-editor">
+		<div className="edit-post-visual-editor">
 			<EditorGlobalKeyboardShortcuts />
 			<CopyHandler />
 			<MultiSelectScrollIntoView />
-			<ObserveTyping>
-				<WritingFlow>
+			<WritingFlow>
+				<ObserveTyping>
 					<PostTitle />
 					<BlockList
 						showContextualToolbar={ ! isLargeViewport || ! hasFixedToolbar }
@@ -39,9 +38,9 @@ function VisualEditor( { hasFixedToolbar, isLargeViewport } ) {
 							</Fragment>
 						) }
 					/>
-				</WritingFlow>
-			</ObserveTyping>
-		</BlockSelectionClearer>
+				</ObserveTyping>
+			</WritingFlow>
+		</div>
 	);
 }
 
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index 667a5cd0e1fc3..4b0a49c132e1f 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -24,6 +24,14 @@
 	}
 }
 
+.edit-post-visual-editor .editor-writing-flow__click-redirect {
+	// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
+	height: 50px;
+	width: $visual-editor-max-width;
+	// Offset for: Visual editor padding, block (default appender) margin.
+	margin: #{ -1 * $block-spacing } auto -50px;
+}
+
 .edit-post-visual-editor .editor-block-list__block {
 	margin-left: auto;
 	margin-right: auto;
@@ -89,6 +97,12 @@
 	margin-right: auto;
 	position: relative;
 
+	&[data-root-uid=""] .editor-default-block-appender__content:hover {
+		// Outline on root-level default block appender is redundant with the
+		// WritingFlow click redirector.
+		outline: 1px solid transparent;
+	}
+
 	@include break-small() {
 		padding: 0 $block-mover-padding-visible;	// don't subtract 1px border because it's a border not an outline
 
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
index c53b1049f6911..f42b5e246f37b 100644
--- a/editor/components/default-block-appender/index.js
+++ b/editor/components/default-block-appender/index.js
@@ -22,7 +22,15 @@ import { getBlock, getBlockCount } from '../../store/selectors';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
 
-export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPrompt, placeholder, layout, rootUID } ) {
+export function DefaultBlockAppender( {
+	isLocked,
+	isVisible,
+	onAppend,
+	showPrompt,
+	placeholder,
+	layout,
+	rootUID,
+} ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
 	}
@@ -30,7 +38,9 @@ export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPromp
 	const value = placeholder || __( 'Write your story' );
 
 	return (
-		<div className="editor-default-block-appender">
+		<div
+			data-root-uid={ rootUID || '' }
+			className="editor-default-block-appender">
 			<BlockDropZone />
 			<input
 				className="editor-default-block-appender__content"
diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
index 9459c684c0052..991d3f153230e 100644
--- a/editor/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -3,6 +3,7 @@
 exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
 <div
   className="editor-default-block-appender"
+  data-root-uid=""
 >
   <Connect(WrappedComponent) />
   <input
@@ -42,6 +43,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 exports[`DefaultBlockAppender should match snapshot 1`] = `
 <div
   className="editor-default-block-appender"
+  data-root-uid=""
 >
   <Connect(WrappedComponent) />
   <input
@@ -63,6 +65,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 <div
   className="editor-default-block-appender"
+  data-root-uid=""
 >
   <Connect(WrappedComponent) />
   <input
diff --git a/editor/components/writing-flow/index.js b/editor/components/writing-flow/index.js
index ef258e42f2678..ef4e2d81bbbf6 100644
--- a/editor/components/writing-flow/index.js
+++ b/editor/components/writing-flow/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { find, reverse, get } from 'lodash';
+import { overEvery, find, findLast, reverse, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,6 +22,8 @@ import {
 /**
  * Internal dependencies
  */
+import './style.scss';
+import BlockSelectionClearer from '../block-selection-clearer';
 import {
 	getPreviousBlockUid,
 	getNextBlockUid,
@@ -38,11 +40,30 @@ import {
 	isInSameBlock,
 } from '../../utils/dom';
 
+/**
+ * Browser dependencies
+ */
+
+const { DOMRect } = window;
+
 /**
  * Module Constants
  */
 const { UP, DOWN, LEFT, RIGHT } = keycodes;
 
+/**
+ * Given an element, returns true if the element is a tabbable text field, or
+ * false otherwise.
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a tabbable text field.
+ */
+const isTabbableTextField = overEvery( [
+	isTextField,
+	focus.tabbable.isTabbableIndex,
+] );
+
 class WritingFlow extends Component {
 	constructor() {
 		super( ...arguments );
@@ -50,6 +71,8 @@ class WritingFlow extends Component {
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.clearVerticalRect = this.clearVerticalRect.bind( this );
+		this.focusLastTextField = this.focusLastTextField.bind( this );
+
 		this.verticalRect = null;
 	}
 
@@ -194,8 +217,10 @@ class WritingFlow extends Component {
 			this.moveSelection( isReverse );
 		} else if ( isVertical && isVerticalEdge( target, isReverse, isShift ) ) {
 			const closestTabbable = this.getClosestTabbable( target, isReverse );
-			placeCaretAtVerticalEdge( closestTabbable, isReverse, this.verticalRect );
-			event.preventDefault();
+			if ( closestTabbable ) {
+				placeCaretAtVerticalEdge( closestTabbable, isReverse, this.verticalRect );
+				event.preventDefault();
+			}
 		} else if ( isHorizontal && isHorizontalEdge( target, isReverse, isShift ) ) {
 			const closestTabbable = this.getClosestTabbable( target, isReverse );
 			placeCaretAtHorizontalEdge( closestTabbable, isReverse );
@@ -203,6 +228,26 @@ class WritingFlow extends Component {
 		}
 	}
 
+	/**
+	 * Shifts focus to the last tabbable text field — if one exists — at the
+	 * given mouse event's X coordinate.
+	 *
+	 * @param {MouseEvent} event Mouse event to align caret X offset.
+	 */
+	focusLastTextField( event ) {
+		const focusableNodes = focus.focusable.find( this.container );
+		const target = findLast( focusableNodes, isTabbableTextField );
+		if ( ! target ) {
+			return;
+		}
+
+		// Emulate a rect at which caret should be placed using mouse event.
+		const rect = target.getBoundingClientRect();
+		const targetRect = new DOMRect( event.clientX, rect.top, 0, rect.height );
+
+		placeCaretAtVerticalEdge( target, false, targetRect );
+	}
+
 	render() {
 		const { children } = this.props;
 
@@ -210,13 +255,20 @@ class WritingFlow extends Component {
 		// bubbling events from children to determine focus transition intents.
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		return (
-			<div
-				ref={ this.bindContainer }
-				onKeyDown={ this.onKeyDown }
-				onMouseDown={ this.clearVerticalRect }
-			>
-				{ children }
-			</div>
+			<BlockSelectionClearer className="editor-writing-flow">
+				<div
+					ref={ this.bindContainer }
+					onKeyDown={ this.onKeyDown }
+					onMouseDown={ this.clearVerticalRect }
+				>
+					{ children }
+				</div>
+				<div
+					aria-hidden
+					onClick={ this.focusLastTextField }
+					className="editor-writing-flow__click-redirect"
+				/>
+			</BlockSelectionClearer>
 		);
 		/* eslint-disable jsx-a11y/no-static-element-interactions */
 	}
diff --git a/editor/components/writing-flow/style.scss b/editor/components/writing-flow/style.scss
new file mode 100644
index 0000000000000..06a7d77c1a69c
--- /dev/null
+++ b/editor/components/writing-flow/style.scss
@@ -0,0 +1,10 @@
+.editor-writing-flow {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-writing-flow__click-redirect {
+	flex-basis: 100%;
+	cursor: text;
+}
diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
index f69c667e4027d..3520d72eefdba 100644
--- a/test/e2e/integration/002-adding-blocks.js
+++ b/test/e2e/integration/002-adding-blocks.js
@@ -4,19 +4,15 @@ describe( 'Adding blocks', () => {
 	} );
 
 	it( 'Should insert content using the placeholder and the regular inserter', () => {
-		const lastBlockSelector = '.editor-block-list__block-edit:last';
+		// Default block appender is provisional
+		cy.get( '.editor-default-block-appender' ).click();
+		cy.get( '.editor-post-title__input' ).click();
+		cy.get( '[data-type="core/paragraph"]' ).should( 'have.length', 0 );
 
 		// Using the placeholder
 		cy.get( '.editor-default-block-appender' ).click();
 		cy.focused().type( 'Paragraph block' );
 
-		// Default block appender is provisional
-		cy.get( lastBlockSelector ).then( ( firstBlock ) => {
-			cy.get( '.editor-default-block-appender' ).click();
-			cy.get( '.editor-post-title__input' ).click();
-			cy.get( lastBlockSelector ).should( 'have.text', firstBlock.text() );
-		} );
-
 		// Using the slash command
 		// TODO: Test omitted because Cypress doesn't update the selection
 		// object properly, so the slash inserter is not showing up.