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 (
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,