From 0cd31c2fc9a523f3a5a00046c0bedafb2cc20ce7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 24 Jan 2023 17:31:26 +1300 Subject: [PATCH 1/7] Initial commit --- .../src/components/global-styles/ui.js | 28 +++++++++++++++++-- .../global-styles-sidebar.js | 10 +++++++ 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 7ca564f000534e..20b710408afd7d 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -7,7 +7,7 @@ import { __experimentalUseNavigator as useNavigator, } from '@wordpress/components'; import { getBlockTypes, store as blocksStore } from '@wordpress/blocks'; - +import { usePrevious } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; /** @@ -239,7 +239,26 @@ function GlobalStylesStyleBook( { onClose } ) { ); } -function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { +function NavigatorControl( { navigatorPath, setNavigatorPath } ) { + const { goTo, location } = useNavigator(); + const previousNavigatorPath = usePrevious( navigatorPath ); + + if ( + navigatorPath !== previousNavigatorPath && + previousNavigatorPath !== '/css' && + location.isBack !== true + ) { + goTo( navigatorPath ); + setNavigatorPath( '/' ); + } +} + +function GlobalStylesUI( { + isStyleBookOpened, + onCloseStyleBook, + navigatorPath, + setNavigatorPath, +} ) { const blocks = getBlockTypes(); return ( @@ -267,7 +286,10 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { ) ) } - + { blocks.map( ( block ) => ( diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index d33beb68e5757a..6291e617b86ddb 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -26,6 +26,7 @@ import { unlock } from '../../experiments'; const { useGlobalStylesReset } = unlock( blockEditorExperiments ); export default function GlobalStylesSidebar() { + const [ navigatorPath, setNavigatorPath ] = useState( '/' ); const [ canReset, onReset ] = useGlobalStylesReset(); const { toggle } = useDispatch( preferencesStore ); const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false ); @@ -33,6 +34,9 @@ export default function GlobalStylesSidebar() { ( select ) => select( editSiteStore ).getEditorMode(), [] ); + + const loadCustomCSS = () => setNavigatorPath( '/css' ); + useEffect( () => { if ( editorMode !== 'visual' ) { setIsStyleBookOpened( false ); @@ -76,6 +80,10 @@ export default function GlobalStylesSidebar() { onClick: onReset, isDisabled: ! canReset, }, + { + title: __( 'Additional CSS' ), + onClick: loadCustomCSS, + }, { title: __( 'Welcome Guide' ), onClick: () => @@ -93,6 +101,8 @@ export default function GlobalStylesSidebar() { setIsStyleBookOpened( false ) } + navigatorPath={ navigatorPath } + setNavigatorPath={ setNavigatorPath } /> ); From 3fe5ebf35e2eaf60ea8933c3914ada4e2b621dbf Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 25 Jan 2023 10:02:03 +1300 Subject: [PATCH 2/7] fix conflict --- .../src/components/global-styles/ui.js | 78 ++++++++++++------- .../global-styles-sidebar.js | 50 ++---------- 2 files changed, 57 insertions(+), 71 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 20b710408afd7d..62280ca71c4301 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -5,10 +5,15 @@ import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalUseNavigator as useNavigator, + createSlotFill, + DropdownMenu, } from '@wordpress/components'; import { getBlockTypes, store as blocksStore } from '@wordpress/blocks'; -import { usePrevious } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies @@ -31,6 +36,43 @@ import { ScreenVariation } from './screen-variations'; import ScreenBorder from './screen-border'; import StyleBook from '../style-book'; import ScreenCSS from './screen-css'; +import { unlock } from '../../experiments'; + +const SLOT_FILL_NAME = 'GlobalStylesMenu'; +const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = + createSlotFill( SLOT_FILL_NAME ); + +function GlobalStylesMenu() { + const { toggle } = useDispatch( preferencesStore ); + const { useGlobalStylesReset } = unlock( blockEditorExperiments ); + const [ canReset, onReset ] = useGlobalStylesReset(); + const { goTo } = useNavigator(); + const loadCustomCSS = () => goTo( '/css' ); + return ( + + + toggle( 'core/edit-site', 'welcomeGuideStyles' ), + }, + ] } + /> + + ); +} function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -239,26 +281,7 @@ function GlobalStylesStyleBook( { onClose } ) { ); } -function NavigatorControl( { navigatorPath, setNavigatorPath } ) { - const { goTo, location } = useNavigator(); - const previousNavigatorPath = usePrevious( navigatorPath ); - - if ( - navigatorPath !== previousNavigatorPath && - previousNavigatorPath !== '/css' && - location.isBack !== true - ) { - goTo( navigatorPath ); - setNavigatorPath( '/' ); - } -} - -function GlobalStylesUI( { - isStyleBookOpened, - onCloseStyleBook, - navigatorPath, - setNavigatorPath, -} ) { +function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { const blocks = getBlockTypes(); return ( @@ -286,10 +309,7 @@ function GlobalStylesUI( { ) ) } - + { blocks.map( ( block ) => ( @@ -311,8 +331,12 @@ function GlobalStylesUI( { { isStyleBookOpened && ( ) } + + + + ); } - +export { GlobalStylesMenuSlot }; export default GlobalStylesUI; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js index 6291e617b86ddb..0e33bb6142ab2e 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js @@ -1,19 +1,12 @@ /** * WordPress dependencies */ -import { - DropdownMenu, - FlexItem, - FlexBlock, - Flex, - Button, -} from '@wordpress/components'; +import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { styles, moreVertical, seen } from '@wordpress/icons'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { store as preferencesStore } from '@wordpress/preferences'; +import { styles, seen } from '@wordpress/icons'; +import { useSelect } from '@wordpress/data'; + import { useState, useEffect } from '@wordpress/element'; -import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -21,22 +14,15 @@ import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; import DefaultSidebar from './default-sidebar'; import { GlobalStylesUI } from '../global-styles'; import { store as editSiteStore } from '../../store'; -import { unlock } from '../../experiments'; - -const { useGlobalStylesReset } = unlock( blockEditorExperiments ); +import { GlobalStylesMenuSlot } from '../global-styles/ui'; export default function GlobalStylesSidebar() { - const [ navigatorPath, setNavigatorPath ] = useState( '/' ); - const [ canReset, onReset ] = useGlobalStylesReset(); - const { toggle } = useDispatch( preferencesStore ); const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false ); const editorMode = useSelect( ( select ) => select( editSiteStore ).getEditorMode(), [] ); - const loadCustomCSS = () => setNavigatorPath( '/css' ); - useEffect( () => { if ( editorMode !== 'visual' ) { setIsStyleBookOpened( false ); @@ -71,29 +57,7 @@ export default function GlobalStylesSidebar() { /> - - toggle( - 'core/edit-site', - 'welcomeGuideStyles' - ), - }, - ] } - /> + } @@ -101,8 +65,6 @@ export default function GlobalStylesSidebar() { setIsStyleBookOpened( false ) } - navigatorPath={ navigatorPath } - setNavigatorPath={ setNavigatorPath } /> ); From ea23a82bdbfc6b3908d0d730b7b96aa6717848a4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 25 Jan 2023 09:59:58 +1300 Subject: [PATCH 3/7] Don't show custom css option if no custom css entered yet --- .../components/global-styles/screen-root.js | 7 ++++++- .../src/components/global-styles/ui.js | 19 ++++++++++++++----- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js index 58f6fd37a4fc12..b599bc6ed508cb 100644 --- a/packages/edit-site/src/components/global-styles/screen-root.js +++ b/packages/edit-site/src/components/global-styles/screen-root.js @@ -16,6 +16,7 @@ import { isRTL, __ } from '@wordpress/i18n'; import { chevronLeft, chevronRight } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies @@ -24,8 +25,12 @@ import { IconWithCurrentColor } from './icon-with-current-color'; import { NavigationButtonAsItem } from './navigation-button'; import ContextMenu from './context-menu'; import StylesPreview from './preview'; +import { unlock } from '../../experiments'; function ScreenRoot() { + const { useGlobalStyle } = unlock( blockEditorExperiments ); + const [ customCSS ] = useGlobalStyle( 'css' ); + const { variations, canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, @@ -110,7 +115,7 @@ function ScreenRoot() { - { canEditCSS && ( + { canEditCSS && customCSS && ( <> diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 62280ca71c4301..6ad797c7c72ee2 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -44,8 +44,11 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = function GlobalStylesMenu() { const { toggle } = useDispatch( preferencesStore ); - const { useGlobalStylesReset } = unlock( blockEditorExperiments ); + const { useGlobalStylesReset, useGlobalStyle } = unlock( + blockEditorExperiments + ); const [ canReset, onReset ] = useGlobalStylesReset(); + const [ customCSS ] = useGlobalStyle( 'css' ); const { goTo } = useNavigator(); const loadCustomCSS = () => goTo( '/css' ); return ( @@ -59,10 +62,14 @@ function GlobalStylesMenu() { onClick: onReset, isDisabled: ! canReset, }, - { - title: __( 'Additional CSS' ), - onClick: loadCustomCSS, - }, + ...( ! customCSS + ? [ + { + title: __( 'Additional CSS' ), + onClick: loadCustomCSS, + }, + ] + : [] ), { title: __( 'Welcome Guide' ), onClick: () => @@ -331,9 +338,11 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { { isStyleBookOpened && ( ) } + + ); From 37b5b3f0e971863eabe5bd6b920bcef79cd95096 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 25 Jan 2023 13:20:29 +1300 Subject: [PATCH 4/7] Fix duplicate style entries, and keep custom css in menu at all times --- .../src/components/global-styles/ui.js | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 6ad797c7c72ee2..7cc73b3a8813c4 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -44,11 +44,8 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = function GlobalStylesMenu() { const { toggle } = useDispatch( preferencesStore ); - const { useGlobalStylesReset, useGlobalStyle } = unlock( - blockEditorExperiments - ); + const { useGlobalStylesReset } = unlock( blockEditorExperiments ); const [ canReset, onReset ] = useGlobalStylesReset(); - const [ customCSS ] = useGlobalStyle( 'css' ); const { goTo } = useNavigator(); const loadCustomCSS = () => goTo( '/css' ); return ( @@ -62,14 +59,10 @@ function GlobalStylesMenu() { onClick: onReset, isDisabled: ! canReset, }, - ...( ! customCSS - ? [ - { - title: __( 'Additional CSS' ), - onClick: loadCustomCSS, - }, - ] - : [] ), + { + title: __( 'Additional CSS' ), + onClick: loadCustomCSS, + }, { title: __( 'Welcome Guide' ), onClick: () => @@ -339,10 +332,6 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { ) } - - - - ); From 43dba78249d51aa9f1f3a2f9a1e9cdef17877270 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 26 Jan 2023 17:33:41 +1300 Subject: [PATCH 5/7] Change order of menu items --- packages/edit-site/src/components/global-styles/ui.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 7cc73b3a8813c4..124b1140a76858 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -59,15 +59,15 @@ function GlobalStylesMenu() { onClick: onReset, isDisabled: ! canReset, }, - { - title: __( 'Additional CSS' ), - onClick: loadCustomCSS, - }, { title: __( 'Welcome Guide' ), onClick: () => toggle( 'core/edit-site', 'welcomeGuideStyles' ), }, + { + title: __( 'Additional CSS' ), + onClick: loadCustomCSS, + }, ] } /> From e39c5ade24897e52f3c8e182543051b18c83d383 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 30 Jan 2023 09:53:02 +1300 Subject: [PATCH 6/7] Coerce the customCSS value to boolean --- packages/edit-site/src/components/global-styles/screen-root.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js index b599bc6ed508cb..b8110bab743442 100644 --- a/packages/edit-site/src/components/global-styles/screen-root.js +++ b/packages/edit-site/src/components/global-styles/screen-root.js @@ -115,7 +115,7 @@ function ScreenRoot() { - { canEditCSS && customCSS && ( + { canEditCSS && !! customCSS && ( <> From 2556a9b32748983ca36f959d030208ccf816c8dd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 30 Jan 2023 09:54:43 +1300 Subject: [PATCH 7/7] Rename the menu for clarity --- packages/edit-site/src/components/global-styles/ui.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 124b1140a76858..3a5acc6ef7779b 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -42,7 +42,7 @@ const SLOT_FILL_NAME = 'GlobalStylesMenu'; const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = createSlotFill( SLOT_FILL_NAME ); -function GlobalStylesMenu() { +function GlobalStylesActionMenu() { const { toggle } = useDispatch( preferencesStore ); const { useGlobalStylesReset } = unlock( blockEditorExperiments ); const [ canReset, onReset ] = useGlobalStylesReset(); @@ -332,7 +332,7 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { ) } - + ); }