Fix: Ensure consistency in editor tools for navigation buttons and delete options

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;

packages/edit-site/src/components/global-styles/shadows-panel.js

@@ -8,10 +8,17 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { plus, Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import {
+	plus,
+	Icon,
+	chevronLeft,
+	chevronRight,
+	moreVertical,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,8 +28,11 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import ScreenHeader from './header';
 import { getNewIndexFromPresets } from './utils';
+import { useState } from '@wordpress/element';
+import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
 
@@ -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,14 +102,22 @@ export default function ShadowsPanel() {
 						category="custom"
 						canCreate
 						onCreate={ onCreateShadow }
+						onReset={ toggleResetDialog }
 					/>
 				</VStack>
 			</div>
 		</>
 	);
 }
 
-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,26 @@ function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
 						/>
 					</FlexItem>
 				) }
+				{ !! shadows?.length && category === 'custom' && (
+					<Menu>
+						<Menu.TriggerButton
+							render={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Shadow options' ) }
+								/>
+							}
+						/>
+						<Menu.Popover>
+							<Menu.Item onClick={ onReset }>
+								<Menu.ItemLabel>
+									{ __( 'Remove all custom shadows' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popover>
+					</Menu>
+				) }
 			</HStack>
 			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>
@@ -138,9 +195,7 @@ function ShadowItem( { shadow, category } ) {
 		>
 			<HStack>
 				<FlexItem>{ shadow.name }</FlexItem>
-				<FlexItem display="flex">
-					<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
-				</FlexItem>
+				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 			</HStack>
 		</NavigationButtonAsItem>
 	);