Don't show custom css option if no custom css entered 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

@@ -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 && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
+
 			<GlobalStylesNavigationScreen path="/css">
 				<ScreenCSS />
 			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesMenu />
 		</NavigatorProvider>
 	);