From fe51bd08684462690988de7ec61a3cdda083710a Mon Sep 17 00:00:00 2001
From: Mike Selander <mikeselander@gmail.com>
Date: Tue, 30 Oct 2018 08:54:13 -0600
Subject: [PATCH] Filter DropZone and MediaPlaceholder components (#11184)

* Export Media Placeholder withFilters

* Export Block Drop Zone withFilters

* Update test snapshots

* Appropriately name DropZone filter

* Add super-simple README files

* Move withFilters call into the compose function

* Update README.md

* Update README.md
---
 .../src/components/block-drop-zone/README.md  | 30 +++++++++++++++++++
 .../src/components/block-drop-zone/index.js   |  8 +++--
 .../test/__snapshots__/index.js.snap          |  6 ++--
 .../components/media-placeholder/README.md    | 30 +++++++++++++++++++
 .../src/components/media-placeholder/index.js |  3 +-
 5 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 packages/editor/src/components/block-drop-zone/README.md
 create mode 100644 packages/editor/src/components/media-placeholder/README.md

diff --git a/packages/editor/src/components/block-drop-zone/README.md b/packages/editor/src/components/block-drop-zone/README.md
new file mode 100644
index 0000000000000..ed979c19c184a
--- /dev/null
+++ b/packages/editor/src/components/block-drop-zone/README.md
@@ -0,0 +1,30 @@
+BlockDropZone
+===========
+
+`BlockDropZone` is a React component that renders a container which allows a user to drag media into the editor and immediately place it.
+
+## Setup
+
+It includes a `wp.hooks` filter `editor.BlockDropZone` that enables developers to replace or extend it.
+
+_Example:_
+
+Replace implementation of the drop zone:
+
+```js
+function replaceBlockDropZone() { 
+	return function() { 
+		return wp.element.createElement( 
+			'div', 
+			{}, 
+			'The replacement contents or components.' 
+		); 
+	} 
+} 
+
+wp.hooks.addFilter( 
+	'editor.BlockDropZone', 
+	'my-plugin/replace-block-drop-zone', 
+	replaceBlockDropZone
+);
+```
diff --git a/packages/editor/src/components/block-drop-zone/index.js b/packages/editor/src/components/block-drop-zone/index.js
index 5c4df43bb4ad5..885a54fe5a4d7 100644
--- a/packages/editor/src/components/block-drop-zone/index.js
+++ b/packages/editor/src/components/block-drop-zone/index.js
@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { DropZone } from '@wordpress/components';
+import {
+	DropZone,
+	withFilters,
+} from '@wordpress/components';
 import {
 	rawHandler,
 	getBlockTransforms,
@@ -149,5 +152,6 @@ export default compose(
 			isLocked: !! getTemplateLock( rootClientId ),
 			getClientIdsOfDescendants,
 		};
-	} )
+	} ),
+	withFilters( 'editor.BlockDropZone' )
 )( BlockDropZone );
diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
index a3b6b410ce3ee..46c017374b514 100644
--- a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -5,7 +5,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
-  <WithDispatch(WithSelect(BlockDropZone)) />
+  <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
@@ -34,7 +34,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
-  <WithDispatch(WithSelect(BlockDropZone)) />
+  <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
@@ -56,7 +56,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   className="wp-block editor-default-block-appender"
   data-root-client-id=""
 >
-  <WithDispatch(WithSelect(BlockDropZone)) />
+  <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <input
     aria-label="Add block"
     className="editor-default-block-appender__content"
diff --git a/packages/editor/src/components/media-placeholder/README.md b/packages/editor/src/components/media-placeholder/README.md
new file mode 100644
index 0000000000000..d9d2483a7c71d
--- /dev/null
+++ b/packages/editor/src/components/media-placeholder/README.md
@@ -0,0 +1,30 @@
+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
+
+It includes a `wp.hooks` filter `editor.MediaPlaceholder` that enables developers to replace or extend it.
+
+_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', 
+	'my-plugin/replace-media-placeholder',
+	replaceMediaPlaceholder
+);
+```
diff --git a/packages/editor/src/components/media-placeholder/index.js b/packages/editor/src/components/media-placeholder/index.js
index c4d4feab34d5a..9294141b82363 100644
--- a/packages/editor/src/components/media-placeholder/index.js
+++ b/packages/editor/src/components/media-placeholder/index.js
@@ -13,6 +13,7 @@ import {
 	Placeholder,
 	DropZone,
 	IconButton,
+	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
@@ -233,4 +234,4 @@ class MediaPlaceholder extends Component {
 	}
 }
 
-export default MediaPlaceholder;
+export default withFilters( 'editor.MediaPlaceholder' )( MediaPlaceholder );