Hover hook: use ref callback (#29089)

* Hover hook: use ref callback

* Lint

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -103,10 +103,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		index
 	);
 
-	const isHovered = useIsHovered( ref );
 	const blockMovingModeClassNames = useBlockMovingModeClassNames( clientId );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
-	const mergedRefs = useMergeRefs( [ ref, useEventHandlers( clientId ) ] );
+	const mergedRefs = useMergeRefs( [
+		ref,
+		useEventHandlers( clientId ),
+		useIsHovered(),
+	] );
 
 	return {
 		...wrapperProps,
@@ -123,8 +126,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			className,
 			props.className,
 			wrapperProps.className,
-			blockMovingModeClassNames,
-			{ 'is-hovered': isHovered }
+			blockMovingModeClassNames
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js

@@ -1,73 +1,50 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-
-/**
- * Returns true when the block is hovered and in navigation or outline mode, false if not.
- *
- * @param {RefObject} ref React ref with the block element.
- *
- * @return {boolean} Hovered state.
- */
-export function useIsHovered( ref ) {
-	const [ isHovered, setHovered ] = useState( false );
-
-	const { isNavigationMode, isOutlineMode } = useSelect( ( select ) => {
-		const {
-			isNavigationMode: selectIsNavigationMode,
-			getSettings,
-		} = select( blockEditorStore );
-
-		return {
-			isNavigationMode: selectIsNavigationMode(),
-			isOutlineMode: getSettings().outlineMode,
-		};
-	}, [] );
-
-	function addHoverListener( eventType, value ) {
-		function listener( event ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			event.preventDefault();
-			setHovered( value );
-		}
-
-		ref.current.addEventListener( eventType, listener );
-		return [ eventType, listener ];
+function listener( event ) {
+	if ( event.defaultPrevented ) {
+		return;
 	}
 
-	function addHoverListeners() {
-		const hoverListeners = [];
-
-		hoverListeners.push( addHoverListener( 'mouseout', false ) );
+	const action = event.type === 'mouseover' ? 'add' : 'remove';
 
-		if ( isOutlineMode || isNavigationMode ) {
-			hoverListeners.push( addHoverListener( 'mouseover', true ) );
-		}
+	event.preventDefault();
+	event.currentTarget.classList[ action ]( 'is-hovered' );
+}
 
-		return hoverListeners;
-	}
+/**
+ * Adds `is-hovered` class when the block is hovered and in navigation or
+ * outline mode.
+ */
+export function useIsHovered() {
+	const isEnabled = useSelect( ( select ) => {
+		const { isNavigationMode, getSettings } = select( blockEditorStore );
+		return isNavigationMode() || getSettings().outlineMode;
+	}, [] );
 
-	useEffect( () => {
-		const hoverListeners = addHoverListeners();
+	return useRefEffect(
+		( node ) => {
+			if ( isEnabled ) {
+				node.addEventListener( 'mouseout', listener );
+				node.addEventListener( 'mouseover', listener );
 
-		return () => {
-			hoverListeners.forEach( ( [ eventType, listener ] ) =>
-				ref.current.removeEventListener( eventType, listener )
-			);
-		};
-	}, [ isOutlineMode, isNavigationMode ] );
+				return () => {
+					node.removeEventListener( 'mouseout', listener );
+					node.removeEventListener( 'mouseover', listener );
 
-	return isHovered;
+					// Remove class in case it lingers.
+					node.classList.remove( 'is-hovered' );
+				};
+			}
+		},
+		[ isEnabled ]
+	);
 }