From ef4128b00ce98e1d88199ae1647b9b21c11cb9b2 Mon Sep 17 00:00:00 2001
From: sarthaknagoshe2002 <sarthaknagoshe2002@gmail.com>
Date: Sat, 23 Nov 2024 21:41:52 +0530
Subject: [PATCH 1/4] fix: ensure consistency in editor tools for navigation
 buttons and delete options

---
 .../confirm-reset-shadow-dialog.js            | 37 ++++++++++
 .../components/global-styles/shadows-panel.js | 67 +++++++++++++++++--
 2 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 packages/edit-site/src/components/global-styles/confirm-reset-shadow-dialog.js

diff --git a/packages/edit-site/src/components/global-styles/confirm-reset-shadow-dialog.js b/packages/edit-site/src/components/global-styles/confirm-reset-shadow-dialog.js
new file mode 100644
index 00000000000000..b8f5b77010ff6d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/confirm-reset-shadow-dialog.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function ConfirmResetShadowDialog( {
+	text,
+	confirmButtonText,
+	isOpen,
+	toggleOpen,
+	onConfirm,
+} ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		onConfirm();
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ confirmButtonText }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ text }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmResetShadowDialog;
diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index 43e0c063f492b8..468040e90379d8 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -8,10 +8,16 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { plus, shadow as shadowIcon } from '@wordpress/icons';
+import {
+	plus,
+	shadow as shadowIcon,
+	chevronRight,
+	moreVertical,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,6 +27,10 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import ScreenHeader from './header';
 import { getNewIndexFromPresets } from './utils';
+import { IconWithCurrentColor } from './icon-with-current-color';
+const { Menu } = unlock( componentsPrivateApis );
+import { useState } from '@wordpress/element';
+import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
@@ -40,8 +50,27 @@ export default function ShadowsPanel() {
 		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
 	};
 
+	const handleResetShadows = () => {
+		setCustomShadows( [] );
+	};
+
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
 	return (
 		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetShadowDialog
+					text={ __(
+						'Are you sure you want to remove all custom shadows?'
+					) }
+					confirmButtonText={ __( 'Remove' ) }
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetShadows }
+				/>
+			) }
 			<ScreenHeader
 				title={ __( 'Shadows' ) }
 				description={ __(
@@ -73,6 +102,7 @@ export default function ShadowsPanel() {
 						category="custom"
 						canCreate
 						onCreate={ onCreateShadow }
+						onReset={ toggleResetDialog }
 					/>
 				</VStack>
 			</div>
@@ -80,7 +110,14 @@ export default function ShadowsPanel() {
 	);
 }
 
-function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
+function ShadowList( {
+	label,
+	shadows,
+	category,
+	canCreate,
+	onCreate,
+	onReset,
+} ) {
 	const handleAddShadow = () => {
 		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
 		onCreate( {
@@ -115,6 +152,23 @@ function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
 						/>
 					</FlexItem>
 				) }
+				{ !! shadows?.length && category === 'custom' && (
+					<Menu
+						trigger={
+							<Button
+								size="small"
+								icon={ moreVertical }
+								label={ __( 'shadow options' ) }
+							/>
+						}
+					>
+						<Menu.Item onClick={ onReset }>
+							<Menu.ItemLabel>
+								{ __( 'Remove all shadows' ) }
+							</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu>
+				) }
 			</HStack>
 			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>
@@ -135,9 +189,14 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			icon={ shadowIcon }
 		>
-			{ shadow.name }
+			<HStack justify="space-between">
+				<HStack justify="flex-start">
+					<IconWithCurrentColor icon={ shadowIcon } />
+					<FlexItem> { shadow.name } </FlexItem>
+				</HStack>
+				<IconWithCurrentColor icon={ chevronRight } />
+			</HStack>
 		</NavigationButtonAsItem>
 	);
 }

From 9b0584833b1cd1e67fccd32ed6f4c4f041355c26 Mon Sep 17 00:00:00 2001
From: sarthaknagoshe2002 <sarthaknagoshe2002@gmail.com>
Date: Fri, 20 Dec 2024 18:15:51 +0530
Subject: [PATCH 2/4] Fix: remove shadow icon

---
 .../src/components/global-styles/shadows-panel.js          | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index b84911ae172ce7..8ee090cc7a9bb2 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -18,7 +18,6 @@ import {
 	chevronLeft,
 	chevronRight,
 	moreVertical,
-	shadow as shadowIcon,
 } from '@wordpress/icons';
 
 /**
@@ -29,7 +28,6 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import ScreenHeader from './header';
 import { getNewIndexFromPresets } from './utils';
-import { IconWithCurrentColor } from './icon-with-current-color';
 import { useState } from '@wordpress/element';
 import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
 
@@ -196,10 +194,7 @@ function ShadowItem( { shadow, category } ) {
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
 		>
 			<HStack justify="space-between">
-				<HStack justify="flex-start">
-					<IconWithCurrentColor icon={ shadowIcon } />
-					<FlexItem>{ shadow.name }</FlexItem>
-				</HStack>
+				<FlexItem>{ shadow.name }</FlexItem>
 				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 			</HStack>
 		</NavigationButtonAsItem>

From 56a5e79b1c085f8770fca288b5d1434f875aa1f1 Mon Sep 17 00:00:00 2001
From: sarthaknagoshe2002 <sarthaknagoshe2002@gmail.com>
Date: Fri, 20 Dec 2024 18:33:36 +0530
Subject: [PATCH 3/4] Fix: remove redandunt styling

---
 .../edit-site/src/components/global-styles/shadows-panel.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index 8ee090cc7a9bb2..6d355363243811 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -193,7 +193,7 @@ function ShadowItem( { shadow, category } ) {
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
 		>
-			<HStack justify="space-between">
+			<HStack>
 				<FlexItem>{ shadow.name }</FlexItem>
 				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 			</HStack>

From 5908d4f0add23dff3aebad40998269132b2d9b79 Mon Sep 17 00:00:00 2001
From: Sarthak Nagoshe <83178197+sarthaknagoshe2002@users.noreply.github.com>
Date: Fri, 20 Dec 2024 18:35:48 +0530
Subject: [PATCH 4/4] Fix: use lower case in confirmation message

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
---
 .../edit-site/src/components/global-styles/shadows-panel.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
index 6d355363243811..8e93ab2b15fb0a 100644
--- a/packages/edit-site/src/components/global-styles/shadows-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -63,7 +63,7 @@ export default function ShadowsPanel() {
 			{ isResetDialogOpen && (
 				<ConfirmResetShadowDialog
 					text={ __(
-						'Are you sure you want to remove all custom Shadows?'
+						'Are you sure you want to remove all custom shadows?'
 					) }
 					confirmButtonText={ __( 'Remove' ) }
 					isOpen={ isResetDialogOpen }