add unset option to shadows dropdown

WordPress · Feb 8, 2024 · 8624a1c · 8624a1c
1 parent a3a2a92
commit 8624a1c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -23,7 +23,14 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const themeShadows = settings?.shadow?.presets?.theme;
 	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
 
+	const unsetShadow = {
+		name: __( 'Unset' ),
+		slug: 'unset',
+		shadow: 'none',
+	};
+
 	const shadows = [
+		unsetShadow,
 		...( defaultPresetsEnabled ? defaultShadows : [] ),
 		...( themeShadows || [] ),
 	];
@@ -50,6 +57,7 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
+					type={ slug === 'unset' ? 'unset' : 'preset' }
 					onSelect={ () =>
 						onSelect( shadow === activeShadow ? undefined : shadow )
 					}
@@ -60,11 +68,13 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 	);
 }
 
-export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
 		<div className="block-editor-global-styles__shadow-indicator-wrapper">
 			<Button
-				className="block-editor-global-styles__shadow-indicator"
+				className={ `block-editor-global-styles__shadow-indicator ${
+					type === 'unset' ? 'unset' : ''
+				}` }
 				onClick={ onSelect }
 				label={ label }
 				style={ { boxShadow: shadow } }

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -41,6 +41,10 @@
 	width: $button-size-small;
 }
 
+.block-editor-global-styles__shadow-indicator.unset {
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
 	font-family: $editor_html_font;
 	// CSS input is always LTR regardless of language.