[wp-trac] [WordPress Trac] #65086: Add action hooks to media modal attachment details templates for field extensibility

[WordPress Trac]

#65086: Add action hooks to media modal attachment details templates for field
extensibility
-------------------------+---------------------
 Reporter:  kaavyaiyer   |       Owner:  (none)
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  7.1
Component:  Media        |     Version:
 Severity:  normal       |  Resolution:
 Keywords:  has-patch    |     Focuses:
-------------------------+---------------------
Changes (by ozgursar):

 * keywords:  has-patch needs-testing => has-patch


Comment:

 ## Test Report
 Patch tested: https://github.com/WordPress/wordpress-develop/pull/11748

 ### Environment
 - WordPress: 7.1-alpha-62161-src
 - Subdirectory: No
 - PHP: 8.2.29
 - Server: nginx/1.29.4
 - Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
 - Browser: Chrome 148.0.0.0
 - OS: macOS
 - Theme: Twenty Twenty-Five 1.5
 - MU Plugins: None activated
 - Plugins:
   * Code Snippets 3.9.6
   * Test Reports 1.3.0

 ### Steps taken
 1. Add the following snippet to your active plugin's `functions.php` or
 using Code Snippets plugin


 {{{
 add_action(
         'admin_enqueue_scripts',
         function () {
                 wp_enqueue_media();

                 wp_add_inline_script(
                         'media-views',
                         "wp.hooks.addAction(
         'media.view.attachment.renderFieldAfter',
         'test-renderfield-hook',
         function( \$setting, context ) {
                 console.log(
                         '[renderFieldAfter]',
                         'field:', context.field,
                         '| attachment id:', context.attachment.get( 'id'
 ),
                         '| \$setting el:', \$setting[ 0 ]
                 );

                 if ( \$setting.find( '.hook-fired-badge' ).length ) {
                         return;
                 }

                 \$setting.append(
                         jQuery( '<span>', {
                                 class: 'hook-fired-badge',
                                 text:  'hook fired: ' + context.field,
                                 css: {
                                         display:      'inline-block',
                                         marginTop:    '4px',
                                         padding:      '1px 6px',
                                         fontSize:     '11px',
                                         background:   '#d63638',
                                         color:        '#fff',
                                         borderRadius: '3px',
                                         fontFamily:   'monospace',
                                 },
                         } )
                 );
         }
 );"
                 );
         }
 );
 }}}


 2. Add an image to Media, click and observe Attachment Details modal
 3. Apply the patch
 4. Click the same image in media and observe again
 5. Sidebar should show red `hook fired: alt`, `hook fired: title`, `hook
 fired: caption`, `hook fired: description`, `hook fired: url` badges on
 each field.
 6. Open a non-image (PDF, video), `alt` badge should be absent, others
 present
 7. Open an audio file, `artist` and `album` badges should appear too
 8. Switch to a different attachment and back and observe badges appear
 once per field, not duplicated
 9. ✅ Patch is solving the problem

 ### Expected result
 - After the patch, `wp.hooks.doAction(
 'media.view.attachment.renderFieldAfter' )` fires once for each visible
 field in the Attachment Details sidebar of the media modal, passing the
 field's `.setting` container element and a context object with `field`,
 `attachment`, and `view`. Plugins can use this hook to inject controls
 (e.g. buttons) directly adjacent to specific fields without resorting to
 brittle DOM manipulation.

 ### Additional Notes
 - The hook only fires in the single-column Attachment Details sidebar of
 the media modal (`tmpl-attachment-details`). It does not fire on the full
 Edit Media screen (`tmpl-attachment-details-two-column`), as that view's
 JS file (`details-two-column.js`) is not modified by this patch. Plugins
 that need to inject controls on the Edit Media screen still need to use
 the `attachment_fields_to_edit` PHP filter for that context.

 ### Screenshots/Screencast with results
 Before
 [[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/65086/before-11748.png)]]

 After
 [[Image(https://core.trac.wordpress.org/raw-
 attachment/ticket/65086/after-11748.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65086#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform