Keep inserters visible on scroll

WordPress · May 27, 2022 · 13778fa · 13778fa
1 parent 8220fed
commit 13778fa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 54 deletions.
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -98,7 +98,13 @@ function BlockPopoverInbetween( {
 			width,
 			height: previousRect ? previousRect.height : nextRect.height,
 		};
-	}, [ previousElement, nextElement, isVertical, positionRecompute ] );
+	}, [
+		previousElement,
+		nextElement,
+		isVertical,
+		positionRecompute,
+		isVisible,
+	] );
 
 	const getAnchorRect = useCallback( () => {
 		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
@@ -159,7 +165,7 @@ function BlockPopoverInbetween( {
 			width: 0,
 			ownerDocument,
 		};
-	}, [ previousElement, nextElement, positionRecompute ] );
+	}, [ previousElement, nextElement, positionRecompute, isVisible ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 

diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
@@ -6,6 +6,9 @@
 	// like the popover is impacted by the block gap margin.
 	margin: 0 !important;
 
+	// Allow clicking through the toolbar holder.
+	pointer-events: none;
+
 	.components-popover__content {
 		margin: 0 !important;
 		min-width: auto;
@@ -16,8 +19,6 @@
 		box-shadow: none;
 		overflow-y: visible;
 
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
 		> div > * {
 			pointer-events: all;
 		}

diff --git a/packages/block-editor/src/components/block-tools/exploded-mode-inserters.js b/packages/block-editor/src/components/block-tools/exploded-mode-inserters.js
@@ -1,70 +1,20 @@
-/**
- * External dependencies
- */
-import { throttle } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
-import { __unstableUseBlockElement } from '../block-list/use-block-props/use-block-refs';
-
-function useIsScrolling() {
-	const [ isScrolling, setIsScrolling ] = useState( false );
-
-	const clientId = useSelect( ( select ) => {
-		return select( blockEditorStore ).getBlockOrder()?.[ 0 ];
-	}, [] );
-	const element = __unstableUseBlockElement( clientId );
-
-	useEffect( () => {
-		let timeout;
-		setIsScrolling( false );
-		if ( ! element ) {
-			return;
-		}
-		const onScroll = throttle( () => {
-			setIsScrolling( true );
-			clearTimeout( timeout );
-			timeout = setTimeout( () => {
-				setIsScrolling( false );
-			}, 100 );
-		}, 100 );
-
-		element.ownerDocument.defaultView.addEventListener(
-			'scroll',
-			onScroll
-		);
-		return () => {
-			clearTimeout( timeout );
-			element.ownerDocument.defaultView.removeEventListener(
-				'scroll',
-				onScroll
-			);
-		};
-	}, [ element ] );
-
-	return isScrolling;
-}
 
 function ExplodedModeInserters( { __unstableContentRef } ) {
-	const isScrolling = useIsScrolling();
 	const blockOrder = useSelect( ( select ) => {
 		return select( blockEditorStore ).getBlockOrder();
 	}, [] );
 
-	if ( isScrolling ) {
-		return null;
-	}
-
 	return blockOrder.map( ( clientId, index ) => {
 		if ( index === blockOrder.length - 1 ) {
 			return null;