wp.mce.views gallery override default ‘editor-gallery’ template

3 Views

Prior to 4.2 we could override the default MCE gallery template with this code: 

var galleryview = wp.mce.views.get('gallery');
galleryview.getContent = function(){
  this.template = media.template( 'editor-gallery-dtbaker-flexslider' );
  return this.template(this.shortcode.attrs.named);
}

this no longer works. Is there a way to override the default ‘gallery’ view without re-registering it? This works (by copying and modifying the default code from mce-view.js) but I feel there should be a better way than re-registering the entire view.

Read More

Is this possible after the mce view rewrite? https://core.trac.wordpress.org/ticket/31412

Here’s code that works in 4.2: 

add_action( 'admin_print_footer_scripts', 'my_admin_footer_scripts', 100 );
function my_admin_footer_scripts(){ ?>
<script type="text/javascript">
( function( $ ) {
// start code copied from mce-view.js
var postID = $( '#post_ID' ).val() || 0;
var custom_gallery = _.extend( {}, {

    edit: function( text, update ) {
        var media = wp.media[ this.type ],
            frame = media.edit( text );

        this.pausePlayers && this.pausePlayers();

        _.each( this.state, function( state ) {
            frame.state( state ).on( 'update', function( selection ) {
                update( media.shortcode( selection ).string() );
            } );
        } );

        frame.on( 'close', function() {
            frame.detach();
        } );

        frame.open();
    },
    state: [ 'gallery-edit' ],
    template: wp.media.template( 'editor-gallery' ),

    initialize: function() {
        var attachments = wp.media.gallery.attachments( this.shortcode, postID ),
            attrs = this.shortcode.attrs.named,
            self = this;

        if(typeof attrs.slider != 'undefined'){
            switch(attrs.slider){
                case 'flexslider':
                    this.template = wp.media.template( 'editor-gallery-dtbaker-flexslider' );
                    break;
                case 'flex':
                    this.template = wp.media.template( 'editor-gallery-dtbaker-flex' );
                    break;
                default:
                // leave the existing template (editor-gallery)
            }
        }
        attachments.more()
            .done( function() {
                attachments = attachments.toJSON();
                _.each( attachments, function( attachment ) {
                    if ( attachment.sizes ) {
                        if ( attrs.size && attachment.sizes[ attrs.size ] ) {
                            attachment.thumbnail = attachment.sizes[ attrs.size ];
                        } else if ( attachment.sizes.thumbnail ) {
                            attachment.thumbnail = attachment.sizes.thumbnail;
                        } else if ( attachment.sizes.full ) {
                            attachment.thumbnail = attachment.sizes.full;
                        }
                    }
                } );
                self.render( self.template( {
                    attachments: attachments,
                    columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns
                } ) );
            } )
            .fail( function( jqXHR, textStatus ) {
                self.setError( textStatus );
            } );
    }
} );
wp.mce.views.unregister('gallery');
wp.mce.views.register('gallery',custom_gallery);
})(jQuery);
<?php }

I have tried this as well and no go: 

            var dtbaker_gallery = wp.mce.views.get('gallery');
            dtbaker_gallery = dtbaker_gallery.extend({
                template: wp.media.template( 'editor-gallery-dtbaker-flexslider' )
            });
Post Views: 3

Related posts