Social: Generate AI image for media from the sidebar #46147

gmjuhasz · 2025-12-01T14:33:44Z

Closes SOCIAL-253
Fixes SOCIAL-240

Proposed changes:

~~This is a PoC sitting on top of Social: Add the new media selection UI #46085, that adds the support to create images with AI from our new media selector.~~ - I cleaned it up, now it's ready for revieew

Reused the generic AI modal from ai-client, and integrated it into our media selector section

Testing instructions:

Prerequisites:

You need the new feature flag to test this: Add the feature flag to your site: Run wpsh > add_blog_sticker( 'jetpack-social-unified-ui-v1', null, null, <your-blog-id> );
The new preview modal is not functional, so you need to use the old one: In projects/js-packages/publicize-components/src/components/form/index.tsx negate siteHasFeature( features.UNIFIED_UI_V1 ) so you have the old modal
Have the Jetpack Social plan

Testing:

Create a new post
Go to the Social sidebar
In the new media section select generate image
The AI generation modal should pop up.
Generate an image you like, then select it.
The media section should switch to the custom image type, with your image selected from the media lib.
Check the previews, they should reflect the image.
Share the post and check what gets shared, it should have the AI generated image.

CleanShot.2025-12-04.at.11.54.08.mp4

github-actions · 2025-12-01T14:34:51Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the add/social/ai-image-generation-modal-poc branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/social/ai-image-generation-modal-poc

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/social/ai-image-generation-modal-poc

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-12-01T14:34:59Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
🔴 Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

## Does this pull request change what data or activity we track or use?

My PR adds *x* and *y*.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: January 6, 2026

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Social plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

robertsreberski

It simply works good 👌

I had a couple of questions below - will approve once we discuss them, but in general everything works good!

robertsreberski · 2025-12-05T11:51:10Z

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

+			// 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: 'image/png' } ],


Can we assume it's always image/png?

Yes - AI-generated images are always PNG (they're returned as base64-encoded PNG from the AI service). Added a comment to clarify. e4d1448

Alright, I see that now.

What I would propose here is to support the parameter mime_type in the function - to be coherent with WPMediaObject type in handleAiImageSelect(), with mime being optional and defaulting to image/png.

While I see that it's AI code that isn't considering other types, and that it might be replaced soon by Image Studio, it's good to be prepared for the correct object (or at least typed) to reach the input of this function. Otherwise, we end up with a hardcoded logic that requires a refactor - and I'm not sure whether all AI providers produce the png same as DALL-e.

I've run Claude to backtrack where it comes from:

Done in efc7a83

robertsreberski · 2025-12-05T11:54:08Z

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

+					media.push( {
+						type: attachedItem.type,
+						url: attachedItem.url,
+						alt: '',


Doesn't the attachedItem have the alt text? Should we maybe set one here?

I would assume that AI generated image has the alt, as of the description of what is happening on the image 🤔

Good catch. Simplified the code to always fetch from the entity record, which includes alt_text from the media library. However, the AI image generation flow doesn't currently set alt text on the media item when saving - that would require changes in ai-client. Worth tracking as a follow-up?

Perhaps worth tracking - but I also understand they are working on this Image Studio, right?

Definitely better to keep it as it comes - instead of building our own logic that might become a bottleneck

Yes they are, so not sure if it's worth fixing before that

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

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

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

robertsreberski

Code looks good to me, works great as well!

Just last comment about making sure the typing in consistent with what we already have in Publicize

robertsreberski · 2025-12-09T11:28:35Z

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

+
+	// Handle AI image selection
+	const handleAiImageSelect = useCallback(
+		( { id, url, mime_type }: { id: number; url: string; mime_type?: string } ) => {


Should we use WPMediaObject type here, rather than introducing inline custom typing?

gmjuhasz added 23 commits November 26, 2025 10:32

Create a hook for getting the SIG preview properly

377755c

Move utils from GeneratedImagePreview to the newly created hook

288f746

Add tests for SIG hook

a3349ae

changelog

3556045

Refactor GeneratedImagePreview to use the useSigPreview hook

cce8eca

Add new media section and preview + dropdown components

b1f4d19

changelog

2f4d636

Hook up components + connect with new feature flag

60686c9

Hook up SIG preview hook with the new component

fd4c016

Move utils from GeneratedImagePreview to the newly created hook

6df34c2

Update styling

dc44786

Alignment changes

a8a9871

Merge branch 'trunk' into add/social/new-media-selector-ui

1c772d3

Merge branch 'trunk' into add/social/new-media-selector-ui

54e8787

Fix race conditions with changes

ea204e0

Add tests

814bcf4

Merge branch 'trunk' into add/social/new-media-selector-ui

dd1b671

Refactor logic + add extra toggle

a00ce2a

changelog

3df3acd

Handle empty featured image

3db835c

Fix test

2fd68b0

Merge branch 'trunk' into add/social/new-media-selector-ui

d631ef2

Reuse GeneralPurposeImage component in the social sidebar

9ef10a3

github-actions bot added [Feature] Publicize Now Jetpack Social, auto-sharing [JS Package] Publicize Components [Status] In Progress RNA labels Dec 1, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Dec 1, 2025

github-actions bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Social Issues about the Jetpack Social plugin [Tests] Includes Tests labels Dec 2, 2025

changelog

0876eee

gmjuhasz force-pushed the add/social/ai-image-generation-modal-poc branch from bd6fa0d to 0876eee Compare December 2, 2025 12:15

gmjuhasz added 4 commits December 2, 2025 13:24

Use new naming

466133f

Fix AI image selection after generation

1fd994b

If url is available use that for preview

174e635

Revert unintended change

a394ac1

github-actions bot added the [Extension] Social Previews Social Preview block editor plugin label Dec 4, 2025

gmjuhasz changed the title ~~[POC] Reuse GeneralPurposeImage component in the Social sidebar~~ Social: Generate AI image for media from the sidebar Dec 4, 2025

Merge branch 'trunk' into add/social/ai-image-generation-modal-poc

7c66dd2

gmjuhasz marked this pull request as ready for review December 4, 2025 10:56

gmjuhasz self-assigned this Dec 4, 2025

gmjuhasz requested a review from a team December 4, 2025 10:56

gmjuhasz added the [Type] Feature Development of a new feature label Dec 4, 2025

gmjuhasz added 3 commits December 4, 2025 12:12

Fix type declarations

afefa38

Fix minification issue

18e31a4

changelog

e8b184a

github-actions bot added the [JS Package] AI Client label Dec 4, 2025

gmjuhasz added Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Dec 4, 2025

robertsreberski reviewed Dec 5, 2025

View reviewed changes

Simplify logic + add comment

e4d1448

gmjuhasz requested a review from robertsreberski December 8, 2025 12:10

Extend image type

efc7a83

robertsreberski reviewed Dec 9, 2025

View reviewed changes

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

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

robertsreberski previously approved these changes Dec 9, 2025

View reviewed changes

Rename mime_type to mime and use WPMediaObject

24f3b23

gmjuhasz dismissed robertsreberski’s stale review via 24f3b23 December 9, 2025 12:26

Social: Generate AI image for media from the sidebar #46147

Are you sure you want to change the base?

Social: Generate AI image for media from the sidebar #46147

Conversation

gmjuhasz commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Testing instructions:

Uh oh!

github-actions bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

robertsreberski left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

robertsreberski left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gmjuhasz commented Dec 1, 2025 •

edited

Loading

github-actions bot commented Dec 1, 2025 •

edited

Loading

github-actions bot commented Dec 1, 2025 •

edited

Loading

robertsreberski left a comment •

edited

Loading