External Media: Introduce external media modal

projects/js-packages/shared-extension-utils/src/external-media/sources/with-media.js

@@ -412,7 +412,7 @@ export default function withMedia( mediaSource = MediaSource.Unknown ) {
 		}
 
 		return withSelect( select => {
-			const currentPost = select( 'core/editor' ).getCurrentPost();
+			const currentPost = select( 'core/editor' )?.getCurrentPost();
 			// Templates and template parts' numerical ID is stored in `wp_id`.
 			const currentPostId =
 				typeof currentPost?.id === 'number' ? currentPost.id : currentPost?.wp_id;

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-external-media-import.js

@@ -1 +1,74 @@
-console.log( 'Hello, Import Media Page' ); // eslint-disable-line no-console
+import {
+	GooglePhotosMedia,
+	OpenverseMedia,
+	PexelsMedia,
+} from '@automattic/jetpack-shared-extension-utils';
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+
+const getExternalLibrary = slug => {
+	switch ( slug ) {
+		case 'google_photos':
+			return GooglePhotosMedia;
+		case 'openverse':
+			return OpenverseMedia;
+		case 'pexels':
+			return PexelsMedia;
+		default:
+			return null;
+	}
+};
+
+const WpcomExternalMediaImport = () => {
+	const [ selectedSource, setSelectedSource ] = useState( null );
+	const ExternalLibrary = getExternalLibrary( selectedSource );
+
+	const handleSelect = media => {
+		console.log( media ); // eslint-disable-line no-console
+	};
+
+	const closeLibrary = event => {
+		if ( event ) {
+			event.stopPropagation();
+
+			// The DateTime picker is triggering a modal close when selected. We don't want this to close the modal
+			if ( event.target.closest( '.jetpack-external-media-header__dropdown' ) ) {
+				return;
+			}
+		}
+
+		setSelectedSource( null );
+	};
+
+	useEffect( () => {
+		const element = document.getElementById( 'wpcom-external-media-import' );
+		const handleClick = event => {
+			const slug = event.target.dataset.slug;
+			if ( slug ) {
+				setSelectedSource( slug );
+			}
+		};
+
+		if ( element ) {
+			element.addEventListener( 'click', handleClick );
+		}
+
+		return () => {
+			if ( element ) {
+				element.removeEventListener( 'click', handleClick );
+			}
+		};
+	}, [] );
+
+	if ( ! ExternalLibrary ) {
+		return null;
+	}
+
+	return <ExternalLibrary onSelect={ handleSelect } onClose={ closeLibrary } />;
+};
+
+const container = document.getElementById( 'wpcom-external-media-import-modal' );
+if ( container ) {
+	const root = ReactDOM.createRoot( container );
+	root.render( <WpcomExternalMediaImport /> );
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-external-media-import.php

@@ -43,37 +43,37 @@ function render_wpcom_external_media_import_page() {
 	$description            = __( 'WordPress.com allows you to import media from various platforms directly into the Media Library. To begin, select a platform from the options below:', 'jetpack-mu-wpcom' );
 	$external_media_sources = array(
 		array(
-			'id'          => 'google_photos',
+			'slug'        => 'google_photos',
 			'name'        => __( 'Google Photos', 'jetpack-mu-wpcom' ),
 			'description' => __( 'Import media from your Google Photos account.', 'jetpack-mu-wpcom' ),
 		),
 		array(
-			'id'          => 'pexels',
+			'slug'        => 'pexels',
 			'name'        => __( 'Pexels free photos', 'jetpack-mu-wpcom' ),
 			'description' => __( 'Free stock photos, royalty free images shared by creators.', 'jetpack-mu-wpcom' ),
 		),
 		array(
-			'id'          => 'openverse',
+			'slug'        => 'openverse',
 			'name'        => __( 'Openverse', 'jetpack-mu-wpcom' ),
 			'description' => __( 'Explore more than 800 million creative works.', 'jetpack-mu-wpcom' ),
 		),
 	);
 
 	?>
-	<div class="wrap">
+	<div id="wpcom-external-media-import" class="wrap">
 		<h1><?php echo esc_html( $title ); ?></h1>
 		<p><?php echo esc_html( $description ); ?></p>
 		<table class="widefat importers striped">
 			<?php
 			foreach ( $external_media_sources as $external_media_source ) {
-				$id          = $external_media_source['id'];
+				$slug        = $external_media_source['slug'];
 				$name        = $external_media_source['name'];
 				$description = $external_media_source['description'];
 				$action      = sprintf(
-					'<a id="%1$s" aria-label="%2$s">%3$s</a>',
-					esc_attr( $id ),
+					'<a aria-label="%1$s" data-slug="%2$s">%3$s</a>',
 					/* translators: %s: The name of the external media source. */
 					esc_attr( sprintf( __( 'Import %s', 'jetpack-mu-wpcom' ), $name ) ),
+					esc_attr( $slug ),
 					__( 'Import now', 'jetpack-mu-wpcom' )
 				);
 
@@ -93,6 +93,7 @@ function render_wpcom_external_media_import_page() {
 			}
 			?>
 		</table>
+		<div id="wpcom-external-media-import-modal"></div>
 	</div>
 	<?php
 }