Add upload functionality widget page.

packages/edit-widgets/src/components/widget-area/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { defaultTo } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -6,10 +11,38 @@ import {
 	BlockEditorProvider,
 	BlockList,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { mediaUpload } from '@wordpress/media-upload';
+import { compose } from '@wordpress/compose';
 
-function WidgetArea( { title, initialOpen } ) {
+function getBlockEditorSettings( settings, hasUploadPermissions ) {
+	if ( ! hasUploadPermissions ) {
+		return {};
+	}
+	const mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
+		mediaUpload( {
+			wpAllowedMimeTypes: settings.allowedMimeTypes,
+			onError: ( { message } ) => onError( message ),
+			...argumentsObject,
+		} );
+	};
+	return {
+		__experimentalMediaUpload: mediaUploadBlockEditor,
+	};
+}
+
+function WidgetArea( {
+	title,
+	initialOpen,
+	hasUploadPermissions,
+	settings,
+} ) {
 	const [ blocks, updateBlocks ] = useState( [] );
+	const blockEditorSettings = useMemo(
+		() => getBlockEditorSettings( settings, hasUploadPermissions ),
+		[ settings, hasUploadPermissions ]
+	);
 
 	return (
 		<Panel>
@@ -21,12 +54,24 @@ function WidgetArea( { title, initialOpen } ) {
 					value={ blocks }
 					onInput={ updateBlocks }
 					onChange={ updateBlocks }
+					settings={ blockEditorSettings }
 				>
 					<BlockList />
 				</BlockEditorProvider>
 			</PanelBody>
 		</Panel>
 	);
 }
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getWidgetEditorSettings,
+		} = select( 'core/edit-widgets' );
+		const { canUser } = select( 'core' );
 
-export default WidgetArea;
+		return {
+			settings: getWidgetEditorSettings(),
+			hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
+		};
+	} ),
+] )( WidgetArea );