From a3ceb0d73b6fbfe0a3b14db698f0ef5a3562099a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 27 Jun 2023 12:14:38 +0300 Subject: [PATCH 1/3] [Site editor]: Lower emphasis on style variations in navigation sidebar --- .../index.js | 48 ++++++ .../index.js | 151 ++++++------------ .../sidebar-navigation-screen-main/index.js | 7 +- .../edit-site/src/components/sidebar/index.js | 4 + 4 files changed, 106 insertions(+), 104 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js new file mode 100644 index 0000000000000..42498596e76e7 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { BlockEditorProvider } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as editSiteStore } from '../../store'; +import StyleVariationsContainer from '../global-styles/style-variations-container'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; + +const noop = () => {}; + +export default function SidebarNavigationScreenBrowseGlobalStyles() { + const { storedSettings } = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + + return { + storedSettings: getSettings( false ), + }; + }, [] ); + return ( + + + + } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index c10de840e8d47..afee27d44a1d5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -2,26 +2,24 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { backup, edit, seen } from '@wordpress/icons'; +import { backup, styles, seen, brush } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { Icon, - __experimentalNavigatorButton as NavigatorButton, + __experimentalItemGroup as ItemGroup, __experimentalVStack as HStack, __experimentalVStack as VStack, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; -import { BlockEditorProvider } from '@wordpress/block-editor'; import { humanTimeDiff } from '@wordpress/date'; import { useCallback } from '@wordpress/element'; -import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies */ import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import StyleVariationsContainer from '../global-styles/style-variations-container'; +import { useLink } from '../routes/link'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; @@ -29,76 +27,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import StyleBook from '../style-book'; import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; -const noop = () => {}; - -export function SidebarNavigationItemGlobalStyles( props ) { - const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore ); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { createNotice } = useDispatch( noticesStore ); - const hasGlobalStyleVariations = useSelect( - ( select ) => - !! select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, - [] - ); - if ( hasGlobalStyleVariations ) { - return ( - - ); - } - return ( - { - // Disable distraction free mode. - toggleFeature( 'distractionFree', false ); - createNotice( - 'info', - __( 'Distraction free mode turned off' ), - { - isDismissible: true, - type: 'snackbar', - } - ); - // Switch to edit mode. - setCanvasMode( 'edit' ); - // Open global styles sidebar. - openGeneralSidebar( 'edit-site/global-styles' ); - } } - /> - ); -} - -function SidebarNavigationScreenGlobalStylesContent() { - const { storedSettings } = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - - return { - storedSettings: getSettings( false ), - }; - }, [] ); - - // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are - // loaded. This is necessary because the Iframe component waits until - // the block editor store's `__internalIsInitialized` is true before - // rendering the iframe. Without this, the iframe previews will not render - // in mobile viewport sizes, where the editor canvas is hidden. - return ( - - - - ); -} - function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) { const { revisions, isLoading } = useGlobalStylesRevisions(); const { revisionsCount } = useSelect( ( select ) => { @@ -159,11 +87,21 @@ export default function SidebarNavigationScreenGlobalStyles() { const { setCanvasMode, setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); - - const isStyleBookOpened = useSelect( - ( select ) => - 'style-book' === - unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + const browseStylesLink = useLink( { + path: '/wp_global_styles/browseStyles', + } ); + const { isStyleBookOpened, hasGlobalStyleVariations } = useSelect( + ( select ) => ( { + isStyleBookOpened: + 'style-book' === + unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), + hasGlobalStyleVariations: + !! select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, + } ), [] ); @@ -203,36 +141,47 @@ export default function SidebarNavigationScreenGlobalStyles() { } + content={ + + { hasGlobalStyleVariations && ( + + { __( 'Browse styles' ) } + + ) } + await openGlobalStyles() } + > + { __( 'Open styles' ) } + + + } footer={ } actions={ - <> - { ! isMobileViewport && ( - - setEditorCanvasContainerView( - ! isStyleBookOpened - ? 'style-book' - : undefined - ) - } - isPressed={ isStyleBookOpened } - /> - ) } + ! isMobileViewport && ( await openGlobalStyles() } + icon={ seen } + label={ __( 'Style Book' ) } + onClick={ () => + setEditorCanvasContainerView( + ! isStyleBookOpened + ? 'style-book' + : undefined + ) + } + isPressed={ isStyleBookOpened } /> - + ) } /> { isStyleBookOpened && ! isMobileViewport && ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 6e7810abe81c0..54321cdeda58e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -17,7 +17,6 @@ import { useEffect } from '@wordpress/element'; */ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; -import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; @@ -51,12 +50,14 @@ export default function SidebarNavigationScreenMain() { > { __( 'Navigation' ) } - { __( 'Styles' ) } - + + + + From 63adb0e054f9b28c225da70cdc6f42fd132784e4 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 27 Jun 2023 14:06:49 +0300 Subject: [PATCH 2/3] update label to `Edit styles` --- .../sidebar-navigation-screen-global-styles/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index afee27d44a1d5..245ea3a5b4c86 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -156,9 +156,9 @@ export default function SidebarNavigationScreenGlobalStyles() { ) } await openGlobalStyles() } + onClick={ openGlobalStyles } > - { __( 'Open styles' ) } + { __( 'Edit styles' ) } } From f925c7ba04e87b5b141ffb6ea4d9f33b662e1cef Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 27 Jun 2023 14:26:41 +0300 Subject: [PATCH 3/3] keep turning dfm when opening global styles --- .../index.js | 59 ++++++++++++------- 1 file changed, 37 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 245ea3a5b4c86..79ea38fccec89 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -11,6 +11,8 @@ import { __experimentalVStack as HStack, __experimentalVStack as VStack, } from '@wordpress/components'; +import { store as noticesStore } from '@wordpress/notices'; +import { store as preferencesStore } from '@wordpress/preferences'; import { useViewportMatch } from '@wordpress/compose'; import { humanTimeDiff } from '@wordpress/date'; import { useCallback } from '@wordpress/element'; @@ -83,6 +85,8 @@ function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) { export default function SidebarNavigationScreenGlobalStyles() { const { openGeneralSidebar, setIsListViewOpened } = useDispatch( editSiteStore ); + const { createInfoNotice } = useDispatch( noticesStore ); + const { set: setPreference } = useDispatch( preferencesStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); const { setCanvasMode, setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) @@ -90,29 +94,40 @@ export default function SidebarNavigationScreenGlobalStyles() { const browseStylesLink = useLink( { path: '/wp_global_styles/browseStyles', } ); - const { isStyleBookOpened, hasGlobalStyleVariations } = useSelect( - ( select ) => ( { - isStyleBookOpened: - 'style-book' === - unlock( - select( editSiteStore ) - ).getEditorCanvasContainerView(), - hasGlobalStyleVariations: - !! select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, - } ), - [] - ); + const { isStyleBookOpened, hasGlobalStyleVariations, isDistractionFree } = + useSelect( + ( select ) => ( { + isStyleBookOpened: + 'style-book' === + unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), + hasGlobalStyleVariations: + !! select( + coreStore + ).__experimentalGetCurrentThemeGlobalStylesVariations() + ?.length, + isDistractionFree: select( preferencesStore ).get( + editSiteStore.name, + 'distractionFree' + ), + } ), + [] + ); - const openGlobalStyles = useCallback( - async () => - Promise.all( [ - setCanvasMode( 'edit' ), - openGeneralSidebar( 'edit-site/global-styles' ), - ] ), - [ setCanvasMode, openGeneralSidebar ] - ); + const openGlobalStyles = useCallback( async () => { + // Disable distraction free mode. + if ( isDistractionFree ) { + setPreference( editSiteStore.name, 'distractionFree', false ); + createInfoNotice( __( 'Distraction free mode turned off.' ), { + type: 'snackbar', + } ); + } + return Promise.all( [ + setCanvasMode( 'edit' ), + openGeneralSidebar( 'edit-site/global-styles' ), + ] ); + }, [ setCanvasMode, openGeneralSidebar, isDistractionFree ] ); const openStyleBook = useCallback( async () => { await openGlobalStyles();