From 1d8d708580082c445a4196bec85ebe1321c7262f Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 9 Sep 2025 10:14:47 +0900
Subject: [PATCH 1/5] Site Editor: make less prominent Addtional CSS UI

---
 .../src/components/global-styles/screen-css.js       |  4 ++--
 .../src/components/global-styles/screen-root.js      | 12 +-----------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 570ac7abef269d..b6a539648bd3b9 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -19,7 +19,7 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 
 function ScreenCSS() {
 	const description = __(
-		'Add your own CSS to customize the appearance and layout of your site.'
+		'You can add custom CSS to further customize the appearance and layout of your site.'
 	);
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
@@ -35,7 +35,7 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'CSS' ) }
+				title={ __( 'Additional CSS' ) }
 				description={
 					<>
 						{ description }
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 fa4ce66fe9fc91..128bce42095d0c 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -92,7 +92,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.'
@@ -114,16 +114,6 @@ function ScreenRoot() {
 				<>
 					<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">

From 6a9aa5c66c18015df229a32b44f694ce38709213 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Mon, 15 Sep 2025 15:03:54 +0900
Subject: [PATCH 2/5] Add navigation button to blocks section

---
 .../components/global-styles/screen-css.js    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index b6a539648bd3b9..1bd1c3009ccff2 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ExternalLink } from '@wordpress/components';
+import {
+	Button,
+	Navigator,
+	ExternalLink,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 
@@ -18,9 +23,6 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 );
 
 function ScreenCSS() {
-	const description = __(
-		'You can add custom CSS to further customize the appearance and layout of your site.'
-	);
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -38,7 +40,9 @@ function ScreenCSS() {
 				title={ __( 'Additional CSS' ) }
 				description={
 					<>
-						{ description }
+						{ __(
+							'You can add custom CSS to further customize the appearance and layout of your site.'
+						) }
 						<br />
 						<ExternalLink
 							href={ __(
@@ -54,6 +58,13 @@ function ScreenCSS() {
 					setEditorCanvasContainerView( undefined );
 				} }
 			/>
+			<Spacer margin={ 0 } paddingX={ 4 }>
+				<Navigator.Button as={ Button } variant="link" path="/blocks">
+					{ __(
+						'Want to change block appearance? Use the Blocs section instead.'
+					) }
+				</Navigator.Button>
+			</Spacer>
 			<div className="edit-site-global-styles-screen-css">
 				<StylesAdvancedPanel
 					value={ style }

From 167ef6c844f9de408b890cd7a8e43958236cdcb5 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Sep 2025 18:55:55 +0900
Subject: [PATCH 3/5] Update
 packages/edit-site/src/components/global-styles/screen-css.js

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---
 packages/edit-site/src/components/global-styles/screen-css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 1bd1c3009ccff2..bfcfc7c5043a95 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -61,7 +61,7 @@ function ScreenCSS() {
 			<Spacer margin={ 0 } paddingX={ 4 }>
 				<Navigator.Button as={ Button } variant="link" path="/blocks">
 					{ __(
-						'Want to change block appearance? Use the Blocs section instead.'
+						'Want to change block appearance? Use the Blocкs section instead.'
 					) }
 				</Navigator.Button>
 			</Spacer>

From a18a176abe6c9a2819a048c671cef71d0afa3424 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 16 Sep 2025 19:02:24 +0900
Subject: [PATCH 4/5] Update
 packages/edit-site/src/components/global-styles/screen-css.js

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
---
 packages/edit-site/src/components/global-styles/screen-css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index bfcfc7c5043a95..635581684d0460 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -61,7 +61,7 @@ function ScreenCSS() {
 			<Spacer margin={ 0 } paddingX={ 4 }>
 				<Navigator.Button as={ Button } variant="link" path="/blocks">
 					{ __(
-						'Want to change block appearance? Use the Blocкs section instead.'
+						'Want to change block appearance? Use the Blocks section instead.'
 					) }
 				</Navigator.Button>
 			</Spacer>

From 982a6ec0d0373581acc23dd2e2f8bcb2292a47b0 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Thu, 18 Sep 2025 22:30:26 +0900
Subject: [PATCH 5/5] Move Additional CSS button into elipsis menu item

---
 .../components/global-styles/screen-css.js    | 14 +---
 .../components/global-styles/screen-root.js   | 44 +----------
 .../sidebar-global-styles-wrapper/index.js    | 78 +++++++++++++++----
 3 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 635581684d0460..2fc8fdfecb7a37 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Navigator,
-	ExternalLink,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 
@@ -58,13 +53,6 @@ function ScreenCSS() {
 					setEditorCanvasContainerView( undefined );
 				} }
 			/>
-			<Spacer margin={ 0 } paddingX={ 4 }>
-				<Navigator.Button as={ Button } variant="link" path="/blocks">
-					{ __(
-						'Want to change block appearance? Use the Blocks section instead.'
-					) }
-				</Navigator.Button>
-			</Spacer>
 			<div className="edit-site-global-styles-screen-css">
 				<StylesAdvancedPanel
 					value={ style }
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 128bce42095d0c..10f982aa69fe0e 100644
--- 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 (
@@ -109,28 +95,6 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
-
-			{ canEditCSS && (
-				<>
-					<CardDivider />
-					<CardBody>
-						<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
index de12bbe466bf3b..cb8a46a1f66f45 100644
--- 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>
 	);
 };