Block editor: Add MediaUploadProvider

packages/block-editor/src/components/provider/index.js

@@ -4,6 +4,8 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+//eslint-disable-next-line import/no-extraneous-dependencies -- Experimental package, not published.
+import { MediaUploadProvider } from '@wordpress/upload-media';
 
 /**
  * Internal dependencies
@@ -14,12 +16,13 @@ import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import useMediaUploadSettings from './use-media-upload-settings';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
 export const ExperimentalBlockEditorProvider = withRegistryProvider(
 	( props ) => {
-		const { children, settings, stripExperimentalSettings = false } = props;
+		const { settings, stripExperimentalSettings = false } = props;
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )
@@ -44,12 +47,27 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );
 
-		return (
+		const children = (
 			<SlotFillProvider passthrough>
 				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
-				<BlockRefsProvider>{ children }</BlockRefsProvider>
+				<BlockRefsProvider>{ props.children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);
+
+		const mediaUploadSettings = useMediaUploadSettings( settings );
+
+		if ( window.__experimentalMediaProcessing ) {
+			return (
+				<MediaUploadProvider
+					settings={ mediaUploadSettings }
+					useSubRegistry={ false }
+				>
+					{ children }
+				</MediaUploadProvider>
+			);
+		}
+
+		return children;
 	}
 );
 

packages/block-editor/src/components/provider/use-media-upload-settings.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * React hook used to compute the media upload settings to use in the post editor.
+ *
+ * @param {Object} settings Media upload settings prop.
+ *
+ * @return {Object} Media upload settings.
+ */
+function useMediaUploadSettings( settings ) {
+	return useMemo(
+		() => ( {
+			mediaUpload: settings.mediaUpload,
+			mediaSideload: settings.__experimentalMediaSideload,
+		} ),
+		[ settings ]
+	);
+}
+
+export default useMediaUploadSettings;

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -22,6 +22,7 @@ import {
  */
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
+import { default as mediaSideload } from '../../utils/media-sideload';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -294,6 +295,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			isDistractionFree,
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
+			__experimentalMediaSideload: hasUploadPermissions
+				? mediaSideload
+				: undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =

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

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { sideloadMedia: mediaSideload = () => {} } = unlock( privateApis );
+
+export default mediaSideload;

packages/editor/src/utils/media-sideload/index.native.js

@@ -0,0 +1 @@
+export default function mediaSideload() {}

packages/upload-media/package.json

@@ -29,7 +29,9 @@
 	  "@shopify/web-worker": "^6.4.0",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",

packages/upload-media/src/components/provider/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import withRegistryProvider from './with-registry-provider';
+import { unlock } from '../../lock-unlock';
+import { store as uploadStore } from '../../store';
+
+const MediaUploadProvider = withRegistryProvider( ( props: any ) => {
+	const { children, settings } = props;
+	const { updateSettings } = unlock( useDispatch( uploadStore ) );
+
+	useEffect( () => {
+		updateSettings( settings );
+	}, [ settings, updateSettings ] );
+
+	return <>{ children }</>;
+} );
+
+export default MediaUploadProvider;

packages/upload-media/src/components/provider/with-registry-provider.tsx

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { storeConfig } from '../../store';
+import { STORE_NAME as mediaUploadStoreName } from '../../store/constants';
+
+type WPDataRegistry = ReturnType< typeof createRegistry >;
+
+function getSubRegistry(
+	subRegistries: WeakMap< WPDataRegistry, WPDataRegistry >,
+	registry: WPDataRegistry,
+	useSubRegistry: boolean
+) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( mediaUploadStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry() as unknown as WPDataRegistry;
+			const [ subRegistries ] = useState<
+				WeakMap< WPDataRegistry, WPDataRegistry >
+			>( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
+
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
+			}
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
+	'withRegistryProvider'
+);
+
+export default withRegistryProvider;

packages/upload-media/src/index.ts

@@ -5,6 +5,7 @@ import { store as uploadStore } from './store';
 
 export { uploadStore as store };
 
+export { default as MediaUploadProvider } from './components/provider';
 export { UploadError } from './upload-error';
 
 export type {

packages/upload-media/src/store/constants.ts

@@ -0,0 +1 @@
+export const STORE_NAME = 'core/upload-media';

packages/upload-media/src/store/index.ts

@@ -12,9 +12,24 @@ import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import * as privateActions from './private-actions';
 import { unlock } from '../lock-unlock';
+import { STORE_NAME } from './constants';
 
-export const STORE_NAME = 'core/upload-media';
+/**
+ * Media upload data store configuration.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
+ */
+export const storeConfig = {
+	reducer,
+	selectors,
+	actions,
+};
 
+/**
+ * Store definition for the media upload namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
+ */
 export const store = createReduxStore( STORE_NAME, {
 	reducer,
 	selectors,

packages/upload-media/tsconfig.json

@@ -10,7 +10,9 @@
 	"references": [
 	  { "path": "../api-fetch" },
 	  { "path": "../blob" },
+	  { "path": "../compose" },
 	  { "path": "../data" },
+	  { "path": "../element" },
 	  { "path": "../i18n" },
 	  { "path": "../private-apis" },
 	  { "path": "../url" },