Blocks: Add Upload button to audio and video blocks

WordPress · Mar 6, 2018 · 12b9d5f · 12b9d5f
1 parent c8e1444
commit 12b9d5f
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 51 deletions.
diff --git a/blocks/image-placeholder/index.js b/blocks/image-placeholder/index.js
@@ -25,13 +25,13 @@ import { rawHandler } from '../api';
  */
 export default function ImagePlaceholder( { className, icon, label, onSelectImage, multiple = false } ) {
 	const setImage = multiple ? onSelectImage : ( [ image ] ) => onSelectImage( image );
-	const onFilesDrop = ( files ) => mediaUpload( files, setImage );
+	const onFilesDrop = ( files ) => mediaUpload( files, setImage, 'image' );
 	const onHTMLDrop = ( HTML ) => setImage( map(
 		rawHandler( { HTML, mode: 'BLOCKS' } )
 			.filter( ( { name } ) => name === 'core/image' ),
 		'attributes'
 	) );
-	const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setImage );
+	const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setImage, 'image' );
 	return (
 		<Placeholder
 			className={ className }

diff --git a/blocks/library/audio/editor.scss b/blocks/library/audio/editor.scss
@@ -11,7 +11,6 @@
 }
 
 .wp-block-audio .components-placeholder__fieldset {
-	display: block;
 	max-width: 400px;
 
 	form {

diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -6,8 +6,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, IconButton, Placeholder, Toolbar } from '@wordpress/components';
+import {
+	Button,
+	FormFileUpload,
+	IconButton,
+	Placeholder,
+	Toolbar,
+} from '@wordpress/components';
 import { Component } from '@wordpress/element';
+import { mediaUpload } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -85,24 +92,12 @@ export const settings = {
 				}
 				return false;
 			};
-			const controls = isSelected && (
-				<BlockControls key="controls">
-					<Toolbar>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-							label={ __( 'Edit audio' ) }
-							onClick={ switchToEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
-			);
+			const setAudio = ( [ audio ] ) => onSelectAudio( audio );
+			const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAudio, 'audio' );
 
 			if ( editing ) {
-				return [
-					controls,
+				return (
 					<Placeholder
-						key="placeholder"
 						icon="media-audio"
 						label={ __( 'Audio' ) }
 						instructions={ __( 'Select an audio file from your library, or upload a new one' ) }
@@ -120,6 +115,14 @@ export const settings = {
 								{ __( 'Use URL' ) }
 							</Button>
 						</form>
+						<FormFileUpload
+							isLarge
+							className="wp-block-audio__upload-button"
+							onChange={ uploadFromFiles }
+							accept="audio/*"
+						>
+							{ __( 'Upload' ) }
+						</FormFileUpload>
 						<MediaUpload
 							onSelect={ onSelectAudio }
 							type="audio"
@@ -130,13 +133,24 @@ export const settings = {
 								</Button>
 							) }
 						/>
-					</Placeholder>,
-				];
+					</Placeholder>
+				);
 			}
 
 			/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 			return [
-				controls,
+				isSelected && (
+					<BlockControls key="controls">
+						<Toolbar>
+							<IconButton
+								className="components-icon-button components-toolbar__control"
+								label={ __( 'Edit audio' ) }
+								onClick={ switchToEditing }
+								icon="edit"
+							/>
+						</Toolbar>
+					</BlockControls>
+				),
 				<figure key="audio" className={ className }>
 					<audio controls="controls" src={ src } />
 					{ ( ( caption && caption.length ) || !! isSelected ) && (

diff --git a/blocks/library/audio/test/__snapshots__/index.js.snap b/blocks/library/audio/test/__snapshots__/index.js.snap
@@ -45,6 +45,35 @@ exports[`core/audio block edit matches snapshot 1`] = `
         Use URL
       </button>
     </form>
+    <div
+      class="components-form-file-upload"
+    >
+      <button
+        class="components-button components-icon-button wp-block-audio__upload-button button button-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>
     *** Mock(Media upload button) ***
   </div>
 </div>

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -137,7 +137,8 @@ class GalleryBlock extends Component {
 				setAttributes( {
 					images: currentImages.concat( images ),
 				} );
-			}
+			},
+			'image',
 		);
 	}
 

diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
@@ -62,7 +62,9 @@
 	}
 }
 
-.wp-core-ui .wp-block-image__upload-button.button {
+.wp-core-ui .wp-block-audio__upload-button.button,
+.wp-core-ui .wp-block-image__upload-button.button,
+.wp-core-ui .wp-block-video__upload-button.button {
 	margin-right: 5px;
 
 	.dashicon {

diff --git a/blocks/library/video/editor.scss b/blocks/library/video/editor.scss
@@ -11,7 +11,6 @@
 }
 
 .wp-block-video .components-placeholder__fieldset {
-	display: block;
 	max-width: 400px;
 
 	form {

diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js
@@ -6,8 +6,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Placeholder, Toolbar, IconButton, Button } from '@wordpress/components';
+import {
+	Button,
+	FormFileUpload,
+	IconButton,
+	Placeholder,
+	Toolbar,
+} from '@wordpress/components';
 import { Component } from '@wordpress/element';
+import { mediaUpload } from '@wordpress/utils';
 
 /**
  * Internal dependencies
@@ -94,20 +101,24 @@ export const settings = {
 				}
 				return false;
 			};
+			const setVideo = ( [ audio ] ) => onSelectVideo( audio );
+			const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setVideo, 'video' );
 			const controls = isSelected && (
 				<BlockControls key="controls">
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
 					/>
-					<Toolbar>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-							label={ __( 'Edit video' ) }
-							onClick={ switchToEditing }
-							icon="edit"
-						/>
-					</Toolbar>
+					{ ! editing && (
+						<Toolbar>
+							<IconButton
+								className="components-icon-button components-toolbar__control"
+								label={ __( 'Edit video' ) }
+								onClick={ switchToEditing }
+								icon="edit"
+							/>
+						</Toolbar>
+					) }
 				</BlockControls>
 			);
 
@@ -133,6 +144,14 @@ export const settings = {
 								{ __( 'Use URL' ) }
 							</Button>
 						</form>
+						<FormFileUpload
+							isLarge
+							className="wp-block-video__upload-button"
+							onChange={ uploadFromFiles }
+							accept="video/*"
+						>
+							{ __( 'Upload' ) }
+						</FormFileUpload>
 						<MediaUpload
 							onSelect={ onSelectVideo }
 							type="video"

diff --git a/blocks/library/video/test/__snapshots__/index.js.snap b/blocks/library/video/test/__snapshots__/index.js.snap
@@ -45,6 +45,35 @@ exports[`core/video block edit matches snapshot 1`] = `
         Use URL
       </button>
     </form>
+    <div
+      class="components-form-file-upload"
+    >
+      <button
+        class="components-button components-icon-button wp-block-video__upload-button button button-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>
     *** Mock(Media upload button) ***
   </div>
 </div>

diff --git a/utils/mediaupload.js b/utils/mediaupload.js
@@ -1,45 +1,46 @@
 /**
  * External Dependencies
  */
-import { compact } from 'lodash';
+import { compact, startsWith } from 'lodash';
 
 /**
- *	Media Upload is used by image and gallery blocks to handle uploading an image.
+ *	Media Upload is used by audio, image, gallery and video blocks to handle uploading a media file
  *	when a file upload button is activated.
  *
  *	TODO: future enhancement to add an upload indicator.
  *
- * @param {Array}    filesList      List of files.
- * @param {Function} onImagesChange Function to be called each time a file or a temporary representation of the file is available.
+ * @param {Array}    filesList    List of files.
+ * @param {Function} onFileChange Function to be called each time a file or a temporary representation of the file is available.
+ * @param {string}   allowedType  The type of media that can be uploaded.
  */
-export function mediaUpload( filesList, onImagesChange ) {
+export function mediaUpload( filesList, onFileChange, allowedType ) {
 	// Cast filesList to array
 	const files = [ ...filesList ];
 
-	const imagesSet = [];
-	const setAndUpdateImages = ( idx, value ) => {
-		imagesSet[ idx ] = value;
-		onImagesChange( compact( imagesSet ) );
+	const filesSet = [];
+	const setAndUpdateFiles = ( idx, value ) => {
+		filesSet[ idx ] = value;
+		onFileChange( compact( filesSet ) );
 	};
+	const isAllowedType = ( fileType ) => startsWith( fileType, `${ allowedType }/` );
 	files.forEach( ( mediaFile, idx ) => {
-		// Only allow image uploads, may need updating if used for video
-		if ( ! /^image\//.test( mediaFile.type ) ) {
+		if ( ! isAllowedType( mediaFile.type ) ) {
 			return;
 		}
 
-		// Set temporary URL to create placeholder image, this is replaced
-		// with final image from media gallery when upload is `done` below
-		imagesSet.push( { url: window.URL.createObjectURL( mediaFile ) } );
-		onImagesChange( imagesSet );
+		// Set temporary URL to create placeholder media file, this is replaced
+		// with final file from media gallery when upload is `done` below
+		filesSet.push( { url: window.URL.createObjectURL( mediaFile ) } );
+		onFileChange( filesSet );
 
 		return createMediaFromFile( mediaFile ).then(
 			( savedMedia ) => {
-				setAndUpdateImages( idx, { id: savedMedia.id, url: savedMedia.source_url, link: savedMedia.link } );
+				setAndUpdateFiles( idx, { id: savedMedia.id, url: savedMedia.source_url, link: savedMedia.link } );
 			},
 			() => {
 				// Reset to empty on failure.
 				// TODO: Better failure messaging
-				setAndUpdateImages( idx, null );
+				setAndUpdateFiles( idx, null );
 			}
 		);
 	} );