Add action hooks to media modal attachment details templates for field extensibility

[kaavyaiyer]

Since WP 7.0 ships with a built-in AI client, there is a need for AI-powered features like alt text generation to be able to place controls (e.g., a "Generate" button) directly next to the fields they act on within the media modal.

Currently, wp-includes/media-template.php does not provide any hooks inside the attachment details templates where fields like Alternative Text are rendered. This leaves JavaScript DOM manipulation as a workaround to place controls directly next to existing fields.

The first concrete use case is the ​https://github.com/WordPress/ai alt text generation experiment, which needs a "Generate" button next to the Alternative Text textarea. See: ​WordPress/ai#425 for the original discussion.

Proposed Solution

Add action hooks inside the two attachment details Backbone templates in media-template.php

Extending to other fields

Beyond the media modal, similar hooks would benefit other areas of the admin where AI features need to place controls next to existing fields for title, image, caption generation, etc. This ticket focuses on the media modal as the starting point.

[darshitrajyaguru97]

This is a great initiative and clearly needed, especially with AI-powered features like alt text generation.

One important consideration: since the attachment details UI is rendered via Backbone templates (media-template.php), traditional PHP action hooks (do_action) won’t be effective inside <script type="text/html"> blocks.

A more robust approach could be introducing JavaScript-based extensibility points using wp.hooks, for example:

wp.hooks.doAction(
  'media_attachment_field_after',
  'alt',
  view,
  model
);

Additionally, field-specific hooks (e.g., media_attachment_field_after_alt, media_attachment_field_before_caption) would provide more granular control and avoid reliance on DOM querying.

As an alternative or fallback, Core could introduce dedicated placeholder containers within templates (e.g., .media-field-hook-alt) to allow safe UI injection without fragile DOM manipulation.

This approach would:

• Avoid performance overhead from runtime DOM mutations
• Provide a stable API for plugins
• Align well with AI-driven enhancements like alt text, caption, and title generation

Starting with the media modal makes sense, and this pattern could later extend to other admin UI areas where contextual field-level extensibility is needed.

#### Trac ticket: https://core.trac.wordpress.org/ticket/65086
---

## Summary

Adds new action hooks in the media modal attachment details templates so plugins can render controls directly next to core fields such as Alternative Text, Title, Caption, and Description, without relying on DOM manipulation.

## What changed

• Added hooks in the two-column attachment details template after:
  1. Alternative Text
  2. Title
  3. Caption
  4. Description

• Added hooks in the single-column attachment details template after:
  1. Alternative Text
  2. Title
  3. Caption
  4. Description

## Why

This enables feature plugins and integrations, including AI-powered workflows, to place contextual controls (for example, a Generate button for alt text) exactly where users expect them in the media modal UI.

Trac ticket: https://core.trac.wordpress.org/ticket/65086

## Use of AI Tools
AI assistance: Yes
Tool(s): Claude code
Model(s): opus 4.6
Used for: used for documentation and code review.

## Example plugin integration

// my-ai-plugin/js/generate-alt-text.js
wp.hooks.addAction(
	'media.view.attachment.renderFieldAfter',
	'my-ai-plugin/generate-alt-text',
	function( $setting, context ) {
		// Only inject beside the alt text field.
		if ( 'alt' !== context.field ) {
			return;
		}

		// Avoid double-injection on repeated renders.
		if ( $setting.find( '.my-ai-generate-alt' ).length ) {
			return;
		}

		var $button = $( '<button>', {
			type:  'button',
			class: 'button button-small my-ai-generate-alt',
			text:  wp.i18n.__( 'Generate', 'my-ai-plugin' ),
		} );

		$button.on( 'click', function() {
			var attachment = context.attachment;
			var $textarea  = $setting.find( 'textarea' );

			$button.prop( 'disabled', true ).text( wp.i18n.__( 'Generating…', 'my-ai-plugin' ) );

			wp.apiFetch( {
				path: '/my-ai-plugin/v1/generate-alt',
				method: 'POST',
				data: { attachment_id: attachment.get( 'id' ) },
			} ).then( function( response ) {
				// Update the Backbone model — triggers save via existing event binding.
				attachment.set( 'alt', response.alt_text );
				$textarea.val( response.alt_text ).trigger( 'change' );
			} ).catch( function() {
				// Surface error accessibly.
				wp.a11y.speak( wp.i18n.__( 'Could not generate alt text.', 'my-ai-plugin' ) );
			} ).finally( function() {
				$button.prop( 'disabled', false ).text( wp.i18n.__( 'Generate', 'my-ai-plugin' ) );
			} );
		} );

		$setting.append( $button );
	}
);