WordPress.org

Make WordPress Core

Ticket #32417: 32417.2.diff

File 32417.2.diff, 17.5 KB (added by DrewAPicture, 2 years ago)

Docs + miscellaneous fixes

  • src/wp-includes/css/wp-media-widget.css

     
     1.media-widget-preview .button { 
     2        text-align: center 
     3} 
     4 
     5.media-widget-preview .aligncenter { 
     6        display: block; 
     7        margin: 0 auto; 
     8        text-align: center 
     9} 
     10 
     11.media-widget-preview .image { 
     12        height: auto; 
     13        max-width: 100%; 
     14        cursor: pointer; 
     15} 
  • src/wp-includes/default-widgets.php

     
    1919require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-rss.php' ); 
    2020require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-tag-cloud.php' ); 
    2121require_once( ABSPATH . WPINC . '/widgets/class-wp-nav-menu-widget.php' ); 
     22require_once( ABSPATH . WPINC . '/widgets/class-wp-media-widget.php' ); 
     23 No newline at end of file 
  • src/wp-includes/js/wp-media-widget.js

     
     1/** 
     2 * @since 4.4.0 
     3 * 
     4 * @package WP_Media_Widget 
     5 */ 
     6(function ( $ ) { 
     7        var frame, widgetFrame; 
     8 
     9        frame = { 
     10                buttonId: '.media-widget-preview .button, .media-widget-preview .image', 
     11 
     12                defaultProps: { 
     13                        'id' : '', 
     14                        'align' : '', 
     15                        'size' : '', 
     16                        'link' : '' 
     17                }, 
     18 
     19                init: function() { 
     20                        $( frame.buttonId ) 
     21                                .off( 'click.mediaWidget' ) 
     22                                .on( 'click.mediaWidget', frame.openMediaManager ); 
     23 
     24                        wp.mediaelement.initialize(); 
     25                }, 
     26 
     27                openMediaManager: function( event ) { 
     28                        event.preventDefault(); 
     29                        var widget_id = $( event.target ).data( 'id' ); 
     30 
     31                        // Create the media frame. 
     32                        widgetFrame = wp.media({ 
     33                                frame: 'post', 
     34                                state: 'insert' 
     35                        }); 
     36 
     37                        // Populate previously selected media when the media frame is opened. 
     38                        widgetFrame.on( 'open', function() { 
     39                                var selection = widgetFrame.state().get('selection'), 
     40                                        ids = $( '#widget-' + widget_id + '-id' ).val().split(','); 
     41 
     42                                if ( ids[0] > 0 ) { 
     43                                        ids.forEach( function( id ) { 
     44                                                var attachment = wp.media.attachment( id ); 
     45                                                attachment.fetch(); 
     46                                                selection.add( attachment ? [ attachment ] : [] ); 
     47                                        }); 
     48                                } 
     49                        }); 
     50 
     51                        // Render the attachment details. 
     52                        widgetFrame.on( 'close', function() { 
     53                                var props, attachment; 
     54 
     55                                // Only try to render the attachment details if a selection was made. 
     56                                if ( widgetFrame.state().get('selection').length > 0 ) { 
     57                                        props = widgetFrame.content.get('.attachments-browser') 
     58                                                .sidebar.get('display').model.toJSON(); 
     59 
     60                                        attachment = widgetFrame.state().get('selection').first().toJSON(); 
     61 
     62                                        frame.renderFormView( widget_id, props, attachment ); 
     63                                } 
     64                        }); 
     65 
     66                        widgetFrame.open( widget_id ); 
     67                }, 
     68 
     69                /** 
     70                 * Renders the attachment details from the media modal into the widget. 
     71                 * 
     72                 * @param {Object} props Attachment Display Settings (align, link, size, etc). 
     73                 * @param {Object} attachment Attachment Details (title, description, caption, url, sizes, etc). 
     74                 */ 
     75                renderFormView: function( widget_id, props, attachment ) { 
     76                        // Start with container elements for the widgets page, customizer controls, and customizer preview. 
     77                        var mediaEl, 
     78                                html, 
     79                                extras, 
     80                                template, 
     81                                formView = $( '.' + widget_id + ', #customize-control-widget_' + widget_id + ', #' + widget_id ); 
     82 
     83                        // The widget title bar doesn't update automatically on the Appearance > Widgets page. This fixes that problem. 
     84                        formView.closest( '.widget' ).find( '.in-widget-title' ).html( ': ' + attachment.title ); 
     85 
     86                        formView.find( '.attachment-description' ) 
     87                                [ attachment.description ? 'removeClass' : 'addClass' ]('hidden') 
     88                                .html( attachment.description ); 
     89 
     90                        extras = formView.find( '.extras' ); 
     91                        // Display a preview of the image in the widgets page and customizer controls. 
     92                        extras.removeClass( 'hidden' ); 
     93 
     94                        if ( 'image' === attachment.type ) { 
     95 
     96                                if ( ! mediaEl.length ) { 
     97                                        extras.before( '<p class="media-widget-admin-preview"><img class="image" /></p>' ); 
     98                                        mediaEl = formView.find( '.image' ); 
     99                                } 
     100 
     101                                attachment.link = props.link; 
     102                                attachment.size = props.size; 
     103 
     104                                html = $( '<img /' ).attr({ 
     105                                        'data-id': widget_id, 
     106                                        'src':     attachment.sizes[ props.size ].url, 
     107                                        'class':   'image align' + props.align, 
     108                                        'title':   attachment.title, 
     109                                        'alt':     attachment.alt, 
     110                                        'width':   attachment.sizes[ props.size ].width, 
     111                                        'height':  attachment.sizes[ props.size ].height 
     112                                }); 
     113                        } else if ( 'audio' === attachment.type ) { 
     114                                template = wp.media.template( 'wp-media-widget-audio' ); 
     115                                html = template( { 
     116                                        model: { 
     117                                                src: attachment.url 
     118                                        } 
     119                                } ); 
     120                        } else if ( 'video' === attachment.type ) { 
     121                                template = wp.media.template( 'wp-media-widget-video' ); 
     122                                html = template( { 
     123                                        model: { 
     124                                                src: attachment.url, 
     125                                                width: attachment.width, 
     126                                                height: attachment.height 
     127                                        } 
     128                                } ); 
     129                        } 
     130 
     131                        mediaEl = formView.find( '.media-widget-admin-preview' ); 
     132                        if ( mediaEl.length ) { 
     133                                if ( html ) { 
     134                                        mediaEl.html( html ); 
     135                                } else { 
     136                                        mediaEl.remove(); 
     137                                } 
     138                        } else if ( html ) { 
     139                                extras.before( '<p class="media-widget-admin-preview">' +  html + '</p>' ); 
     140                        } 
     141 
     142                        if ( -1 < $.inArray( attachment.type, [ 'audio', 'video' ] ) ) { 
     143                                wp.mediaelement.initialize(); 
     144                        } 
     145 
     146                        // Populate form fields with selection data from the media frame. 
     147                        _.each( _.keys( frame.defaultProps ), function ( key ) { 
     148                                formView.find( '#widget-' + widget_id + '-' + key ).val( attachment[ key ] ); 
     149                        } ); 
     150 
     151                        // Trigger a sync to update the widget in the customizer preview. 
     152                        formView.find( '#widget-' + widget_id + '-url' ).trigger( 'change' ); 
     153                } 
     154        }; 
     155 
     156        $( document ) 
     157                .ready( frame.init ) 
     158                .on( 'widget-added widget-updated', frame.init ); 
     159 
     160        window.wp = window.wp || {}; 
     161        window.wp.MediaWidget = frame; 
     162})( jQuery ); 
     163 No newline at end of file 
  • src/wp-includes/widget-functions.php

     
    13491349        register_widget('WP_Widget_Tag_Cloud'); 
    13501350 
    13511351        register_widget('WP_Nav_Menu_Widget'); 
     1352         
     1353        register_widget('WP_Media_Widget'); 
    13521354 
    13531355        /** 
    13541356         * Fires after all default WordPress widgets have been registered. 
  • src/wp-includes/widgets/class-wp-media-widget.php

     
     1<?php 
     2/** 
     3 * Widget API: WP_Media_Widget class 
     4 * 
     5 * @package WordPress 
     6 * @subpackage Widgets 
     7 * @since 4.4.0 
     8 */ 
     9 
     10/** 
     11 * Core class that implements a media widget. 
     12 * 
     13 * @since 4.4.0 
     14 * 
     15 * @see WP_Widget 
     16 */ 
     17class WP_Media_Widget extends WP_Widget { 
     18        /** 
     19         * Constructor. 
     20         * 
     21         * @since 4.4.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 in your sidebar.' ) 
     37                ) ); 
     38 
     39                $control_opts = wp_parse_args( $control_options, array() ); 
     40 
     41                parent::__construct( 
     42                        $id_base ? $id_base : 'wp-media-widget', 
     43                        $name ? $name : __( 'Media' ), 
     44                        $widget_opts, 
     45                        $control_opts 
     46                ); 
     47 
     48                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_styles' ) ); 
     49                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) ); 
     50        } 
     51 
     52        /** 
     53         * Displays the widget on the front-end. 
     54         * 
     55         * @since 4.4.0 
     56         * @access public 
     57         * 
     58         * @see WP_Widget::widget() 
     59         * 
     60         * @param array $args     Display arguments including before_title, after_title, before_widget, and after_widget. 
     61         * @param array $instance Saved setting from the database. 
     62         */ 
     63        public function widget( $args, $instance ) { 
     64                extract( $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 = wp_get_attachment_link( $instance['id'] ); 
     79                                $selectedLink = $url; 
     80                        } else { 
     81                                $selectedLink = ''; 
     82                        } 
     83                } 
     84 
     85                // Build the image output. 
     86                $image_output = ''; 
     87                if ( ! empty( $selectedLink ) ) { 
     88                                $image_output .= '<a href="' . $selectedLink . '"'; 
     89                        if ( 'on' == $instance['target'] ) { 
     90                                $image_output .= ' target="_blank"'; 
     91                        } 
     92                        $image_output .= '>'; 
     93                } 
     94 
     95                if ( ! empty( $instance['id'] ) ) { 
     96                        $image_output .= wp_get_attachment_image( $instance['id'], $instance['size'], false, array( 
     97                                'data-id' => esc_attr( $args['widget_id'] ), 
     98                                'class' => 'image align' . $instance['align'], 
     99                                'title' => $instance['title'], 
     100                        ) ); 
     101                } 
     102 
     103                if ( ! empty( $selectedLink ) ) { 
     104                        $image_output .= '</a>'; 
     105                } 
     106 
     107                // Build the caption output. 
     108                $caption_output = ''; 
     109                if ( ! empty( $instance['caption'] ) ) { 
     110                        $caption_output .= '[caption id="attachment_' . $instance['id'] . '" align="align' . $instance['align'] . '" width="' . $instance['width'] . '"]'; 
     111                        $caption_output .= $image_output; 
     112                        $caption_output .= ' ' . $instance['caption'] . '[/caption]'; 
     113                        echo do_shortcode( $caption_output ); 
     114                } else { 
     115                        echo $image_output; 
     116                } 
     117                echo $args['after_widget']; 
     118        } 
     119 
     120        /** 
     121         * Sanitizes the widget form values as they are saved. 
     122         * 
     123         * @since 4.4.0 
     124         * @access public 
     125         * 
     126         * @see WP_Widget::update() 
     127         * 
     128         * @param array $new_instance Values just sent to be saved. 
     129         * @param array $old_instance Previously saved values from database. 
     130         * @return array Updated safe values to be saved. 
     131         */ 
     132        function update( $new_instance, $old_instance ) { 
     133                $instance = $old_instance; 
     134 
     135                // ID, title, target. 
     136                $instance['id'] = (int) $new_instance['id']; 
     137                $instance['title'] = sanitize_text_field( $new_instance['title'] ); 
     138                $instance['target'] = isset( $new_instance['target'] ) ? sanitize_text_field( $new_instance['target'] ) : ''; 
     139 
     140                // Everything else. 
     141                $instance['align'] = sanitize_text_field( $new_instance['align'] ); 
     142                $instance['size'] = sanitize_text_field( $new_instance['size'] ); 
     143                $instance['link'] = sanitize_text_field( $new_instance['link'] ); 
     144                return $instance; 
     145        } 
     146 
     147        /** 
     148         * Renders an image attachment preview. 
     149         * 
     150         * @since 4.4.0 
     151         * @access public 
     152         * 
     153         * @param WP_Post $attachment Attachment object. 
     154         * @param string  $widget_id  Widget ID. 
     155         * @param array   $instance   Current widget instance arguments. 
     156         */ 
     157        public function render_image( $attachment, $widget_id, $instance ) { 
     158                // If an image id is saved for this widget, display the image using `wp_get_attachment_image()`. 
     159                echo '<p class="media-widget-admin-preview">', 
     160                        wp_get_attachment_image( $attachment->ID, $instance['size'], false, array( 
     161                                'data-id' => esc_attr( $widget_id ), 
     162                                'class'   => 'image align' . esc_attr( $instance['align'] ), 
     163                                'title'   => esc_attr( $instance['title'] ), 
     164                        ) ), 
     165                '</p>'; 
     166        } 
     167 
     168        /** 
     169         * Renders an audio attachment preview. 
     170         * 
     171         * @since 4.4.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_audio( $attachment, $widget_id, $instance ) { 
     179                echo '<p class="media-widget-admin-preview">', 
     180                        wp_audio_shortcode( array( 
     181                                'src' => wp_get_attachment_url( $attachment->ID ) 
     182                        ) ), 
     183                '</p>'; 
     184        } 
     185 
     186        /** 
     187         * Renders a video attachment preview. 
     188         * 
     189         * @since 4.4.0 
     190         * @access public 
     191         * 
     192         * @param WP_Post $attachment Attachment object. 
     193         * @param string  $widget_id  Widget ID. 
     194         * @param array   $instance   Current widget instance arguments. 
     195         */ 
     196        public function render_video( $attachment, $widget_id, $instance ) { 
     197                echo '<p class="media-widget-admin-preview">', 
     198                        wp_video_shortcode( array( 
     199                                'src' => wp_get_attachment_url( $attachment->ID ) 
     200                        ) ), 
     201                '</p>'; 
     202        } 
     203 
     204        /** 
     205         * Outputs the settings update form. 
     206         * 
     207         * @since 4.4.0 
     208         * @access public 
     209         * 
     210         * @param array $saved_instance Current settings. 
     211         * @return string Default return is 'noform'. 
     212         */ 
     213        public function form( $saved_instance ) { 
     214                $defaults = array( 
     215                        'title' => '', 
     216                        'target' => '', 
     217                        // attachment props 
     218                        'id' => '', 
     219                        'align' => '', 
     220                        'size' => '', 
     221                        'link' => '', 
     222                ); 
     223                $instance = wp_parse_args( (array) $saved_instance, $defaults ); 
     224                $widget_id = $this->id; 
     225 
     226                echo '<p>', __( 'Add an image, gallery, video, or audio to your sidebar.' ) . '</p>'; 
     227                ?> 
     228                <div class="<?php echo esc_attr( $widget_id ); ?> media-widget-preview"> 
     229                        <p> 
     230                                <a data-id="<?php echo esc_attr( $widget_id ); ?>" class="button select-media widefat"><?php 
     231                                        esc_html_e( 'Select Media' ); 
     232                                ?></a> 
     233                        </p> 
     234 
     235                        <p> 
     236                                <label for="<?php echo $this->get_field_id('title'); ?>"><?php esc_html_e('Title:'); ?></label> 
     237                                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" 
     238                                         name="<?php echo $this->get_field_name('title'); ?>" 
     239                                         type="text" value="<?php echo esc_html( $instance['title'] ); ?>" /> 
     240                        </p> 
     241 
     242                        <?php 
     243                        if ( ! empty( $instance['id'] ) ) { 
     244 
     245                                if ( $attachment = get_post( $instance['id'] ) ) { 
     246                                        // Image. 
     247                                        if ( wp_attachment_is_image( $attachment ) ) { 
     248                                                $this->render_image( $attachment, $widget_id, $instance ); 
     249 
     250                                        // Audio. 
     251                                        } elseif ( wp_attachment_is( 'audio', $attachment ) ) { 
     252                                                $this->render_audio( $attachment, $widget_id, $instance ); 
     253 
     254                                        // Video. 
     255                                        } elseif( wp_attachment_is( 'video', $attachment ) ) { 
     256                                                $this->render_video( $attachment, $widget_id, $instance ); 
     257                                        } 
     258                                } 
     259                        } 
     260                        ?> 
     261 
     262                        <p class="extras<?php echo empty( $instance['id'] ) ? ' hidden' : ''; ?>"> 
     263                                <input type="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'target' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'target' ) ); ?>" 
     264                                        <?php if ( ! empty( $instance['target'] ) ) { 
     265                                                checked( 'on', $instance['target'] ); 
     266                                        } ?> /> 
     267                                <label for="<?php echo esc_attr( $this->get_field_id( 'target' ) ); ?>"> 
     268                                        <?php esc_html_e( 'Open link in a new tab or window' ); ?> 
     269                                </label> 
     270                        </p> 
     271 
     272                        <fieldset class="media-widget-hidden-fields"> 
     273                                <?php 
     274                                // Use hidden form fields to capture the attachment details from the media manager. 
     275                                unset( $instance['title'] ); 
     276                                unset( $instance['target'] ); 
     277 
     278                                foreach( array_keys( $instance ) as $i ) { ?> 
     279                                        <input type="hidden" id="<?php echo esc_attr( $this->get_field_id( $i ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( $i ) ); ?>" value="<?php echo esc_attr( $instance[ $i ] ); ?>" /> 
     280                                <?php } ?> 
     281                        </fieldset> 
     282                </div> 
     283                <?php 
     284        } 
     285 
     286        /** 
     287         * Registers the stylesheet for handling the widget in the back-end. 
     288         * 
     289         * @since 4.4.0 
     290         * @access public 
     291         */ 
     292        public function enqueue_admin_styles() { 
     293                wp_enqueue_style( 'wp-media-widget-styles', includes_url( 'css/wp-media-widget.css' ), array( 'media-views' ) ); 
     294        } 
     295 
     296        /** 
     297         * Registers the scripts for handling the widget in the back-end. 
     298         * 
     299         * @since 4.4.0 
     300         * @access public 
     301         */ 
     302        public function enqueue_admin_scripts() { 
     303                global $pagenow; 
     304 
     305                // Bail if we are not in the widgets or customize screens. 
     306                if ( ! ( 'widgets.php' == $pagenow || 'customize.php' == $pagenow ) ) { 
     307                        return; 
     308                } 
     309 
     310                // Load the required media files for the media manager. 
     311                wp_enqueue_media(); 
     312 
     313                // Register, localize and enqueue custom JS. 
     314                wp_enqueue_script( 
     315                        'wp-media-widget', 
     316                        includes_url( 'js/wp-media-widget.js' ), 
     317                        array( 'jquery', 'media-models', 'media-views' ), 
     318                        '', 
     319                        true 
     320                ); 
     321 
     322                wp_localize_script( 'wp-media-widget', '_mediaWidgetl10n', 
     323                        array( 
     324                                'title'  => __( 'Select an Image' ), 
     325                                'button' => __( 'Insert Image' ) 
     326                        ) 
     327                ); 
     328 
     329                add_action( 'admin_print_footer_scripts', array( $this, 'admin_print_footer_scripts' ) ); 
     330        } 
     331 
     332        /** 
     333         * Prints footer scripts. 
     334         * 
     335         * @since 4.4.0 
     336         * @access public 
     337         */ 
     338        public function admin_print_footer_scripts() { 
     339                ?> 
     340                <script type="text/html" id="tmpl-wp-media-widget-audio"> 
     341                <?php wp_underscore_audio_template() ?> 
     342                </script> 
     343 
     344                <script type="text/html" id="tmpl-wp-media-widget-video"> 
     345                <?php wp_underscore_video_template() ?> 
     346                </script> 
     347 
     348                <?php 
     349        } 
     350}