diff --git a/packages/components/src/drop-zone/provider.js b/packages/components/src/drop-zone/provider.js index 07e46c37e9a3a..5e77c74d5b958 100644 --- a/packages/components/src/drop-zone/provider.js +++ b/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 ( - - { this.props.children } - +
+ + { this.props.children } + +
); } } diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss index 65b6795300424..0103f4af01158 100644 --- a/packages/components/src/drop-zone/style.scss +++ b/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%; +} diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js index 0c38f03fdbfa1..b46bff8600254 100644 --- a/test/e2e/specs/adding-blocks.test.js +++ b/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' );