Import Media: Integrate external media modal

projects/js-packages/shared-extension-utils/changelog/feat-move-external-media-to-package

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+External Media: Move the GooglePhotosMedia, OpenverseMedia, PexelsMedia to @automattic/jetpack-shared-extension-utils

projects/js-packages/shared-extension-utils/index.js

@@ -1,3 +1,5 @@
+export * from './src/block-icons';
+export * from './src/external-media';
 export { default as getJetpackData, JETPACK_DATA_PATH } from './src/get-jetpack-data';
 export { default as getSiteFragment } from './src/get-site-fragment';
 export * from './src/site-type-utils';
@@ -12,6 +14,7 @@ export {
 	isStillUsableWithFreePlan,
 	getUsableBlockProps,
 } from './src/plan-utils';
+export * from './src/icons';
 export { default as isCurrentUserConnected } from './src/is-current-user-connected';
 export { default as useAnalytics } from './src/hooks/use-analytics';
 export { default as useModuleStatus } from './src/hooks/use-module-status';

projects/js-packages/shared-extension-utils/package.json

@@ -18,23 +18,34 @@
 		"test-coverage": "pnpm run test --coverage"
 	},
 	"dependencies": {
+		"@automattic/color-studio": "4.0.0",
 		"@automattic/jetpack-analytics": "workspace:*",
+		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
+		"@automattic/popup-monitor": "1.0.2",
+		"@automattic/request-external-access": "1.0.1",
 		"@wordpress/api-fetch": "7.14.0",
+		"@wordpress/components": "29.0.0",
 		"@wordpress/compose": "7.14.0",
 		"@wordpress/data": "10.14.0",
+		"@wordpress/date": "5.14.0",
 		"@wordpress/element": "6.14.0",
 		"@wordpress/i18n": "5.14.0",
+		"@wordpress/icons": "10.14.0",
+		"@wordpress/keycodes": "4.14.0",
 		"@wordpress/plugins": "7.14.0",
 		"@wordpress/url": "4.14.0",
-		"lodash": "4.17.21"
+		"clsx": "2.1.1",
+		"lodash": "4.17.21",
+		"moment": "2.30.1"
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "7.26.0",
 		"@babel/plugin-transform-react-jsx": "7.25.9",
 		"@babel/preset-react": "7.26.3",
+		"@babel/runtime": "7.26.0",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.0.1",
 		"@testing-library/user-event": "14.5.2",

projects/plugins/jetpack/extensions/shared/block-icons.js → projects/js-packages/shared-extension-utils/src/block-icons.js

@@ -1,5 +1,5 @@
 import colorStudio from '@automattic/color-studio';
-import { isAtomicSite, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
+import { isAtomicSite, isSimpleSite } from './site-type-utils';
 
 /**
  * Constants

projects/plugins/jetpack/extensions/shared/components/number-control/index.jsx → projects/js-packages/shared-extension-utils/src/components/number-control/index.jsx

@@ -1,19 +1,17 @@
 import {
-	NumberControl as BlockEditorNumberControl,
 	__experimentalNumberControl as ExperimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	TextControl,
 } from '@wordpress/components';
 
 /**
- * This uses the publicly accessible or experimental NumberControl
- * from the block editor where available, otherwise it falls back
- * to a standard TextControl, limited to numbers.
+ * This uses the experimental NumberControl from the block
+ * editor where available, otherwise it falls back to a
+ * standard TextControl, limited to numbers.
  *
  * @param {any} props - the NumberControl component props
  * @return {object} - NumberControl component
  */
 const NumberControl =
-	BlockEditorNumberControl ||
 	ExperimentalNumberControl ||
 	function CustomNumberControl( props ) {
 		return <TextControl type="number" inputMode="numeric" { ...props } />;

projects/plugins/jetpack/extensions/shared/external-media/constants.js → projects/js-packages/shared-extension-utils/src/external-media/constants.js

@@ -18,119 +18,119 @@ export const PATH_ROOT = '/';
 export const PATH_OPTIONS = [
 	{
 		value: PATH_RECENT,
-		label: __( 'Photos', 'jetpack' ),
+		label: __( 'Photos', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: PATH_ROOT,
-		label: __( 'Albums', 'jetpack' ),
+		label: __( 'Albums', 'jetpack-shared-extension-utils' ),
 	},
 ];
 export const GOOGLE_PHOTOS_PICKER_SESSION = 'google_photos_picker_session';
 export const GOOGLE_PHOTOS_CATEGORIES = [
 	{
 		value: '',
 		/* translators: category of images */
-		label: __( 'All categories', 'jetpack' ),
+		label: __( 'All categories', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'animals',
 		/* translators: category of images */
-		label: __( 'Animals', 'jetpack' ),
+		label: __( 'Animals', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'arts',
 		/* translators: category of images */
-		label: __( 'Arts', 'jetpack' ),
+		label: __( 'Arts', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'birthdays',
 		/* translators: category of images */
-		label: __( 'Birthdays', 'jetpack' ),
+		label: __( 'Birthdays', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'cityscapes',
 		/* translators: category of images */
-		label: __( 'Cityscapes', 'jetpack' ),
+		label: __( 'Cityscapes', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'crafts',
 		/* translators: category of images */
-		label: __( 'Crafts', 'jetpack' ),
+		label: __( 'Crafts', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'fashion',
 		/* translators: category of images */
-		label: __( 'Fashion', 'jetpack' ),
+		label: __( 'Fashion', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'food',
 		/* translators: category of images */
-		label: __( 'Food', 'jetpack' ),
+		label: __( 'Food', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'flowers',
 		/* translators: category of images */
-		label: __( 'Flowers', 'jetpack' ),
+		label: __( 'Flowers', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'gardens',
 		/* translators: category of images */
-		label: __( 'Gardens', 'jetpack' ),
+		label: __( 'Gardens', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'holidays',
 		/* translators: category of images */
-		label: __( 'Holidays', 'jetpack' ),
+		label: __( 'Holidays', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'houses',
 		/* translators: category of images */
-		label: __( 'Houses', 'jetpack' ),
+		label: __( 'Houses', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'landmarks',
 		/* translators: category of images */
-		label: __( 'Landmarks', 'jetpack' ),
+		label: __( 'Landmarks', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'landscapes',
 		/* translators: category of images */
-		label: __( 'Landscapes', 'jetpack' ),
+		label: __( 'Landscapes', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'night',
 		/* translators: category of images */
-		label: __( 'Night', 'jetpack' ),
+		label: __( 'Night', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'people',
 		/* translators: category of images */
-		label: __( 'People', 'jetpack' ),
+		label: __( 'People', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'pets',
 		/* translators: category of images */
-		label: __( 'Pets', 'jetpack' ),
+		label: __( 'Pets', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'selfies',
 		/* translators: category of images */
-		label: __( 'Selfies', 'jetpack' ),
+		label: __( 'Selfies', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'sport',
 		/* translators: category of images */
-		label: __( 'Sport', 'jetpack' ),
+		label: __( 'Sport', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'travel',
 		/* translators: category of images */
-		label: __( 'Travel', 'jetpack' ),
+		label: __( 'Travel', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: 'weddings',
 		/* translators: category of images */
-		label: __( 'Weddings', 'jetpack' ),
+		label: __( 'Weddings', 'jetpack-shared-extension-utils' ),
 	},
 ];
 export const PEXELS_EXAMPLE_QUERIES = [
@@ -151,34 +151,34 @@ export const DATE_RANGE_CUSTOM = 'CUSTOM';
 export const GOOGLE_PHOTOS_DATE_PRESETS = [
 	{
 		value: DATE_RANGE_ANY,
-		label: __( 'Any time', 'jetpack' ),
+		label: __( 'Any time', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: DATE_RANGE_LAST_7_DAYS,
-		label: __( 'Last 7 days', 'jetpack' ),
+		label: __( 'Last 7 days', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: DATE_RANGE_LAST_30_DAYS,
-		label: __( 'Last 30 days', 'jetpack' ),
+		label: __( 'Last 30 days', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: DATE_RANGE_LAST_6_MONTHS,
-		label: __( 'Last 6 months', 'jetpack' ),
+		label: __( 'Last 6 months', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: DATE_RANGE_LAST_12_MONTHS,
-		label: __( 'Last 12 months', 'jetpack' ),
+		label: __( 'Last 12 months', 'jetpack-shared-extension-utils' ),
 	},
 	{
 		value: DATE_RANGE_CUSTOM,
-		label: __( 'Specific Month/Year', 'jetpack' ),
+		label: __( 'Specific Month/Year', 'jetpack-shared-extension-utils' ),
 	},
 ];
 
 export const CURRENT_YEAR = new Date().getFullYear();
 
 export const MONTH_SELECT_OPTIONS = [
-	{ label: __( 'Any Month', 'jetpack' ), value: -1 },
+	{ label: __( 'Any Month', 'jetpack-shared-extension-utils' ), value: -1 },
 	...map( range( 0, 12 ), value => ( {
 		// Following call generates a new date object for the particular month and gets its name.
 		label: dateI18n( 'F', new Date( 0, value ) ),

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

@@ -0,0 +1,10 @@
+export * from './constants';
+export { default as MediaBrowser } from './media-browser';
+export { default as MediaPlaceholder } from './media-browser/placeholder';
+export * from './media-service';
+export * from './media-service/types';
+export * from './sources/api';
+export { default as GooglePhotosMedia } from './sources/google-photos';
+export { default as OpenverseMedia } from './sources/openverse';
+export { default as PexelsMedia } from './sources/pexels';
+export { default as withMedia } from './sources/with-media';