From 6eff6af49b0148f407ebdc572b6a59329c725cda Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 21 Aug 2024 21:43:02 +0530
Subject: [PATCH 1/3] add an illustration placeholder in audio block

---
 packages/block-library/src/audio/edit.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 3c9f9e11c3b24..a7f6269edde83 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -13,6 +13,7 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	Placeholder,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -128,6 +129,22 @@ function AudioEdit( {
 	} );
 
 	if ( ! src && ! temporaryURL ) {
+		const placeholder = ( content ) => {
+			return (
+				<Placeholder
+					className="block-editor-media-placeholder"
+					withIllustration
+					icon={ icon }
+					label={ __( 'Audio' ) }
+					instructions={ __(
+						'Upload a audio file, pick one from your media library, or add one with a URL.'
+					) }
+				>
+					{ content }
+				</Placeholder>
+			);
+		};
+
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -138,6 +155,7 @@ function AudioEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
 					onError={ onUploadError }
+					placeholder={ placeholder }
 				/>
 			</div>
 		);

From a462d07451f77514d41aa65194d2ecfe8a8be4f6 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 21 Aug 2024 21:43:47 +0530
Subject: [PATCH 2/3] Hide illustration on block selection

---
 packages/block-library/src/audio/editor.scss | 21 ++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/block-library/src/audio/editor.scss b/packages/block-library/src/audio/editor.scss
index b898bd5928700..c993ec035414b 100644
--- a/packages/block-library/src/audio/editor.scss
+++ b/packages/block-library/src/audio/editor.scss
@@ -16,4 +16,25 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
+
+	// Show Placeholder style on-select.
+	&.is-selected .components-placeholder {
+		// Block UI appearance.
+		color: $gray-900;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border: none;
+
+		> svg {
+			opacity: 0;
+		}
+
+		.components-placeholder__illustration {
+			display: none;
+		}
+
+		&::before {
+			opacity: 0;
+		}
+	}
 }

From 1f8bc433f53cc431a0537ba1849d5b78a22dcc87 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Sun, 25 Aug 2024 11:25:23 +0530
Subject: [PATCH 3/3] Remove css to hide illustration on block select

---
 packages/block-library/src/audio/edit.js     |  2 +-
 packages/block-library/src/audio/editor.scss | 21 --------------------
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index a7f6269edde83..147c0e22cdcb5 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -133,7 +133,7 @@ function AudioEdit( {
 			return (
 				<Placeholder
 					className="block-editor-media-placeholder"
-					withIllustration
+					withIllustration={ ! isSingleSelected }
 					icon={ icon }
 					label={ __( 'Audio' ) }
 					instructions={ __(
diff --git a/packages/block-library/src/audio/editor.scss b/packages/block-library/src/audio/editor.scss
index c993ec035414b..b898bd5928700 100644
--- a/packages/block-library/src/audio/editor.scss
+++ b/packages/block-library/src/audio/editor.scss
@@ -16,25 +16,4 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
-
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
 }