Skip to content

Commit

Permalink
Global Styles: Add Welcome Guide toggle (#37180)
Browse files Browse the repository at this point in the history
* Global Styles: Add Welcome Guide toggle

* Check isActive state locally in components
  • Loading branch information
Mamaduka authored and noisysocks committed Dec 13, 2021
1 parent 8f7e53e commit ad9c5d9
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -39,6 +42,11 @@ export default function GlobalStylesSidebar() {
title: __( 'Reset to defaults' ),
onClick: onReset,
},
{
title: __( 'Welcome Guide' ),
onClick: () =>
toggleFeature( 'welcomeGuideStyles' ),
},
] }
/>
</FlexItem>
Expand Down
11 changes: 10 additions & 1 deletion packages/edit-site/src/components/welcome-guide/editor.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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"
Expand Down
31 changes: 6 additions & 25 deletions packages/edit-site/src/components/welcome-guide/index.js
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
}
20 changes: 19 additions & 1 deletion packages/edit-site/src/components/welcome-guide/styles.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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"
Expand Down
18 changes: 2 additions & 16 deletions packages/edit-site/src/plugins/welcome-guide-menu-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
);
Expand Down

0 comments on commit ad9c5d9

Please sign in to comment.