diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js index 07107b7f0b73ba..55884f4a7792d0 100644 --- a/packages/block-editor/src/components/use-block-drop-zone/index.js +++ b/packages/block-editor/src/components/use-block-drop-zone/index.js @@ -515,6 +515,23 @@ export default function useBlockDropZone( { 200 ); + /** + * Checks if the given element is an insertion point. + * + * @param {EventTarget|null} targetToCheck - The element to check. + * @param {Document} ownerDocument - The owner document of the element. + * @return {boolean} True if the element is a insertion point, false otherwise. + */ + function isInsertionPoint( targetToCheck, ownerDocument ) { + const { defaultView } = ownerDocument; + + return !! ( + defaultView && + targetToCheck instanceof defaultView.HTMLElement && + targetToCheck.dataset.isInsertionPoint + ); + } + return useDropZone( { dropZoneElement, isDisabled, @@ -525,7 +542,18 @@ export default function useBlockDropZone( { // https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget throttled( event, event.currentTarget.ownerDocument ); }, - onDragLeave() { + onDragLeave( event ) { + const { ownerDocument } = event.currentTarget; + + // If the drag event is leaving the drop zone and entering an insertion point, + // do not hide the insertion point as it is conceptually within the dropzone. + if ( + isInsertionPoint( event.relatedTarget, ownerDocument ) || + isInsertionPoint( event.target, ownerDocument ) + ) { + return; + } + throttled.cancel(); hideInsertionPoint(); }, diff --git a/packages/compose/src/hooks/use-drop-zone/index.js b/packages/compose/src/hooks/use-drop-zone/index.js index d155978110342f..c570c034415923 100644 --- a/packages/compose/src/hooks/use-drop-zone/index.js +++ b/packages/compose/src/hooks/use-drop-zone/index.js @@ -108,22 +108,6 @@ export default function useDropZone( { return false; } - /** - * Checks if the given element is an insertion point. - * - * @param {EventTarget|null} targetToCheck - The element to check. - * @return {boolean} True if the element is a insertion point, false otherwise. - */ - function isInsertionPoint( targetToCheck ) { - const { defaultView } = ownerDocument; - - return !! ( - defaultView && - targetToCheck instanceof defaultView.HTMLElement && - targetToCheck.dataset.isInsertionPoint - ); - } - function maybeDragStart( /** @type {DragEvent} */ event ) { if ( isDragging ) { return; @@ -187,17 +171,6 @@ export default function useDropZone( { return; } - // If we're moving in/out of an insertion point then don't trigger - // the onDragLeave event. This is to prevent the dropzone from - // trigger any unwanted side effects when the user is likely to - // be moving the cursor quickly over the insertion point. - if ( - isInsertionPoint( event.relatedTarget ) || - isInsertionPoint( event.target ) - ) { - return; - } - if ( onDragLeaveRef.current ) { onDragLeaveRef.current( event ); }