Modified wp.media.view.Settings.Gallery in Backbone JS, but editing doesn’t work

by

I’ve added to the normal WordPress gallery popup (when clicking “Add Media” in the WordPress editor), in order to allow my custom gallery type to be selected (which interacts with / uses the main WordPress gallery shortcode).

I’m able to select my custom gallery types (I have two) or “Native” (which is the normal WordPress gallery).

Currently, everything works as intended for when creating a gallery (if a non-native gallery type is chosen, the gallerytype is added in to the shortcode sent to the editor, in addition to a couple of other options that my non-native gallery uses).

However, the issue is that when wanting to edit a gallery that I’ve already created, the dropdown I’d use to select gallery type (native or my custom ones) ‘freezes’ – ie, clicking it reveals all options, but selecting a different option than originally chosen does nothing, and it snaps back to the original option.

Here is my code below:

 <script type="text/html" id="tmpl-mygallery-gallery-type">
<label class="setting">
  <span><?php _e('Gallery type'); ?></span>
  <select data-setting="gallerytype">
    <option value="native" <# if ( 'native' == wp.media.gallery.defaults.gallerytype ) { #>selected="selected"<# } #>> WordPress Native </option>
    <option value="mygallery_slide" <# if ( 'mygallery_slide' == wp.media.gallery.defaults.gallerytype ) { #>selected="selected"<# } #>> On-page slide </option>        
    <option value="mygallery_fade" <# if ( 'mygallery_fade' == wp.media.gallery.defaults.gallerytype ) { #>selected="selected"<# } #>> On-page fade </option>       
  </select>
</label>
<label class="setting" style="display: none;">
    <input data-setting="slidenumbers" value="<?php echo $this->mygallery_saved_settings['numslides']; ?>" type="hidden" />
</label>
</script>
 <script type="text/javascript">
jQuery(document).ready(function() {

    var mygallery_options = {
        slidenumbers: '<?php echo $this->mygallery_saved_settings['numslides']; ?>',
        slidespeed: '<?php echo $this->mygallery_saved_settings['thespeed']; ?>',
        slidetitles: '<?php echo $this->mygallery_saved_settings['thetitles']; ?>',
        slidesize: '<?php echo $this->mygallery_saved_settings['thesize']; ?>',
    };
    var the_defaults = {
        gallerytype: 'native'
    };

    jQuery.extend(the_defaults, mygallery_options);
    _.extend(wp.media.gallery, {
        defaults: the_defaults,
        setDefaults: function(attrs) {
            var self = this;
            // Remove default attributes from the shortcode, unless DeLight
            _.each(this.defaults, function(value, key) {
                attrs[key] = self.coerce(attrs, key);
                if (value === attrs[key]) {
                    delete attrs[key];
                }
            });
            if ('gallerytype' in attrs) {
                jQuery.extend(attrs, mygallery_options);
            }
            return attrs;
        },
    });

    //Extend media gallery
    wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        events: function(args) {

            var the_events = {};

            //NEED TO GET STATE (ie, 'creating gallery for first time' rather than 'edit gallery'....
            var is_create_gallery = true;

            //IF WE'RE EDITING, SET IT TO FALSE
            //if(editing??) > is_create_gallery = false;

            if (is_create_gallery) {
                _.extend( the_events, { 'change select[data-setting="gallerytype"]' : 'gallerytypechanged' } );
            }

            return the_events;
        },
        gallerytypechanged: function( e ){
            e.preventDefault();

            var self = this;

            var gallery_type = jQuery( e.currentTarget ).val();

            if( gallery_type != 'native' ){

                var parent_container = jQuery(self.$el);

                var gallery_size = jQuery(parent_container).find('select[data-setting="size"]');
                var gallery_link = jQuery(parent_container).find('select[data-setting="link"]');

                //Set vars for DeLight selection
                jQuery( gallery_size ).val('thumbnail');
                jQuery( gallery_link ).val('none');

                //Update vars so the editor thinks they were clicked
                self.update.apply( self, ['size'] );
                self.update.apply( self, ['link'] );
                self.update.apply( self, ['gallerytype'] );
                self.update.apply( self, ['slidenumbers'] );
                self.update.apply( self, ['slidespeed'] );
                self.update.apply( self, ['slidetitles'] );
                self.update.apply( self, ['slidesize'] );
            }

            return self;
        },
        template: function(view) {
            return wp.media.template('gallery-settings')(view) + wp.media.template('mygallery-gallery-type')(view);
        },
    });
});
</script>

Any suggestions as to how to correct this behaviour would be greatly appreciated!

When I comment out the line ‘self.update.apply( self, [‘gallerytype’] );’ , it works when Editing, but when creating from scratch, won’t send my custom settings to the shortcode in the editor.
When I leave that line in, the Create works, but then the dropdown snapping-back-to-the-original-value behaviour occurs.

Thanks!

1

When you save the option is it saving the custom post type to the new one which youa re assigning?. You may look into that.

Leave a Comment