Global Styles: Add Welcome Guide toggle (#37180)

* Global Styles: Add Welcome Guide toggle * Check isActive state locally in components
WordPress · Dec 8, 2021 · 64c1ddb · 64c1ddb
1 parent 821ca9a
commit 64c1ddb
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 43 deletions.
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -4,15 +4,18 @@
 import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, moreVertical } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { store as editSiteStore } from '../../store';
 
 export default function GlobalStylesSidebar() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { toggleFeature } = useDispatch( editSiteStore );
 
 	return (
 		<DefaultSidebar
@@ -39,6 +42,11 @@ export default function GlobalStylesSidebar() {
 									title: __( 'Reset to defaults' ),
 									onClick: onReset,
 								},
+								{
+									title: __( 'Welcome Guide' ),
+									onClick: () =>
+										toggleFeature( 'welcomeGuideStyles' ),
+								},
 							] }
 						/>
 					</FlexItem>

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"

diff --git a/packages/edit-site/src/plugins/welcome-guide-menu-item.js b/packages/edit-site/src/plugins/welcome-guide-menu-item.js
@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { MenuItem } from '@wordpress/components';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -13,22 +12,9 @@ import { store as editSiteStore } from '../store';
 
 export default function WelcomeGuideMenuItem() {
 	const { toggleFeature } = useDispatch( editSiteStore );
-	const isStylesOpen = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
-
-		return sidebar === 'edit-site/global-styles';
-	}, [] );
 
 	return (
-		<MenuItem
-			onClick={ () =>
-				toggleFeature(
-					isStylesOpen ? 'welcomeGuideStyles' : 'welcomeGuide'
-				)
-			}
-		>
+		<MenuItem onClick={ () => toggleFeature( 'welcomeGuide' ) }>
 			{ __( 'Welcome Guide' ) }
 		</MenuItem>
 	);