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

src/wp-admin/css/customize-controls.css

@@ -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;
 }

src/wp-admin/js/customize-controls.js

@@ -1790,8 +1790,16 @@
 					control.pausePlayer();
 				});
 
+			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.setting.bind( function () { control.renderContent(); } );
+				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

src/wp-includes/class-wp-customize-manager.php

@@ -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 ) ) {

src/wp-includes/customize/class-wp-customize-custom-logo-control.php

@@ -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' ),
-		);
-	}
-}

src/wp-includes/js/customize-preview.js

@@ -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 = [];