Skip to content

Move alt text generation button next to alt text field #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
iamsohilvahora wants to merge 5 commits into from
Closed

Move alt text generation button next to alt text field #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3b7018f
Move alt text generation button next to alt text field
iamsohilvahora May 1, 2026
dda3375
Merge branch 'develop' into fix/alt-text-button-placement
iamsohilvahora May 1, 2026
688b8f5
updated test al text generation file
iamsohilvahora May 1, 2026
22c3e74
Updated package lock file
iamsohilvahora May 1, 2026
7177c6d
Updated test function
iamsohilvahora May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 4 additions & 50 deletions includes/Experiments/Alt_Text_Generation/Alt_Text_Generation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ public function register(): void {
add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_editor_assets' ) );
add_action( 'wp_enqueue_media', array( $this, 'enqueue_media_frame_assets' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'maybe_enqueue_media_library_assets' ) );
add_action( 'add_meta_boxes_attachment', array( $this, 'setup_attachment_meta_box' ) );
add_filter( 'attachment_fields_to_edit', array( $this, 'add_button_to_media_modal' ), 10, 2 );
add_filter( 'bulk_actions-upload', array( $this, 'register_bulk_action' ) );
add_filter( 'handle_bulk_actions-upload', array( $this, 'handle_bulk_action' ), 10, 3 );
Expand Down Expand Up @@ -118,10 +117,6 @@ public function enqueue_media_frame_assets(): void {
* @param string $hook_suffix Current admin page hook suffix.
*/
public function maybe_enqueue_media_library_assets( string $hook_suffix ): void {
if ( ! $this->is_enabled() ) {
return;
}

if ( in_array( $hook_suffix, array( 'upload.php', 'media-new.php' ), true ) ) {
$this->maybe_enqueue_media_script();
$this->maybe_enqueue_bulk_script();
Expand Down Expand Up @@ -159,47 +154,6 @@ private function maybe_enqueue_media_script(): void {
$this->media_assets_enqueued = true;
}

/**
* Sets up the attachment meta box.
*
* Adds a meta box to the attachment edit screen that contains
* the Generate/Regenerate button.
*
* @since 0.3.0
*
* @param \WP_Post $post The attachment post.
*/
public function setup_attachment_meta_box( \WP_Post $post ): void {
if (
! $this->is_enabled() ||
! wp_attachment_is_image( $post )
) {
return;
}

add_meta_box(
'ai_alt_text_generation',
__( 'Alt Text', 'ai' ),
array( $this, 'render_attachment_meta_box' ),
'attachment',
);
}

/**
* Renders the attachment meta box content.
*
* @since 0.3.0
*
* @param \WP_Post $post The attachment post.
*/
public function render_attachment_meta_box( \WP_Post $post ): void {
$button_text = empty( get_post_meta( $post->ID, '_wp_attachment_image_alt', true ) ) ? __( 'Generate', 'ai' ) : __( 'Regenerate', 'ai' );

echo '<div class="ai-alt-text-media-actions" style="margin-top: 16px; max-width: 150px;">';
echo '<button id="ai-alt-text-generate-button" class="button button-secondary" type="button" data-attachment-id="' . absint( $post->ID ) . '">' . esc_html( $button_text ) . '</button><span class="spinner" aria-hidden="true" style="margin-left: 8px;"></span><p class="description" aria-live="polite" style="margin-top: 10px; line-height: 1.3;"></p>';
echo '</div>';
}

/**
* Adds the "Generate Alt Text" option to the Media Library bulk actions menu.
*
Expand Down Expand Up @@ -278,13 +232,13 @@ private function maybe_enqueue_bulk_script(): void {
}

/**
* Adds a button to the media modal to generate alt text.
* Adds media alt text generation controls directly beneath the alt text field.
*
* @since 0.3.0
*
* @param array<string, mixed> $fields The attachment fields.
* @param \WP_Post|null $post The attachment post.
* @return array<string, mixed> The attachment fields with the button added.
* @return array<string, mixed> The attachment fields with controls added.
*/
public function add_button_to_media_modal( array $fields, ?\WP_Post $post ): array {
if (
Expand All @@ -300,8 +254,8 @@ public function add_button_to_media_modal( array $fields, ?\WP_Post $post ): arr
$fields['ai_alt_text'] = array(
'label' => __( 'Alt Text', 'ai' ),
'input' => 'html',
'show_in_edit' => false,
'html' => '<div class="ai-alt-text-media-actions"><button id="ai-alt-text-generate-button" class="button button-secondary" type="button" data-attachment-id="' . absint( $post->ID ) . '">' . esc_html( $button_text ) . '</button><span class="spinner" aria-hidden="true" style="margin-left: 8px;"></span><p class="description" aria-live="polite" style="margin-top: 6px; font-size: 12px;"></p></div>',
'show_in_edit' => true,
Copy link
Copy Markdown
Collaborator

@dkotter dkotter May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing a stranded Alt Text field now on the single media edit screen:

Image

'html' => '<div class="ai-alt-text-media-actions"><button id="ai-alt-text-generate-button" class="button button-secondary ai-alt-text-generate-button" type="button" data-attachment-id="' . absint( $post->ID ) . '">' . esc_html( $button_text ) . '</button><span class="spinner" aria-hidden="true" style="margin-left: 8px;"></span><p class="description" aria-live="polite" style="margin-top: 6px; font-size: 12px;"></p></div>',
Copy link
Copy Markdown
Collaborator

@dkotter dkotter May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The UI in the media modal view isn't great:

Image

Copy link
Copy Markdown
Collaborator

@dkotter dkotter May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the loading states both in the modal and on the single edit screen need some style tweaks:

Image Image

);

return $fields;
Expand Down
Loading
Loading