Shadow: move shadow to own panel (#47634)

* move shadow into newly created effects panel * rename effects to shadow * rename label shadows to shadow in popover
WordPress · Feb 7, 2023 · b13b4a5 · b13b4a5
1 parent c98e7f5
commit b13b4a5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,6 +12,7 @@ import {
 import {
 	typography,
 	border,
+	shadow,
 	color,
 	layout,
 	chevronLeft,
@@ -32,11 +33,13 @@ import { useHasVariationsPanel } from './variations-panel';
 import { NavigationButtonAsItem } from './navigation-button';
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { ScreenVariations } from './screen-variations';
+import { useHasShadowControl } from './shadow-panel';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
 	const hasColorPanel = useHasColorPanel( name );
 	const hasBorderPanel = useHasBorderPanel( name );
+	const hasEffectsPanel = useHasShadowControl( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasDimensionsPanel;
 	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
@@ -85,9 +88,18 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					<NavigationButtonAsItem
 						icon={ border }
 						path={ parentMenu + '/border' }
-						aria-label={ __( 'Border & shadow styles' ) }
+						aria-label={ __( 'Border' ) }
 					>
-						{ __( 'Border & Shadow' ) }
+						{ __( 'Border' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasEffectsPanel && (
+					<NavigationButtonAsItem
+						icon={ shadow }
+						path={ parentMenu + '/effects' }
+						aria-label={ __( 'Shadow' ) }
+					>
+						{ __( 'Shadow' ) }
 					</NavigationButtonAsItem>
 				) }
 				{ hasLayoutPanel && (

diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
@@ -10,22 +10,17 @@ import ScreenHeader from './header';
 import BorderPanel, { useHasBorderPanel } from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
-import ShadowPanel, { useHasShadowControl } from './shadow-panel';
 
 function ScreenBorder( { name, variation = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const variationClassName = getVariationClassName( variation );
-	const hasShadowPanel = useHasShadowControl( name );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Border & Shadow' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
 				<BorderPanel name={ name } variation={ variation } />
 			) }
-			{ hasShadowPanel && (
-				<ShadowPanel name={ name } variation={ variation } />
-			) }
 		</>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/screen-effects.js b/packages/edit-site/src/components/global-styles/screen-effects.js
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import { getVariationClassName } from './utils';
+import ShadowPanel, { useHasShadowControl } from './shadow-panel';
+
+function ScreenEffects( { name, variation = '' } ) {
+	const variationClassName = getVariationClassName( variation );
+	const hasShadowPanel = useHasShadowControl( name );
+	return (
+		<>
+			<ScreenHeader title={ __( 'Shadow' ) } />
+			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			{ hasShadowPanel && (
+				<ShadowPanel name={ name } variation={ variation } />
+			) }
+		</>
+	);
+}
+
+export default ScreenEffects;
diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js
@@ -129,7 +129,7 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 	return (
 		<div className="edit-site-global-styles__shadow-panel">
 			<VStack spacing={ 4 }>
-				<Heading level={ 5 }>{ __( 'Shadows' ) }</Heading>
+				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
 				<ShadowPresets
 					presets={ shadows }
 					activeShadow={ shadow }

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
@@ -38,6 +38,7 @@ import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../experiments';
+import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -228,6 +229,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
+				<ScreenEffects name={ name } variation={ variation } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>