Best approach when modifying the Media Manager

by

I am trying to edit the Media Manager to allow the selection of a new option in the “Link to” select field.

This Backbone template is currently defined in media-template.php 

<label class="setting">
    <span><?php _e('Link To'); ?></span>
        <select class="link-to"
            data-setting="link"
            <# if ( data.userSettings ) { #>
                data-user-setting="urlbutton"
            <# } #>>

            <option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
                #>selected="selected"<# }
            #>>
                <?php esc_attr_e('Attachment Page'); ?>
            </option>
            <option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
                <?php esc_attr_e('Media File'); ?>
            </option>
            <option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
                <?php esc_attr_e('None'); ?>
            </option>
        </select>
    </label>

I could copy this template into my plugin, make my changes and extend media.view.Settings.Gallery to add my new functionality but this could cause potential conflicts with other plugins that also want to modify this part of the media manager. 

media.view.Settings.Gallery = media.view.Settings.Gallery.extend({
    template: media.template('caffeine-gallery-settings'),

The alternative is, I add the new option to the select menu via jQuery/similar. The app already depends on JavaScript to work so the experience wont degrade. This doesn’t feel like the correct way to make this change though. It feel like it goes against the spirit of both Backbone and WordPress.

My ideal is that there would be WordPress filter in the Backbone template (doable as it is just a PHP file after all) that would let new options be added to this select menu.

Outside of my reasoning, which of these options is best?

1
1

This is my go to snippet for things like this. 

<?php add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
 <script type="text/html" id="tmpl-my-custom-gallery-setting">
   <label class="setting">
   <span><?php _e('My setting'); ?></span>
   <select data-setting="my_custom_attr">
     <option value="foo"> Foo </option>
     <option value="bar"> Bar </option>
     <option value="default_val"> Default Value </option>
    </select>
  </label>
</script>

 <script>

jQuery(document).ready(function(){

  // add your shortcode attribute and its default value to the
  // gallery settings list; $.extend should work as well...
  _.extend(wp.media.gallery.defaults, {
    my_custom_attr: 'default_val'
  });

  // merge default gallery settings template with yours
  wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
    template: function(view){
      return wp.media.template('gallery-settings')(view)
           + wp.media.template('my-custom-gallery-setting')(view);
    }
  });

});

  </script>
  <?php

}); ?>

Leave a Comment