WIP, try adding per block custom css to global styles

WordPress · aristath · Jan 23, 2023 · Dec 13, 2022 · Dec 14, 2022 · Dec 14, 2022
commit 4d0ce99809506564a6cb443c145ccb50b964aad5
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -1,9 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, border, color, layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	FlexItem,
+	CardBody,
+	CardDivider,
+} from '@wordpress/components';
+import {
+	typography,
+	border,
+	color,
+	layout,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,6 +27,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import { NavigationButtonAsItem } from './navigation-button';
+import { IconWithCurrentColor } from './icon-with-current-color';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -22,44 +37,78 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasLayoutPanel = hasDimensionsPanel;
 
 	return (
-		<ItemGroup>
-			{ hasTypographyPanel && (
-				<NavigationButtonAsItem
-					icon={ typography }
-					path={ parentMenu + '/typography' }
-					aria-label={ __( 'Typography styles' ) }
-				>
-					{ __( 'Typography' ) }
-				</NavigationButtonAsItem>
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path={ parentMenu + '/typography' }
+						aria-label={ __( 'Typography styles' ) }
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem
+						icon={ color }
+						path={ parentMenu + '/colors' }
+						aria-label={ __( 'Colors styles' ) }
+					>
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasBorderPanel && (
+					<NavigationButtonAsItem
+						icon={ border }
+						path={ parentMenu + '/border' }
+						aria-label={ __( 'Border styles' ) }
+					>
+						{ __( 'Border' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem
+						icon={ layout }
+						path={ parentMenu + '/layout' }
+						aria-label={ __( 'Layout styles' ) }
+					>
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+			{ !! parentMenu && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the block appearance.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path={ parentMenu + '/css' }
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
 			) }
-			{ hasColorPanel && (
-				<NavigationButtonAsItem
-					icon={ color }
-					path={ parentMenu + '/colors' }
-					aria-label={ __( 'Colors styles' ) }
-				>
-					{ __( 'Colors' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasBorderPanel && (
-				<NavigationButtonAsItem
-					icon={ border }
-					path={ parentMenu + '/border' }
-					aria-label={ __( 'Border styles' ) }
-				>
-					{ __( 'Border' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasLayoutPanel && (
-				<NavigationButtonAsItem
-					icon={ layout }
-					path={ parentMenu + '/layout' }
-					aria-label={ __( 'Layout styles' ) }
-				>
-					{ __( 'Layout' ) }
-				</NavigationButtonAsItem>
-			) }
-		</ItemGroup>
+		</>
 	);
 }
 

diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -9,9 +9,13 @@ import { __ } from '@wordpress/i18n';
  */
 import { useStyle } from './hooks';
 
-function CustomCSSControl() {
-	const [ customCSS, setCustomCSS ] = useStyle( 'css' );
-	const [ themeCSS ] = useStyle( 'css', null, 'base' );
+function CustomCSSControl( { blockName } ) {
+	// If blockName is defined, we are customizing CSS at the block level:
+	// styles.blocks.blockName.css
+	const block = !! blockName ? blockName : null;
+
+	const [ customCSS, setCustomCSS ] = useStyle( 'css', block );
+	const [ themeCSS ] = useStyle( 'css', block, 'base' );
 	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
 
 	// If there is custom css from theme.json show it in the edit box

diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,19 +12,32 @@ import ScreenHeader from './header';
 import Subtitle from './subtitle';
 import CustomCSSControl from './custom-css';
 
-function ScreenCSS() {
+function ScreenCSS( { name } ) {
+	// If name is defined, we are customizing CSS at the block level.
+	// Display the block title in the description.
+	const blockType = getBlockType( name );
+	const title = blockType?.title;
+
+	const description =
+		title !== undefined
+			? sprintf(
+					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+					__(
+						'Add your own CSS to customize the appearance of the %s block.'
+					),
+					title
+			  )
+			: __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+			  );
+
 	return (
 		<>
-			<ScreenHeader
-				title={ __( 'CSS' ) }
-				description={ __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-				) }
-			/>
+			<ScreenHeader title={ __( 'CSS' ) } description={ description } />
 			<div className="edit-site-global-styles-screen-css">
 				<VStack spacing={ 3 }>
 					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
-					<CustomCSSControl />
+					<CustomCSSControl blockName={ name } />
 				</VStack>
 			</div>
 		</>

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -120,6 +120,10 @@ function ContextScreens( { name } ) {
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
+				<ScreenCSS name={ name } />
+			</GlobalStylesNavigationScreen>
 		</>
 	);
 }
@@ -192,9 +196,6 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			{ isStyleBookOpened && (
 				<GlobalStylesStyleBook onClose={ onCloseStyleBook } />
 			) }
-			<GlobalStylesNavigationScreen path="/css">
-				<ScreenCSS />
-			</GlobalStylesNavigationScreen>
 		</NavigatorProvider>
 	);
 }