CYS: Improve Block Toolbar logic (#48799)

* CYS: Improve Block Toolbar logic

* disable animation

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts

@@ -201,6 +201,7 @@ const updateSelectedBlock = (
 			hoveredBlockClientId: null,
 			clickedBlockClientId: clickedBlockClientId as string,
 		} );
+		( event.target as HTMLElement ).focus();
 	};
 
 	const handleMouseMove = ( event: MouseEvent ) => {
@@ -232,9 +233,17 @@ export const hidePopoverWhenMouseLeaveIframe = (
 	iframeRef: HTMLElement,
 	{
 		hidePopover,
-	}: Pick< useAutoBlockPreviewEventListenersCallbacks, 'hidePopover' >
+		selectBlock,
+	}: Pick<
+		useAutoBlockPreviewEventListenersCallbacks,
+		'hidePopover' | 'selectBlock'
+	>
 ) => {
-	const handleMouseLeave = () => {
+	const handleMouseLeave = ( event: MouseEvent ) => {
+		/// Deselect the block if the mouse exits the iframe unless it's moving towards the Block Toolbar.
+		if ( event.clientX < 0 || event.clientY < 0 ) {
+			selectBlock( '' );
+		}
 		hidePopover();
 	};
 
@@ -347,7 +356,9 @@ export const useAddAutoBlockPreviewEventListenersAndObservers = (
 			const removeEventListenerHidePopover =
 				hidePopoverWhenMouseLeaveIframe( documentElement, {
 					hidePopover,
+					selectBlock,
 				} );
+
 			const removeEventListenersSelectedBlock = updateSelectedBlock(
 				documentElement,
 				{

plugins/woocommerce-admin/client/customize-store/assembler-hub/toolbar/toolbar.tsx

@@ -91,12 +91,6 @@ export const Toolbar = () => {
 		};
 	}, [] );
 
-	const firstBlock = useMemo( () => {
-		return allBlocks.find(
-			( block: BlockInstance ) => block.name !== 'core/template-part'
-		);
-	}, [ allBlocks ] );
-
 	const query = useQuery();
 
 	useEffect( () => {
@@ -107,8 +101,7 @@ export const Toolbar = () => {
 		setIsHomepageSidebarOpen( isHomepageUrl( path ) );
 	}, [ query ] );
 
-	const selectedBlockClientId =
-		currentBlock?.clientId ?? firstBlock?.clientId;
+	const selectedBlockClientId = currentBlock?.clientId ?? null;
 
 	const { isBlockMoverUpButtonDisabled, isBlockMoverDownButtonDisabled } =
 		useMemo( () => {
@@ -172,7 +165,7 @@ export const Toolbar = () => {
 
 				return new window.DOMRect(
 					rect?.left + 10,
-					Math.max( top + 100, 110 ),
+					Math.max( top + 90, 110 ),
 					width,
 					height
 				);
@@ -193,6 +186,7 @@ export const Toolbar = () => {
 	return (
 		<Popover
 			as="div"
+			animate={ false }
 			className="components-tooltip woocommerce-customize-store_block-toolbar-popover"
 			// @ts-expect-error missing type
 			variant="unstyled"

plugins/woocommerce/changelog/48799-48787-cys-as-soon-as-the-user-moves-away-from-the-pattern-the-block-toolbar-should-disappear

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS: Improve Block Toolbar logic.