[CYS] Add the possibility to remove the logo (#41393)

* Add the possibility to remove the logo

* Add changelog

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx

@@ -11,10 +11,13 @@ import {
 	DropZone,
 	Button,
 	Spinner,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
-import { Icon, upload } from '@wordpress/icons';
+import { Icon, upload, moreVertical } from '@wordpress/icons';
 // @ts-ignore No types for this exist yet.
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -71,14 +74,14 @@ const useLogoEdit = ( {
 	// @ts-ignore No types for this exist yet.
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const setIcon = ( newValue: string | undefined ) =>
+	const setIcon = ( newValue: string | undefined | null ) =>
 		// The new value needs to be `null` to reset the Site Icon.
 		editEntityRecord( 'root', 'site', undefined, {
 			site_icon: newValue ?? null,
 		} );
 
 	const setLogo = (
-		newValue: string | undefined,
+		newValue: string | undefined | null,
 		shouldForceSync = false
 	) => {
 		// `shouldForceSync` is used to force syncing when the attribute
@@ -144,11 +147,17 @@ const useLogoEdit = ( {
 		} );
 	};
 
+	const onRemoveLogo = () => {
+		setLogo( null );
+		setAttributes( { width: undefined } );
+	};
+
 	return {
 		onFilesDrop,
 		onInitialSelectLogo,
 		setIcon,
 		siteIconId,
+		onRemoveLogo,
 	};
 };
 
@@ -408,6 +417,12 @@ export const SidebarNavigationScreenLogo = () => {
 			updateBlockAttributes( clientId, newAttributes )
 		);
 	};
+
+	const { onInitialSelectLogo, onRemoveLogo } = useLogoEdit( {
+		shouldSyncIcon: attributes.shouldSyncIcon,
+		setAttributes,
+	} );
+
 	const isLoading =
 		siteLogoId === undefined ||
 		isRequestingMediaItem ||
@@ -422,8 +437,75 @@ export const SidebarNavigationScreenLogo = () => {
 			) }
 			content={
 				<div className="woocommerce-customize-store__sidebar-logo-content">
-					<div className="woocommerce-customize-store__sidebar-group-header">
+					<div className="woocommerce-customize-store__sidebar-group-header woocommerce-customize-store__logo-header-container">
-						{ __( 'Logo', 'woocommerce' ) }
+						<span>{ __( 'Logo', 'woocommerce' ) }</span>
+						{ siteLogoId && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={ __( 'Options', 'woocommerce' ) }
+								className="woocommerce-customize-store__logo-dropdown-menu"
+								popoverProps={ {
+									className:
+										'woocommerce-customize-store__logo-dropdown-popover',
+									position: 'bottom left',
+								} }
+							>
+								{ ( { onClose } ) => (
+									<>
+										<MenuGroup className="woocommerce-customize-store__logo-menu-group">
+											<MediaUploadCheck>
+												<MediaUpload
+													onSelect={ (
+														media: Parameters<
+															typeof onInitialSelectLogo
+														>[ 0 ]
+													) => {
+														onInitialSelectLogo(
+															media
+														);
+														onClose();
+													} }
+													allowedTypes={
+														ALLOWED_MEDIA_TYPES
+													}
+													render={ ( {
+														open,
+													}: {
+														open: () => void;
+													} ) => (
+														<MenuItem
+															onClick={ () => {
+																open();
+															} }
+														>
+															{ __(
+																'Replace',
+																'woocommerce'
+															) }
+														</MenuItem>
+													) }
+												/>
+											</MediaUploadCheck>
+										</MenuGroup>
+
+										<MenuGroup className="woocommerce-customize-store__logo-menu-group">
+											<MenuItem
+												className="woocommerce-customize-store__logo-menu-item-delete"
+												onClick={ () => {
+													onClose();
+													onRemoveLogo();
+												} }
+											>
+												{ __(
+													'Delete',
+													'woocommerce'
+												) }
+											</MenuItem>
+										</MenuGroup>
+									</>
+								) }
+							</DropdownMenu>
+						) }
 					</div>
 					<LogoEdit
 						siteLogoId={ siteLogoId }

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -731,3 +731,39 @@
 		}
 	}
 }
+
+.woocommerce-customize-store__logo-header-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.components-dropdown-menu__menu .woocommerce-customize-store__logo-menu-group.components-menu-group {
+	border-top: 0;
+	padding: 0 8px;
+
+	.components-menu-item__button {
+		width: 112px;
+	}
+
+	.components-menu-item__item {
+		min-width: auto;
+	}
+}
+
+// Hack to hide when the media modal is open
+// Otherwise in Firefox the popover remains visible on top of the modal
+// Changing the z-index of Popovers have wider implications.
+.modal-open .woocommerce-customize-store__logo-dropdown-popover {
+	display: none;
+}
+
+.woocommerce-customize-store__logo-dropdown-popover {
+	.components-popover__content {
+		padding: 16px 8px;
+	}
+}
+
+.woocommerce-customize-store__logo-menu-item-delete {
+	color: #cc1818;
+}

plugins/woocommerce/changelog/add-remove-cys-logo

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add the possibility to remove the logo