WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/11/2014 11:51:48 PM (12 years ago)
Author:
ocean90
Message:

Customizer: Add support for the media library in Background Image controls.

WP_Customize_Upload_Control (PHP) and api.UploadControl (JS) can now open the media modal.

props celloexpressions, and ericlewis for docs.
see #21483.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-customize-control.php

    r30214 r30309  
    638638 */
    639639class WP_Customize_Upload_Control extends WP_Customize_Control {
    640         public $type    = 'upload';
    641         public $removed = '';
    642         public $context;
    643         public $extensions = array();
     640        public $type          = 'upload';
     641        public $mime_type     = '';
     642        public $button_labels = array();
     643        public $removed = ''; // unused
     644        public $context; // unused
     645        public $extensions = array(); // unused
     646
     647        /**
     648         * Constructor.
     649         *
     650         * @since 4.1.0
     651         * @uses WP_Customize_Control::__construct()
     652         *
     653         * @param WP_Customize_Manager $manager
     654         */
     655        public function __construct( $manager, $id, $args = array() ) {
     656                parent::__construct( $manager, $id, $args );
     657
     658                $this->button_labels = array(
     659                        'select'       => __( 'Select File' ),
     660                        'change'       => __( 'Change File' ),
     661                        'default'      => __( 'Default' ),
     662                        'remove'       => __( 'Remove' ),
     663                        'placeholder'  => __( 'No file selected' ),
     664                        'frame_title'  => __( 'Select File' ),
     665                        'frame_button' => __( 'Choose File' ),
     666                );
     667        }
    644668
    645669        /**
    … …  
    649673         */
    650674        public function enqueue() {
    651                 wp_enqueue_script( 'wp-plupload' );
     675                wp_enqueue_media();
    652676        }
    653677
    … …  
    660684        public function to_json() {
    661685                parent::to_json();
    662 
    663                 $this->json['removed'] = $this->removed;
    664 
    665                 if ( $this->context )
    666                         $this->json['context'] = $this->context;
    667 
    668                 if ( $this->extensions )
    669                         $this->json['extensions'] = implode( ',', $this->extensions );
    670         }
    671 
    672         /**
    673          * Render the control's content.
    674          *
    675          * @since 3.4.0
    676          */
    677         public function render_content() {
     686                $this->json['mime_type'] = $this->mime_type;
     687                $this->json['button_labels'] = $this->button_labels;
     688
     689                if ( is_object( $this->setting ) ) {
     690                        if ( $this->setting->default ) {
     691                                // Fake an attachment model - needs all fields used by template.
     692                                $type = in_array( substr( $this->setting->default, -3 ), array( 'jpg', 'png', 'gif', 'bmp' ) ) ? 'image' : 'document';
     693                                $default_attachment = array(
     694                                        'id' => 1,
     695                                        'url' => $this->setting->default,
     696                                        'type' => $type,
     697                                        'sizes' => array(
     698                                                'full' => array( 'url' => $this->setting->default ),
     699                                        ),
     700                                        'icon' => wp_mime_type_icon( $type ),
     701                                        'title' => basename( $this->setting->default ),
     702                                );
     703                                $this->json['defaultAttachment'] = $default_attachment;
     704                        }
     705
     706                        // Get the attachment model for the existing file.
     707                        if ( $this->value() ) {
     708                                $attachment_id = attachment_url_to_postid( $this->value() );
     709                                if ( $attachment_id ) {
     710                                        $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id);
     711                                }
     712                        } else if ( $this->setting->default ) {
     713                                // Set the default as the attachment.
     714                                $this->json['attachment'] = $default_attachment;
     715                        }
     716                }
     717        }
     718
     719        /**
     720         * Don't render any content for this control from PHP.
     721         *
     722         * @see WP_Customize_Upload_Control::content_template()
     723         * @since 3.4.0
     724         */
     725        public function render_content() {}
     726
     727        /**
     728         * Render a JS template for the content of the upload control.
     729         *
     730         * @since 4.1.0
     731         */
     732        public function content_template() {
    678733                ?>
    679                 <label>
    680                         <?php if ( ! empty( $this->label ) ) : ?>
    681                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    682                         <?php endif;
    683                         if ( ! empty( $this->description ) ) : ?>
    684                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    685                         <?php endif; ?>
    686                         <div>
    687                                 <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
    688                                 <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
     734                <label for="{{ data.settings.default }}-button">
     735                        <# if ( data.label ) { #>
     736                                <span class="customize-control-title">{{ data.label }}</span>
     737                        <# } #>
     738                        <# if ( data.description ) { #>
     739                                <span class="description customize-control-description">{{ data.description }}</span>
     740                        <# } #>
     741                </label>
     742
     743                <# // Ensure that the default attachment is used if it exists.
     744                if ( _.isEmpty( data.attachment ) && data.defaultAttachment ) {
     745                        data.attachment = data.defaultAttachment;
     746                }
     747
     748                if ( data.attachment && data.attachment.id ) { #>
     749                        <div class="attachment-media-view {{ data.attachment.orientation }}">
     750                                <div class="thumbnail thumbnail-{{ data.attachment.type }}">
     751                                        <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
     752                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
     753                                        <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
     754                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
     755                                        <# } else if ( -1 === jQuery.inArray( data.attachment.type, [ 'audio', 'video' ] ) ) { #>
     756                                                <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
     757                                                <p class="attachment-title">{{ data.attachment.title }}</p>
     758                                        <# } #>
     759
     760                                        <# if ( 'audio' === data.attachment.type ) { #>
     761                                        <div class="wp-media-wrapper">
     762                                                <p class="attachment-title">{{ data.attachment.title }}</p>
     763                                                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     764                                                        <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     765                                                </audio>
     766                                        </div>
     767                                        <# } else if ( 'video' === data.attachment.type ) {
     768                                                var w_rule = h_rule = '';
     769                                                if ( data.attachment.width ) {
     770                                                        w_rule = 'width: ' + data.attachment.width + 'px;';
     771                                                } else if ( wp.media.view.settings.contentWidth ) {
     772                                                        w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
     773                                                }
     774                                                if ( data.attachment.height ) {
     775                                                        h_rule = 'height: ' + data.attachment.height + 'px;';
     776                                                }
     777                                                #>
     778                                                <div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
     779                                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
     780                                                                <# if ( data.attachment.width ) { #>width="{{ data.attachment.width }}"<# } #>
     781                                                                <# if ( data.attachment.height ) { #>height="{{ data.attachment.height }}"<# } #>
     782                                                                <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
     783                                                                <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
     784                                                        </video>
     785                                                </div>
     786                                        <# } #>
     787                                </div>
    689788                        </div>
    690                 </label>
     789                        <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['change']; ?></a>
     790                        <# if ( data.defaultAttachment && data.defaultAttachment.id !== data.attachment.id ) { #>
     791                                <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
     792                        <# } else { #>
     793                                <a class="remove-button" href="#"><?php echo $this->button_labels['remove']; ?></a>
     794                        <# } #>
     795                <# } else { #>
     796                        <p class="placeholder-text"><?php echo $this->button_labels['placeholder']; ?></p>
     797                        <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['select']; ?></a>
     798                        <# if ( ! data.defaultAttachment ) { #>
     799                                <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
     800                        <# } #>
     801                <# } #>
    691802                <?php
    692803        }
    … …  
    702813class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
    703814        public $type = 'image';
    704         public $get_url;
    705         public $statuses;
    706         public $extensions = array( 'jpg', 'jpeg', 'gif', 'png' );
    707 
    708         protected $tabs = array();
     815        public $mime_type = 'image';
    709816
    710817        /**
    … …  
    715822         *
    716823         * @param WP_Customize_Manager $manager
    717          * @param string $id
    718          * @param array $args
    719          */
    720         public function __construct( $manager, $id, $args ) {
    721                 $this->statuses = array( '' => __('No Image') );
    722 
     824         */
     825        public function __construct( $manager, $id, $args = array() ) {
    723826                parent::__construct( $manager, $id, $args );
    724827
    725                 $this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
    726                 $this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
    727 
    728                 // Early priority to occur before $this->manager->prepare_controls();
    729                 add_action( 'customize_controls_init', array( $this, 'prepare_control' ), 5 );
    730         }
    731 
    732         /**
    733          * Prepares the control.
    734          *
    735          * If no tabs exist, removes the control from the manager.
    736          *
     828                $this->button_labels = array(
     829                        'select'       => __( 'Select Image' ),
     830                        'change'       => __( 'Change Image' ),
     831                        'remove'       => __( 'Remove' ),
     832                        'default'      => __( 'Default' ),
     833                        'placeholder'  => __( 'No image selected' ),
     834                        'frame_title'  => __( 'Select Image' ),
     835                        'frame_button' => __( 'Choose Image' ),
     836                );
     837        }
     838
     839        /**
    737840         * @since 3.4.2
    738          */
    739         public function prepare_control() {
    740                 if ( ! $this->tabs )
    741                         $this->manager->remove_control( $this->id );
    742         }
    743 
    744         /**
    745          * Refresh the parameters passed to the JavaScript via JSON.
    746          *
    747          * @since 3.4.0
    748          * @uses WP_Customize_Upload_Control::to_json()
    749          */
    750         public function to_json() {
    751                 parent::to_json();
    752                 $this->json['statuses'] = $this->statuses;
    753         }
    754 
    755         /**
    756          * Render the control's content.
    757          *
    758          * @since 3.4.0
    759          */
    760         public function render_content() {
    761                 $src = $this->value();
    762                 if ( isset( $this->get_url ) )
    763                         $src = call_user_func( $this->get_url, $src );
    764 
    765                 ?>
    766                 <div class="customize-image-picker">
    767                         <?php if ( ! empty( $this->label ) ) : ?>
    768                                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    769                         <?php endif;
    770                         if ( ! empty( $this->description ) ) : ?>
    771                                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    772                         <?php endif; ?>
    773 
    774                         <div class="customize-control-content">
    775                                 <div class="dropdown preview-thumbnail" tabindex="0">
    776                                         <div class="dropdown-content">
    777                                                 <?php if ( empty( $src ) ): ?>
    778                                                         <img style="display:none;" />
    779                                                 <?php else: ?>
    780                                                         <img src="<?php echo esc_url( set_url_scheme( $src ) ); ?>" />
    781                                                 <?php endif; ?>
    782                                                 <div class="dropdown-status"></div>
    783                                         </div>
    784                                         <div class="dropdown-arrow"></div>
    785                                 </div>
    786                         </div>
    787 
    788                         <div class="library">
    789                                 <ul>
    790                                         <?php foreach ( $this->tabs as $id => $tab ): ?>
    791                                                 <li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'>
    792                                                         <?php echo esc_html( $tab['label'] ); ?>
    793                                                 </li>
    794                                         <?php endforeach; ?>
    795                                 </ul>
    796                                 <?php foreach ( $this->tabs as $id => $tab ): ?>
    797                                         <div class="library-content" data-customize-tab='<?php echo esc_attr( $id ); ?>'>
    798                                                 <?php call_user_func( $tab['callback'] ); ?>
    799                                         </div>
    800                                 <?php endforeach; ?>
    801                         </div>
    802 
    803                         <div class="actions">
    804                                 <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
    805                         </div>
    806                 </div>
    807                 <?php
    808         }
    809 
    810         /**
    811          * Add a tab to the control.
    812          *
    813          * @since 3.4.0
     841         * @deprecated 4.1.0
     842         */
     843        public function prepare_control() {}
     844
     845        /**
     846         * @since 3.4.0
     847         * @deprecated 4.1.0
    814848         *
    815849         * @param string $id
    … …  
    817851         * @param mixed $callback
    818852         */
    819         public function add_tab( $id, $label, $callback ) {
    820                 $this->tabs[ $id ] = array(
    821                         'label'    => $label,
    822                         'callback' => $callback,
    823                 );
    824         }
    825 
    826         /**
    827          * Remove a tab from the control.
    828          *
    829          * @since 3.4.0
     853        public function add_tab( $id, $label, $callback ) {}
     854
     855        /**
     856         * @since 3.4.0
     857         * @deprecated 4.1.0
    830858         *
    831859         * @param string $id
    832860         */
    833         public function remove_tab( $id ) {
    834                 unset( $this->tabs[ $id ] );
    835         }
    836 
    837         /**
    838          * @since 3.4.0
    839          */
    840         public function tab_upload_new() {
    841                 if ( ! _device_can_upload() ) {
    842                         echo '<p>' . sprintf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ) . '</p>';
    843                 } else {
    844                         ?>
    845                         <div class="upload-dropzone">
    846                                 <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
    847                         </div>
    848                         <div class="upload-fallback">
    849                                 <span class="button-secondary"><?php _e('Select File'); ?></span>
    850                         </div>
    851                         <?php
    852                 }
    853         }
    854 
    855         /**
    856          * @since 3.4.0
    857          */
    858         public function tab_uploaded() {
    859                 ?>
    860                 <div class="uploaded-target"></div>
    861                 <?php
    862         }
    863 
    864         /**
    865          * @since 3.4.0
     861        public function remove_tab( $id ) {}
     862
     863        /**
     864         * @since 3.4.0
     865         * @deprecated 4.1.0
    866866         *
    867867         * @param string $url
    868868         * @param string $thumbnail_url
    869869         */
    870         public function print_tab_image( $url, $thumbnail_url = null ) {
    871                 $url = set_url_scheme( $url );
    872                 $thumbnail_url = ( $thumbnail_url ) ? set_url_scheme( $thumbnail_url ) : $url;
    873                 ?>
    874                 <a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $url ); ?>">
    875                         <img src="<?php echo esc_url( $thumbnail_url ); ?>" />
    876                 </a>
    877                 <?php
    878         }
     870        public function print_tab_image( $url, $thumbnail_url = null ) {}
    879871}
    880872
    … …  
    900892                        'label'    => __( 'Background Image' ),
    901893                        'section'  => 'background_image',
    902                         'context'  => 'custom-background',
    903                         'get_url'  => 'get_background_image',
    904894                ) );
    905 
    906                 if ( $this->setting->default )
    907                         $this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_background' ) );
    908         }
    909 
    910         /**
    911          * @since 3.4.0
    912          */
    913         public function tab_uploaded() {
    914                 $backgrounds = get_posts( array(
    915                         'post_type'  => 'attachment',
    916                         'meta_key'   => '_wp_attachment_is_custom_background',
    917                         'meta_value' => $this->manager->get_stylesheet(),
    918                         'orderby'    => 'none',
    919                         'nopaging'   => true,
    920                 ) );
    921 
    922                 ?><div class="uploaded-target"></div><?php
    923 
    924                 if ( empty( $backgrounds ) )
    925                         return;
    926 
    927                 foreach ( (array) $backgrounds as $background )
    928                         $this->print_tab_image( esc_url_raw( $background->guid ) );
    929         }
    930 
    931         /**
    932          * @since 3.4.0
    933          * @uses WP_Customize_Image_Control::print_tab_image()
    934          */
    935         public function tab_default_background() {
    936                 $this->print_tab_image( $this->setting->default );
    937895        }
    938896}
Note: See TracChangeset for help on using the changeset viewer.