Social: Generate AI image for media from the sidebar

projects/js-packages/ai-client/changelog/add-social-ai-image-generation-modal-poc

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed minification issue with production build.

projects/js-packages/ai-client/src/components/ai-image/general-purpose-image.tsx

@@ -27,6 +27,7 @@ import type { ReactElement } from 'react';
 type SetImageCallbackProps = {
 	id: number;
 	url: string;
+	mime?: string;
 };
 
 type GeneralPurposeImageProps = {
@@ -214,8 +215,8 @@ export default function GeneralPurposeImage( {
 			site_type: siteType,
 		} );
 
-		const setImage = image => {
-			onSetImage?.( { id: image.id, url: image.url } );
+		const setImage = ( { id, url, mime } ) => {
+			onSetImage?.( { id, url, mime } );
 			handleModalClose();
 		};
 
@@ -225,10 +226,16 @@ export default function GeneralPurposeImage( {
 			setImage( {
 				id: currentImage?.libraryId,
 				url: currentImage?.libraryUrl,
+				// Default to image/png for cached images (AI generates PNG)
+				mime: 'image/png',
 			} );
 		} else {
 			saveToMediaLibrary( currentImage?.image ).then( image => {
-				setImage( image );
+				setImage( {
+					id: image.id,
+					url: image.url,
+					mime: image.mime,
+				} );
 			} );
 		}
 	}, [

projects/js-packages/ai-client/src/hooks/use-save-to-media-library.ts

@@ -12,9 +12,15 @@ import type { BlockEditorStore } from '../types.ts';
 
 const debug = debugFactory( 'jetpack-ai-client:save-to-media-library' );
 
+type SavedMediaItem = {
+	id: string;
+	url: string;
+	mime?: string;
+};
+
 type UseSaveToMediaLibraryReturn = {
 	isLoading: boolean;
-	saveToMediaLibrary: ( url: string, name: string ) => Promise< { id: string; url: string } >;
+	saveToMediaLibrary: ( url: string, name?: string ) => Promise< SavedMediaItem >;
 };
 
 /**
@@ -29,10 +35,7 @@ export default function useSaveToMediaLibrary() {
 		[]
 	) as BlockEditorStore[ 'selectors' ];
 
-	const saveToMediaLibrary = (
-		url: string,
-		name: string = null
-	): Promise< { id: string; url: string } > => {
+	const saveToMediaLibrary = ( url: string, name: string = null ): Promise< SavedMediaItem > => {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		const settings = getSettings() as any;
 
@@ -67,7 +70,11 @@ export default function useSaveToMediaLibrary() {
 
 									if ( image ) {
 										debug( 'Image uploaded to media library', image );
-										resolve( image );
+										resolve( {
+											id: image.id,
+											url: image.url,
+											mime: image.mime,
+										} );
 									}
 
 									setIsLoading( false );

projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx

@@ -4,7 +4,7 @@
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button, Icon } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -71,7 +71,7 @@ const SaveInLibraryButton: FC< { siteId: string } > = ( { siteId } ) => {
 		}
 	};
 
-	const savingLabel = __( 'Saving…', 'jetpack-ai-client' );
+	const savingLabel = _x( 'Saving…', 'Logo save button', 'jetpack-ai-client' );
 	const savedLabel = __( 'Saved', 'jetpack-ai-client' );
 
 	return ! saving && ! saved ? (

projects/js-packages/publicize-components/changelog/add-social-ai-image-generation-modal-poc

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Reuse AI image generation in media section

projects/js-packages/publicize-components/package.json

@@ -25,6 +25,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@automattic/jetpack-ai-client": "workspace:*",
 		"@automattic/jetpack-analytics": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",

projects/js-packages/publicize-components/src/components/media-section-v2/index.tsx

@@ -3,11 +3,12 @@
  * Unified media selection interface for social posts
  */
 
+import { GeneralPurposeImage } from '@automattic/jetpack-ai-client';
 import { ThemeProvider } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { MediaUpload } from '@wordpress/block-editor';
 import { BaseControl, Button, Notice } from '@wordpress/components';
-import { useCallback, useMemo, useRef } from '@wordpress/element';
+import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import useFeaturedImage from '../../hooks/use-featured-image';
 import useImageGeneratorConfig from '../../hooks/use-image-generator-config';
@@ -85,6 +86,9 @@ export default function MediaSectionV2( {
 	// Ref to store the MediaUpload open function
 	const openMediaLibraryRef = useRef< () => void >( () => {} );
 
+	// State for AI image generation modal
+	const [ showAiImageModal, setShowAiImageModal ] = useState( false );
+
 	// Determine current media source
 	// Priority 1: Explicit user choice (if media_source is set)
 	// Priority 2: Detect from existing data (backward compatibility)
@@ -160,12 +164,12 @@ export default function MediaSectionV2( {
 	// Handle media selection from Media Library
 	const handleMediaLibrarySelect = useCallback(
 		( media: WPMediaObject ) => {
-			const { id, url, mime: type } = media;
+			const { id, url, mime } = media;
 
 			// Single batch update with explicit media_source
 			updateJetpackSocialOptions( {
 				media_source: 'media-library',
-				attached_media: [ { id, url, type } ],
+				attached_media: [ { id, url, type: mime } ],
 				image_generator_settings: { ...imageGeneratorSettings, enabled: false },
 			} );
 
@@ -183,6 +187,37 @@ export default function MediaSectionV2( {
 		}, 0 );
 	}, [] );
 
+	// Handle AI image generation click
+	const handleAiImageClick = useCallback( () => {
+		setShowAiImageModal( true );
+	}, [] );
+
+	// Handle AI image modal close
+	const handleAiImageModalClose = useCallback( () => {
+		setShowAiImageModal( false );
+	}, [] );
+
+	// Handle AI image selection
+	const handleAiImageSelect = useCallback(
+		( { id, url, mime }: WPMediaObject ) => {
+			// Use 'media-library' as the source since the AI image is uploaded to the media library
+			updateJetpackSocialOptions( {
+				media_source: 'media-library',
+				attached_media: [ { id, url, type: mime || 'image/png' } ],
+				image_generator_settings: { ...imageGeneratorSettings, enabled: false },
+			} );
+
+			// Track as 'ai-image' in analytics to distinguish from regular media library selections
+			recordEvent( 'jetpack_social_media_source_changed', {
+				...analyticsData,
+				source: 'ai-image',
+			} );
+
+			setShowAiImageModal( false );
+		},
+		[ updateJetpackSocialOptions, imageGeneratorSettings, recordEvent, analyticsData ]
+	);
+
 	const renderMediaUpload = useCallback( ( { open }: { open: () => void } ) => {
 		openMediaLibraryRef.current = open;
 		return null;
@@ -275,6 +310,7 @@ export default function MediaSectionV2( {
 								currentSource={ currentSource }
 								onSelect={ handleSourceSelect }
 								onMediaLibraryClick={ handleMediaLibraryClick }
+								onAiImageClick={ handleAiImageClick }
 								disabled={ disabled }
 							>
 								{ ( { open } ) => (
@@ -313,6 +349,7 @@ export default function MediaSectionV2( {
 								currentSource={ currentSource }
 								onSelect={ handleSourceSelect }
 								onMediaLibraryClick={ handleMediaLibraryClick }
+								onAiImageClick={ handleAiImageClick }
 								disabled={ disabled }
 							/>
 							{ currentSource === 'featured-image' && ! featuredImageId && (
@@ -327,6 +364,13 @@ export default function MediaSectionV2( {
 					) }
 				</BaseControl>
 			</div>
+			{ showAiImageModal && (
+				<GeneralPurposeImage
+					placement="social-media-dropdown"
+					onClose={ handleAiImageModalClose }
+					onSetImage={ handleAiImageSelect }
+				/>
+			) }
 		</ThemeProvider>
 	);
 }

projects/js-packages/publicize-components/src/components/media-section-v2/media-source-menu.tsx

@@ -3,6 +3,7 @@
  * Displays a dropdown menu with grouped media source options
  */
 
+import { AiSVG } from '@automattic/jetpack-ai-client';
 import { Button, Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -50,6 +51,17 @@ const MEDIA_SOURCE_OPTIONS: MediaSourceOption[] = [
 		icon: video,
 		group: 'attachment',
 	},
+	{
+		id: 'ai-image',
+		label: __( 'Generate image', 'jetpack-publicize-components' ),
+		description: __( 'You are using an AI-generated image.', 'jetpack-publicize-components' ),
+		icon: AiSVG,
+		group: 'attachment',
+		attachmentDescription: __(
+			'Shares your AI-generated image as an attachment for higher engagement.',
+			'jetpack-publicize-components'
+		),
+	},
 ];
 
 /**
@@ -91,6 +103,7 @@ interface MediaSourceMenuItemProps {
 	onSelect: ( optionId: MediaSourceType ) => void;
 	onClose: () => void;
 	onMediaLibraryClick?: () => void;
+	onAiImageClick?: () => void;
 }
 
 /**
@@ -102,6 +115,7 @@ interface MediaSourceMenuItemProps {
  * @param {Function} props.onSelect            - Selection handler
  * @param {Function} props.onClose             - Close dropdown handler
  * @param {Function} props.onMediaLibraryClick - Media library click handler
+ * @param {Function} props.onAiImageClick      - AI image generation click handler
  * @return {object} MediaSourceMenuItem component
  */
 function MediaSourceMenuItem( {
@@ -110,15 +124,18 @@ function MediaSourceMenuItem( {
 	onSelect,
 	onClose,
 	onMediaLibraryClick,
+	onAiImageClick,
 }: MediaSourceMenuItemProps ) {
 	const handleClick = useCallback( () => {
 		if ( option.id === 'media-library' ) {
 			onMediaLibraryClick?.();
+		} else if ( option.id === 'ai-image' ) {
+			onAiImageClick?.();
 		} else {
 			onSelect( option.id );
 		}
 		onClose();
-	}, [ option.id, onSelect, onClose, onMediaLibraryClick ] );
+	}, [ option.id, onSelect, onClose, onMediaLibraryClick, onAiImageClick ] );
 
 	return (
 		<MenuItem
@@ -139,6 +156,7 @@ function MediaSourceMenuItem( {
  * @param {string}   props.currentSource       - Currently selected media source
  * @param {Function} props.onSelect            - Callback when a source is selected
  * @param {Function} props.onMediaLibraryClick - Callback when Media Library option is clicked
+ * @param {Function} props.onAiImageClick      - Callback when Generate with AI option is clicked
  * @param {boolean}  props.disabled            - Whether the menu is disabled
  * @param {Function} props.children            - Optional children render function that receives open function
  * @return {object} MediaSourceMenu component
@@ -147,6 +165,7 @@ export default function MediaSourceMenu( {
 	currentSource,
 	onSelect,
 	onMediaLibraryClick,
+	onAiImageClick,
 	disabled = false,
 	children,
 }: MediaSourceMenuProps ) {
@@ -197,12 +216,20 @@ export default function MediaSourceMenu( {
 							onSelect={ onSelect }
 							onClose={ onClose }
 							onMediaLibraryClick={ onMediaLibraryClick }
+							onAiImageClick={ onAiImageClick }
 						/>
 					) ) }
 				</MenuGroup>
 			</>
 		),
-		[ linkPreviewOptions, attachmentOptions, currentSource, onSelect, onMediaLibraryClick ]
+		[
+			linkPreviewOptions,
+			attachmentOptions,
+			currentSource,
+			onSelect,
+			onMediaLibraryClick,
+			onAiImageClick,
+		]
 	);
 
 	return (

projects/js-packages/publicize-components/src/components/media-section-v2/test/index.test.tsx

@@ -57,6 +57,11 @@ jest.mock( '@automattic/jetpack-shared-extension-utils', () => ( {
 	} ),
 } ) );
 
+jest.mock( '@automattic/jetpack-ai-client', () => ( {
+	GeneralPurposeImage: () => null,
+	AiSVG: 'svg',
+} ) );
+
 jest.mock( '@wordpress/block-editor', () => ( {
 	MediaUpload: ( {
 		render: renderProp,

projects/js-packages/publicize-components/src/components/media-section-v2/types.ts

@@ -7,6 +7,11 @@
  */
 export type MediaSourceType = 'featured-image' | 'media-library' | 'upload-video' | 'sig' | null;
 
+/**
+ * Menu option IDs - includes all menu items including 'ai-image' which is handled specially
+ */
+export type MenuOptionId = MediaSourceType | 'ai-image';
+
 /**
  * WordPress media object from MediaUpload
  */
@@ -25,7 +30,7 @@ export type MenuGroupType = 'link-preview' | 'attachment';
  * Media source option definition
  */
 export interface MediaSourceOption {
-	id: MediaSourceType;
+	id: MenuOptionId;
 	label: string;
 	description: string;
 	icon: JSX.Element;
@@ -78,6 +83,11 @@ export interface MediaSourceMenuProps {
 	 */
 	onMediaLibraryClick?: () => void;
 
+	/**
+	 * Callback when Generate with AI option is clicked
+	 */
+	onAiImageClick?: () => void;
+
 	/**
 	 * Whether the menu is disabled
 	 */

projects/js-packages/publicize-components/src/components/social-previews/use-post-data.js

@@ -59,8 +59,8 @@ export function usePostData() {
 				};
 			};
 
-			for ( const { id } of attachedMedia ) {
-				const mediaDetails = getMediaDetails( id );
+			for ( const attachedItem of attachedMedia ) {
+				const mediaDetails = getMediaDetails( attachedItem.id );
 				if ( mediaDetails ) {
 					media.push( mediaDetails );
 				}

projects/plugins/jetpack/changelog/add-social-ai-image-generation-modal-poc

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Reuse AI image generation in media section

projects/plugins/social/changelog/add-social-ai-image-generation-modal-poc

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Reuse AI image generation in media section