From 6d5a5374a0d2c42e18f113a5c056d4cfa1481290 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Mon, 21 Jan 2019 06:54:38 -0800
Subject: [PATCH] Add example usage for MediaPlaceholder (#13389)

* Add example usage for MediaPlaceholder

Adds an example of how to use the MediaPlaceholder and setting
the url for an image attribute.

Fixes #13377

* Fixed code style
---
 .../components/media-placeholder/README.md    | 50 ++++++++++++++-----
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/media-placeholder/README.md b/packages/editor/src/components/media-placeholder/README.md
index d9d2483a7c71d6..2890d2f1f162a1 100644
--- a/packages/editor/src/components/media-placeholder/README.md
+++ b/packages/editor/src/components/media-placeholder/README.md
@@ -3,7 +3,31 @@ MediaPlaceholder
 
 `MediaPlaceholder` is a React component used to render either the media associated with a block, or an editing interface to replace the media for a block.
 
-## Setup
+## Usage
+
+An example usage which sets the URL of the selected image to `theImage` attributes.
+
+```
+const { MediaPlaceholder } = wp.editor;
+
+...
+
+	edit: ( { attributes, setAttributes } ) {
+		const mediaPlaceholder = <MediaPlaceholder
+			onSelect = {
+				( el ) => {
+					setAttributes( { theImage: el.url } );
+				}
+			}
+			allowedTypes = { [ 'image' ] }
+			multiple = { false }
+			labels = { { title: 'The Image' } }
+		/>;
+		...
+	}
+```
+
+## Extend
 
 It includes a `wp.hooks` filter `editor.MediaPlaceholder` that enables developers to replace or extend it.
 
@@ -12,18 +36,18 @@ _Example:_
 Replace implementation of the placeholder:
 
 ```js
-function replaceMediaPlaceholder() { 
-	return function() { 
-		return wp.element.createElement( 
-			'div', 
-			{}, 
-			'The replacement contents or components.' 
-		); 
-	} 
-} 
-
-wp.hooks.addFilter( 
-	'editor.MediaPlaceholder', 
+function replaceMediaPlaceholder() {
+	return function() {
+		return wp.element.createElement(
+			'div',
+			{},
+			'The replacement contents or components.'
+		);
+	}
+}
+
+wp.hooks.addFilter(
+	'editor.MediaPlaceholder',
 	'my-plugin/replace-media-placeholder',
 	replaceMediaPlaceholder
 );