Wordpress 3.5 Media Manager - adicione um botão

No meu plug-in, gostaria de adicionar dois botões ao Media Manager (à esquerda de "Inserir na postagem" na seção "media-toolbar-primary") e conectar uma ação do jQuery a ele.

1. Primeiro - O botão "Selecionar tudo" permite selecionar todas as imagens disponíveis (apenas imagens), dependendo do valor da opção selecionada (por exemplo, Todos os itens de mídia, Carregados para esta postagem etc.). Portanto, se "Todos os itens de mídia" for selecionado - todas as imagens disponíveis serão selecionadas, se "Upload para esta postagem" for selecionado - somente as imagens anexadas à postagem atual serão selecionadas.
2. O segundo - "Inserção personalizada na publicação" - obterá dados de imagens para todas as imagens selecionadas (fonte de imagem em tamanho original, texto alternativo, tamanho, etc, disponíveis) e, ao mesmo tempo, permite envolvê-las em código html adicional - código de retorno para o editor tinymce.

O código retornado para o segundo botão pode ter esta aparência:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

Até onde eu entendi, a única maneira é usar a exibição de substituição do Backbone apropriada, mas, além disso, é tudo o que sei por enquanto.

Obrigado pela ajuda.

Este bloco de código adicionará um botão ao lado do botão "Inserir na postagem". Quando clicado, ele envia as imagens selecionadas para o editor WP, cada uma envolvida dentro do seu modelo HTML:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Adicionar um botão personalizado não é um problema. Mas selecionar "todas as imagens" pode ser um pouco complicado, porque o navegador de mídia WP 3.5 carrega anexos pouco a pouco. Vou dar uma olhada, mas recomendo selecionar os anexos manualmente.

Escreva um pequeno plug-in, use a fonte de exemplo a seguir para adicionar um item na lista da barra lateral esquerda no gerenciador de mídia dentro do pop-up de sobreposição.

Resultado da fonte abaixo:

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}

• Solução inicial forma esta resposta WPSE .

• Link para o exemplo de plugin de rascunho para adicionar um menu javascript ao pop-up WP3.5 Media Library

Não tenho uma resposta completa para sua pergunta, mas aqui está um bom começo. Para personalizar o novo Media Manager, você deve estudar o código javascript Backbone em wp-includes/js/media-views.js. Por exemplo, aqui está um pequeno plugin que adiciona um botão "Selecionar tudo" à barra de ferramentas "Inserir a partir do URL":

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Para o botão "Inserir personalizado na postagem", sugiro usar o código de acesso da galeria. A interface do usuário já existe para selecionar as imagens desejadas e inserir o código abreviado no lugar certo. Tudo o que você precisa fazer é escrever seu próprio formato de código de acesso da galeria.

Dê uma olhada na gallery_shortcodefunção wp-includes/media.phpe use o post_galleryfiltro.

Thomas Griffin criou um exemplo de plug-in, New Media Image Uploader , sobre como trabalhar com o novo gerenciador de mídia.

Este plug-in fornece um exemplo sólido para integrar o novo fluxo de trabalho do gerenciador de mídia nos seus plugins / temas, mostrando como fazer upload / inserir um arquivo de imagem em um campo de texto.

Acabei de encontrar um caso no WP 3.6 em que a resposta do aesqe (muito útil) resulta em imagens sendo inseridas duas vezes devido ao backbone, state.get("selection")._byIdincluindo ambos ide cidpara cada imagem selecionada.

Alterar state.get("selection")._byIdpara state.get("selection").modelscorrigir isso para mim, preservando os atributos de cada objeto.

Espero que isso poupe a frustração de alguém. Eu teria postado isso como um comentário em vez de uma resposta, mas, infelizmente, não tenho reputação.