wp.media edit attachment screen

Question

I've read a couple of things about the wp.media object and have successfully initialised in the state that I can find to upload images. But for the plug-in that I am building I need to have the same layout as when I click my attachment in de media grid gallery.

For now this is my "simple" code that opens the default wp.media object

// Create a new media frame
        frame = wp.media({
            title: 'Select or Upload Media Of Your Chosen Persuasion',
            button: {
                text: 'Use this media'
            },
            multiple: false  // Set to true to allow multiple files to be selected
        });

        // Finally, open the modal on click
        frame.open();

What I need is the exact same result as you follow the url down below:

http://wordpress.dev/wp-admin/upload.php?item=10

Where you need to replace wordpress.dev with your own WP installation en item=10 to any attachment ID you actually have.

It should look like the following screenshot:

Is there anyone we has an answer or can send me into the right direction?

Answer 1

Long answer: Peeking into wp-includes/js/media-models.js, I see this:

if ( 'select' === attributes.frame && MediaFrame.Select ) {
    frame = new MediaFrame.Select( attributes );
} else if ( 'post' === attributes.frame && MediaFrame.Post ) {
    frame = new MediaFrame.Post( attributes );
} else if ( 'manage' === attributes.frame && MediaFrame.Manage ) {
    frame = new MediaFrame.Manage( attributes );
} else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
    frame = new MediaFrame.ImageDetails( attributes );
} else if ( 'audio' === attributes.frame && MediaFrame.AudioDetails ) {
    frame = new MediaFrame.AudioDetails( attributes );
} else if ( 'video' === attributes.frame && MediaFrame.VideoDetails ) {
    frame = new MediaFrame.VideoDetails( attributes );
} else if ( 'edit-attachments' === attributes.frame && MediaFrame.EditAttachments ) {
    frame = new MediaFrame.EditAttachments( attributes );
}

So one is lead to believe you could do this:

var frame = wp.media.frames.frame = wp.media({
    title: 'Select Image',
    button: { text: 'Select' },
multiple: false,
frame: 'edit-attachments',
controller: {
  gridRouter: {}
}
});
frame.open();

But it won't work. The first trouble you meet is that some script is required. This can be dealt with like this:

add_action( 'admin_enqueue_scripts', function() {
  wp_enqueue_media();
  wp_enqueue_script( 'media-grid' );
  wp_enqueue_script( 'media' );
});

But still no cigar.

The problem can be found in wp-includes/js/media-grid.js:

EditAttachments = MediaFrame.extend({
initialize: function() {
    this.controller = this.options.controller;
    this.gridRouter = this.controller.gridRouter;

This shows that EditAttachments requires a controller provided in the options, and this controller must have property "gridRouter". So something like this:

var frame = wp.media.frames.frame = wp.media({
  frame: 'edit-attachments',
  controller: {
    gridRouter: {}
  }
});

But this won't work, because you need a valid gridRouter.

This is all related to the underlying grid.

To learn more about the wp.media, I can recommend this plugin: https://github.com/ericandrewlewis/wp-media-javascript-guide

And of course, there is this page: https://codex.wordpress.org/Javascript_Reference/wp.media

Related questions:

• Open the attachment details modal
• https://stackoverflow.com/questions/41098126/wordpress-open-edit-attachment-modal-with-wp-media/
• Open media frame and select an attachment
• Get attachment/image info in JS

Answer 2

Unfortunately the logic of the attachment details isn't made to be used standalone - it requires the grid that opens it. You can however use the get_media_item( attachment_id ) method to receive the HTML of the form for modifying images: https://developer.wordpress.org/reference/functions/get_media_item/