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/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,
+};