From f7780a2c7e715698086bb5d6e4154ed6c161b059 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 7 Dec 2021 17:13:46 +0400
Subject: [PATCH] Check isActive state locally in components

---
 .../src/components/welcome-guide/editor.js    | 11 ++++++-
 .../src/components/welcome-guide/index.js     | 31 ++++---------------
 .../src/components/welcome-guide/styles.js    | 20 +++++++++++-
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/packages/edit-site/src/components/welcome-guide/editor.js b/packages/edit-site/src/components/welcome-guide/editor.js
index 680423118eaeb1..daef61efa4b8b4 100644
--- 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
index 44736a15374602..4ad4d7d0eecefd 100644
--- 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
index 1dae8045535fbc..8ca4dc0cbe9b1c 100644
--- 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"