WordPress.org

Make WordPress Core

Ticket #32417: 32417.8.diff

File 32417.8.diff, 20.9 KB (added by gonom9, 16 months ago)
  • src/wp-includes/css/wp-media-widget.css

    diff --git a/src/wp-includes/css/wp-media-widget.css b/src/wp-includes/css/wp-media-widget.css
    index e69de29..d36ec25 100644
    a b  
     1.media-widget-preview .button {
     2        text-align: center
     3}
     4
     5.media-widget-preview .wp-caption {
     6        max-width: 100%;
     7        margin: 0;
     8}
     9
     10.media-widget-preview .image {
     11        height: auto;
     12        max-width: 100%;
     13        cursor: pointer;
     14}
     15
     16.media-widget-preview .aligncenter {
     17        display: block;
     18        margin: 0 auto;
     19        text-align: center
     20}
  • src/wp-includes/default-widgets.php

    diff --git a/src/wp-includes/default-widgets.php b/src/wp-includes/default-widgets.php
    index 0cf5fc3..e803135 100644
    a b require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-tag-cloud.php' ); 
    4545
    4646/** WP_Nav_Menu_Widget class */
    4747require_once( ABSPATH . WPINC . '/widgets/class-wp-nav-menu-widget.php' );
     48
     49/** WP_Widget_Media class */
     50require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media.php' );
  • src/wp-includes/js/wp-media-widget.js

    diff --git a/src/wp-includes/js/wp-media-widget.js b/src/wp-includes/js/wp-media-widget.js
    index e69de29..90388db 100644
    a b  
     1/**
     2 * @since 4.8.0
     3 *
     4 * @package WP_Media_Widget
     5 */
     6( function ( $ ) {
     7        var frame, widgetFrame;
     8
     9        function translate( key, defaultText ) {
     10                return ( window._mediaWidgetl10n && _mediaWidgetl10n[ key ] ) || defaultText;
     11        }
     12
     13        frame = {
     14                buttonId: '.media-widget-preview .button',
     15
     16                defaultProps: {
     17                        id:    '',
     18                        align: '',
     19                        size:  '',
     20                        link:  '',
     21                },
     22
     23                init: function() {
     24                        $( frame.buttonId )
     25                                .off( 'click.mediaWidget' )
     26                                .on( 'click.mediaWidget', frame.openMediaManager );
     27
     28                        frame.bindImageClick();
     29
     30                        wp.mediaelement.initialize();
     31                },
     32
     33                bindImageClick: function() {
     34                        $( '.media-widget-preview .image' )
     35                                .off( 'click.mediaWidget' )
     36                                .on( 'click.mediaWidget', frame.openMediaManager );
     37                },
     38
     39                openMediaManager: function( event ) {
     40                        event.preventDefault();
     41                        var widgetId = $( event.target ).data( 'id' );
     42
     43                        // Create the media frame.
     44                        widgetFrame = wp.media( {
     45                                button: {
     46                                        text: translate( 'add-to-widget', 'Add to widget' ), // Text of the submit button.
     47                                },
     48
     49                                states: new wp.media.controller.Library( {
     50                                        library:    wp.media.query(),
     51                                        title:      translate( 'select-media', 'Select Media' ), // Media frame title
     52                                        multiple:   false,
     53                                        priority:   20,
     54                                        display:    true, // attachment display setting
     55                                        filterable: 'all',
     56                                } ),
     57                        } );
     58
     59                        // Populate previously selected media when the media frame is opened.
     60                        widgetFrame.on( 'open', function() {
     61                                var selection = widgetFrame.state().get( 'selection' ),
     62                                        ids = $( '#widget-' + widgetId + '-id' ).val().split(',');
     63
     64                                if ( ids[0] > 0 ) {
     65                                        ids.forEach( function( id ) {
     66                                                var attachment = wp.media.attachment( id );
     67                                                attachment.fetch();
     68                                                selection.add( attachment ? [ attachment ] : [] );
     69                                        } );
     70                                }
     71                        } );
     72
     73                        // Render the attachment details.
     74                        widgetFrame.on( 'select', function() {
     75                                var props, attachment;
     76
     77                                // Only try to render the attachment details if a selection was made.
     78                                if ( widgetFrame.state().get( 'selection' ).length > 0 ) {
     79                                        props = widgetFrame.content.get( '.attachments-browser' )
     80                                                .sidebar.get( 'display' ).model.toJSON();
     81
     82                                        attachment = widgetFrame.state().get( 'selection' ).first().toJSON();
     83
     84                                        frame.renderFormView( widgetId, props, attachment );
     85                                }
     86                        } );
     87
     88                        widgetFrame.open( widgetId );
     89                },
     90
     91                /**
     92                 * Renders the attachment details from the media modal into the widget.
     93                 *
     94                 * @param {String} widgetId
     95                 * @param {Object} props Attachment Display Settings (align, link, size, etc).
     96                 * @param {Object} attachment Attachment Details (title, description, caption, url, sizes, etc).
     97                 */
     98                renderFormView: function( widgetId, props, attachment ) {
     99                        // Start with container elements for the widgets page, customizer controls, and customizer preview.
     100                        var previewEl,
     101                                extras,
     102                                formView = $( '.' + widgetId + ', #customize-control-widget_' + widgetId + ', #' + widgetId );
     103
     104                        // The widget title bar doesn't update automatically on the Appearance > Widgets page. This fixes that problem.
     105                        formView.closest( '.widget' ).find( '.in-widget-title' ).html( ': ' + attachment.title );
     106
     107                        formView.find( '.attachment-description' )
     108                                [ attachment.description ? 'removeClass' : 'addClass' ]('hidden')
     109                                .html( attachment.description );
     110
     111                        extras = formView.find( '.extras' );
     112                        // Display a preview of the image in the widgets page and customizer controls.
     113                        extras.removeClass( 'hidden' );
     114
     115                        previewEl = formView.find( '.media-widget-admin-preview' );
     116                        if ( ! previewEl ) {
     117                                previewEl = $( '<div class="media-widget-admin-preview />' ).insertBefore( extras );
     118                        }
     119                        previewEl.html( frame.renderMediaElement( widgetId, props, attachment ) );
     120
     121                        if ( -1 < $.inArray( attachment.type, [ 'audio', 'video' ] ) ) {
     122                                wp.mediaelement.initialize();
     123                        } else if ( 'image' === attachment.type ) {
     124                                frame.bindImageClick();
     125                        }
     126
     127                        // Populate form fields with selection data from the media frame.
     128                        _.each( _.keys( frame.defaultProps ), function ( key ) {
     129                                formView.find( '#widget-' + widgetId + '-' + key ).val( attachment[ key ] || props[ key ] ).trigger( 'change' );
     130                        } );
     131
     132                        // Trigger a sync to update the widget in the customizer preview.
     133                        formView.find( '#widget-' + widgetId + '-url' ).trigger( 'change' );
     134
     135                        // Change button text
     136                        formView.find( frame.buttonId ).text( translate( 'change-media', 'Change Media' ) );
     137                },
     138
     139                /**
     140                 * Renders the media attachment in HTML.
     141                 *
     142                 * @param {String} widgetId
     143                 * @param {Object} props Attachment Display Settings (align, link, size, etc).
     144                 * @param {Object} attachment Attachment Details (title, description, caption, url, sizes, etc).
     145                 */
     146                renderMediaElement: function( widgetId, props, attachment ) {
     147                        var image;
     148
     149                        if ( 'image' === attachment.type ) {
     150                                image = $( '<img />' )
     151                                        .addClass( 'image wp-image' + attachment.id )
     152                                        .attr( {
     153                                                'data-id': widgetId,
     154                                                src:       attachment.sizes[ props.size ].url,
     155                                                title:     attachment.title,
     156                                                alt:       attachment.alt,
     157                                                width:     attachment.sizes[ props.size ].width,
     158                                                height:    attachment.sizes[ props.size ].height
     159                                        } );
     160
     161                                if ( attachment.caption ) {
     162                                        image = $( '<figure />' )
     163                                                .width( attachment.sizes[ props.size ].width )
     164                                                .addClass( 'wp-caption' )
     165                                                .attr( 'id', widgetId + '-caption' )
     166                                                .append( image );
     167
     168                                        $( '<figcaption class="wp-caption-text" />' ).text( attachment.caption ).appendTo( image );
     169                                }
     170
     171                                return image.wrap( '<div />' ).parent().html();
     172                        }
     173
     174                        if ( 'audio' === attachment.type ) {
     175                                if ( 'embed' === props.link ) {
     176                                        return wp.media.template( 'wp-media-widget-audio' )( {
     177                                                model: {
     178                                                        src:    attachment.url
     179                                                }
     180                                        } );
     181                                }
     182
     183                                return wp.html.string( {
     184                                        tag: 'a',
     185                                        content: attachment.title,
     186                                        attrs: {
     187                                                href: '#'
     188                                        }
     189                                } );
     190                        }
     191
     192                        if ( 'video' === attachment.type ) {
     193                                if ( 'embed' === props.link ) {
     194                                        return wp.media.template( 'wp-media-widget-video' )( {
     195                                                model: {
     196                                                        src:    attachment.url,
     197                                                        width:  attachment.width,
     198                                                        height: attachment.height
     199                                                }
     200                                        } );
     201                                }
     202
     203                                return wp.html.string( {
     204                                        tag: 'a',
     205                                        content: attachment.title,
     206                                        attrs: {
     207                                                href: '#'
     208                                        }
     209                                } );
     210                        }
     211
     212                        // Unknown media type
     213                        return '';
     214                }
     215        };
     216
     217        $( document )
     218                .ready( frame.init )
     219                .on( 'widget-added widget-updated', frame.init );
     220
     221        window.wp = window.wp || {};
     222        window.wp.MediaWidget = frame;
     223} )( jQuery );
  • src/wp-includes/widgets.php

    diff --git a/src/wp-includes/widgets.php b/src/wp-includes/widgets.php
    index 1abadfb..f046f2d 100644
    a b function wp_widgets_init() { 
    14661466
    14671467        register_widget('WP_Nav_Menu_Widget');
    14681468
     1469        register_widget('WP_Media_Widget');
     1470
    14691471        /**
    14701472         * Fires after all default WordPress widgets have been registered.
    14711473         *
  • src/wp-includes/widgets/class-wp-widget-media.php

    diff --git a/src/wp-includes/widgets/class-wp-widget-media.php b/src/wp-includes/widgets/class-wp-widget-media.php
    index e69de29..ba5b14b 100644
    a b  
     1<?php
     2/**
     3 * Widget API: WP_Media_Widget class
     4 *
     5 * @package WordPress
     6 * @subpackage Widgets
     7 * @since 4.8.0
     8 */
     9
     10/**
     11 * Core class that implements a media widget.
     12 *
     13 * @since 4.8.0
     14 *
     15 * @see WP_Widget
     16 */
     17class WP_Media_Widget extends WP_Widget {
     18        /**
     19         * Constructor.
     20         *
     21         * @since 4.8.0
     22         * @access public
     23         *
     24         * @param string $id_base         Optional Base ID for the widget, lowercase and unique. If left empty,
     25         *                                a portion of the widget's class name will be used Has to be unique.
     26         * @param string $name            Optional. Name for the widget displayed on the configuration page.
     27         *                                Default empty.
     28         * @param array  $widget_options  Optional. Widget options. See wp_register_sidebar_widget() for
     29         *                                information on accepted arguments. Default empty array.
     30         * @param array  $control_options Optional. Widget control options. See wp_register_widget_control()
     31         *                                for information on accepted arguments. Default empty array.
     32         */
     33        public function __construct( $id_base = '', $name = '', $widget_options = array(), $control_options = array() ) {
     34                $widget_opts = wp_parse_args( $widget_options, array(
     35                        'classname' => 'widget_media',
     36                        'description' => __( 'Display media such as images, video, or audio in your sidebar.' ),
     37                        'customize_selective_refresh' => true,
     38                ) );
     39
     40                $control_opts = wp_parse_args( $control_options, array() );
     41
     42                parent::__construct(
     43                        $id_base ? $id_base : 'wp-media-widget',
     44                        $name ? $name : __( 'Media' ),
     45                        $widget_opts,
     46                        $control_opts
     47                );
     48
     49                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_styles' ) );
     50                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
     51        }
     52
     53        /**
     54         * Displays the widget on the front-end.
     55         *
     56         * @since 4.8.0
     57         * @access public
     58         *
     59         * @see WP_Widget::widget()
     60         *
     61         * @param array $args     Display arguments including before_title, after_title, before_widget, and after_widget.
     62         * @param array $instance Saved setting from the database.
     63         */
     64        public function widget( $args, $instance ) {
     65
     66                echo $args['before_widget'];
     67                if ( ! empty( $instance['title'] ) ) {
     68                        echo $args['before_title'] . $instance['title'] . $args['after_title'];
     69                }
     70                if ( ! empty( $instance['description'] ) ) {
     71                        echo '<p class="attachment-description align' . $instance['align'] . '">' . $instance['description'] . '</p>';
     72                }
     73                if ( ! empty( $instance['link'] ) ) {
     74                        if ( 'file' === $instance['link'] ) {
     75                                $url = wp_get_attachment_url( $instance['id'] );
     76                                $selectedLink = $url;
     77                        } else if ( 'post' === $instance['link'] ) {
     78                                $url = get_attachment_link( $instance['id'] );
     79                                $selectedLink = $url;
     80                        } else {
     81                                $selectedLink = '';
     82                        }
     83                }
     84
     85                // Build the media output.
     86                $media_output = '';
     87                if ( ! empty( $selectedLink ) ) {
     88                        $media_output .= '<a href="' . $selectedLink . '">';
     89                }
     90
     91                if ( ! empty( $instance['id'] ) ) {
     92                        if ( $attachment = get_post( $instance['id'] ) ) {
     93                                $attrs = array();
     94
     95                                if ( ! empty( $instance['title'] ) ) {
     96                                        $attrs['title'] = $instance['title'];
     97                                }
     98
     99                                // Image.
     100                                if ( wp_attachment_is_image( $attachment ) ) {
     101
     102                                        $media_output .= $this->get_attachment_image( $instance['id'], $instance['size'], array(
     103                                                'id'      => $args['widget_id'],
     104                                                'align'   => $instance['align'],
     105                                                'title'   => $attachment->post_title,
     106                                                'caption' => $attachment->post_excerpt,
     107                                        ) );
     108
     109                                // Audio.
     110                                } elseif ( wp_attachment_is( 'audio', $attachment ) ) {
     111                                        if ( ! empty( $selectedLink ) ) {
     112                                                $media_output .= $attachment->post_title;
     113                                        } else {
     114                                                $media_output .= $this->get_attachment_audio( $attachment->ID, array() );
     115                                        }
     116
     117                                // Video.
     118                                } elseif ( wp_attachment_is( 'video', $attachment ) ) {
     119                                        if ( ! empty( $selectedLink ) ) {
     120                                                $media_output .= $attachment->post_title;
     121                                        } else {
     122                                                $media_output .= $this->get_attachment_video( $attachment->ID, array() );
     123                                        }
     124                                }
     125                        }
     126                }
     127
     128                if ( ! empty( $selectedLink ) ) {
     129                        $media_output .= '</a>';
     130                }
     131
     132                echo $media_output;
     133                echo $args['after_widget'];
     134        }
     135
     136        /**
     137         * Sanitizes the widget form values as they are saved.
     138         *
     139         * @since 4.8.0
     140         * @access public
     141         *
     142         * @see WP_Widget::update()
     143         *
     144         * @param array $new_instance Values just sent to be saved.
     145         * @param array $old_instance Previously saved values from database.
     146         * @return array Updated safe values to be saved.
     147         */
     148        function update( $new_instance, $old_instance ) {
     149                $instance = $old_instance;
     150
     151                // ID, title
     152                $instance['id'] = (int) $new_instance['id'];
     153                $instance['title'] = sanitize_text_field( $new_instance['title'] );
     154
     155                // Everything else.
     156                $instance['align'] = sanitize_text_field( $new_instance['align'] );
     157                $instance['size'] = sanitize_text_field( $new_instance['size'] );
     158                $instance['link'] = sanitize_text_field( $new_instance['link'] );
     159                return $instance;
     160        }
     161
     162        /**
     163         * Renders an image attachment preview.
     164         *
     165         * @since 4.8.0
     166         * @access public
     167         *
     168         * @param WP_Post $attachment Attachment object.
     169         * @param string  $widget_id  Widget ID.
     170         * @param array   $instance   Current widget instance arguments.
     171         */
     172        public function render_image( $attachment, $widget_id, $instance ) {
     173                $attrs = array(
     174                        'id'      => $widget_id,
     175                        'align'   => $instance['align'],
     176                        'title'   => $attachment->post_title,
     177                        'caption' => $attachment->post_excerpt,
     178                );
     179
     180                // If an image id is saved for this widget, display the image using `wp_get_attachment_image()`.
     181                echo '<div class="media-widget-admin-preview">';
     182                echo $this->get_attachment_image( $attachment->ID, $instance['size'], $attrs );
     183                echo '</div>';
     184        }
     185
     186        /**
     187         * Get an elmeent reprensenting an image attachment
     188         *
     189         * @since 4.8.0
     190         * @access private
     191         *
     192         * @param int    $attachment_id Image attachment ID.
     193         * @param string $size  Image size. Default value: 'medium'
     194         * @param array  $attrs Attributes for the markup.
     195         */
     196        private function get_attachment_image( $attachment_id, $size = 'medium', $attrs = array() ) {
     197                $img_attrs = array(
     198                        'data-id' => $attrs['id'],
     199                        'title'   => $attrs['title'],
     200                        'class'   => 'image wp-image-' . $attachment_id,
     201                );
     202
     203                if ( empty( $attrs['caption'] ) ) {
     204                        $img_attrs['class'] .= ' ' . 'align' . $attrs['align'];
     205                }
     206
     207                $image = wp_get_attachment_image( $attachment_id, $size, false, $img_attrs);
     208
     209                if ( empty( $attrs['caption'] ) ) {
     210                        return $image;
     211                }
     212
     213                $attrs['id'] .= '-caption';
     214                $attrs['width'] = get_option( $size . '_size_w' );
     215
     216                return img_caption_shortcode( $attrs, $image );
     217        }
     218
     219        /**
     220         * Renders an audio attachment preview.
     221         *
     222         * @since 4.8.0
     223         * @access public
     224         *
     225         * @param WP_Post $attachment Attachment object.
     226         * @param string  $widget_id  Widget ID.
     227         * @param array   $instance   Current widget instance arguments.
     228         */
     229        public function render_audio( $attachment, $widget_id, $instance ) {
     230                echo '<div class="media-widget-admin-preview">';
     231                if ( 'embed' === $instance['link'] ) {
     232                        echo $this->get_attachment_audio( $attachment->ID );
     233                } else {
     234                        echo '<a href="#">' . $attachment->post_title .'</a>';
     235                }
     236                echo '</div>';
     237        }
     238
     239        /**
     240         * Get an audio elmeent reprensenting a video attachment
     241         *
     242         * @since 4.8.0
     243         * @access private
     244         *
     245         * @param int   $attachment_id Audio attachment ID.
     246         * @param array Attributes for the audio markup.
     247         */
     248        private function get_attachment_audio( $attachment_id, $attrs = array() ) {
     249                $output = wp_audio_shortcode( array(
     250                        'src' => wp_get_attachment_url( $attachment_id )
     251                ) );
     252
     253                return $output;
     254        }
     255
     256        /**
     257         * Renders a video attachment preview.
     258         *
     259         * @since 4.8.0
     260         * @access public
     261         *
     262         * @param WP_Post $attachment Attachment object.
     263         * @param string  $widget_id  Widget ID.
     264         * @param array   $instance   Current widget instance arguments.
     265         */
     266        public function render_video( $attachment, $widget_id, $instance ) {
     267                echo '<div class="media-widget-admin-preview">';
     268                if ( 'embed' === $instance['link'] ) {
     269                        echo $this->get_attachment_video( $attachment->ID );
     270                } else {
     271                        echo '<a href="#">' . $attachment->post_title .'</a>';
     272                }
     273                echo '</div>';
     274        }
     275
     276        /**
     277         * Get a video elmeent reprensenting a video attachment
     278         *
     279         * @since 4.8.0
     280         * @access private
     281         *
     282         * @param int   $attachment_id Video attachment ID.
     283         * @param array Attributes for the video markup.
     284         */
     285        private function get_attachment_video( $attachment_id, $attrs = array() ) {
     286                $output = wp_video_shortcode( array(
     287                        'src' => wp_get_attachment_url( $attachment_id )
     288                ) );
     289
     290                return $output;
     291        }
     292
     293        /**
     294         * Outputs the settings update form.
     295         *
     296         * @since 4.8.0
     297         * @access public
     298         *
     299         * @param array $saved_instance Current settings.
     300         * @return string Default return is 'noform'.
     301         */
     302        public function form( $saved_instance ) {
     303                $defaults = array(
     304                        'title'  => '',
     305                        // Attachment props.
     306                        'id'     => '',
     307                        'align'  => '',
     308                        'size'   => '',
     309                        'link'   => '',
     310                );
     311
     312                $instance   = wp_parse_args( (array) $saved_instance, $defaults );
     313                $attachment = empty( $instance['id'] ) ? null: get_post( $instance['id'] );
     314                $widget_id  = $this->id;
     315                ?>
     316                <div class="<?php echo esc_attr( $widget_id ); ?> media-widget-preview">
     317                        <p>
     318                                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e( 'Title:' ); ?></label>
     319                                <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" />
     320                        </p>
     321
     322                        <p>
     323                                <?php esc_html_e( 'Add an image, video, or audio to your sidebar.' ); ?>
     324                        </p>
     325
     326                        <?php
     327                                if ( $attachment ) {
     328                                        if ( wp_attachment_is_image( $attachment ) ) {
     329                                                $this->render_image( $attachment, $widget_id, $instance );
     330                                        } elseif ( wp_attachment_is( 'audio', $attachment ) ) {
     331                                                $this->render_audio( $attachment, $widget_id, $instance );
     332                                        } elseif ( wp_attachment_is( 'video', $attachment ) ) {
     333                                                $this->render_video( $attachment, $widget_id, $instance );
     334                                        }
     335                                }
     336                        ?>
     337
     338                        <p class="extras">
     339                        </p>
     340
     341                        <p>
     342                                <button data-id="<?php echo esc_attr( $widget_id ); ?>" class="button select-media widefat">
     343                                        <?php $attachment ? esc_html_e( 'Change Media' ) : esc_html_e( 'Select Media' ); ?>
     344                                </button>
     345                        </p>
     346
     347                        <?php
     348                        // Use hidden form fields to capture the attachment details from the media manager.
     349                        unset( $instance['title'] );
     350                        ?>
     351
     352                        <?php foreach ( $instance as $name => $value ) : ?>
     353                                <input type="hidden" id="<?php echo esc_attr( $this->get_field_id( $name ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( $name ) ); ?>" value="<?php echo esc_attr( $value ); ?>" />
     354                        <?php endforeach; ?>
     355                </div>
     356                <?php
     357        }
     358
     359        /**
     360         * Registers the stylesheet for handling the widget in the back-end.
     361         *
     362         * @since 4.8.0
     363         * @access public
     364         */
     365        public function enqueue_admin_styles() {
     366                wp_enqueue_style( 'wp-media-widget-styles', includes_url( 'css/wp-media-widget.css' ), array( 'media-views' ) );
     367        }
     368
     369        /**
     370         * Registers the scripts for handling the widget in the back-end.
     371         *
     372         * @since 4.8.0
     373         * @access public
     374         */
     375        public function enqueue_admin_scripts() {
     376                global $pagenow;
     377
     378                // Bail if we are not in the widgets or customize screens.
     379                if ( ! ( 'widgets.php' == $pagenow || 'customize.php' == $pagenow ) ) {
     380                        return;
     381                }
     382
     383                // Load the required media files for the media manager.
     384                wp_enqueue_media();
     385
     386                // Register, localize and enqueue custom JS.
     387                wp_enqueue_script(
     388                        'wp-media-widget',
     389                        includes_url( 'js/wp-media-widget.js' ),
     390                        array( 'jquery', 'media-models', 'media-views', 'wp-mediaelement' ),
     391                        '',
     392                        true
     393                );
     394
     395                wp_localize_script( 'wp-media-widget', '_mediaWidgetl10n',
     396                        array(
     397                                'title'  => __( 'Select an Image' ),
     398                                'button' => __( 'Insert Image' ),
     399                                'select-media'  => __( 'Select Media' ),
     400                                'change-media'  => __( 'Change Media' ),
     401                                'add-to-widget' => __( 'Add to widget' ),
     402                        )
     403                );
     404
     405                add_action( 'admin_print_footer_scripts', array( $this, 'admin_print_footer_scripts' ) );
     406        }
     407
     408        /**
     409         * Prints footer scripts.
     410         *
     411         * @since 4.8.0
     412         * @access public
     413         */
     414        public function admin_print_footer_scripts() {
     415                ?>
     416                <script type="text/html" id="tmpl-wp-media-widget-audio">
     417                <?php wp_underscore_audio_template() ?>
     418                </script>
     419
     420                <script type="text/html" id="tmpl-wp-media-widget-video">
     421                <?php wp_underscore_video_template() ?>
     422                </script>
     423
     424                <?php
     425        }
     426}