WordPress.org

Make WordPress Core

Ticket #32417: 32417.10.diff

File 32417.10.diff, 23.2 KB (added by gonom9, 9 months ago)

Fix typos. Nothing else is different from 32417.9.diff

  • 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..e4f9215 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                                scale = $( '#widget-' + widgetId + '-scale' ); 
     104 
     105                        // The widget title bar doesn't update automatically on the Appearance > Widgets page. This fixes that problem. 
     106                        formView.closest( '.widget' ).find( '.in-widget-title' ).html( ': ' + attachment.title ); 
     107 
     108                        formView.find( '.attachment-description' ) 
     109                                [ attachment.description ? 'removeClass' : 'addClass' ]('hidden') 
     110                                .html( attachment.description ); 
     111 
     112                        extras = formView.find( '.extras' ); 
     113                        // Display a preview of the image in the widgets page and customizer controls. 
     114                        extras.removeClass( 'hidden' ); 
     115 
     116                        attachment.link = props.link; 
     117                        attachment.size = props.size; 
     118 
     119                        previewEl = formView.find( '.media-widget-admin-preview' ); 
     120                        if ( ! previewEl.length ) { 
     121                                previewEl = $( '<div class="media-widget-admin-preview"></div>' ).insertBefore( extras ); 
     122                        } 
     123                        previewEl.html( frame.renderMediaElement( widgetId, props, attachment ) ); 
     124 
     125                        if ( scale.prop( 'checked' ) ) { 
     126                                previewEl 
     127                                        .find( '.wp-video, .wp-caption' ).css( 'width', '100%' ).end() 
     128                                        .find( 'img.image' ).css( { width: '100%', height: 'auto' } ); 
     129                        } 
     130 
     131                        if ( -1 < $.inArray( attachment.type, [ 'audio', 'video' ] ) ) { 
     132                                wp.mediaelement.initialize(); 
     133                        } else if ( 'image' === attachment.type ) { 
     134                                frame.bindImageClick(); 
     135                        } 
     136 
     137                        // Populate form fields with selection data from the media frame. 
     138                        _.each( _.keys( frame.defaultProps ), function ( key ) { 
     139                                formView.find( '#widget-' + widgetId + '-' + key ).val( attachment[ key ] || props[ key ] ).trigger( 'change' ); 
     140                        } ); 
     141 
     142                        // Trigger a sync to update the widget in the customizer preview. 
     143                        formView.find( '#widget-' + widgetId + '-url' ).trigger( 'change' ); 
     144 
     145                        // Change button text 
     146                        formView.find( frame.buttonId ).text( translate( 'change-media', 'Change Media' ) ); 
     147                }, 
     148 
     149                /** 
     150                 * Renders the media attachment in HTML. 
     151                 * 
     152                 * @param {String} widgetId 
     153                 * @param {Object} props Attachment Display Settings (align, link, size, etc). 
     154                 * @param {Object} attachment Attachment Details (title, description, caption, url, sizes, etc). 
     155                 */ 
     156                renderMediaElement: function( widgetId, props, attachment ) { 
     157                        var image; 
     158 
     159                        if ( 'image' === attachment.type ) { 
     160                                image = $( '<img />' ) 
     161                                        .addClass( 'image wp-image' + attachment.id ) 
     162                                        .attr( { 
     163                                                'data-id': widgetId, 
     164                                                src:       attachment.sizes[ props.size ].url, 
     165                                                title:     attachment.title, 
     166                                                alt:       attachment.alt, 
     167                                                width:     attachment.sizes[ props.size ].width, 
     168                                                height:    attachment.sizes[ props.size ].height 
     169                                        } ); 
     170 
     171                                if ( attachment.caption ) { 
     172                                        image = $( '<figure />' ) 
     173                                                .width( attachment.sizes[ props.size ].width ) 
     174                                                .addClass( 'wp-caption' ) 
     175                                                .attr( 'id', widgetId + '-caption' ) 
     176                                                .append( image ); 
     177 
     178                                        $( '<figcaption class="wp-caption-text" />' ).text( attachment.caption ).appendTo( image ); 
     179                                } 
     180 
     181                                return image.wrap( '<div />' ).parent().html(); 
     182                        } 
     183 
     184                        if ( 'audio' === attachment.type ) { 
     185                                if ( 'embed' === props.link ) { 
     186                                        return wp.media.template( 'wp-media-widget-audio' )( { 
     187                                                model: { 
     188                                                        src:    attachment.url 
     189                                                } 
     190                                        } ); 
     191                                } 
     192 
     193                                return wp.html.string( { 
     194                                        tag: 'a', 
     195                                        content: attachment.title, 
     196                                        attrs: { 
     197                                                href: '#' 
     198                                        } 
     199                                } ); 
     200                        } 
     201 
     202                        if ( 'video' === attachment.type ) { 
     203                                if ( 'embed' === props.link ) { 
     204                                        return wp.media.template( 'wp-media-widget-video' )( { 
     205                                                model: { 
     206                                                        src:    attachment.url, 
     207                                                        width:  attachment.width, 
     208                                                        height: attachment.height 
     209                                                } 
     210                                        } ); 
     211                                } 
     212 
     213                                return wp.html.string( { 
     214                                        tag: 'a', 
     215                                        content: attachment.title, 
     216                                        attrs: { 
     217                                                href: '#' 
     218                                        } 
     219                                } ); 
     220                        } 
     221 
     222                        // Unknown media type 
     223                        return ''; 
     224                } 
     225        }; 
     226 
     227        $( document ) 
     228                .ready( frame.init ) 
     229                .on( 'widget-added widget-updated', frame.init ); 
     230 
     231        window.wp = window.wp || {}; 
     232        window.wp.MediaWidget = frame; 
     233} )( 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..3e233a5 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                $output = $args['before_widget']; 
     66                if ( ! empty( $instance['title'] ) ) { 
     67                        $title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base ); 
     68                        $output .= $args['before_title'] . $title . $args['after_title']; 
     69                } 
     70                if ( ! empty( $instance['description'] ) ) { 
     71                        $output .= '<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                                                'scale'   => $instance['scale'], 
     106                                                'title'   => $attachment->post_title, 
     107                                                'caption' => $attachment->post_excerpt, 
     108                                        ) ); 
     109 
     110                                // Audio. 
     111                                } elseif ( wp_attachment_is( 'audio', $attachment ) ) { 
     112                                        if ( ! empty( $selectedLink ) ) { 
     113                                                $media_output .= $attachment->post_title; 
     114                                        } else { 
     115                                                $media_output .= $this->get_attachment_audio( $attachment->ID, array() ); 
     116                                        } 
     117 
     118                                // Video. 
     119                                } elseif ( wp_attachment_is( 'video', $attachment ) ) { 
     120                                        if ( ! empty( $selectedLink ) ) { 
     121                                                $media_output .= $attachment->post_title; 
     122                                        } else { 
     123                                                $media_output .= $this->get_attachment_video( $attachment->ID, array() ); 
     124                                        } 
     125                                } 
     126                        } 
     127                } 
     128 
     129                if ( ! empty( $selectedLink ) ) { 
     130                        $media_output .= '</a>'; 
     131                } 
     132 
     133                $output .= $media_output; 
     134                $output .= $this->get_responsive_style( $attachment, $args['widget_id'], $instance ); 
     135                $output .= $args['after_widget']; 
     136 
     137                echo $output; 
     138        } 
     139 
     140        /** 
     141         * Sanitizes the widget form values as they are saved. 
     142         * 
     143         * @since 4.8.0 
     144         * @access public 
     145         * 
     146         * @see WP_Widget::update() 
     147         * 
     148         * @param array $new_instance Values just sent to be saved. 
     149         * @param array $old_instance Previously saved values from database. 
     150         * @return array Updated safe values to be saved. 
     151         */ 
     152        function update( $new_instance, $old_instance ) { 
     153                $instance = $old_instance; 
     154 
     155                // ID, title, scale 
     156                $instance['id'] = (int) $new_instance['id']; 
     157                $instance['title'] = sanitize_text_field( $new_instance['title'] ); 
     158                $instance['scale'] = isset( $new_instance['scale'] ) ? sanitize_text_field( $new_instance['scale'] ) : ''; 
     159 
     160                // Everything else. 
     161                $instance['align'] = sanitize_text_field( $new_instance['align'] ); 
     162                $instance['size']  = sanitize_text_field( $new_instance['size'] ); 
     163                $instance['link']  = sanitize_text_field( $new_instance['link'] ); 
     164 
     165                return $instance; 
     166        } 
     167 
     168        /** 
     169         * Renders an image attachment preview. 
     170         * 
     171         * @since 4.8.0 
     172         * @access public 
     173         * 
     174         * @param WP_Post $attachment Attachment object. 
     175         * @param string  $widget_id  Widget ID. 
     176         * @param array   $instance   Current widget instance arguments. 
     177         */ 
     178        public function render_image( $attachment, $widget_id, $instance ) { 
     179                $attrs = array( 
     180                        'id'      => $widget_id, 
     181                        'align'   => $instance['align'], 
     182                        'title'   => $attachment->post_title, 
     183                        'caption' => $attachment->post_excerpt, 
     184                ); 
     185 
     186                // If an image id is saved for this widget, display the image using `wp_get_attachment_image()`. 
     187                $output =  '<div class="media-widget-admin-preview" id="' . $widget_id . '">'; 
     188                $output .= $this->get_attachment_image( $attachment->ID, $instance['size'], $attrs ); 
     189                $output .= '</div>'; 
     190 
     191                echo $output; 
     192        } 
     193 
     194        /** 
     195         * Get an elmeent reprensenting an image attachment 
     196         * 
     197         * @since 4.8.0 
     198         * @access private 
     199         * 
     200         * @param int    $attachment_id Image attachment ID. 
     201         * @param string $size  Image size. Default value: 'medium' 
     202         * @param array  $attrs Attributes for the markup. 
     203         */ 
     204        private function get_attachment_image( $attachment_id, $size = 'medium', $attrs = array() ) { 
     205 
     206                $has_caption   = ( ! empty( $attrs['caption'] ) ); 
     207                $is_responsive = ( ! empty( $attrs['scale'] ) ); 
     208 
     209                $img_attrs = array( 
     210                        'data-id' => $attrs['id'], 
     211                        'title'   => $attrs['title'], 
     212                        'class'   => 'image wp-image-' . $attachment_id, 
     213                ); 
     214 
     215                if ( $has_caption ) { 
     216                        $img_attrs['class'] .= ' align' . $attrs['align']; 
     217                } 
     218 
     219                if ( $is_responsive ) { 
     220                        $img_attrs['style'] = 'width: 100%; height: auto;'; 
     221                } 
     222 
     223                $image = wp_get_attachment_image( $attachment_id, $size, false, $img_attrs ); 
     224 
     225                if ( ! $has_caption ) { 
     226                        return $image; 
     227                } 
     228 
     229                $attrs['id'] .= '-caption'; 
     230                $attrs['width'] = get_option( $size . '_size_w' ); 
     231 
     232                $figure = img_caption_shortcode( $attrs, $image ); 
     233 
     234                return $figure; 
     235        } 
     236 
     237        /** 
     238         * Renders an audio attachment preview. 
     239         * 
     240         * @since 4.8.0 
     241         * @access public 
     242         * 
     243         * @param WP_Post $attachment Attachment object. 
     244         * @param string  $widget_id  Widget ID. 
     245         * @param array   $instance   Current widget instance arguments. 
     246         */ 
     247        public function render_audio( $attachment, $widget_id, $instance ) { 
     248                $output = '<div class="media-widget-admin-preview" id="' . $widget_id . '">';; 
     249                if ( 'embed' === $instance['link'] ) { 
     250                        $output .= $this->get_attachment_audio( $attachment->ID ); 
     251                } else { 
     252                        $output .= '<a href="#">' . $attachment->post_title .'</a>'; 
     253                } 
     254                $output .= '</div>'; 
     255 
     256                echo $output; 
     257        } 
     258 
     259        /** 
     260         * Get an audio elmeent reprensenting a video attachment 
     261         * 
     262         * @since 4.8.0 
     263         * @access private 
     264         * 
     265         * @param int   $attachment_id Audio attachment ID. 
     266         * @param array Attributes for the audio markup. 
     267         */ 
     268        private function get_attachment_audio( $attachment_id, $attrs = array() ) { 
     269                $output = wp_audio_shortcode( array( 
     270                        'src' => wp_get_attachment_url( $attachment_id ) 
     271                ) ); 
     272 
     273                return $output; 
     274        } 
     275 
     276        /** 
     277         * Renders a video attachment preview. 
     278         * 
     279         * @since 4.8.0 
     280         * @access public 
     281         * 
     282         * @param WP_Post $attachment Attachment object. 
     283         * @param string  $widget_id  Widget ID. 
     284         * @param array   $instance   Current widget instance arguments. 
     285         */ 
     286        public function render_video( $attachment, $widget_id, $instance ) { 
     287                $output = '<div class="media-widget-admin-preview" id="' . $widget_id . '">'; 
     288                if ( 'embed' === $instance['link'] ) { 
     289                        $output .= $this->get_attachment_video( $attachment->ID ); 
     290                } else { 
     291                        $output .= '<a href="#">' . $attachment->post_title .'</a>'; 
     292                } 
     293                $output .= '</div>'; 
     294 
     295                echo $output; 
     296        } 
     297 
     298        /** 
     299         * Get a video elmeent reprensenting a video attachment 
     300         * 
     301         * @since 4.8.0 
     302         * @access private 
     303         * 
     304         * @param int   $attachment_id Video attachment ID. 
     305         * @param array Attributes for the video markup. 
     306         */ 
     307        private function get_attachment_video( $attachment_id, $attrs = array() ) { 
     308                $output = wp_video_shortcode( array( 
     309                        'src' => wp_get_attachment_url( $attachment_id ) 
     310                ) ); 
     311 
     312                return $output; 
     313        } 
     314 
     315        /** 
     316         * Get styles for responsifying the widget 
     317         * 
     318         * @since 4.8.0 
     319         * @access private 
     320         * 
     321         * @param WP_Post $attachment Attachment object. 
     322         * @param string  $widget_id  Widget ID. 
     323         * @param array   $instance   Current widget instance arguments. 
     324         */ 
     325        private function get_responsive_style( $attachment, $widget_id, $instance ) { 
     326                if ( empty( $instance['scale'] ) || wp_attachment_is( 'audio', $attachment ) ) { 
     327                        return; 
     328                } 
     329 
     330                $output = '<style type="text/css">'; 
     331 
     332                if ( wp_attachment_is_image( $attachment ) ) { 
     333                        $output .= "#{$widget_id}-caption{ width: 100% !important; }"; 
     334                } 
     335 
     336                if ( wp_attachment_is( 'video', $attachment ) ) { 
     337                        $output .= "#{$widget_id} .wp-video{ width: 100% !important; }"; 
     338                } 
     339 
     340                $output .= '</style>'; 
     341 
     342                return $output; 
     343        } 
     344 
     345        /** 
     346         * Outputs the settings update form. 
     347         * 
     348         * @since 4.8.0 
     349         * @access public 
     350         * 
     351         * @param array $saved_instance Current settings. 
     352         * @return string Default return is 'noform'. 
     353         */ 
     354        public function form( $saved_instance ) { 
     355                $defaults = array( 
     356                        'title'  => '', 
     357                        // Attachment props. 
     358                        'id'     => '', 
     359                        'align'  => '', 
     360                        'size'   => '', 
     361                        'link'   => '', 
     362                        'scale'  => '', 
     363                ); 
     364 
     365                $instance   = wp_parse_args( (array) $saved_instance, $defaults ); 
     366                $attachment = empty( $instance['id'] ) ? null: get_post( $instance['id'] ); 
     367                $widget_id  = $this->id; 
     368                ?> 
     369                <div class="<?php echo esc_attr( $widget_id ); ?> media-widget-preview"> 
     370                        <p> 
     371                                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e( 'Title:' ); ?></label> 
     372                                <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'] ); ?>" /> 
     373                        </p> 
     374 
     375                        <p> 
     376                                <?php esc_html_e( 'Add an image, video, or audio to your sidebar.' ); ?> 
     377                        </p> 
     378 
     379                        <?php 
     380                                if ( $attachment ) { 
     381                                        if ( wp_attachment_is_image( $attachment ) ) { 
     382                                                $this->render_image( $attachment, $widget_id, $instance ); 
     383                                        } elseif ( wp_attachment_is( 'audio', $attachment ) ) { 
     384                                                $this->render_audio( $attachment, $widget_id, $instance ); 
     385                                        } elseif ( wp_attachment_is( 'video', $attachment ) ) { 
     386                                                $this->render_video( $attachment, $widget_id, $instance ); 
     387                                        } 
     388                                        echo $this->get_responsive_style( $attachment, $widget_id, $instance ); 
     389                                } 
     390                        ?> 
     391 
     392                        <p class="extras"> 
     393                                <input 
     394                                        type="checkbox" 
     395                                        name="<?php echo $this->get_field_name( 'scale' ) ?>" 
     396                                        id="<?php echo $this->get_field_id( 'scale' )?>" 
     397                                        value="on" 
     398                                        <?php checked( 'on', $instance[ 'scale' ]  ); ?> 
     399                                /> 
     400                                <label for="<?php echo $this->get_field_id( 'scale' )?>"> 
     401                                        <?php esc_html_e( 'Scale to fit width' ); ?> 
     402                                </label> 
     403                        </p> 
     404 
     405                        <p> 
     406                                <button data-id="<?php echo esc_attr( $widget_id ); ?>" class="button select-media widefat"> 
     407                                        <?php $attachment ? esc_html_e( 'Change Media' ) : esc_html_e( 'Select Media' ); ?> 
     408                                </button> 
     409                        </p> 
     410 
     411                        <?php 
     412                        // Use hidden form fields to capture the attachment details from the media manager. 
     413                        unset( $instance['title'], $instance['scale'] ); 
     414                        ?> 
     415 
     416                        <?php foreach ( $instance as $name => $value ) : ?> 
     417                                <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 ); ?>" /> 
     418                        <?php endforeach; ?> 
     419                </div> 
     420                <?php 
     421        } 
     422 
     423        /** 
     424         * Registers the stylesheet for handling the widget in the back-end. 
     425         * 
     426         * @since 4.8.0 
     427         * @access public 
     428         */ 
     429        public function enqueue_admin_styles() { 
     430                wp_enqueue_style( 'wp-media-widget-styles', includes_url( 'css/wp-media-widget.css' ), array( 'media-views' ) ); 
     431        } 
     432 
     433        /** 
     434         * Registers the scripts for handling the widget in the back-end. 
     435         * 
     436         * @since 4.8.0 
     437         * @access public 
     438         */ 
     439        public function enqueue_admin_scripts() { 
     440                global $pagenow; 
     441 
     442                // Bail if we are not in the widgets or customize screens. 
     443                if ( ! ( 'widgets.php' == $pagenow || 'customize.php' == $pagenow ) ) { 
     444                        return; 
     445                } 
     446 
     447                // Load the required media files for the media manager. 
     448                wp_enqueue_media(); 
     449 
     450                // Register, localize and enqueue custom JS. 
     451                wp_enqueue_script( 
     452                        'wp-media-widget', 
     453                        includes_url( 'js/wp-media-widget.js' ), 
     454                        array( 'jquery', 'media-models', 'media-views' ), 
     455                        '', 
     456                        true 
     457                ); 
     458 
     459                wp_localize_script( 'wp-media-widget', '_mediaWidgetl10n', 
     460                        array( 
     461                                'title'  => __( 'Select an Image' ), 
     462                                'button' => __( 'Insert Image' ), 
     463                                'select-media'  => __( 'Select Media' ), 
     464                                'change-media'  => __( 'Change Media' ), 
     465                                'add-to-widget' => __( 'Add to widget' ), 
     466                        ) 
     467                ); 
     468 
     469                add_action( 'admin_print_footer_scripts', array( $this, 'admin_print_footer_scripts' ) ); 
     470        } 
     471 
     472        /** 
     473         * Prints footer scripts. 
     474         * 
     475         * @since 4.8.0 
     476         * @access public 
     477         */ 
     478        public function admin_print_footer_scripts() { 
     479                ?> 
     480                <script type="text/html" id="tmpl-wp-media-widget-audio"> 
     481                <?php wp_underscore_audio_template() ?> 
     482                </script> 
     483 
     484                <script type="text/html" id="tmpl-wp-media-widget-video"> 
     485                <?php wp_underscore_video_template() ?> 
     486                </script> 
     487 
     488                <?php 
     489        } 
     490}