Skip to content

Commit

Permalink
chore: automatically scroll to TC panel and open it when coming from …
Browse files Browse the repository at this point in the history
…pattern modal
  • Loading branch information
abaicus committed Nov 27, 2024
1 parent 67cfd43 commit da2f844
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default () => (
<br/>

<Button
href={`${window.themeisleGutenberg.optionsPath}#integrations`}
href={`${window.themeisleGutenberg.optionsPath}&scrollTo=tc#integrations`}
variant='link'
>
{__('Go to settings to add sources', 'otter-blocks')}
Expand Down
22 changes: 19 additions & 3 deletions src/dashboard/components/template-cloud/TCPanel.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);

Expand Down Expand Up @@ -65,8 +80,9 @@ const TCPanel = () => {

return <>
<PanelBody
ref={panelRef}
title={__('Template Cloud', 'otter-blocks')}
initialOpen={false}
initialOpen={shouldOpen}
>
<div className="tc-panel-content-wrap">
{sources.length < 1 && !isAdding && (
Expand Down

0 comments on commit da2f844

Please sign in to comment.