diff --git a/src/blocks/plugins/patterns-library/cloudLibraryPlaceholder.js b/src/blocks/plugins/patterns-library/cloudLibraryPlaceholder.js index 8520d203e..7f7309dbf 100644 --- a/src/blocks/plugins/patterns-library/cloudLibraryPlaceholder.js +++ b/src/blocks/plugins/patterns-library/cloudLibraryPlaceholder.js @@ -16,7 +16,7 @@ export default () => ( {__('Go to settings to add sources', 'otter-blocks')} diff --git a/src/dashboard/components/template-cloud/TCPanel.js b/src/dashboard/components/template-cloud/TCPanel.js index b7e4da1a8..056d897ba 100644 --- a/src/dashboard/components/template-cloud/TCPanel.js +++ b/src/dashboard/components/template-cloud/TCPanel.js @@ -1,5 +1,5 @@ import { Button, ExternalLink, Notice, PanelBody } from '@wordpress/components'; -import { useEffect, useState, createInterpolateElement } from '@wordpress/element'; +import { useEffect, useState, createInterpolateElement, useRef } from '@wordpress/element'; import { plus, rotateRight } from '@wordpress/icons'; import { useDispatch } from '@wordpress/data'; import apiFetch from '@wordpress/api-fetch'; @@ -16,13 +16,28 @@ const TCPanel = () => { const [ isAdding, setIsAdding ] = useState(false); const [ status, setStatus ] = useState(STATUSES.NONE); const [ syncErrors, setSyncErrors ] = useState([]); - + const [ shouldOpen, setShouldOpen ] = useState(false); + const panelRef = useRef(); const { createNotice } = useDispatch('core/notices'); useEffect(() => { setSources(getOption('themeisle_template_cloud_sources')); }, [ getOption('themeisle_template_cloud_sources') ]); + + useEffect(() => { + const hasURLParam = new URLSearchParams(window.location.search).get('scrollTo') === 'tc'; + + if (hasURLParam) { + setShouldOpen(true); + + if (panelRef.current) { + panelRef.current.scrollIntoView({ behavior: 'smooth' }); + } + } + + }, [ panelRef.current ]); + const syncSources = () => { setStatus(STATUSES.SYNCING); @@ -65,8 +80,9 @@ const TCPanel = () => { return <> {sources.length < 1 && !isAdding && (