Import Media: Integrate external media modal

projects/packages/external-media/changelog/feat-external-media-import-page

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+External Media: Add external media modal on the Media Import page

projects/packages/external-media/src/class-external-media.php

@@ -23,6 +23,13 @@
 	 * Add hooks and filters.
 	 */
 	public static function init() {
+		// Load external media import page on WordPress.com sites first.
+		// We will continue to enable the feature on all sites.
+		$host = new Host();
+		if ( $host->is_wpcom_simple() || $host->is_woa_site() ) {
+			require_once __DIR__ . '/features/admin/external-media-import.php';
+		}
+
 		add_action( 'enqueue_block_editor_assets', array( __CLASS__, 'enqueue_block_editor_assets' ) );
 	}
 
@@ -36,7 +43,7 @@
 		Assets::register_script(
 			$asset_name,
 			$assets_base_path . "$asset_name/$asset_name.js",
-			__FILE__,
+			self::BASE_FILE,
 			array(
 				'enqueue'    => true,
 				'textdomain' => 'jetpack-external-media',
@@ -45,7 +52,7 @@
 
 		wp_add_inline_script(
 			$asset_name,
 			sprintf( 'var JetpackExternalMediaData = %s;', self::get_data() ),
 			'before'
 		);
 
@@ -70,7 +77,7 @@
 			$jetpack_ai_enabled = true;
 		}
 
 		return wp_json_encode(
 			array(
 				'wpcomBlogId'    => $blog_id,
 				'pluginBasePath' => plugins_url( '', Constants::get_constant( 'JETPACK__PLUGIN_FILE' ) ),

projects/packages/external-media/src/features/admin/external-media-import.js

@@ -0,0 +1,90 @@
+import { sprintf, _n } from '@wordpress/i18n';
+import { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { getExternalLibrary } from '../../shared';
+
+const JETPACK_EXTERNAL_MEDIA_IMPORT_PAGE_CONTAINER = 'jetpack-external-media-import';
+const JETPACK_EXTERNAL_MEDIA_IMPORT_PAGE_MODAL = 'jetpack-external-media-import-modal';
+
+const JetpackExternalMediaImport = () => {
+	const [ selectedSource, setSelectedSource ] = useState( null );
+	const ExternalLibrary = getExternalLibrary( selectedSource );
+
+	const showNotice = message => {
+		const notice = document.createElement( 'div' );
+		notice.className = 'notice notice-success';
+		notice.innerHTML = `<p>${ message }</p>`;
+
+		// Add the success notice after the page title
+		const heading = document.querySelector(
+			`#${ JETPACK_EXTERNAL_MEDIA_IMPORT_PAGE_CONTAINER } > h1`
+		);
+		if ( heading ) {
+			heading.parentNode.insertBefore( notice, heading.nextSibling );
+		}
+	};
+
+	const handleSelect = media => {
+		if ( ! media || media.length === 0 ) {
+			return;
+		}
+
+		showNotice(
+			sprintf(
+				/* translators: %d is the number of the media file */
+				_n(
+					'%d media file imported successfully',
+					'%d media files imported successfully',
+					media.length,
+					'jetpack-external-media'
+				),
+				media.length
+			)
+		);
+	};
+
+	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( JETPACK_EXTERNAL_MEDIA_IMPORT_PAGE_CONTAINER );
+		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 multiple onSelect={ handleSelect } onClose={ closeLibrary } />;
+};
+
+const container = document.getElementById( JETPACK_EXTERNAL_MEDIA_IMPORT_PAGE_MODAL );
+if ( container ) {
+	const root = ReactDOM.createRoot( container );
+	root.render( <JetpackExternalMediaImport /> );
+}

projects/packages/external-media/src/features/admin/external-media-import.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * The Jetpack external media import page.
+ *
+ * Adds Jetpack external media page to Media > Import.
+ *
+ * @package automattic/jetpack-external-media
+ */
+
+namespace Automattic\Jetpack;
+
+/**
+ * Register the Jetpack external media page to Media > Import.
+ */
+function add_jetpack_external_media_import_page() {
+	if ( empty( $_GET['jetpack_external_media_import_page'] ) ) { // phpcs:disable WordPress.Security.NonceVerification.Recommended
+		return;
+	}
+
+	$external_media_import_page_hook = add_submenu_page(
+		'upload.php',
+		__( 'Import Media', 'jetpack-external-media' ),
+		__( 'Import Media', 'jetpack-external-media' ),
+		'upload_files',
+		'jetpack_external_media_import_page',
+		__NAMESPACE__ . '\render_jetpack_external_media_import_page'
+	);
+
+	add_action( "load-$external_media_import_page_hook", __NAMESPACE__ . '\enqueue_jetpack_external_media_import_page' );
+}
+add_action( 'admin_menu', __NAMESPACE__ . '\add_jetpack_external_media_import_page' );
+
+/**
+ * Enqueue the assets of the Jetpack external media page.
+ */
+function enqueue_jetpack_external_media_import_page() {
+	$assets_base_path = 'build/';
+	$asset_name       = 'jetpack-external-media-import-page';
+
+	Assets::register_script(
+		$asset_name,
+		$assets_base_path . "$asset_name/$asset_name.js",
+		External_Media::BASE_FILE,
+		array(
+			'in_footer'  => true,
+			'textdomain' => 'jetpack-external-media',
+		)
+	);
+
+	Assets::enqueue_script( $asset_name );
+}
+
+/**
+ * Render the container of the Jetpack external media page.
+ */
+function render_jetpack_external_media_import_page() {
+	$title                  = __( 'Import Media', 'jetpack-external-media' );
+	$description            = __( 'WordPress allows you to import media from various platforms directly into the Media Library. To begin, select a platform from the options below:', 'jetpack-external-media' );
+	$external_media_sources = array(
+		array(
+			'slug'        => 'google_photos',
+			'name'        => __( 'Google Photos', 'jetpack-external-media' ),
+			'description' => __( 'Import media from your Google Photos account.', 'jetpack-external-media' ),
+		),
+		array(
+			'slug'        => 'pexels',
+			'name'        => __( 'Pexels free photos', 'jetpack-external-media' ),
+			'description' => __( 'Free stock photos, royalty free images shared by creators.', 'jetpack-external-media' ),
+		),
+		array(
+			'slug'        => 'openverse',
+			'name'        => __( 'Openverse', 'jetpack-external-media' ),
+			'description' => __( 'Explore more than 800 million creative works.', 'jetpack-external-media' ),
+		),
+	);
+
+	?>
+	<div id="jetpack-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 ) {
+				$slug        = $external_media_source['slug'];
+				$name        = $external_media_source['name'];
+				$description = $external_media_source['description'];
+				$action      = sprintf(
+					'<a aria-label="%1$s" style="cursor:pointer;" data-slug="%2$s">%3$s</a>',
+					/* translators: %s: The name of the external media source. */
+					esc_attr( sprintf( __( 'Import %s', 'jetpack-external-media' ), $name ) ),
+					esc_attr( $slug ),
+					__( 'Import now', 'jetpack-external-media' )
+				);
+
+				?>
+				<tr class='importer-item'>
+					<td class='import-system'>
+						<span class='importer-title'><?php echo esc_html( $name ); ?></span>
+						<span class='importer-action'>
+							<?php echo $action; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- we escape things above. ?>
+						</span>
+					</td>
+					<td class='desc'>
+						<span class='importer-desc'><?php echo esc_html( $description ); ?></span>
+					</td>
+				</tr>
+				<?php
+			}
+			?>
+		</table>
+		<div id="jetpack-external-media-import-modal"></div>
+	</div>
+	<?php
+}