From 8624a1c94db8235cf53763cf9d0e30062abfb465 Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Thu, 8 Feb 2024 14:04:46 +0530
Subject: [PATCH] add unset option to shadows dropdown

---
 .../global-styles/shadow-panel-components.js       | 14 ++++++++++++--
 .../src/components/global-styles/style.scss        |  4 ++++
 2 files changed, 16 insertions(+), 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
index 6e4e3a15b184d8..671288a561e6d4 100644
--- 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
index 010c5faaefff44..273de354a4e509 100644
--- 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.