Global styles: move custom CSS to ellipsis menu if no custom CSS present yet

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() {
 				</ItemGroup>
 			</CardBody>
 
-			{ canEditCSS && (
+			{ canEditCSS && customCSS && (
 				<>
 					<CardDivider />
 					<CardBody>

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 GlobalStylesMenu() {
+	const { toggle } = useDispatch( preferencesStore );
+	const { useGlobalStylesReset } = unlock( blockEditorExperiments );
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { goTo } = useNavigator();
+	const loadCustomCSS = () => goTo( '/css' );
+	return (
+		<GlobalStylesMenuFill>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More Styles actions' ) }
+				controls={ [
+					{
+						title: __( 'Reset to defaults' ),
+						onClick: onReset,
+						isDisabled: ! canReset,
+					},
+					{
+						title: __( 'Welcome Guide' ),
+						onClick: () =>
+							toggle( 'core/edit-site', 'welcomeGuideStyles' ),
+					},
+					{
+						title: __( 'Additional CSS' ),
+						onClick: loadCustomCSS,
+					},
+				] }
+			/>
+		</GlobalStylesMenuFill>
+	);
+}
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
@@ -289,8 +331,10 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
+
+			<GlobalStylesMenu />
 		</NavigatorProvider>
 	);
 }
-
+export { GlobalStylesMenuSlot };
 export default GlobalStylesUI;

packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -1,38 +1,28 @@
 /**
  * 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
  */
 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() {
 						/>
 					</FlexItem>
 					<FlexItem>
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ __( 'More Styles actions' ) }
-							controls={ [
-								{
-									title: __( 'Reset to defaults' ),
-									onClick: onReset,
-									isDisabled: ! canReset,
-								},
-								{
-									title: __( 'Welcome Guide' ),
-									onClick: () =>
-										toggle(
-											'core/edit-site',
-											'welcomeGuideStyles'
-										),
-								},
-							] }
-						/>
+						<GlobalStylesMenuSlot />
 					</FlexItem>
 				</Flex>
 			}