CYS: Fix auto scroll when a new block is added (#50431)

* CYS: Fix autoscroll when a new block is added

* add E2E test

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

* remove not necessary changes

* rename blockToScroll to insertedPattern

* add smooth scroll

---------

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

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

@@ -175,9 +175,10 @@ const addInertToAssemblerPatterns = (
 const addInertToAllInnerBlocks = ( documentElement: HTMLElement ) => {
 	const body = documentElement.ownerDocument.body;
 	const observerChildList = new window.MutationObserver( () => {
-		const parentBlocks = body.getElementsByClassName(
+		const parentBlocks =
+			body.getElementsByClassName(
 				'block-editor-block-list__layout'
-		)[ 0 ].children;
+			)[ 0 ]?.children ?? [];
 
 		for ( const parentBlock of parentBlocks ) {
 			parentBlock.setAttribute( 'data-is-parent-block', 'true' );

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts

@@ -39,7 +39,7 @@ export const useInsertPattern = () => {
 		currentTemplate?.id ?? ''
 	);
 
-	const blockToScroll = useRef< string | null >( null );
+	const insertedPatternRef = useRef< string | null >( null );
 
 	// @ts-expect-error No types for this exist yet.
 	const { insertBlocks } = useDispatch( blockEditorStore );
@@ -78,7 +78,7 @@ export const useInsertPattern = () => {
 					undefined,
 					false
 				);
-				blockToScroll.current = updatedBlocks[ 0 ].clientId;
+				insertedPatternRef.current = updatedBlocks[ 0 ].clientId;
 			} else {
 				const updatedBlocks =
 					findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
@@ -97,7 +97,7 @@ export const useInsertPattern = () => {
 					undefined,
 					false
 				);
-				blockToScroll.current = updatedBlocks[ 0 ].clientId;
+				insertedPatternRef.current = updatedBlocks[ 0 ].clientId;
 			}
 
 			trackEvent(
@@ -110,5 +110,6 @@ export const useInsertPattern = () => {
 
 	return {
 		insertPattern,
+		insertedPattern: insertedPatternRef,
 	};
 };

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx

@@ -120,8 +120,6 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 		currentTemplate?.id ?? ''
 	);
 
-	const blockToScroll = useRef< string | null >( null );
-
 	const isEditorLoading = useIsSiteEditorLoading();
 
 	const isSpinnerVisible = isLoading || isEditorLoading;
@@ -156,6 +154,9 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 		};
 	}, [ isLoading, blocks, isSpinnerVisible ] );
 
+	const { insertPattern, insertedPattern: blockToScroll } =
+		useInsertPattern();
+
 	useEffect( () => {
 		if ( isEditorLoading ) {
 			return;
@@ -175,7 +176,10 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 				);
 
 				if ( block ) {
-					block.scrollIntoView();
+					block.scrollIntoView( {
+						behavior: 'smooth',
+						block: 'end',
+					} );
 					blockToScroll.current = null;
 				}
 			}
@@ -188,9 +192,7 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 		return () => {
 			observer.disconnect();
 		};
-	}, [ isEditorLoading ] );
-
-	const { insertPattern } = useInsertPattern();
+	}, [ blockToScroll, isEditorLoading ] );
 
 	return (
 		<div

plugins/woocommerce/changelog/50431-50371-cys-automatic-scrolling-to-added-pattern-not-functioning

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: Fix auto scroll when a new block is added.

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/full-composability.spec.js

@@ -197,6 +197,34 @@ test.describe( 'Assembler -> Full composability', { tag: '@gutenberg' }, () => {
 		);
 	} );
 
+	test( 'Clicking on a pattern should always scroll the page to the inserted pattern', async ( {
+		pageObject,
+		baseURL,
+	} ) => {
+		await prepareAssembler( pageObject, baseURL );
+		const assembler = await pageObject.getAssembler();
+		const editor = await pageObject.getEditor();
+
+		await deleteAllPatterns( editor, assembler );
+
+		const sidebarPattern = assembler.locator(
+			'.block-editor-block-patterns-list__list-item'
+		);
+
+		// add first 3 patterns
+		for ( let i = 0; i < 4; i++ ) {
+			await sidebarPattern.nth( i ).click();
+		}
+
+		const insertedPattern = editor
+			.locator(
+				'[data-is-parent-block="true"]:not([data-type="core/template-part"])'
+			)
+			.nth( 3 );
+
+		await expect( insertedPattern ).toBeInViewport();
+	} );
+
 	test( 'Clicking the "Move up/down" buttons should change the pattern order in the preview', async ( {
 		pageObject,
 		baseURL,