diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts index c9cfa1ea2aa..29701bd02da 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts +++ b/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( - 'block-editor-block-list__layout' - )[ 0 ].children; + const parentBlocks = + body.getElementsByClassName( + 'block-editor-block-list__layout' + )[ 0 ]?.children ?? []; for ( const parentBlock of parentBlocks ) { parentBlock.setAttribute( 'data-is-parent-block', 'true' ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts index 36674e292c3..b8b231836fd 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-insert-pattern.ts +++ b/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, }; }; 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 ee26fe1fb8a..034ab3f352f 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 @@ -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 (