[Mobile] Cover: Adds Clear media button in block settings (#23794)

* Adds Clear media button in cover block settings

packages/block-library/src/cover/edit.native.js

@@ -18,6 +18,7 @@ import {
 	ImageWithFocalPoint,
 	PanelBody,
 	RangeControl,
+	BottomSheet,
 	ToolbarButton,
 	ToolbarGroup,
 	Gradient,
@@ -35,7 +36,7 @@ import {
 	__experimentalUseGradient,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { withSelect, withDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { cover as icon, replace } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
@@ -75,6 +76,7 @@ const Cover = ( {
 	onFocus,
 	overlayColor,
 	setAttributes,
+	closeSettingsBottomSheet,
 } ) => {
 	const {
 		backgroundType,
@@ -225,6 +227,20 @@ const Cover = ( {
 					style={ styles.rangeCellContainer }
 				/>
 			</PanelBody>
+
+			{ url ? (
+				<PanelBody title={ __( 'Media' ) }>
+					<BottomSheet.Cell
+						leftAlign
+						label={ __( 'Clear Media' ) }
+						labelStyle={ styles.clearMediaButton }
+						onPress={ () => {
+							setAttributes( { id: undefined, url: undefined } );
+							closeSettingsBottomSheet();
+						} }
+					/>
+				</PanelBody>
+			) : null }
 		</InspectorControls>
 	);
 
@@ -365,5 +381,13 @@ export default compose( [
 			isParentSelected: selectedBlockClientId === clientId,
 		};
 	} ),
+	withDispatch( ( dispatch ) => {
+		return {
+			closeSettingsBottomSheet() {
+				dispatch( 'core/edit-post' ).closeGeneralSidebar();
+			},
+		};
+	} ),
+
 	withPreferredColorScheme,
 ] )( Cover );

packages/block-library/src/cover/style.native.scss

@@ -71,3 +71,7 @@
 	width: 100%;
 	height: 100%;
 }
+
+.clearMediaButton {
+	color: $alert-red;
+}