WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/11/2014 11:51:48 PM (11 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.