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 index ba8d00df98650..4dff80d1235d6 100644 --- 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,7 +1,13 @@ +/** + * External dependencies + */ +import { throttle } from 'lodash'; + /** * WordPress dependencies */ import { useSelect } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -9,12 +15,56 @@ import { useSelect } from '@wordpress/data'; 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;