Site Editor: make less prominent Addtional CSS UI (#71550)

t-hamano · tyxla · jameskoster · web-flow · commit 99d25fb6620b · 2025-09-19T20:16:35.000+09:00
* Site Editor: make less prominent Addtional CSS UI

* Add navigation button to blocks section

* Update packages/edit-site/src/components/global-styles/screen-css.js

Co-authored-by: Marin Atanasov &lt;8436925+tyxla@users.noreply.github.com&gt;

* Update packages/edit-site/src/components/global-styles/screen-css.js

Co-authored-by: Marin Atanasov &lt;8436925+tyxla@users.noreply.github.com&gt;

* Move Additional CSS button into elipsis menu item

---------

Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: tyxla &lt;tyxla@git.wordpress.org&gt;
Co-authored-by: jameskoster &lt;jameskoster@git.wordpress.org&gt;
Co-authored-by: jasmussen &lt;joen@git.wordpress.org&gt;
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -18,9 +18,6 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 );
 
 function ScreenCSS() {
-	const description = __(
-		'Add your own CSS to customize the appearance and layout of your site.'
-	);
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -35,10 +32,12 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'CSS' ) }
+				title={ __( 'Additional CSS' ) }
 				description={
 					<>
-						{ description }
+						{ __(
+							'You can add custom CSS to further customize the appearance and layout of your site.'
+						) }
 						<br />
 						<ExternalLink
 							href={ __(
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -26,24 +26,10 @@ import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
 
 function ScreenRoot() {
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
-			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
-		};
+	const hasVariations = useSelect( ( select ) => {
+		const { __experimentalGetCurrentThemeGlobalStylesVariations } =
+			select( coreStore );
+		return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
 	}, [] );
 
 	return (
@@ -92,7 +78,7 @@ function ScreenRoot() {
 					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
-					marginBottom={ 4 }
+					marginBottom={ 2 }
 				>
 					{ __(
 						'Customize the appearance of specific blocks for the whole site.'
@@ -109,38 +95,6 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<Spacer
-							as="p"
-							paddingTop={ 2 }
-							paddingX="13px"
-							marginBottom={ 4 }
-						>
-							{ __(
-								'Add your own CSS to customize the appearance and layout of your site.'
-							) }
-						</Spacer>
-						<ItemGroup>
-							<NavigationButtonAsItem path="/css">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Additional CSS' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					</CardBody>
-				</>
-			) }
 		</Card>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -2,12 +2,20 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { seen } from '@wordpress/icons';
+import { seen, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,21 +32,59 @@ const GlobalStylesPageActions = ( {
 	path,
 } ) => {
 	const history = useHistory();
+	const canEditCSS = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return !! globalStyles?._links?.[ 'wp:action-edit-css' ];
+	}, [] );
+
 	return (
-		<Button
-			isPressed={ isStyleBookOpened }
-			icon={ seen }
-			label={ __( 'Style Book' ) }
-			onClick={ () => {
-				setIsStyleBookOpened( ! isStyleBookOpened );
-				const updatedPath = ! isStyleBookOpened
-					? addQueryArgs( path, { preview: 'stylebook' } )
-					: removeQueryArgs( path, 'preview' );
-				// Navigate to the updated path.
-				history.navigate( updatedPath );
-			} }
-			size="compact"
-		/>
+		<HStack>
+			<Button
+				isPressed={ isStyleBookOpened }
+				icon={ seen }
+				label={ __( 'Style Book' ) }
+				onClick={ () => {
+					setIsStyleBookOpened( ! isStyleBookOpened );
+					const updatedPath = ! isStyleBookOpened
+						? addQueryArgs( path, { preview: 'stylebook' } )
+						: removeQueryArgs( path, 'preview' );
+					// Navigate to the updated path.
+					history.navigate( updatedPath );
+				} }
+				size="compact"
+			/>
+			{ canEditCSS && (
+				<DropdownMenu
+					icon={ moreVertical }
+					label={ __( 'More' ) }
+					toggleProps={ { size: 'compact' } }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem
+									onClick={ () => {
+										onClose();
+										history.navigate(
+											addQueryArgs( path, {
+												section: '/css',
+											} )
+										);
+									} }
+								>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) }
+		</HStack>
 	);
 };
 
