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

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
+);
+```

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 );

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"

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
+);
+```

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 );