media modal and file uploading, modal is blank

WordPress · Aug 15, 2019 · 1a9794e · 1a9794e
1 parent e9fba38
commit 1a9794e
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/media-flow/index.js b/packages/block-editor/src/components/media-flow/index.js
@@ -4,36 +4,25 @@
 import BlockControls from '../block-controls';
 import { default as MediaPlaceholder } from '../media-placeholder';
 import BlockIcon from '../block-icon';
+import { default as MediaUpload } from '../media-upload';
+import { default as MediaUploadCheck } from '../media-upload/check';
 
 /**
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
+	FormFileUpload,
+	MenuItem,
 	Toolbar,
 	withNotices,
+	withFilters,
 } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
 
-const DEFAULT_MEDIA_CONTROLS = [
-	{
-		icon: 'admin-media',
-		title: __( 'Media Library' ),
-		action: 'library',
-	},
-	{
-		icon: 'upload',
-		title: __( 'Upload image' ),
-		action: 'upload',
-	},
-	{
-		icon: 'admin-links',
-		title: __( 'Insert from URL' ),
-		action: 'url',
-	},
-];
-
-const MediaFlow = ( { className, value, mediaURL, accepts, allowedTypes, onSelect, onSelectURL, notices, children, noticeOperations, mediaControls = DEFAULT_MEDIA_CONTROLS, name = __( 'Replace' ) } ) => {
+const MediaFlow = ( { mediaUpload, className, value, mediaURL, accepts, allowedTypes, onSelect, onSelectURL, notices, children, noticeOperations, name = __( 'Replace' ), multiple = false } ) => {
 	const selectMedia = ( media ) => {
 		onSelect( media );
 	};
@@ -45,30 +34,87 @@ const MediaFlow = ( { className, value, mediaURL, accepts, allowedTypes, onSelec
 	const onCancel = () => {
 	};
 
-	const doAction = ( action ) => {
-		return action;
-	};
-
 	const onUploadError = ( message ) => {
 		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
 	};
 
+	const uploadFiles = ( event ) => {
+		const files = event.target.files;
+		let setMedia;
+		if ( multiple ) {
+			setMedia = selectMedia;
+		} else {
+			setMedia = ( [ media ] ) => selectMedia( media );
+		}
+		mediaUpload( {
+			allowedTypes,
+			filesList: files,
+			onFileChange: setMedia,
+			onUploadError,
+		} );
+	};
+
+	const mediaLibraryButton = (
+		<MediaUploadCheck>
+			<MediaUpload
+				onSelect={ ( media ) => selectMedia( media ) }
+				allowedTypes={ allowedTypes }
+				render={ ( { open } ) => (
+					<MenuItem
+						icon="admin-media"
+						onClick={ open }
+					>
+						{ __( 'Open Media Library' ) }
+					</MenuItem>
+				) }
+			/>
+		</MediaUploadCheck>
+	);
+
+	const fileUploadButton = (
+		<FormFileUpload
+			onChange={ uploadFiles }
+			accept={ allowedTypes }
+			multiple={ multiple }
+			render={ ( { openFileDialog } ) => {
+				return (
+					<MenuItem
+						icon="upload"
+						onClick={ openFileDialog }
+					>
+						{ __( 'Upload' ) }
+					</MenuItem>
+				);
+			} }
+		/>
+	);
+
+	const URLButton = (
+		<MenuItem
+			icon="admin-links"
+			onClick={ () => {} }
+		>
+			{ __( 'Insert from URL' ) }
+		</MenuItem>
+	);
+
 	const editMediaButton = (
 		<BlockControls>
 			<Toolbar
 				isCollapsed={ true }
 				icon={ false }
 				label={ name }
-				controls={ mediaControls.map( ( control ) => {
-					const { action } = control;
-					return {
-						...control,
-						isActive: false,
-						onClick: () => doAction( action ),
-					};
-				} ) }
-			/>
+				controls={ [] }
+			>
+				{ () => (
+					<>
+						{ mediaUpload && mediaLibraryButton }
+						{ fileUploadButton }
+						{ URLButton }
+					</>
+				) }
+			</Toolbar>
 		</BlockControls>
 	);
 
@@ -83,7 +129,7 @@ const MediaFlow = ( { className, value, mediaURL, accepts, allowedTypes, onSelec
 			allowedTypes={ allowedTypes }
 			className={ className }
 			mediaURL={ mediaURL }
-			accepts={ 'audio/*' }
+			accepts={ allowedTypes }
 			value={ value }
 			notices={ notices }
 			onError={ onUploadError }
@@ -99,4 +145,19 @@ const MediaFlow = ( { className, value, mediaURL, accepts, allowedTypes, onSelec
 	);
 };
 
-export default withNotices( MediaFlow );
+const applyWithSelect = withSelect( ( select ) => {
+	const { getSettings } = select( 'core/block-editor' );
+
+	return {
+		mediaUpload: getSettings().__experimentalMediaUpload,
+	};
+} );
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-placeholder/README.md
+ */
+export default compose(
+	applyWithSelect,
+	withFilters( 'editor.MediaPlaceholder' ),
+	withNotices,
+)( MediaFlow );
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
@@ -63,7 +63,9 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label
 				label={ label }
 				controls={ controlSets }
 				className={ classnames( 'components-toolbar', className ) }
-			/>
+			>
+				{ children }
+			</DropdownMenu>
 		);
 	}