Writing Flow: Stretch "Click Redirect" to occupy full height of content

packages/block-editor/src/components/typewriter/index.js

@@ -235,6 +235,7 @@ class Typewriter extends Component {
 				onKeyUp={ this.maintainCaretPosition }
 				onMouseDown={ this.addSelectionChangeListener }
 				onTouchStart={ this.addSelectionChangeListener }
+				className="block-editor__typewriter"
 			>
 				{ this.props.children }
 			</div>

packages/e2e-test-utils/CHANGELOG.md

@@ -1,9 +1,13 @@
-## master
+## Master
 
 ### Breaking Changes
 
 - The disableNavigationMode utility was removed. By default, the editor is in edit mode now.
 
+### Improvements
+
+- `setBrowserViewport` accepts an object of `width`, `height` values, to assign a viewport of arbitrary size.
+
 ## 3.0.0 (2019-11-14)
 
 ### Breaking Changes

packages/e2e-test-utils/README.md

@@ -408,7 +408,7 @@ Sets browser viewport to specified type.
 
 _Parameters_
 
--   _type_ `string`: String to represent dimensions type; can be either small or large.
+-   _viewport_ `WPViewport`: Viewport name or dimensions object to assign.
 
 <a name="setPostContent" href="#setPostContent">#</a> **setPostContent**
 

packages/e2e-test-utils/src/set-browser-viewport.js

@@ -3,18 +3,50 @@
  */
 import { waitForWindowDimensions } from './wait-for-window-dimensions';
 
+/**
+ * Named viewport options.
+ *
+ * @typedef {"large"|"medium"|"small"} WPDimensionsName
+ */
+
+/**
+ * Viewport dimensions object.
+ *
+ * @typedef {Object} WPViewportDimensions
+ *
+ * @property {number} width  Width, in pixels.
+ * @property {number} height Height, in pixels.
+ */
+
+/**
+ * Predefined viewport dimensions to reference by name.
+ *
+ * @enum {WPViewportDimensions}
+ *
+ * @type {Object<WPDimensionsName,WPViewportDimensions>}
+ */
+const PREDEFINED_DIMENSIONS = {
+	large: { width: 960, height: 700 },
+	medium: { width: 768, height: 700 },
+	small: { width: 600, height: 700 },
+};
+
+/**
+ * Valid argument argument type from which to derive viewport dimensions.
+ *
+ * @typedef {WPDimensionsName|WPViewportDimensions} WPViewport
+ */
+
 /**
  * Sets browser viewport to specified type.
  *
- * @param {string} type String to represent dimensions type; can be either small or large.
+ * @param {WPViewport} viewport Viewport name or dimensions object to assign.
  */
-export async function setBrowserViewport( type ) {
-	const allowedDimensions = {
-		large: { width: 960, height: 700 },
-		medium: { width: 768, height: 700 },
-		small: { width: 600, height: 700 },
-	};
-	const currentDimension = allowedDimensions[ type ];
-	await page.setViewport( currentDimension );
-	await waitForWindowDimensions( currentDimension.width, currentDimension.height );
+export async function setBrowserViewport( viewport ) {
+	const dimensions = typeof viewport === 'string' ?
+		PREDEFINED_DIMENSIONS[ viewport ] :
+		viewport;
+
+	await page.setViewport( dimensions );
+	await waitForWindowDimensions( dimensions.width, dimensions.height );
 }

packages/e2e-tests/specs/editor/various/adding-blocks.test.js

@@ -7,6 +7,7 @@ import {
 	getEditedPostContent,
 	pressKeyTimes,
 	switchEditorModeTo,
+	setBrowserViewport,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'adding blocks', () => {
@@ -21,19 +22,24 @@ describe( 'adding blocks', () => {
 	 *
 	 * @return {Promise} Promise resolving when click occurs.
 	 */
-	async function clickBelow( elementHandle ) {
+	async function clickAtBottom( elementHandle ) {
 		const box = await elementHandle.boundingBox();
 		const x = box.x + ( box.width / 2 );
-		const y = box.y + box.height + 100;
+		const y = box.y + box.height - 50;
 		return page.mouse.click( x, y );
 	}
 
 	it( 'Should insert content using the placeholder and the regular inserter', async () => {
 		// This ensures the editor is loaded in navigation mode.
 		await page.reload();
 
+		// Set a tall viewport. The typewriter's intrinsic height can be enough
+		// to scroll the page on a shorter viewport, thus obscuring the presence
+		// of any potential buggy behavior with the "stretched" click redirect.
+		await setBrowserViewport( { width: 960, height: 1400 } );
+
 		// Click below editor to focus last field (block appender)
-		await clickBelow( await page.$( '.block-editor-default-block-appender' ) );
+		await clickAtBottom( await page.$( '.edit-post-editor-regions__content' ) );
 		expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
 		await page.keyboard.type( 'Paragraph block' );
 

packages/edit-post/src/components/editor-regions/style.scss

@@ -38,6 +38,11 @@
 .edit-post-editor-regions__content {
 	flex-grow: 1;
 
+	// Treat as flex container to allow children to grow to occupy full
+	// available height of the content area.
+	display: flex;
+	flex-direction: column;
+
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		overflow: auto;

packages/edit-post/src/components/visual-editor/style.scss

@@ -16,9 +16,15 @@
 	}
 }
 
+.edit-post-visual-editor > .block-editor__typewriter,
+.edit-post-visual-editor > .block-editor__typewriter > .block-editor-writing-flow,
+.edit-post-visual-editor > .block-editor__typewriter > .block-editor-writing-flow > .block-editor-writing-flow__click-redirect {
+	height: 100%;
+}
+
 .edit-post-visual-editor .block-editor-writing-flow__click-redirect {
 	// Allow the page to be scrolled with the last block in the middle.
-	height: 50vh;
+	min-height: 50vh;
 	width: 100%;
 }