From d459b64367c370e517e1fa678c684f34974137f7 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 12 Dec 2022 17:43:38 +0530 Subject: [PATCH 1/8] add shadow ui controls in global styles hide/show default shadows based on the setting from theme.json add block style variations prefix rename border menu to border & shadow --- docs/reference-guides/core-blocks.md | 2 +- lib/theme.json | 1 + .../src/components/global-styles/utils.js | 7 + packages/block-library/src/button/block.json | 1 + .../components/global-styles/context-menu.js | 4 +- .../src/components/global-styles/hooks.js | 5 + .../components/global-styles/screen-border.js | 9 +- .../components/global-styles/shadow-panel.js | 178 ++++++++++++++++++ .../src/components/global-styles/style.scss | 33 ++++ 9 files changed, 235 insertions(+), 5 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/shadow-panel.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 60147a5bac7fd8..875af65f62ef90 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** anchor, color (background, gradients, text), spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ +- **Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~ - **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width ## Buttons diff --git a/lib/theme.json b/lib/theme.json index d280f1bea45c46..e765d5f0f6c582 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -187,6 +187,7 @@ "text": true }, "shadow": { + "defaultPresets": true, "presets": [ { "name": "Natural", diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js index e3c3bf47d4a5a3..4e0dbedfcafecc 100644 --- a/packages/block-editor/src/components/global-styles/utils.js +++ b/packages/block-editor/src/components/global-styles/utils.js @@ -61,6 +61,12 @@ export const PRESET_METADATA = [ valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`, classes: [], }, + { + path: [ 'shadow', 'presets' ], + valueKey: 'shadow', + cssVarInfix: 'shadow', + classes: [], + }, { path: [ 'typography', 'fontSizes' ], valueFunc: ( preset, { typography: typographySettings } ) => @@ -127,6 +133,7 @@ export const STYLE_PATH_TO_CSS_VAR_INFIX = { 'elements.h6.typography.fontFamily': 'font-family', 'elements.h6.color.gradient': 'gradient', 'color.gradient': 'gradient', + shadow: 'shadow', 'typography.fontSize': 'font-size', 'typography.fontFamily': 'font-family', }; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f34437f74b573e..cc9921953abf66 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -83,6 +83,7 @@ } }, "reusable": false, + "shadow": true, "spacing": { "__experimentalSkipSerialization": true, "padding": [ "horizontal", "vertical" ], diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js index ed56c3ffacc771..cedb17a41699b6 100644 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ b/packages/edit-site/src/components/global-styles/context-menu.js @@ -85,9 +85,9 @@ function ContextMenu( { name, parentMenu = '' } ) { - { __( 'Border' ) } + { __( 'Border & Shadow' ) } ) } { hasLayoutPanel && ( diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 0dadd18c7827dc..dd85c8896c6a5c 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -71,6 +71,11 @@ export function getSupportedGlobalStylesPanels( name ) { supportKeys.push( 'blockGap' ); } + // check for shadow support + if ( blockType?.supports?.shadow ) { + supportKeys.push( 'shadow' ); + } + Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => { if ( ! STYLE_PROPERTY[ styleName ].support ) { return; diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js index 6a5578e20fcefa..9239e268735c52 100644 --- a/packages/edit-site/src/components/global-styles/screen-border.js +++ b/packages/edit-site/src/components/global-styles/screen-border.js @@ -10,17 +10,22 @@ 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 variationClassName = getVariationClassName( variationPath ); + const hasShadowPanel = useHasShadowControl( name ); return ( <> - + { hasBorderPanel && ( ) } + { hasShadowPanel && ( + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js new file mode 100644 index 00000000000000..61ddb1f08e80cd --- /dev/null +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -0,0 +1,178 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalItemGroup as ItemGroup, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalGrid as Grid, + __experimentalHeading as Heading, + FlexItem, + Dropdown, + __experimentalDropdownContentWrapper as DropdownContentWrapper, + Button, + BaseControl, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { shadow as shadowIcon } from '@wordpress/icons'; +import { useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { getSupportedGlobalStylesPanels, useStyle, useSetting } from './hooks'; +import { IconWithCurrentColor } from './icon-with-current-color'; + +export function useHasShadowControl( name ) { + const supports = getSupportedGlobalStylesPanels( name ); + return supports.includes( 'shadow' ); +} + +export default function ShadowPanel( { name, variationPath = '' } ) { + const [ shadow, setShadow ] = useStyle( `${ variationPath }shadow`, name ); + const [ userShadow ] = useStyle( `${ variationPath }shadow`, name, 'user' ); + const hasShadow = () => !! userShadow; + + const resetShadow = () => setShadow( undefined ); + const resetAll = useCallback( + () => resetShadow( undefined ), + [ resetShadow ] + ); + + return ( + + + + + + + + ); +} + +const ShadowPopover = ( { shadow, onShadowChange } ) => { + const popoverProps = { + placement: 'left-start', + offset: 36, + shift: true, + }; + + return ( + ( + + + + ) } + /> + ); +}; + +function renderShadowToggle() { + return ( { onToggle, isOpen } ) => { + const toggleProps = { + onClick: onToggle, + className: classnames( { 'is-open': isOpen } ), + 'aria-expanded': isOpen, + }; + + return ( + + ); + }; +} + +function ShadowPopoverContainer( { shadow, onShadowChange } ) { + const [ defaultShadows ] = useSetting( 'shadow.presets.default' ); + const [ themeShadows ] = useSetting( 'shadow.presets.theme' ); + const [ defaultPresetsEnabled ] = useSetting( 'shadow.defaultPresets' ); + + return ( +
+ + { __( 'Drop shadows' ) } + { defaultPresetsEnabled && ( + + ) } + + +
+ ); +} + +function ShadowPresets( { label, presets, activeShadow, onSelect } ) { + return ! presets ? null : ( +
+ + { label } + + + + { presets.map( ( { name, shadow }, i ) => ( + + onSelect( + shadow === activeShadow ? undefined : shadow + ) + } + /> + ) ) } + +
+ ); +} + +function ShadowIndicator( { label, isActive, onSelect } ) { + return ( + + ); +} diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 268536ff0433cc..e077b5d7ea0b38 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -190,3 +190,36 @@ $block-preview-height: 150px; display: flex; flex-direction: column; } + +.edit-site-global-styles__shadow-panel { + width: 230px; +} + +.edit-site-global-styles__shadow-dropdown { + display: block; + padding: 0; + + > button { + width: 100%; + padding: $grid-unit-10; + + &.is-open { + background-color: $gray-100; + } + } +} + +.edit-site-global-styles__shadow-indicator { + color: $gray-800; + border: $gray-200 $border-width solid; + border-radius: $radius-block-ui; + padding: $grid-unit-10; + cursor: pointer; + + &.active, + &.components-button:active { + color: $gray-100; + background-color: $gray-900; + border-color: $gray-900; + } +} From a5384b228e098ec462385b1671a835148ced0d5d Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 3 Jan 2023 14:40:41 +0530 Subject: [PATCH 2/8] update shadow presets --- lib/theme.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index e765d5f0f6c582..c43b452cf99c76 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -190,14 +190,14 @@ "defaultPresets": true, "presets": [ { - "name": "Natural", - "slug": "natural", - "shadow": "0 .2rem .3rem 0 rgba(0,0,0, 0.3), 0 .5rem .6rem 0 rgba(0,0,0, 0.4)" + "name": "Elevated", + "slug": "elevated", + "shadow": "rgba(0, 0, 0, 0.4) 0 2rem 4rem -1rem, rgba(0, 0, 0, 0.6) 0 1rem 2rem -1.5rem" }, { - "name": "Sharp", - "slug": "sharp", - "shadow": ".5rem .5rem 0 0 rgba(0,0,0, 0.4)" + "name": "Near", + "slug": "near", + "shadow": "rgba(0, 0, 0, 0.3) 0 0.25rem 0.5rem 0, rgba(0, 0, 0, 0.4) 0 0.05rem 0.2rem 0px" } ] }, From 64fc3f9664a30fa3404fbc512d021b73c685c6f3 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 19 Jan 2023 15:31:39 +0800 Subject: [PATCH 3/8] Make the shadow panel use small buttons --- lib/theme.json | 2 +- .../components/global-styles/shadow-panel.js | 26 ++++++++++--------- .../src/components/global-styles/style.scss | 12 ++++----- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index c43b452cf99c76..e55e4583e64284 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -192,7 +192,7 @@ { "name": "Elevated", "slug": "elevated", - "shadow": "rgba(0, 0, 0, 0.4) 0 2rem 4rem -1rem, rgba(0, 0, 0, 0.6) 0 1rem 2rem -1.5rem" + "shadow": "rgba(0, 0, 0, 0.4) 0 2rem 4rem 0, rgba(0, 0, 0, 0.6) 0 1rem 2rem 0" }, { "name": "Near", diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js index 61ddb1f08e80cd..46fa9923f52e4e 100644 --- a/packages/edit-site/src/components/global-styles/shadow-panel.js +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -21,7 +21,7 @@ import { BaseControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { shadow as shadowIcon } from '@wordpress/icons'; +import { shadow as shadowIcon, Icon, check } from '@wordpress/icons'; import { useCallback } from '@wordpress/element'; /** @@ -145,7 +145,7 @@ function ShadowPresets( { label, presets, activeShadow, onSelect } ) { { label } - + { presets.map( ( { name, shadow }, i ) => ( ) ) } @@ -163,16 +164,17 @@ function ShadowPresets( { label, presets, activeShadow, onSelect } ) { ); } -function ShadowIndicator( { label, isActive, onSelect } ) { +function ShadowIndicator( { label, isActive, onSelect, shadow } ) { return ( - + <> + + ); } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index e077b5d7ea0b38..c83b8da39dfe79 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -209,17 +209,15 @@ $block-preview-height: 150px; } } +// These styles are similar to the color palette. .edit-site-global-styles__shadow-indicator { color: $gray-800; border: $gray-200 $border-width solid; border-radius: $radius-block-ui; - padding: $grid-unit-10; cursor: pointer; + padding: 0; - &.active, - &.components-button:active { - color: $gray-100; - background-color: $gray-900; - border-color: $gray-900; - } + // This should match the value of $color-palette-circle-size. + height: 28px; + width: 28px; } From 36b235395186d4e101a9a593cd4bfe2e4f992868 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Fri, 20 Jan 2023 15:33:01 +0800 Subject: [PATCH 4/8] fix issues with global settings --- .../components/global-styles/shadow-panel.js | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js index 46fa9923f52e4e..ccf93668a9de55 100644 --- a/packages/edit-site/src/components/global-styles/shadow-panel.js +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -23,12 +23,16 @@ import { import { __ } from '@wordpress/i18n'; import { shadow as shadowIcon, Icon, check } from '@wordpress/icons'; import { useCallback } from '@wordpress/element'; +import { experiments as blockEditorExperiments } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { getSupportedGlobalStylesPanels, useStyle, useSetting } from './hooks'; +import { getSupportedGlobalStylesPanels } from './hooks'; import { IconWithCurrentColor } from './icon-with-current-color'; +import { unlock } from '../../experiments'; + +const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments ); export function useHasShadowControl( name ) { const supports = getSupportedGlobalStylesPanels( name ); @@ -36,8 +40,15 @@ export function useHasShadowControl( name ) { } export default function ShadowPanel( { name, variationPath = '' } ) { - const [ shadow, setShadow ] = useStyle( `${ variationPath }shadow`, name ); - const [ userShadow ] = useStyle( `${ variationPath }shadow`, name, 'user' ); + const [ shadow, setShadow ] = useGlobalStyle( + `${ variationPath }shadow`, + name + ); + const [ userShadow ] = useGlobalStyle( + `${ variationPath }shadow`, + name, + 'user' + ); const hasShadow = () => !! userShadow; const resetShadow = () => setShadow( undefined ); @@ -111,9 +122,11 @@ function renderShadowToggle() { } function ShadowPopoverContainer( { shadow, onShadowChange } ) { - const [ defaultShadows ] = useSetting( 'shadow.presets.default' ); - const [ themeShadows ] = useSetting( 'shadow.presets.theme' ); - const [ defaultPresetsEnabled ] = useSetting( 'shadow.defaultPresets' ); + const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' ); + const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' ); + const [ defaultPresetsEnabled ] = useGlobalSetting( + 'shadow.defaultPresets' + ); return (
From 548943dbb3ec8fac1340667811e6ba525201b928 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 24 Jan 2023 19:47:31 +0530 Subject: [PATCH 5/8] clip shadow outside 6px boundary --- .../components/global-styles/shadow-panel.js | 63 ++++++++----------- .../src/components/global-styles/style.scss | 14 ++++- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js index ccf93668a9de55..238d0bd00770d8 100644 --- a/packages/edit-site/src/components/global-styles/shadow-panel.js +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -18,7 +18,6 @@ import { Dropdown, __experimentalDropdownContentWrapper as DropdownContentWrapper, Button, - BaseControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { shadow as shadowIcon, Icon, check } from '@wordpress/icons'; @@ -60,7 +59,7 @@ export default function ShadowPanel( { name, variationPath = '' } ) { return ( - { __( 'Drop shadow' ) } + { __( 'Shadow' ) } @@ -128,21 +127,17 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) { 'shadow.defaultPresets' ); + const shadows = [ + ...( defaultPresetsEnabled ? defaultShadows : [] ), + ...( themeShadows || [] ), + ]; + return (
- { __( 'Drop shadows' ) } - { defaultPresetsEnabled && ( - - ) } + { __( 'Shadows' ) } @@ -151,35 +146,27 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) { ); } -function ShadowPresets( { label, presets, activeShadow, onSelect } ) { +function ShadowPresets( { presets, activeShadow, onSelect } ) { return ! presets ? null : ( -
- - { label } - - - - { presets.map( ( { name, shadow }, i ) => ( - - onSelect( - shadow === activeShadow ? undefined : shadow - ) - } - shadow={ shadow } - /> - ) ) } - -
+ + { presets.map( ( { name, shadow }, i ) => ( + + onSelect( shadow === activeShadow ? undefined : shadow ) + } + shadow={ shadow } + /> + ) ) } + ); } function ShadowIndicator( { label, isActive, onSelect, shadow } ) { return ( - <> +
- +
); } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index c83b8da39dfe79..f21dd1f612b77d 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -209,6 +209,15 @@ $block-preview-height: 150px; } } +// wrapper to clip the shadow beyond 6px +.edit-site-global-styles__shadow-indicator-wrapper { + padding: 6px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + // These styles are similar to the color palette. .edit-site-global-styles__shadow-indicator { color: $gray-800; @@ -217,7 +226,6 @@ $block-preview-height: 150px; cursor: pointer; padding: 0; - // This should match the value of $color-palette-circle-size. - height: 28px; - width: 28px; + height: 24px; + width: 24px; } From 22f98d26407ac5adbe41d58aa68d9085445ddda4 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 24 Jan 2023 19:48:18 +0530 Subject: [PATCH 6/8] update default shadow presets --- lib/theme.json | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index e55e4583e64284..8e60c945456b1b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -190,14 +190,29 @@ "defaultPresets": true, "presets": [ { - "name": "Elevated", - "slug": "elevated", - "shadow": "rgba(0, 0, 0, 0.4) 0 2rem 4rem 0, rgba(0, 0, 0, 0.6) 0 1rem 2rem 0" + "name": "Natural", + "slug": "natural", + "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }, { - "name": "Near", - "slug": "near", - "shadow": "rgba(0, 0, 0, 0.3) 0 0.25rem 0.5rem 0, rgba(0, 0, 0, 0.4) 0 0.05rem 0.2rem 0px" + "name": "Deep", + "slug": "deep", + "shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)" + }, + { + "name": "Sharp", + "slug": "sharp", + "shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)" + }, + { + "name": "Outlined", + "slug": "outlined", + "shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)" + }, + { + "name": "Crisp", + "slug": "crisp", + "shadow": "6px 6px 0px rgba(0, 0, 0, 1)" } ] }, From 31c6070d8ba8904db18d606fa3c5871668bc0354 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 31 Jan 2023 17:59:25 +0530 Subject: [PATCH 7/8] update variation path --- .../edit-site/src/components/global-styles/screen-border.js | 4 ++-- .../edit-site/src/components/global-styles/shadow-panel.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js index 9239e268735c52..b0d07638242675 100644 --- a/packages/edit-site/src/components/global-styles/screen-border.js +++ b/packages/edit-site/src/components/global-styles/screen-border.js @@ -14,7 +14,7 @@ import ShadowPanel, { useHasShadowControl } from './shadow-panel'; function ScreenBorder( { name, variation = '' } ) { const hasBorderPanel = useHasBorderPanel( name ); - const variationClassName = getVariationClassName( variationPath ); + const variationClassName = getVariationClassName( variation ); const hasShadowPanel = useHasShadowControl( name ); return ( <> @@ -24,7 +24,7 @@ function ScreenBorder( { name, variation = '' } ) { ) } { hasShadowPanel && ( - + ) } ); diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js index 238d0bd00770d8..038e2599620b52 100644 --- a/packages/edit-site/src/components/global-styles/shadow-panel.js +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -38,13 +38,13 @@ export function useHasShadowControl( name ) { return supports.includes( 'shadow' ); } -export default function ShadowPanel( { name, variationPath = '' } ) { +export default function ShadowPanel( { name, variation = '' } ) { const [ shadow, setShadow ] = useGlobalStyle( - `${ variationPath }shadow`, + `${ variation }shadow`, name ); const [ userShadow ] = useGlobalStyle( - `${ variationPath }shadow`, + `${ variation }shadow`, name, 'user' ); From 58d55f1d25e6420fef0af4892fad7afe483cfca6 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 1 Feb 2023 11:43:47 +0530 Subject: [PATCH 8/8] fix block variation styles for shadow --- .../src/components/global-styles/shadow-panel.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/shadow-panel.js b/packages/edit-site/src/components/global-styles/shadow-panel.js index 038e2599620b52..7d7b6a381564ba 100644 --- a/packages/edit-site/src/components/global-styles/shadow-panel.js +++ b/packages/edit-site/src/components/global-styles/shadow-panel.js @@ -39,15 +39,9 @@ export function useHasShadowControl( name ) { } export default function ShadowPanel( { name, variation = '' } ) { - const [ shadow, setShadow ] = useGlobalStyle( - `${ variation }shadow`, - name - ); - const [ userShadow ] = useGlobalStyle( - `${ variation }shadow`, - name, - 'user' - ); + const prefix = variation ? `variations.${ variation }.` : ''; + const [ shadow, setShadow ] = useGlobalStyle( `${ prefix }shadow`, name ); + const [ userShadow ] = useGlobalStyle( `${ prefix }shadow`, name, 'user' ); const hasShadow = () => !! userShadow; const resetShadow = () => setShadow( undefined );