[Feature][PoC]: Issue 325 | Experimental Media Editor | AI Alt Text

[TylerB24890]

What?

See #325

This PR integrates the AI Alt Text generation experiment into the new experimental Media Editor in Gutenberg.
It is intended as a Proof of Concept/MVP implementation only.

Related:

• Phase 3: Collaboration > Media Library gutenberg#55238
• Media Library: Create a media editor, that can be used from within the post and site editors gutenberg#72734

Why?

Currently all AI experiments only target the existing core media library and modals. This is sufficient for the time-being, but as WordPress continues to evolve its important that the AI features available in the legacy media UI are also available in the upcoming media UI.

How?

The new Media Editor does not currently provide any filters or Slot/Fill components for extending the field output. This means we are not able to hook into the media editor fields and add new components within the existing fieldset. We must register our field separately with registerEntityField to the attachment post type. By default this appends the registered fields to the bottom of the form, with no way to control the render order.

To ensure the Alt Text field and the "Generate" button are rendered together, we're overriding the core Alt Text input and rendering it with a <Button /> to trigger the Alt Text generation. This moves the Alt Text field to the bottom of the UI, but keeps the "Generate" button inline/next-to the Alt Text <TextareaControl /> component.

Additionally, because registerPostTypeSchema runs asynchronously from usePostFields we can't accurately determine which Field component will be registered first. Like all objects, the last reference will take priority, meaning if the core Field is registered after our custom Field, it will override our override.

To get around this, we are subscribing to the postType state and re-registering the Field once the state changes to the attachment post type with a 100ms delay. This ensures our custom Field (and Button) are registered after the core Field and therefore taking priority in the render. Subscribing to the postType state ensures this re-register only happens once, as the postType is set only once.

Use of AI Tools

• AI assistance: Yes
• Tool(s): Claude
• Model(s): Opus 4.6
• Used for:
  • Thorough review & explanation of the media-editor package.
  • Approach proposal and feasibility assessment.
  • Support in understanding the asynchronous nature of registerPostTypeSchema and usePostFields
  • Base implementation; final code was reviewed and revised by me.

Suggested Next Steps

1. Open an issue and/or PR in the WordPress/gutenberg repository to add filters to the media-editor package field output allowing us to hook into and modify the attachment post type fields directly (rather than overriding with a setTimeout)
   • Following this we would update this implementation to use the hooks so we can keep the Alt Text Field component in its current position in the form.
2. Implement the ImageGeneration experiment into the new Media Editor.
   • Because we're not overriding an existing field with this one we wouldn't be dependent on hooks or filters being added to the media-editor package.
3. Implement E2E and Unit Tests.

Testing Instructions

1. Pull down and build a copy of the latest Gutenberg plugin and activate in a local installation.
2. Pull down the branch and build.
3. Navigate to the Experiments settings page in the Gutenberg plugin settings and activate the Media Editor experiment.
4. Navigate to the AI settings and enable the Alt Text Generation experiment.
5. Navigate to a post and insert the Image block. Select an image from the Media Library.
6. In the block toolbar, click the Edit Image button to open the inline Image Editor.
7. Confirm the Alt Text field in the Image Editor is accompanied by the "Generate Alt Text" button.
8. Click the "Generate Alt Text" button and confirm the suggested text is inserted directly into the Alt Text textarea field.
9. Confirm the button changes to "Regenerate" after a suggestion is in place.

Screenshots or screencast

Before	After

Note: Notice the alt text has been moved to the bottom of the UI with the Generate button. This is a result of not having any existing hooks to the Field rendering.

Changelog Entry

Added - New feature.
Changed - Existing functionality.
Deprecated - Soon-to-be removed feature.
Removed - Feature.
Fixed - Bug fix.
Security - Vulnerability.
Development Update - Development related updates.

Added - New feature.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.75%. Comparing base (43d3bde) to head (054c4ff).

Files with missing lines	Patch %	Lines
...iments/Alt_Text_Generation/Alt_Text_Generation.php	0.00%	11 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff              @@
##             develop     #446      +/-   ##
=============================================
- Coverage      66.90%   66.75%   -0.16%     
- Complexity       907      910       +3     
=============================================
  Files             59       59              
  Lines           4699     4710      +11     
=============================================
  Hits            3144     3144              
- Misses          1555     1566      +11     

Flag	Coverage Δ
unit	66.75% <0.00%> (-0.16%)	⬇️

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.