From d4128118c1fe6926d55640a2e7377cdded23f88e Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Mon, 1 Jul 2024 11:21:06 +0200
Subject: [PATCH] CYS: no highlight the pattern when it is added (#48802)

* CYS: Improve Block Toolbar logic

* CYS: no highlight pattern when it is added

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

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../pattern-screen/sidebar-pattern-screen.tsx | 64 ++++++++++++++++---
 ...s-no-highligh-the-pattern-when-it-is-added |  4 ++
 2 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/48802-48786-cys-no-highligh-the-pattern-when-it-is-added

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
index e077cfa23be..7c3d98e89b2 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx
@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { useSelect, useDispatch, select } from '@wordpress/data';
 import { BlockInstance, cloneBlock } from '@wordpress/blocks';
 import { close } from '@wordpress/icons';
@@ -13,7 +19,9 @@ import {
 	unlock,
 	// @ts-expect-error No types for this exist yet.
 } from '@wordpress/edit-site/build-module/lock-unlock';
-
+// @ts-expect-error No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
 // eslint-disable-next-line @woocommerce/dependency-group
 import {
 	store as coreStore,
@@ -53,8 +61,48 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 		currentTemplate?.id ?? ''
 	);
 
+	const blockToScroll = useRef< string | null >( null );
+
+	const isEditorLoading = useIsSiteEditorLoading();
+
+	const isSpinnerVisible = isLoading || isEditorLoading;
+
+	useEffect( () => {
+		if ( isEditorLoading ) {
+			return;
+		}
+		const iframe = window.document.querySelector(
+			'.woocommerce-customize-store-assembler > iframe[name="editor-canvas"]'
+		) as HTMLIFrameElement;
+
+		const blockList = iframe?.contentWindow?.document.body.querySelector(
+			'.block-editor-block-list__layout'
+		);
+
+		const observer = new MutationObserver( () => {
+			if ( blockToScroll.current ) {
+				const block = blockList?.querySelector(
+					`[id="block-${ blockToScroll.current }"]`
+				);
+
+				if ( block ) {
+					block.scrollIntoView();
+					blockToScroll.current = null;
+				}
+			}
+		} );
+
+		if ( blockList ) {
+			observer.observe( blockList, { childList: true } );
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ isEditorLoading ] );
+
 	// @ts-expect-error No types for this exist yet.
-	const { selectBlock, insertBlocks } = useDispatch( blockEditorStore );
+	const { insertBlocks } = useDispatch( blockEditorStore );
 
 	const insertableIndex = useMemo( () => {
 		return blocks.findLastIndex(
@@ -72,11 +120,11 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 				( blockInstance: BlockInstance ) => cloneBlock( blockInstance )
 			);
 
-			insertBlocks( cloneBlocks, insertableIndex );
+			insertBlocks( cloneBlocks, insertableIndex, undefined, false );
 
-			selectBlock( cloneBlocks.blocks[ 0 ].clientId, -1 );
+			blockToScroll.current = cloneBlocks[ 0 ].clientId;
 		},
-		[ insertBlocks, insertableIndex, selectBlock ]
+		[ insertBlocks, insertableIndex ]
 	);
 
 	return (
@@ -125,12 +173,12 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 					}
 				</span>
 			</div>
-			{ isLoading && (
+			{ isSpinnerVisible && (
 				<span className="components-placeholder__preview">
 					<Spinner />
 				</span>
 			) }
-			{ ! isLoading && (
+			{ ! isSpinnerVisible && (
 				<BlockPatternList
 					shownPatterns={ patterns.slice( 0, patternPagination ) }
 					blockPatterns={ patterns.slice( 0, patternPagination ) }
diff --git a/plugins/woocommerce/changelog/48802-48786-cys-no-highligh-the-pattern-when-it-is-added b/plugins/woocommerce/changelog/48802-48786-cys-no-highligh-the-pattern-when-it-is-added
new file mode 100644
index 00000000000..0bf2102a769
--- /dev/null
+++ b/plugins/woocommerce/changelog/48802-48786-cys-no-highligh-the-pattern-when-it-is-added
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS: no highlight the pattern when it is added.
\ No newline at end of file