Try avoiding the deprecated findDOMNode API from DropZone Provider (W…

…ordPress#11168)

* Try avoiding the deprecated findDOMNode API

* Components: Use event handler in place of `ref`

packages/components/src/drop-zone/provider.js

@@ -6,7 +6,7 @@ import { isEqual, find, some, filter, throttle, includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createContext, findDOMNode } from '@wordpress/element';
+import { Component, createContext } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 const { Provider, Consumer } = createContext( {
@@ -77,17 +77,11 @@ class DropZoneProvider extends Component {
 
 	componentDidMount() {
 		window.addEventListener( 'dragover', this.onDragOver );
-		window.addEventListener( 'drop', this.onDrop );
 		window.addEventListener( 'mouseup', this.resetDragState );
-
-		// Disable reason: Can't use a ref since this component just renders its children
-		// eslint-disable-next-line react/no-find-dom-node
-		this.container = findDOMNode( this );
 	}
 
 	componentWillUnmount() {
 		window.removeEventListener( 'dragover', this.onDragOver );
-		window.removeEventListener( 'drop', this.onDrop );
 		window.removeEventListener( 'mouseup', this.resetDragState );
 	}
 
@@ -212,10 +206,9 @@ class DropZoneProvider extends Component {
 		const { position, hoveredDropZone } = this.state;
 		const dragEventType = getDragEventType( event );
 		const dropZone = this.dropZones[ hoveredDropZone ];
-		const isValidDropzone = !! dropZone && this.container.contains( event.target );
 		this.resetDragState();
 
-		if ( isValidDropzone ) {
+		if ( dropZone ) {
 			switch ( dragEventType ) {
 				case 'file':
 					dropZone.onFilesDrop( [ ...event.dataTransfer.files ], position );
@@ -234,9 +227,11 @@ class DropZoneProvider extends Component {
 
 	render() {
 		return (
-			<Provider value={ this.dropZoneCallbacks }>
-				{ this.props.children }
-			</Provider>
+			<div onDrop={ this.onDrop } className="components-drop-zone__provider">
+				<Provider value={ this.dropZoneCallbacks }>
+					{ this.props.children }
+				</Provider>
+			</div>
 		);
 	}
 }

packages/components/src/drop-zone/style.scss

@@ -58,3 +58,7 @@
 .components-drop-zone__content-text {
 	font-family: $default-font;
 }
+
+.components-drop-zone__provider {
+	height: 100%;
+}

test/e2e/specs/adding-blocks.test.js

@@ -13,9 +13,23 @@ describe( 'adding blocks', () => {
 		await newPost();
 	} );
 
+	/**
+	 * Given a Puppeteer ElementHandle, clicks below its bounding box.
+	 *
+	 * @param {Puppeteer.ElementHandle} elementHandle Element handle.
+	 *
+	 * @return {Promise} Promise resolving when click occurs.
+	 */
+	async function clickBelow( elementHandle ) {
+		const box = await elementHandle.boundingBox();
+		const x = box.x + ( box.width / 2 );
+		const y = box.y + box.height + 100;
+		return page.mouse.click( x, y );
+	}
+
 	it( 'Should insert content using the placeholder and the regular inserter', async () => {
 		// Click below editor to focus last field (block appender)
-		await page.click( '.editor-writing-flow__click-redirect' );
+		await clickBelow( await page.$( '.editor-default-block-appender' ) );
 		expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
 		await page.keyboard.type( 'Paragraph block' );