Customize: Eliminate unnecessary `WP_Customize_Site_Logo_Control` in favor of re-using `WP_Customize_Image_Control`.

* Removes double `margin-bottom` from all the media controls.
* All media controls now send `{settingId}-attachment-data` messages to the preview when a media setting is updated so that the preview has access to the attachment data.
* Fixes receiving of `attachment-data` message for `custom_logo` which resulted in instant JS-applied preview not working. See #36096.

See #33755.
Fixes #35941.


git-svn-id: https://develop.svn.wordpress.org/trunk@36851 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-03-04 23:46:07 +00:00
parent d9c9742527
commit 084772af80
5 changed files with 22 additions and 119 deletions

View File

@ -721,7 +721,6 @@ p.customize-section-description {
.customize-control-background .current,
.customize-control-cropped_image .current,
.customize-control-site_icon .current,
.customize-control-custom_logo .current,
.customize-control-header .current {
margin-bottom: 8px;
}
@ -763,9 +762,6 @@ p.customize-section-description {
.customize-control-site_icon .remove-button,
.customize-control-site_icon .default-button,
.customize-control-site_icon .upload-button,
.customize-control-custom_logo .remove-button,
.customize-control-custom_logo .default-button,
.customize-control-custom_logo .upload-button,
.customize-control-header button.new,
.customize-control-header button.remove {
white-space: normal;
@ -779,7 +775,6 @@ p.customize-section-description {
.customize-control-background .current .container,
.customize-control-cropped_image .current .container,
.customize-control-site_icon .current .container,
.customize-control-custom_logo .current .container,
.customize-control-header .current .container {
overflow: hidden;
-webkit-border-radius: 2px;
@ -793,7 +788,6 @@ p.customize-section-description {
.customize-control-background .current .container,
.customize-control-cropped_image .current .container,
.customize-control-site_icon .current .container,
.customize-control-custom_logo .current .container,
.customize-control-image .current .container {
min-height: 40px;
}
@ -822,7 +816,6 @@ p.customize-section-description {
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-custom_logo .inner,
.customize-control-header .inner {
display: none;
position: absolute;
@ -838,7 +831,6 @@ p.customize-section-description {
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-custom_logo .inner,
.customize-control-image .inner {
display: block;
min-height: 40px;
@ -850,7 +842,6 @@ p.customize-section-description {
.customize-control-background .inner,
.customize-control-cropped_image .inner,
.customize-control-site_icon .inner,
.customize-control-custom_logo.inner,
.customize-control-header .inner,
.customize-control-header .inner .dashicons {
line-height: 20px;
@ -950,16 +941,6 @@ p.customize-section-description {
100% { color: #d4b146; }
}
.customize-control-media .actions,
.customize-control-upload .actions,
.customize-control-image .actions,
.customize-control-background .actions,
.customize-control-cropped_image .actions,
.customize-control-site_icon .actions,
.customize-control-header .actions {
margin-bottom: 32px;
}
.customize-control-header .choice {
position: relative;
display: block;
@ -994,8 +975,6 @@ p.customize-section-description {
.customize-control-cropped_image .default-button,
.customize-control-site_icon .remove-button,
.customize-control-site_icon .default-button,
.customize-control-custom_logo .remove-button,
.customize-control-custom_logo .default-button,
.customize-control-header .remove {
float: left;
margin-right: 3px;
@ -1007,7 +986,6 @@ p.customize-section-description {
.customize-control-background .upload-button,
.customize-control-cropped_image .upload-button,
.customize-control-site_icon .upload-button,
.customize-control-custom_logo .upload-button,
.customize-control-header .new {
float: right;
}

View File

@ -1790,8 +1790,16 @@
control.pausePlayer();
});
// Re-render whenever the control's setting changes.
control.setting.bind( function () { control.renderContent(); } );
control.setting.bind( function( value ) {
// Send attachment information to the preview for possible use in `postMessage` transport.
wp.media.attachment( value ).fetch().done( function() {
wp.customize.previewer.send( control.setting.id + '-attachment-data', this.attributes );
} );
// Re-render whenever the control's setting changes.
control.renderContent();
} );
},
pausePlayer: function () {
@ -2302,43 +2310,6 @@
}
});
/**
* A control for selecting custom logos.
*
* @class
* @augments wp.customize.MediaControl
* @augments wp.customize.Control
* @augments wp.customize.Class
*/
api.CustomLogoControl = api.MediaControl.extend({
/**
* When the control's DOM structure is ready,
* set up internal event bindings.
*/
ready: function() {
var control = this;
// Shortcut so that we don't have to use _.bind every time we add a callback.
_.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select' );
// Bind events, with delegation to facilitate re-rendering.
control.container.on( 'click keydown', '.upload-button', control.openFrame );
control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame );
control.container.on( 'click keydown', '.default-button', control.restoreDefault );
control.container.on( 'click keydown', '.remove-button', control.removeFile );
control.setting.bind( function( attachmentId ) {
wp.media.attachment( attachmentId ).fetch().done( function() {
wp.customize.previewer.send( 'custom-logo-attachment-data', this.attributes );
} );
// Re-render whenever the control's setting changes.
control.renderContent();
} );
}
});
/**
* @class
* @augments wp.customize.Control
@ -3245,7 +3216,6 @@
image: api.ImageControl,
cropped_image: api.CroppedImageControl,
site_icon: api.SiteIconControl,
custom_logo: api.CustomLogoControl,
header: api.HeaderControl,
background: api.BackgroundControl,
theme: api.ThemeControl

View File

@ -217,7 +217,6 @@ final class WP_Customize_Manager {
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-custom-logo-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-widget-area-customize-control.php' );
@ -1848,7 +1847,6 @@ final class WP_Customize_Manager {
$this->register_control_type( 'WP_Customize_Background_Image_Control' );
$this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
$this->register_control_type( 'WP_Customize_Site_Icon_Control' );
$this->register_control_type( 'WP_Customize_Custom_Logo_Control' );
$this->register_control_type( 'WP_Customize_Theme_Control' );
/* Themes */
@ -1965,10 +1963,20 @@ final class WP_Customize_Manager {
'transport' => 'postMessage',
) );
$this->add_control( new WP_Customize_Custom_Logo_Control( $this, 'custom_logo', array(
$this->add_control( new WP_Customize_Media_Control( $this, 'custom_logo', array(
'label' => __( 'Logo' ),
'section' => 'title_tagline',
'priority' => 0,
'mime_type' => 'image',
'button_labels' => array(
'select' => __( 'Select logo' ),
'change' => __( 'Change logo' ),
'remove' => __( 'Remove' ),
'default' => __( 'Default' ),
'placeholder' => __( 'No logo selected' ),
'frame_title' => __( 'Select logo' ),
'frame_button' => __( 'Choose logo' ),
),
) ) );
if ( isset( $this->selective_refresh ) ) {

View File

@ -1,53 +0,0 @@
<?php
/**
* Customize API: WP_Customize_Custom_Logo_Control class
*
* @package WordPress
* @subpackage Customize
* @since 4.5.0
*/
/**
* Customize custom logo control class.
*
* Used only for custom functionality in JavaScript.
*
* @since 4.5.0
*
* @see WP_Customize_Image_Control
*/
class WP_Customize_Custom_Logo_Control extends WP_Customize_Image_Control {
/**
* Control type.
*
* @since 4.5.0
* @access public
* @var string
*/
public $type = 'custom_logo';
/**
* Constructor.
*
* @since 4.5.0
* @access public
*
* @param WP_Customize_Manager $manager Customizer bootstrap instance.
* @param string $id Control ID.
* @param array $args Optional. Arguments to override class property defaults.
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
$this->button_labels = array(
'select' => __( 'Select logo' ),
'change' => __( 'Change logo' ),
'remove' => __( 'Remove' ),
'default' => __( 'Default' ),
'placeholder' => __( 'No logo selected' ),
'frame_title' => __( 'Select logo' ),
'frame_button' => __( 'Choose logo' ),
);
}
}

View File

@ -234,7 +234,7 @@
*
* @since 4.5.0
*/
api.preview.bind( 'custom-logo-attachment-data', function( attachment ) {
api.preview.bind( 'custom_logo-attachment-data', function( attachment ) {
var $logo = $( '.custom-logo' ),
size = $logo.data( 'size' ),
srcset = [];