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 } ) => { } - { isLoading && ( + { isSpinnerVisible && ( ) } - { ! isLoading && ( + { ! isSpinnerVisible && (