Global Styles: Add Welcome Guide toggle

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

Hide file tree

Showing 2 changed files with 10 additions and 16 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/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>
 	);