wp.media edit attachment screen

by

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: