Como posso adicionar a guia "Inserir do URL" a um carregador de mídia personalizado 3.5?

Eu inseri um carregador de mídia WP 3.5 em um widget executando este JavaScript quando um botão é clicado:

var frame = wp.media( {
    title       : 'Widget Uploader',
    multiple    : false,
    library     : { type : 'image' },
    button      : { text : 'Select Image' }
} );

frame.on( 'close', function() {
    var attachments = frame.state().get( 'selection' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;

Isso me dá um modal que possui as guias "Upload Files" e "Media Library", mas também quero que a guia "Insert From URL" seja exibida quando você clica no botão "Add Media" ao editar uma postagem /página.

Passei algumas horas pesquisando na web, lendo o código-fonte e assistindo a apresentação de Daryl Koopersmith no back-end do remetente , mas não consegui descobrir.

Alguém pode me apontar na direção certa? Existe um parâmetro que eu possa passar para o wp.media () para incluí-lo ou devo usar uma das visualizações / modelos internos que o inclui?

Eu tenho pesquisado o código fonte por um motivo semelhante; Gostaria de adicionar as "Configurações de exibição de anexo" ao quadro "selecionar" padrão. Até onde eu sei, isso não pode ser feito passando parâmetros para wp.media (), como todos gostaríamos. O wp.media atualmente possui os dois quadros ("post" e "select"), e as visualizações que os acompanham são predefinidas.

A abordagem que estou analisando agora é estender o media.view.mediaFrame para criar um novo quadro (baseado no quadro "selecionado") que inclua as partes da exibição de que preciso. Se eu conseguir isso, postarei o código.

EDITAR:

Ian, consegui o recurso que queria trabalhar e demorei um pouco para descobrir o seu. O wp.media () não é tão modular quanto poderia ser. Ele aceita apenas os valores 'select' e 'post' para o quadro, com 'select' sendo o padrão, para que você não possa criar um novo objeto de quadro. Em vez disso, você precisa estender um dos dois objetos de quadro (tudo isso está em /wp-includes/js/media-views.js), que também é meio desajeitado. Adicionar parte da interface do usuário é um processo de várias etapas. Você pode começar com Selecionar e adicionar, mas para o seu, eu escolhi começar com o código no quadro Post e tirar o material da galeria. Aqui está o meu código, funcionando, mas não muito testado. Provavelmente, também há espaço para simplificar.

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    'insert'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         'insert',
                        title:      'Insert Media',
                        priority:   20,
                        toolbar:    'main-insert',
                        filterable: 'image',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? 'reset' : false,
                        editable:   true,

                        // If the user isn't allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( 'router:create:browse', this.createRouter, this );
                this.on( 'router:render:browse', this.browseRouter, this );
                this.on( 'content:create:browse', this.browseContent, this );
                this.on( 'content:render:upload', this.uploadContent, this );
                this.on( 'toolbar:create:select', this.createSelectToolbar, this );
                //

                this.on( 'menu:create:gallery', this.createMenu, this );
                this.on( 'toolbar:create:main-insert', this.createToolbar, this );
                this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
                this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
                this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            'default': 'mainMenu'
                        },

                        content: {
                            'embed':          'embedContent',
                            'edit-selection': 'editSelectionContent'
                        },

                        toolbar: {
                            'main-insert':      'mainInsertToolbar'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + ':render:' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    'library-separator': new wp.media.View({
                        className: 'separator',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get('selection'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( 'backToLibrary', {
                    text:     'Return to Library',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode('browse');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get('editable');

                view.set( 'selection', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get('selection'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode('edit-selection');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( 'insert', {
                    style:    'primary',
                    priority: 80,
                    text:     'Select Image',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get('selection');

                        controller.close();
                        state.trigger( 'insert', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  'Set Featured Image',
                    state: this.options.state || 'upload'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: 'Insert Image'
                });
            }

    });

Isso combina o código de wp.media.view.MediaFrame.Post com o código de media.view.MediaFrame.Select, ajustando o fato de que isso é executado fora do escopo original. Os valores para o texto são os vários botões e você pode fazer referência ao seu próprio objeto de localização, se desejar. O valor 'filtrável' no construtor Library (em createStates ()) determina quais tipos de mídia serão suportados.

Depois de estender o objeto Select com essa abordagem, instancie-o da mesma maneira que você está atualmente e adicione seu manipulador personalizado para quando uma imagem for selecionada. A inserção do URL pode disparar um evento diferente do que a seleção da mídia carregada. Provavelmente seria melhor instanciar seu quadro primeiro, na verdade, e depois estendê-lo, para que outros quadros de mídia da página não sejam afetados, mas eu não tentei isso.

Espero que ajude-

Ao examinar o código-fonte, parece que o modal de mídia genérico não suporta "Inserir do URL". A única maneira de obter essa guia foi especificar o tipo de quadro "post":

var frame = wp.media( {
                            title       : 'Widget Uploader',
                            multiple    : false,
                            library     : { type : 'image' },
                            button      : { text : 'Select Image' },
                            frame      : 'post'
                        } );

A desvantagem é que o título do modal especificado é ignorado.

O ponto é que essa guia retorna um URL externo para ser inserido diretamente na postagem, enquanto o widget deve retornar um ID de mídia. Basicamente, a imagem externa precisa ser transferida para o servidor.

Veja como / se o plugin Grab & Save faz o que você deseja. ( via )