feat: Add standalone AI image generation interface to the Media Library. by zeus2611 · Pull Request #258 · WordPress/ai

zeus2611 · 2026-02-26T11:40:14Z

What?

Closes #254

Adds a standalone image generation interface accessible from the WordPress Media Library, allowing users to generate AI-powered images outside the block editor.

Why?

#235 introduced image generation within the block editor. This PR extends that functionality into the Media Library so users can generate images independently of the post editor context, as outlined in #254. This opens up the image generation capability to any workflow that involves the Media Library.

How?

Backend (PHP)

Image_Generation.php: Added register_admin_menu() to register a "Generate Image" submenu item under Media using add_media_page()
Image_Generation.php: Added render_admin_page() to output the admin page shell with a React mount point (#ai-image-generation-root)
Image_Generation.php: Added inject_generate_image_button() hooked to admin_footer-upload.php to inject a "Generate Image" action button into the Media Library header alongside "Add New Media File". Uses a capture-phase click listener to bypass WordPress's media grid JS event delegation
Image_Generation.php: Updated enqueue_assets() to load scripts on upload.php and media_page_ai-image-generation in addition to post editor screens

Frontend (React/TypeScript)

GenerateImageStandalone.tsx: New standalone React component providing the full image generation flow:
- Idle → prompt input
- Generating → spinner with progress messages
- Preview → generated image with Save / Refine / Regenerate / Cancel actions
- Success → confirmation with option to generate another
media-library.tsx: Mounts GenerateImageStandalone on the admin page's #ai-image-generation-root element
index.ts: Added import './media-library' entry point

Temporary Scaffolding

uploadImageLocal() in GenerateImageStandalone.tsx is a local fallback for image upload functionality. Once Inline image generation #235 is merged, this will be replaced with the shared uploadImage function from ../functions/upload-image during rebase.

Use of AI Tools

Implementation was planned and executed with assistance from Gemini (Antigravity). All code was reviewed, tested, and validated manually in a local WordPress environment.

Testing Instructions

Add valid AI credentials in Settings > AI Credentials (Google or OpenAI support image generation)
Ensure the image generation experiment is turned on under Settings > AI Experiments
Navigate to Media > Library in wp-admin
Verify a "Generate Image" button appears in the header next to "Add New Media File"
Click the "Generate Image" button
Verify you are navigated to the Media > Generate Image admin page (not the upload panel)
Enter an image generation prompt and click Generate
Verify a loading spinner appears with progress text
Once the image is generated, verify the preview is rendered with buttons: Save to Media Library, Regenerate, and Cancel
Click Save to Media Library and verify the image is imported successfully with a confirmation message
Click Generate Another Image and verify you return to the prompt input
Try Cancel to return to the idle state
Navigate to Media > Generate Image in the sidebar and verify the same standalone UI loads correctly
If the alt text experiment is enabled, verify alt text is generated during image import

Testing Instructions for Keyboard

Tab to the "Generate Image" button in the Media Library header and press Enter
On the Generate Image page, Tab to the textarea, type a prompt, then Tab to the Generate button and press Enter
After generation, Tab through the action buttons (Save, Regenerate, Cancel) and verify each is focusable and activatable with Enter
Verify focus management returns to an appropriate element after state transitions

Screenshots or screencast

Before	After

github-actions · 2026-02-26T11:40:26Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: zeus2611 <n1schay@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

codecov · 2026-02-26T11:46:40Z

Codecov Report

❌ Patch coverage is 61.29032% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 57.68%. Comparing base (3b059d9) to head (693f6b8).
⚠️ Report is 20 commits behind head on develop.

Files with missing lines	Patch %	Lines
.../Experiments/Image_Generation/Image_Generation.php	61.29%	12 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #258      +/-   ##
=============================================
+ Coverage      57.48%   57.68%   +0.20%     
- Complexity       563      567       +4     
=============================================
  Files             35       35              
  Lines           2907     2933      +26     
=============================================
+ Hits            1671     1692      +21     
- Misses          1236     1241       +5

Flag	Coverage Δ
unit	`57.68% <61.29%> (+0.20%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

zeus2611 · 2026-02-26T18:20:08Z

Investigated the failing PHP trunk tests — the fatal error originates in wp-includes/ai-client/adapters/class-wp-ai-client-http-client.php (a WP core file) rather than this PR's changes. It's a PSR namespace mismatch between the interface contract and implementation, which explains why all PHP versions pass on WP latest but fail on WP trunk. Happy to retest once trunk stabilizes, or let me know if there's a preferred workaround.

dkotter · 2026-02-26T18:34:25Z

Investigated the failing PHP trunk tests — the fatal error originates in wp-includes/ai-client/adapters/class-wp-ai-client-http-client.php (a WP core file) rather than this PR's changes. It's a PSR namespace mismatch between the interface contract and implementation, which explains why all PHP versions pass on WP latest but fail on WP trunk. Happy to retest once trunk stabilizes, or let me know if there's a preferred workaround.

Yes, known issue between the version of the AI Client we load and the version that is now merged into trunk (and will be in WP 7.0). Tracking the fixes for this on #242

dkotter

I know we're waiting for #235 to get merged before this can be 100% finished but did an initial review here and left some comments

includes/Experiments/Image_Generation/Image_Generation.php

package-lock.json

src/experiments/image-generation/components/GenerateImageStandalone.tsx

jeffpaul · 2026-03-03T21:14:58Z

Besides some threaded comments above, my primary testing feedback is the post-generation flow. Here is what currently results:

Perhaps we instead send folks back to the Media Library with the generated image present (as they have the Generate Image button and second level menu item they can select to generate another image?

Alternatively, perhaps we send them to the Attachment details modal?

Or to the Edit Media page?

I'm curious if @karmatosed has a particularly strong preference here?

karmatosed · 2026-03-03T21:19:40Z

@jeffpaul thanks for looping me in. I think in this case the 'attachment page' works. I typically like things to stay on same screen but it will get lost if we keep it there and that screen doesn't really have a good highlight. I like idea of even adding a 'regenerate' option there but that's another scope creep.

zeus2611 · 2026-03-04T09:30:33Z

@dkotter @jeffpaul & @karmatosed. I intentionally kept the user on the Generate Image page after saving to allow batch generation without back-and-forth navigation — which felt like the primary use case for someone in the Media Library context vs the block editor, where inserting the image is the end goal.

That said, I think the middle ground makes sense: I'll add a "View in Media Library" link alongside the "Generate Another Image" button in the success state. This gives users who want to inspect or edit the attachment a direct path without forcing navigation for those who want to keep generating.

…et enqueuing, and improve image upload JSDoc.

…eration` to `ai_image_generation` in image generation tests.

…eration experiment tests.

…ve image refinement functionality from the standalone component.

zeus2611 · 2026-03-04T12:00:15Z

@dkotter @jeffpaul @karmatosed — updated the success state to include two buttons: "Generate Another Image" (keeps the current flow intact for batch generation) and "View in Media Library" which takes the user directly to the attachment details page for the saved image.

The attachment details page felt like the right destination over the media grid since the user can immediately review and edit the auto-generated title, alt text and description — which is likely the next thing they'd want to do. WordPress's built-in prev/next navigation in the top-right also lets them browse previously generated images without any additional custom code on our end.

Screenshots attached showing the updated success state. Happy to adjust if you'd prefer the link goes to the media grid instead.

src/experiments/image-generation/components/GenerateImageStandalone.tsx

dkotter · 2026-03-04T15:51:14Z

Tested and things look good to me. I've added new E2E tests to cover these changes. I think the last thing here is some additional refactoring that can now be done since #235 has been merged (see comment). Once done, this will be good to merge

…e component to use it.

…edia-Library

dkotter

Tested again and things work fine so approving this.

I do think there's some refinement we could make here around the loading state. I'm also seeing some weird shifting after an image is generated and then when you choose to import that or regenerate. Seems the width of the container is changing so the image decreases in size a bit. Not a blocker but something we can look to refine

zeus2611 · 2026-03-05T18:32:52Z

Thanks for testing and the approval, @dkotter!

Agreed on both the loading state and the container width shift — I can reproduce the latter too. Would you prefer I address these here before merge, or should we track them as a follow-up issue so this PR can land cleanly? Happy to do either.

dkotter · 2026-03-05T18:48:39Z

Agreed on both the loading state and the container width shift — I can reproduce the latter too. Would you prefer I address these here before merge, or should we track them as a follow-up issue so this PR can land cleanly? Happy to do either.

@zeus2611 I'd say so we don't hold this PR up for merge (and getting a release out) we can tackle these in a follow-up PR. I think the layout shift will be easy but may want more conversation around the loading state, trying to figure out what works best both here and when generating images within the editor

zeus2611 · 2026-03-05T19:21:42Z

Sounds good, @dkotter! That aligns with my thinking too — while working on the last change request I did consider touching the loading state but held back since getting it right across both the inline and standalone contexts felt like something worth discussing as a team rather than deciding unilaterally. I'll open a follow-up issue to track both the layout shift and the loading state so we have a clear place for that conversation.

jeffpaul · 2026-03-05T19:32:24Z

@zeus2611 FYI I created #270 to track the follow-up work

jeffpaul requested review from dkotter and jeffpaul February 26, 2026 14:29

jeffpaul assigned zeus2611 Feb 26, 2026

jeffpaul added this to the 0.4.0 milestone Feb 26, 2026

zeus2611 mentioned this pull request Feb 27, 2026

Add “Refine from Notes” action to update post content based on editorial feedback #250

Open

dkotter requested changes Mar 2, 2026

View reviewed changes

jeffpaul mentioned this pull request Mar 3, 2026

Release version 0.4.0 #265

Closed

20 tasks

zeus2611 force-pushed the feature/Integrate-Image-Generation-into-Media-Library branch 2 times, most recently from 0e9d62e to 96e9bc0 Compare March 4, 2026 10:59

zeus2611 added 4 commits March 4, 2026 17:02

feat: Add standalone AI image generation interface to the Media Library.

2bca7a7

Add integration tests for image generation admin page, hooks, and ass…

03e139f

…et enqueuing, and improve image upload JSDoc.

test: Update expected script handle name from `wordpress-ai-image_gen…

fec75c7

…eration` to `ai_image_generation` in image generation tests.

test: remove test_enqueue_assets_loads_on_media_page from image gen…

ffef4df

…eration experiment tests.

zeus2611 force-pushed the feature/Integrate-Image-Generation-into-Media-Library branch from 96e9bc0 to eb2e195 Compare March 4, 2026 11:35

refactor: Rename image generation admin page slug and title, and remo…

0fcbe7b

…ve image refinement functionality from the standalone component.

zeus2611 force-pushed the feature/Integrate-Image-Generation-into-Media-Library branch from eb2e195 to 0fcbe7b Compare March 4, 2026 11:45

dkotter reviewed Mar 4, 2026

View reviewed changes

src/experiments/image-generation/components/GenerateImageStandalone.tsx Outdated Show resolved Hide resolved

Add new E2E tests

5394166

zeus2611 added 2 commits March 5, 2026 11:44

refactor: Extract image upload logic to a dedicated utility and updat…

1e835cf

…e component to use it.

Merge branch 'develop' into feature/Integrate-Image-Generation-into-M…

693f6b8

…edia-Library

jeffpaul requested a review from dkotter March 5, 2026 14:39

dkotter approved these changes Mar 5, 2026

View reviewed changes

jeffpaul merged commit 3926290 into WordPress:develop Mar 5, 2026
21 of 27 checks passed

jeffpaul mentioned this pull request Mar 5, 2026

Refine image generation loading state and fix layout shift in Generate Image modal #270

Open

zeus2611 deleted the feature/Integrate-Image-Generation-into-Media-Library branch March 5, 2026 19:42

Conversation

zeus2611 commented Feb 26, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Backend (PHP)

Frontend (React/TypeScript)

Temporary Scaffolding

Use of AI Tools

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

zeus2611 commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dkotter commented Feb 26, 2026

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jeffpaul commented Mar 3, 2026

Uh oh!

karmatosed commented Mar 3, 2026

Uh oh!

zeus2611 commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zeus2611 commented Mar 4, 2026

Uh oh!

Uh oh!

dkotter commented Mar 4, 2026

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

zeus2611 commented Mar 5, 2026

Uh oh!

dkotter commented Mar 5, 2026

Uh oh!

zeus2611 commented Mar 5, 2026

Uh oh!

Uh oh!

jeffpaul commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

zeus2611 commented Feb 26, 2026 •

edited by github-actions bot

Loading

github-actions bot commented Feb 26, 2026 •

edited

Loading

codecov bot commented Feb 26, 2026 •

edited

Loading

zeus2611 commented Feb 26, 2026 •

edited

Loading

zeus2611 commented Mar 4, 2026 •

edited

Loading