diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index ef3df798c1a50a..076fe6d9bc9904 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -49,7 +49,6 @@ import BlockInsertionPoint from './insertion-point'; import IgnoreNestedEvents from '../ignore-nested-events'; import InserterWithShortcuts from '../inserter-with-shortcuts'; import Inserter from '../inserter'; -import useHoveredArea from './hover-area'; import { isInsideRootBlock } from '../../utils/dom'; import useMovingAnimation from './moving-animation'; @@ -81,7 +80,6 @@ function BlockListBlock( { isParentOfSelectedBlock, isDraggable, isSelectionEnabled, - isRTL, className, name, isValid, @@ -117,9 +115,6 @@ function BlockListBlock( { // Reference to the block edit node const blockNodeRef = useRef(); - // Hovered area of the block - const hoverArea = useHoveredArea( wrapper ); - const breadcrumb = useRef(); // Keep track of touchstart to disable hover on iOS @@ -404,7 +399,7 @@ function BlockListBlock( { // We render block movers and block settings to keep them tabbale even if hidden const shouldRenderMovers = ! isNavigationMode && - ( isSelected || hoverArea === ( isRTL ? 'right' : 'left' ) ) && + isSelected && ! showEmptyBlockSideInserter && ! isPartOfMultiSelection && ! isTypingWithinBlock; @@ -523,7 +518,7 @@ function BlockListBlock( { { - const [ hoveredArea, setHoveredArea ] = useState( null ); - - useEffect( () => { - const onMouseLeave = () => { - if ( hoveredArea ) { - setHoveredArea( null ); - } - }; - - const onMouseMove = ( event ) => { - const { width, left, right } = wrapper.current.getBoundingClientRect(); - - let newHoveredArea = null; - if ( ( event.clientX - left ) < width / 3 ) { - newHoveredArea = 'left'; - } else if ( ( right - event.clientX ) < width / 3 ) { - newHoveredArea = 'right'; - } - - setHoveredArea( newHoveredArea ); - }; - - wrapper.current.addEventListener( 'mousemove', onMouseMove ); - wrapper.current.addEventListener( 'mouseleave', onMouseLeave ); - - return () => { - wrapper.current.removeEventListener( 'mousemove', onMouseMove ); - wrapper.current.removeEventListener( 'mouseleave', onMouseLeave ); - }; - }, [] ); - - return hoveredArea; -}; - -export default useHoveredArea;