From d829a05253187e0e3915c0683945c6f503920b91 Mon Sep 17 00:00:00 2001
From: AKSHAT2802 <akshat.kakkad2802@gmail.com>
Date: Thu, 9 Jan 2025 12:51:54 +0530
Subject: [PATCH 1/2] Add index.story.js for media placeholder component

---
 .../media-placeholder/stories/index.story.js  | 126 ++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 packages/block-editor/src/components/media-placeholder/stories/index.story.js

diff --git a/packages/block-editor/src/components/media-placeholder/stories/index.story.js b/packages/block-editor/src/components/media-placeholder/stories/index.story.js
new file mode 100644
index 0000000000000..2f00b5e963934
--- /dev/null
+++ b/packages/block-editor/src/components/media-placeholder/stories/index.story.js
@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { MediaPlaceholder } from '@wordpress/block-editor';
+
+const meta = {
+	title: 'BlockEditor/MediaPlaceholder',
+	component: MediaPlaceholder,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: __(
+					'A placeholder for media in the block editor, allowing users to select or upload media files.'
+				),
+			},
+		},
+	},
+	argTypes: {
+		allowedTypes: {
+			control: { type: 'array' },
+			description: __(
+				'Array of allowed media types for selection (e.g., "image", "audio").'
+			),
+			table: {
+				type: { summary: 'array' },
+				defaultValue: { summary: '["image"]' },
+			},
+		},
+		multiple: {
+			control: { type: 'boolean' },
+			description: __(
+				'Whether multiple media can be selected/uploaded.'
+			),
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		onSelect: {
+			control: { type: 'function' },
+			description: __( 'Callback when media is selected/uploaded.' ),
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+		labels: {
+			control: { type: 'object' },
+			description: __(
+				'Labels for the media placeholder, such as title and instructions.'
+			),
+			table: {
+				type: { summary: 'object' },
+				defaultValue: { summary: '{}' },
+			},
+		},
+		disableDropZone: {
+			control: { type: 'boolean' },
+			description: __( 'Disables the drag-and-drop zone for media.' ),
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+	},
+	args: {
+		allowedTypes: [ 'image' ],
+		multiple: false,
+		onSelect: () => {},
+		labels: { title: 'Select an image' },
+		disableDropZone: false,
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( args ) {
+		return (
+			<MediaPlaceholder { ...args }>
+				<Button variant="primary">
+					{ __( 'Upload or Select Media' ) }
+				</Button>
+			</MediaPlaceholder>
+		);
+	},
+};
+
+export const MultipleSelection = {
+	render: function Template( args ) {
+		return (
+			<MediaPlaceholder { ...args } multiple>
+				<Button variant="primary">
+					{ __( 'Select Multiple Media' ) }
+				</Button>
+			</MediaPlaceholder>
+		);
+	},
+};
+
+export const WithCustomLabels = {
+	render: function Template( args ) {
+		return (
+			<MediaPlaceholder
+				{ ...args }
+				labels={ { title: 'Upload your custom image' } }
+			>
+				<Button variant="primary">
+					{ __( 'Upload Custom Image' ) }
+				</Button>
+			</MediaPlaceholder>
+		);
+	},
+};
+
+export const WithoutDropZone = {
+	render: function Template( args ) {
+		return (
+			<MediaPlaceholder { ...args } disableDropZone>
+				<Button variant="primary">{ __( 'Upload Media' ) }</Button>
+			</MediaPlaceholder>
+		);
+	},
+};

From c6fce3bdae32d16a30732a60e2d4470922b50a7a Mon Sep 17 00:00:00 2001
From: AKSHAT2802 <akshat.kakkad2802@gmail.com>
Date: Fri, 10 Jan 2025 11:12:43 +0530
Subject: [PATCH 2/2] fix: add array instead of selection list in allowed
 types.

---
 .../src/components/media-placeholder/stories/index.story.js   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/media-placeholder/stories/index.story.js b/packages/block-editor/src/components/media-placeholder/stories/index.story.js
index 2f00b5e963934..60d0b289379e7 100644
--- a/packages/block-editor/src/components/media-placeholder/stories/index.story.js
+++ b/packages/block-editor/src/components/media-placeholder/stories/index.story.js
@@ -21,9 +21,7 @@ const meta = {
 	argTypes: {
 		allowedTypes: {
 			control: { type: 'array' },
-			description: __(
-				'Array of allowed media types for selection (e.g., "image", "audio").'
-			),
+			description: __( 'Array of allowed media types for replacing.' ),
 			table: {
 				type: { summary: 'array' },
 				defaultValue: { summary: '["image"]' },