Use the editor settings to pass a mediaUpload handler (#14115)

* Use the editor settings to pass a mediaUpload handler * Update media block snapshots
WordPress · Feb 27, 2019 · 05570ff · 05570ff
1 parent 1ed9995
commit 05570ff
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 149 deletions.
diff --git a/packages/block-library/src/audio/test/__snapshots__/index.js.snap b/packages/block-library/src/audio/test/__snapshots__/index.js.snap
@@ -38,38 +38,6 @@ exports[`core/audio block edit matches snapshot 1`] = `
   <div
     class="components-placeholder__fieldset"
   >
-    <div
-      class="components-drop-zone"
-    />
-    <div
-      class="components-form-file-upload"
-    >
-      <button
-        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="dashicon dashicons-upload"
-          focusable="false"
-          height="20"
-          role="img"
-          viewBox="0 0 20 20"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
-          />
-        </svg>
-        Upload
-      </button>
-      <input
-        accept="audio/*"
-        style="display:none"
-        type="file"
-      />
-    </div>
     <div
       class="editor-media-placeholder__url-input-container"
     >

diff --git a/packages/block-library/src/cover/test/__snapshots__/index.js.snap b/packages/block-library/src/cover/test/__snapshots__/index.js.snap
@@ -37,39 +37,6 @@ exports[`core/cover block edit matches snapshot 1`] = `
   </div>
   <div
     class="components-placeholder__fieldset"
-  >
-    <div
-      class="components-drop-zone"
-    />
-    <div
-      class="components-form-file-upload"
-    >
-      <button
-        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="dashicon dashicons-upload"
-          focusable="false"
-          height="20"
-          role="img"
-          viewBox="0 0 20 20"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
-          />
-        </svg>
-        Upload
-      </button>
-      <input
-        accept="image/*,video/*"
-        style="display:none"
-        type="file"
-      />
-    </div>
-  </div>
+  />
 </div>
 `;
diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.js.snap
@@ -39,40 +39,6 @@ exports[`core/gallery block edit matches snapshot 1`] = `
   </div>
   <div
     class="components-placeholder__fieldset"
-  >
-    <div
-      class="components-drop-zone"
-    />
-    <div
-      class="components-form-file-upload"
-    >
-      <button
-        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="dashicon dashicons-upload"
-          focusable="false"
-          height="20"
-          role="img"
-          viewBox="0 0 20 20"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
-          />
-        </svg>
-        Upload
-      </button>
-      <input
-        accept="image/*"
-        multiple=""
-        style="display:none"
-        type="file"
-      />
-    </div>
-  </div>
+  />
 </div>
 `;
diff --git a/packages/block-library/src/video/test/__snapshots__/index.js.snap b/packages/block-library/src/video/test/__snapshots__/index.js.snap
@@ -38,38 +38,6 @@ exports[`core/video block edit matches snapshot 1`] = `
   <div
     class="components-placeholder__fieldset"
   >
-    <div
-      class="components-drop-zone"
-    />
-    <div
-      class="components-form-file-upload"
-    >
-      <button
-        class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="dashicon dashicons-upload"
-          focusable="false"
-          height="20"
-          role="img"
-          viewBox="0 0 20 20"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
-          />
-        </svg>
-        Upload
-      </button>
-      <input
-        accept="video/*"
-        style="display:none"
-        type="file"
-      />
-    </div>
     <div
       class="editor-media-placeholder__url-input-container"
     >

diff --git a/packages/editor/src/components/media-placeholder/index.js b/packages/editor/src/components/media-placeholder/index.js
@@ -16,7 +16,7 @@ import {
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
@@ -26,7 +26,6 @@ import { withSelect } from '@wordpress/data';
 import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
-import { mediaUpload } from '../../utils/';
 
 const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 	<URLPopover onClose={ onClose }>
@@ -104,7 +103,7 @@ export class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		const { onSelect, multiple, onError, allowedTypes } = this.props;
+		const { onSelect, multiple, onError, allowedTypes, mediaUpload } = this.props;
 		const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
 		mediaUpload( {
 			allowedTypes,
@@ -136,6 +135,7 @@ export class MediaPlaceholder extends Component {
 			notices,
 			allowedTypes = [],
 			hasUploadPermissions,
+			mediaUpload,
 		} = this.props;
 
 		const {
@@ -202,19 +202,23 @@ export class MediaPlaceholder extends Component {
 				notices={ notices }
 			>
 				<MediaUploadCheck>
-					<DropZone
-						onFilesDrop={ this.onFilesUpload }
-						onHTMLDrop={ onHTMLDrop }
-					/>
-					<FormFileUpload
-						isLarge
-						className="editor-media-placeholder__button"
-						onChange={ this.onUpload }
-						accept={ accept }
-						multiple={ multiple }
-					>
-						{ __( 'Upload' ) }
-					</FormFileUpload>
+					{ !! mediaUpload && (
+						<Fragment>
+							<DropZone
+								onFilesDrop={ this.onFilesUpload }
+								onHTMLDrop={ onHTMLDrop }
+							/>
+							<FormFileUpload
+								isLarge
+								className="editor-media-placeholder__button"
+								onChange={ this.onUpload }
+								accept={ accept }
+								multiple={ multiple }
+							>
+								{ __( 'Upload' ) }
+							</FormFileUpload>
+						</Fragment>
+					) }
 					<MediaUpload
 						gallery={ multiple && this.onlyAllowsImages() }
 						multiple={ multiple }
@@ -259,9 +263,11 @@ export class MediaPlaceholder extends Component {
 
 const applyWithSelect = withSelect( ( select ) => {
 	const { canUser } = select( 'core' );
+	const { getEditorSettings } = select( 'core/block-editor' );
 
 	return {
 		hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
+		mediaUpload: getEditorSettings().__experimentalMediaUpload,
 	};
 } );
 

diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -17,6 +17,8 @@ import { BlockEditorProvider } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import transformStyles from '../../editor-styles';
+import { mediaUpload } from '../../utils';
+
 class EditorProvider extends Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -57,6 +59,7 @@ class EditorProvider extends Component {
 				onChange: onMetaChange,
 			},
 			__experimentalReusableBlocks: reusableBlocks,
+			__experimentalMediaUpload: mediaUpload,
 		};
 	}