WordPress.org

Make WordPress Core

Ticket #32417: 32417.diff

File 32417.diff, 15.3 KB (added by wonderboymusic, 3 years ago)
  • 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 * Media widget class
     4 *
     5 * @since 4.4.0
     6 * @package WordPress
     7 * @subpackage Widgets
     8 */
     9class WP_Media_Widget extends WP_Widget {
     10        /**
     11         * @param string $id_base
     12         * @param string $name
     13         * @param array  $widget_options
     14         * @param array  $control_options
     15         */
     16        public function __construct( $id_base = '', $name = '', $widget_options = array(), $control_options = array() ) {
     17                $widget_opts = wp_parse_args( $widget_options, array(
     18                        'classname' => 'widget_media',
     19                        'description' => __( 'Display media in your sidebar.' )
     20                ) );
     21
     22                $control_opts = wp_parse_args( $control_options, array() );
     23
     24                parent::__construct(
     25                        $id_base ? $id_base : 'wp-media-widget',
     26                        $name ? $name : __( 'Media' ),
     27                        $widget_opts,
     28                        $control_opts
     29                );
     30
     31                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_styles' ) );
     32                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
     33        }
     34
     35        /**
     36         * Front-end display of widget.
     37         *
     38         * @see WP_Widget::widget()
     39         *
     40         * @param array $args     Display arguments including before_title, after_title, before_widget, and after_widget.
     41         * @param array $instance Saved setting from the database.
     42         */
     43        public function widget( $args, $instance ) {
     44                extract( $instance );
     45
     46                echo $args['before_widget'];
     47                if ( ! empty( $instance['title'] ) ) {
     48                        echo $args['before_title'] . $instance['title'] . $args['after_title'];
     49                }
     50                if ( ! empty( $instance['description'] ) ) {
     51                        echo '<p class="attachment-description align' . $instance['align'] . '">' . $instance['description'] . '</p>';
     52                }
     53                if ( ! empty( $instance['link'] ) ) {
     54                        if ( 'file' == $instance['link'] ) {
     55                                $url = wp_get_attachment_url( $instance['id'] );
     56                                $selectedLink = $url;
     57                        } else if ( 'post' == $instance['link'] ) {
     58                                $url = wp_get_attachment_link( $instance['id'] );
     59                                $selectedLink = $url;
     60                        } else {
     61                                $selectedLink = '';
     62                        }
     63                }
     64                // Build the image output
     65                $image_output = '';
     66                if ( ! empty( $selectedLink ) ) {
     67                                $image_output .= '<a href="' . $selectedLink . '"';
     68                        if ( 'on' == $instance['target'] ) {
     69                                $image_output .= ' target="_blank"';
     70                        }
     71                        $image_output .= '>';
     72                }
     73                if ( ! empty( $instance['id'] ) ) {
     74                        $image_output .= wp_get_attachment_image( $instance['id'], $instance['size'], false, array(
     75                                'data-id' => esc_attr( $args['widget_id'] ),
     76                                'class' => 'image align' . $instance['align'],
     77                                'title' => $instance['title'],
     78                        ) );
     79                }
     80                if ( ! empty( $selectedLink ) ) {
     81                        $image_output .= '</a>';
     82                }
     83                // Build the caption output
     84                $caption_output = '';
     85                if ( ! empty( $instance['caption'] ) ) {
     86                        $caption_output .= '[caption id="attachment_' . $instance['id'] . '" align="align' . $instance['align'] . '" width="' . $instance['width'] . '"]';
     87                        $caption_output .= $image_output;
     88                        $caption_output .= ' ' . $instance['caption'] . '[/caption]';
     89                        echo do_shortcode( $caption_output );
     90                } else {
     91                        echo $image_output;
     92                }
     93                echo $args['after_widget'];
     94        }
     95
     96        /**
     97         * Sanitize widget form values as they are saved.
     98         *
     99         * @see WP_Widget::update()
     100         *
     101         * @param array $new_instance Values just sent to be saved.
     102         * @param array $old_instance Previously saved values from database.
     103         *
     104         * @return array Updated safe values to be saved.
     105         */
     106        function update( $new_instance, $old_instance ) {
     107                $instance = $old_instance;
     108                $instance['id'] = (int) $new_instance['id'];
     109                $instance['title'] = sanitize_text_field( $new_instance['title'] );
     110                $instance['target'] = isset( $new_instance['target'] ) ? sanitize_text_field( $new_instance['target'] ) : '';
     111
     112                // Everything else
     113                $instance['align'] = sanitize_text_field( $new_instance['align'] );
     114                $instance['size'] = sanitize_text_field( $new_instance['size'] );
     115                $instance['link'] = sanitize_text_field( $new_instance['link'] );
     116                return $instance;
     117        }
     118
     119
     120        public function render_image( $att, $widget_id, $instance ) {
     121                // If an image id is saved for this widget, display the image using `wp_get_attachment_image()`.
     122                echo '<p class="media-widget-admin-preview">',
     123                        wp_get_attachment_image( $att->ID, $instance['size'], false, array(
     124                                'data-id' => esc_attr( $widget_id ),
     125                                'class' => 'image align' . esc_attr( $instance['align'] ),
     126                                'title' => esc_attr( $instance['title'] ),
     127                        ) ),
     128                '</p>';
     129        }
     130
     131        public function render_audio( $att, $widget_id, $instance ) {
     132                echo '<p class="media-widget-admin-preview">',
     133                        wp_audio_shortcode( array(
     134                                'src' => wp_get_attachment_url( $att->ID )
     135                        ) ),
     136                '</p>';
     137        }
     138
     139        public function render_video( $att, $widget_id, $instance ) {
     140                echo '<p class="media-widget-admin-preview">',
     141                        wp_video_shortcode( array(
     142                                'src' => wp_get_attachment_url( $att->ID )
     143                        ) ),
     144                '</p>';
     145        }
     146
     147        /**
     148         * @param array $saved_instance
     149         */
     150        public function form( $saved_instance ) {
     151                $defaults = array(
     152                        'title' => '',
     153                        'target' => '',
     154                        // attachment props
     155                        'id' => '',
     156                        'align' => '',
     157                        'size' => '',
     158                        'link' => '',
     159                );
     160                $instance = wp_parse_args( (array) $saved_instance, $defaults );
     161                $widget_id = $this->id;
     162
     163                echo '<p>', __( 'Add an image, gallery, video, or audio to your sidebar.' ) . '</p>';
     164?>
     165<div class="<?php echo esc_attr( $widget_id ); ?> media-widget-preview">
     166        <p>
     167                <a data-id="<?php echo esc_attr( $widget_id ); ?>" class="button select-media widefat"><?php
     168                        esc_html_e( 'Select Media' );
     169                ?></a>
     170        </p>
     171
     172        <p>
     173                <label for="<?php echo $this->get_field_id('title'); ?>"><?php esc_html_e('Title:'); ?></label>
     174                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
     175                         name="<?php echo $this->get_field_name('title'); ?>"
     176                         type="text" value="<?php echo esc_html( $instance['title'] ); ?>" />
     177        </p>
     178
     179        <?php
     180        if ( ! empty( $instance['id'] ) ) {
     181                $att = get_post( $instance['id'] );
     182
     183                if ( $att && wp_attachment_is_image( $att ) ) {
     184                        $this->render_image( $att, $widget_id, $instance );
     185                } elseif ( $att && wp_attachment_is( 'audio', $att ) ) {
     186                        $this->render_audio( $att, $widget_id, $instance );
     187                } elseif( $att && wp_attachment_is( 'video', $att ) ) {
     188                        $this->render_video( $att, $widget_id, $instance );
     189                }
     190        } ?>
     191
     192        <p class="extras<?php if ( empty( $instance['id'] ) ) {
     193                echo ' hidden';
     194        } ?>">
     195                <input type="checkbox" name="<?php
     196                        echo $this->get_field_name( 'target' ); ?>" id="<?php
     197                        echo $this->get_field_id( 'target' ); ?>"
     198                        <?php if ( ! empty( $instance['target'] ) ) {
     199                                checked( 'on', $instance['target'] );
     200                        } ?> />
     201                <label for="<?php echo $this->get_field_id( 'target' ); ?>"><?php
     202                        esc_html_e( 'Open link in a new tab or window' );
     203                ?></label>
     204        </p>
     205
     206        <fieldset class="media-widget-hidden-fields">
     207        <?php
     208        // Use hidden form fields to capture the attachment details from the media manager.
     209        unset( $instance['title'] );
     210        unset( $instance['target'] );
     211
     212        foreach( array_keys( $instance ) as $i ) { ?>
     213                <input type="hidden" id="<?php
     214                        echo $this->get_field_id( $i ); ?>" name="<?php
     215                        echo $this->get_field_name( $i ); ?>" value="<?php
     216                        echo esc_attr( $instance[ $i ] ); ?>" />
     217        <?php } ?>
     218        </fieldset>
     219</div>
     220<?php
     221        }
     222
     223        /**
     224         * Register the stylesheet for handling the widget in the back-end.
     225         *
     226         * @since 4.4.0
     227         */
     228        public function enqueue_admin_styles() {
     229                wp_enqueue_style( 'wp-media-widget-styles', includes_url( 'css/wp-media-widget.css' ), array( 'media-views' ) );
     230        }
     231        /**
     232         * Register the scripts for handling the widget in the back-end.
     233         *
     234         * @since 4.4.0
     235         */
     236        public function enqueue_admin_scripts() {
     237                global $pagenow;
     238                // Bail if we are not in the widgets or customize screens.
     239                if ( ! ( 'widgets.php' == $pagenow || 'customize.php' == $pagenow ) ) {
     240                        return;
     241                }
     242
     243                // Load the required media files for the media manager.
     244                wp_enqueue_media();
     245
     246                // Register, localize and enqueue custom JS.
     247                wp_enqueue_script(
     248                        'wp-media-widget',
     249                        includes_url( 'js/wp-media-widget.js' ),
     250                        array( 'jquery', 'media-models', 'media-views' ),
     251                        '',
     252                        true
     253                );
     254
     255                wp_localize_script( 'wp-media-widget', '_mediaWidgetl10n',
     256                        array(
     257                                'title'  => __( 'Select an Image' ),
     258                                'button' => __( 'Insert Image' )
     259                        )
     260                );
     261
     262                add_action( 'admin_print_footer_scripts', array( $this, 'admin_print_footer_scripts' ) );
     263        }
     264
     265        /**
     266         * @since 4.4.0
     267         */
     268        public function admin_print_footer_scripts() {
     269?>
     270<script type="text/html" id="tmpl-wp-media-widget-audio">
     271<?php wp_underscore_audio_template() ?>
     272</script>
     273<script type="text/html" id="tmpl-wp-media-widget-video">
     274<?php wp_underscore_video_template() ?>
     275</script>
     276<?php
     277        }
     278}