From 2ceba81800cb56efd506e8f775807dcf0ce2c8c1 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 30 Jan 2023 11:55:47 +1300 Subject: [PATCH] Global styles: move custom CSS to ellipsis menu if no custom CSS present yet (#47371) --- .../components/global-styles/screen-root.js | 7 ++- .../src/components/global-styles/ui.js | 50 +++++++++++++++++-- .../global-styles-sidebar.js | 42 +++------------- 3 files changed, 60 insertions(+), 39 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..b8110bab743442 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 7ca564f000534e..3a5acc6ef7779b 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 { 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 GlobalStylesActionMenu() { + 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' ), + }, + { + title: __( 'Additional CSS' ), + onClick: loadCustomCSS, + }, + ] } + /> + + ); +} function GlobalStylesNavigationScreen( { className, ...props } ) { return ( @@ -289,8 +331,10 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) { { 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 d33beb68e5757a..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,18 +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 [ canReset, onReset ] = useGlobalStylesReset(); - const { toggle } = useDispatch( preferencesStore ); const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false ); const editorMode = useSelect( ( select ) => select( editSiteStore ).getEditorMode(), [] ); + useEffect( () => { if ( editorMode !== 'visual' ) { setIsStyleBookOpened( false ); @@ -67,25 +57,7 @@ export default function GlobalStylesSidebar() { /> - - toggle( - 'core/edit-site', - 'welcomeGuideStyles' - ), - }, - ] } - /> + }