Apply hover class in outline mode (#27714)

* Apply hover class in outline mode

* remove clientId dependency

* formatting

* Use a single useSelect hook

Co-authored-by: David Szabo <[email protected]>

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

@@ -7,24 +7,28 @@ import { useSelect } from '@wordpress/data';
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
 /**
- * Returns true when the block is hovered and in navigation mode, false if not.
+ * 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 = useSelect(
-		( select ) => select( 'core/block-editor' ).isNavigationMode(),
-		[]
-	);
 
-	useEffect( () => {
-		if ( ! isNavigationMode ) {
-			return;
-		}
+	const { isNavigationMode, isOutlineMode } = useSelect( ( select ) => {
+		const {
+			isNavigationMode: selectIsNavigationMode,
+			getSettings,
+		} = select( 'core/block-editor' );
+
+		return {
+			isNavigationMode: selectIsNavigationMode(),
+			isOutlineMode: getSettings().outlineMode,
+		};
+	}, [] );
 
+	useEffect( () => {
 		function addListener( eventType, value ) {
 			function listener( event ) {
 				if ( event.defaultPrevented ) {
@@ -45,8 +49,10 @@ export function useIsHovered( ref ) {
 			return addListener( 'mouseout', false );
 		}
 
-		return addListener( 'mouseover', true );
-	}, [ isNavigationMode, isHovered, setHovered ] );
+		if ( isOutlineMode || isNavigationMode ) {
+			return addListener( 'mouseover', true );
+		}
+	}, [ isNavigationMode, isOutlineMode, isHovered, setHovered ] );
 
 	return isHovered;
 }