Added Image Removal Functionality and Styling

10up · Feb 27, 2024 · 5f579fd · 5f579fd
1 parent 7259d12
commit 5f579fd
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/assets/css/podcasting-editor-screen.css b/assets/css/podcasting-editor-screen.css
@@ -2,3 +2,12 @@
 .components-base-control {
 	width: 100%;
 }
+.cover-art-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+.cover-art-container button {
+	margin: 10px 0;
+}
diff --git a/assets/js/edit.js b/assets/js/edit.js
@@ -47,7 +47,11 @@ function useFeaturedImage() {
         editPost({ featured_media: imageId });
     };
 
-    return { featuredImageUrl, setFeaturedImage };
+	const removeFeaturedImage = () => {
+		editPost({ featured_media: 0 });
+	};
+
+    return { featuredImageUrl, setFeaturedImage, removeFeaturedImage };
 }
 
 class Edit extends Component {
@@ -74,7 +78,8 @@ class Edit extends Component {
 			isSelected,
 			attributes,
 			featuredImageUrl,
-			setFeaturedImage
+			setFeaturedImage,
+			removeFeaturedImage
 		} = this.props;
 		const { caption, explicit } = attributes;
 		const duration = attributes.duration || '';
@@ -304,20 +309,29 @@ class Edit extends Component {
 						</PanelRow>
 						<h3 style={{marginTop: '20px'}}>{__('Cover Image', 'simple-podcasting')}</h3>
 						<p>{__('The featured image of the current post is used as the episode cover art. Please select a featured image to set it.', 'simple-podcasting')}</p>
-						<PanelRow>
+						<PanelRow className="cover-art-container">
 							{featuredImageUrl && (
 								<img src={featuredImageUrl} alt="Cover Image" />
 							)}
 
 							<MediaUploadCheck>
 								<MediaUpload
 									onSelect={onUpdateImage}
-									allowedTypes={['image/gif']}
+									allowedTypes={['image']}
 									render={({ open }) => (
-										<Button onClick={open}>{__('Select Cover Art', 'simple-podcasting')}</Button>
+										<Button isSecondary onClick={open}>
+											{featuredImageUrl ?
+											__('Replace Cover Art', 'simple-podcasting')
+											:
+											__('Select Cover Art', 'simple-podcasting')
+											}
+										</Button>
 									)}
 								/>
 							</MediaUploadCheck>
+							{featuredImageUrl && (
+								<Button isLink isDestructive onClick={removeFeaturedImage}>{__('Delete Cover Art', 'simple-podcasting')}</Button>
+							)}
 						</PanelRow>
 					</PanelBody>
 				</InspectorControls>