Check isActive state locally in components

WordPress · Dec 7, 2021 · f7780a2 · f7780a2
1 parent a32cf45
commit f7780a2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/packages/edit-site/src/components/welcome-guide/editor.js b/packages/edit-site/src/components/welcome-guide/editor.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
@@ -15,6 +15,15 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideEditor() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const isActive = useSelect(
+		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		[]
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"

diff --git a/packages/edit-site/src/components/welcome-guide/index.js b/packages/edit-site/src/components/welcome-guide/index.js
@@ -1,33 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-
 /**
  * Internal dependencies
  */
 import WelcomeGuideEditor from './editor';
 import WelcomeGuideStyles from './styles';
-import { store as editSiteStore } from '../../store';
 
 export default function WelcomeGuide() {
-	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
-		const isStylesSidebar = sidebar === 'edit-site/global-styles';
-		const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
-
-		return {
-			isActive: select( editSiteStore ).isFeatureActive( feature ),
-			isStylesOpen: isStylesSidebar,
-		};
-	}, [] );
-
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return isStylesOpen ? <WelcomeGuideStyles /> : <WelcomeGuideEditor />;
+	return (
+		<>
+			<WelcomeGuideEditor />
+			<WelcomeGuideStyles />
+		</>
+	);
 }
diff --git a/packages/edit-site/src/components/welcome-guide/styles.js b/packages/edit-site/src/components/welcome-guide/styles.js
@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -14,6 +15,23 @@ import { store as editSiteStore } from '../../store';
 export default function WelcomeGuideStyles() {
 	const { toggleFeature } = useDispatch( editSiteStore );
 
+	const { isActive, isStylesOpen } = useSelect( ( select ) => {
+		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
+			editSiteStore.name
+		);
+
+		return {
+			isActive: select( editSiteStore ).isFeatureActive(
+				'welcomeGuideStyles'
+			),
+			isStylesOpen: sidebar === 'edit-site/global-styles',
+		};
+	}, [] );
+
+	if ( ! isActive || ! isStylesOpen ) {
+		return null;
+	}
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"