Add hovered block store and show hovered template part's label in edit site header component.

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -29,6 +29,7 @@ import useMovingAnimation from '../use-moving-animation';
 import { Context, SetBlockNodes } from './root-container';
 import { BlockListBlockContext } from './block';
 import ELEMENTS from './block-wrapper-elements';
+import { evaluateHoveredBlocks } from './hovered-blocks';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -91,6 +92,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		},
 		[ isSelected ]
 	);
+
 	const { insertDefaultBlock, removeBlock } = useDispatch(
 		'core/block-editor'
 	);
@@ -279,6 +281,22 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		};
 	}, [ isNavigationMode, isHovered, setHovered ] );
 
+	useEffect( () => {
+		ref.current.addEventListener( 'mouseenter', evaluateHoveredBlocks );
+		ref.current.addEventListener( 'mouseleave', evaluateHoveredBlocks );
+
+		return () => {
+			ref.current.removeEventListener(
+				'mouseenter',
+				evaluateHoveredBlocks
+			);
+			ref.current.removeEventListener(
+				'mouseleave',
+				evaluateHoveredBlocks
+			);
+		};
+	}, [] );
+
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 
 	return {

packages/block-editor/src/components/block-list/hovered-blocks.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * Returns an array of block clientIds found under the cursor.
+ * Block clientIds are ordered from child to parent.
+ *
+ * @param {Object} event Mouse event object.
+ *
+ * @return {string[]} Array of block clientIds.
+ */
+export function getHoveredBlocksFromCursor( event ) {
+	const hoveredElements = document.elementsFromPoint(
+		event.clientX,
+		event.clientY
+	);
+	const blockIds = [];
+	hoveredElements.forEach( ( element ) => {
+		if ( element.dataset.block ) {
+			blockIds.push( element.dataset.block );
+		}
+	} );
+	return blockIds;
+}
+
+/**
+ * Conditionally evaluates and dispatches hovered block clientIds to the block-editor store.
+ *
+ * @param {Object} event Mouse event object.
+ */
+export const evaluateHoveredBlocks = debounce(
+	( event ) => {
+		// To accurately determine which blocks are hovered we must look at the elements under the cursor.
+		// Internal block inserters will fire events like mouseleave for blocks they are visually contained within,
+		// which makes an add/remove by clientId per individual block approach inaccurate.
+		const hoveredBlocks = getHoveredBlocksFromCursor( event );
+
+		dispatch( 'core/block-editor' ).__experimentalSetHoveredBlocks(
+			hoveredBlocks
+		);
+	},
+	// Debounce this on 20ms to ensure we do not unnecessarily evaluate and dispatch
+	// multiple times when this is called simultaneously from groups of nested blocks.
+	20,
+	// Apply a maxWait to ensure this still fires during lots of mouse movement.
+	{ maxWait: 50 }
+);

packages/block-editor/src/store/actions.js

@@ -1104,3 +1104,15 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+/**
+ * Returns an action object that sets clientIds for the hovered blocks.
+ *
+ * @param {string[]} hoveredBlockIds Array of block clientIds.
+ */
+export function __experimentalSetHoveredBlocks( hoveredBlockIds ) {
+	return {
+		type: 'SET_HOVERED_BLOCKS',
+		hoveredBlockIds,
+	};
+}

packages/block-editor/src/store/reducer.js

@@ -1645,6 +1645,23 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning hovered blocks state.
+ *
+ * @param {Object} state  Current hovered blocks state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function hoveredBlocks( state = [], action ) {
+	switch ( action.type ) {
+		case 'SET_HOVERED_BLOCKS':
+			return action.hoveredBlockIds;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1666,4 +1683,5 @@ export default combineReducers( {
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
+	hoveredBlocks,
 } );

packages/block-editor/src/store/selectors.js

@@ -1806,7 +1806,36 @@ export function areInnerBlocksControlled( state, clientId ) {
 }
 
 /**
- * Returns the clientId for the first 'active' block of a given array of block names.
+ * Returns an array of clientIds for hovered blocks set in full site editing.
+ * Block Ids set in FSE are ordered from child to parent.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string[]} Array of clientIds for hovered blocks.
+ */
+export function __experimentalGetHoveredBlocks( state ) {
+	return state.hoveredBlocks;
+}
+
+/**
+ * Returns the clientId for the most interior hovered block of the given block name.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} blockName Name of block type to return.
+ *
+ * @return {string} Parsed block object.
+ */
+export const __experimentalGetHoveredBlockIdByBlockName = createSelector(
+	( state, blockName ) => {
+		const matchingBlockClientId = state.hoveredBlocks.find(
+			( blockId ) => getBlockName( state, blockId ) === blockName
+		);
+		return matchingBlockClientId;
+	},
+	( state ) => [ state.hoveredBlocks ]
+);
+
+/** Returns the clientId for the first 'active' block of a given array of block names.
  * A block is 'active' if it (or a child) is the selected block.
  * Returns the first match moving up the DOM from the selected block.
  *

packages/edit-site/src/components/header/document-actions/index.js

@@ -28,17 +28,36 @@ function getBlockDisplayText( block ) {
 }
 
 function useSecondaryText() {
-	const { activeEntityBlockId, getBlock } = useSelect( ( select ) => {
+	const {
+		activeEntityBlockId,
+		getBlock,
+		hoveredTemplatePartBlockId,
+	} = useSelect( ( select ) => {
 		return {
 			activeEntityBlockId: select(
 				'core/block-editor'
 			).__experimentalGetActiveBlockIdByBlockNames( [
 				'core/template-part',
 			] ),
 			getBlock: select( 'core/block-editor' ).getBlock,
+			hoveredTemplatePartBlockId: select(
+				'core/block-editor'
+			).__experimentalGetHoveredBlockIdByBlockName(
+				'core/template-part'
+			),
 		};
 	} );
 
+	if ( hoveredTemplatePartBlockId ) {
+		const hoveredBlockLabel = getBlockDisplayText(
+			getBlock( hoveredTemplatePartBlockId )
+		);
+		return {
+			label: hoveredBlockLabel,
+			isActive: hoveredTemplatePartBlockId === activeEntityBlockId,
+		};
+	}
+
 	if ( activeEntityBlockId ) {
 		return {
 			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),