Extract generic WordPress mediaUpload package.

docs/manifest-devhub.json

@@ -1295,6 +1295,12 @@
 		"markdown_source": "../packages/list-reusable-blocks/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/media-utils",
+		"slug": "packages-media-utils",
+		"markdown_source": "../packages/media-utils/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/notices",
 		"slug": "packages-notices",

docs/manifest.json

@@ -449,6 +449,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/list-reusable-blocks/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/media-utils",
+		"slug": "packages-media-utils",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/media-utils/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/notices",
 		"slug": "packages-notices",
@@ -1331,4 +1337,4 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/contributors/outreach.md",
 		"parent": "contributors"
 	}
-]
+]

package.json

@@ -45,6 +45,7 @@
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keycodes": "file:packages/keycodes",
 		"@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
+		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",
 		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",

packages/edit-post/src/hooks/index.js

@@ -1,5 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { components } from '@wordpress/media-utils';
+
 /**
  * Internal dependencies
  */
-import './components';
 import './validate-multiple-use';
+
+const replaceMediaUpload = () => components.MediaUpload;
+
+addFilter(
+	'editor.MediaUpload',
+	'wordpress/media-utils/replace-media-upload',
+	replaceMediaUpload
+);

packages/edit-widgets/src/components/edit-widgets-initializer/index.js

@@ -4,6 +4,10 @@
 import { compose } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import { withDispatch } from '@wordpress/data';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { components } from '@wordpress/media-utils';
+
+const replaceMediaUpload = () => components.MediaUpload;
 
 /**
  * Internal dependencies
@@ -13,6 +17,17 @@ import Layout from '../layout';
 function EditWidgetsInitializer( { setupWidgetAreas, settings } ) {
 	useEffect( () => {
 		setupWidgetAreas();
+		addFilter(
+			'editor.MediaUpload',
+			'wordpress/media-utils/replace-media-upload',
+			replaceMediaUpload
+		);
+		return () => {
+			removeFilter(
+				'editor.MediaUpload',
+				'wordpress/media-utils/replace-media-upload'
+			);
+		};
 	}, [] );
 	return (
 		<Layout

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

@@ -1,6 +1,13 @@
+/**
+ * External dependencies
+ */
+import { defaultTo } from 'lodash';
+
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { utils as mediaUtils } from '@wordpress/media-utils';
 import { compose } from '@wordpress/compose';
 import { Panel, PanelBody } from '@wordpress/components';
 import {
@@ -9,13 +16,35 @@ import {
 } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
 
+const { mediaUpload } = mediaUtils;
+
 function WidgetArea( {
 	blockEditorSettings,
 	blocks,
 	initialOpen,
 	updateBlocks,
 	widgetAreaName,
+	hasUploadPermissions,
 } ) {
+	const settings = useMemo(
+		() => {
+			if ( ! hasUploadPermissions ) {
+				return blockEditorSettings;
+			}
+			const mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
+				mediaUpload( {
+					wpAllowedMimeTypes: settings.allowedMimeTypes,
+					onError: ( { message } ) => onError( message ),
+					...argumentsObject,
+				} );
+			};
+			return {
+				...blockEditorSettings,
+				__experimentalMediaUpload: mediaUploadBlockEditor,
+			};
+		},
+		[ blockEditorSettings, hasUploadPermissions ]
+	);
 	return (
 		<Panel className="edit-widgets-widget-area">
 			<PanelBody
@@ -26,7 +55,7 @@ function WidgetArea( {
 					value={ blocks }
 					onInput={ updateBlocks }
 					onChange={ updateBlocks }
-					settings={ blockEditorSettings }
+					settings={ settings }
 				>
 					<BlockList />
 				</BlockEditorProvider>
@@ -41,11 +70,13 @@ export default compose( [
 			getBlocksFromWidgetArea,
 			getWidgetArea,
 		} = select( 'core/edit-widgets' );
+		const { canUser } = select( 'core' );
 		const blocks = getBlocksFromWidgetArea( id );
 		const widgetAreaName = ( getWidgetArea( id ) || {} ).name;
 		return {
 			blocks,
 			widgetAreaName,
+			hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
 		};
 	} ),
 	withDispatch( ( dispatch, { id } ) => {

packages/editor/package.json

@@ -38,6 +38,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/nux": "file:../nux",
 		"@wordpress/url": "file:../url",

packages/editor/src/utils/media-upload/index.js

@@ -7,11 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { select } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { mediaUpload } from './media-upload';
+import { utils } from '@wordpress/media-utils';
 
 /**
  * Upload a media file when the file upload button is activated.
@@ -37,7 +33,7 @@ export default function( {
 	const wpAllowedMimeTypes = getEditorSettings().allowedMimeTypes;
 	maxUploadFileSize = maxUploadFileSize || getEditorSettings().maxUploadFileSize;
 
-	mediaUpload( {
+	utils.mediaUpload( {
 		allowedTypes,
 		filesList,
 		onFileChange,

packages/media-utils/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/media-utils/CHANGELOG.md

@@ -0,0 +1,5 @@
+## 0.1.0 (2019-01-03)
+
+### New Features
+
+- Implemented first version of the package.

packages/media-utils/README.md

@@ -0,0 +1,46 @@
+# Media Utils
+
+The media utils package provides a set of artifacts to abstract media functionality that may be useful in situations where there is a need to deal with media uploads or with the media library, e.g., artifacts that extend or implement a block-editor.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/media-utils --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
+
+## Usage
+
+The package exposes an object under the key `components` we have UI components, and under the key `utils` there are util functions available.
+
+### Utils - mediaUpload
+
+Media upload util is a function that allows the invokers to upload files to the WordPress media library.
+As an example, provided that `myFiles` is an array of file objects, `onFileChange` on onFileChange is a function that receives an array of objects containing the description of WordPress media items and `handleFileError` is a function that receives an object describing a possible error, the following code uploads a file to the WordPress media library:
+```js
+wp.mediaUtils.utils.mediaUpload( {
+    filesList: myFiles,
+    onFileChange: handleFileChange,
+    onError: handleFileError
+} );
+```
+
+The following code uploads a file named foo.txt with foo as content to the media library and alerts its URL:
+```js
+wp.mediaUtils.utils.mediaUpload( {
+    filesList: [ new File( ["foo"], "foo.txt", { type: "text/plain"} ) ],
+    onFileChange: ( [ fileObj] ) => alert( fileObj.url ),
+    onError: console.error,
+} );
+```
+
+Beware that first onFileChange is called with temporary blob URLs and then with the final URL's this allows to show the result in an optimistic UI as if the upload was already completed. E.g.: when uploading an image, one can show the image right away in the UI even before the upload is complete.
+
+
+### components - MediaUpload
+
+Media upload component provides a UI button that allows users to open the WordPress media library. It is normally used in conjunction with the filter `editor.MediaUpload`.
+The component follows the interface specified in https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md, and more details regarding its usage can be checked there.

packages/media-utils/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/media-utils",
+	"version": "0.1.0",
+	"description": "WordPress Media Upload Utils.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"media",
+		"upload",
+		"media-upload"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/master/packages/media-utils/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/url"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"dependencies": {
+		"@babel/runtime": "^7.4.4",
+		"@wordpress/api-fetch": "file:../api-fetch",
+		"@wordpress/blob": "file:../blob",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"lodash": "^4.17.11"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/media-utils/src/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import MediaUpload from './media-upload';
+
+export const components = {
+	MediaUpload,
+};

packages/media-utils/src/index.js

@@ -0,0 +1,2 @@
+export { components } from './components';
+export { utils } from './utils';

packages/media-utils/src/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { mediaUpload } from './media-upload';
+
+export const utils = {
+	mediaUpload,
+};