Customize: Reduce vertical space of site icon control.

Makes the control easier to find, reduces visual clutter, and is more
consistent with Customizer UI conventions.

Props celloexpressions.
Fixes #35943.


git-svn-id: https://develop.svn.wordpress.org/trunk@36907 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -956,7 +956,6 @@ p.customize-section-description {
 .customize-control-image img,
 .customize-control-background img,
 .customize-control-cropped_image img,
-.customize-control-site_icon img,
 .customize-control-header img {
 	width: 100%;
 	-webkit-border-radius: 2px;

src/wp-admin/css/site-icon.css

@@ -24,6 +24,8 @@
 
 .site-icon-preview .browser-title {
 	left: 109px;
+	width: 72px;
+	white-space: nowrap;
 }
 
 .site-icon-preview .app-icon-preview {
@@ -35,3 +37,13 @@
 	width: 64px;
 	margin-top: 5px;
 }
+
+.customize-control-site_icon .favicon-preview {
+	float: left;
+	margin-right: 12px;
+	margin-bottom: 0;
+}
+
+.customize-control-site_icon .app-icon-preview {
+	margin-top: 9px;
+}

src/wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -61,21 +61,16 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 		<# if ( data.attachment && data.attachment.id ) { #>
 		<div class="current">
 			<div class="container">
-				<div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }} site-icon-preview">
+				<div class="site-icon-preview">
-					<strong><?php _e( 'As a browser icon' ); ?></strong>
 					<div class="favicon-preview">
-						<img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />
+						<img src="images/browser.png" class="browser-preview" width="182" alt="<?php esc_attr_e( 'Browser interface preview' ); ?>" />
 
 						<div class="favicon">
 							<img id="preview-favicon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
 						</div>
 						<span class="browser-title"><?php bloginfo( 'name' ); ?></span>
 					</div>
-
+					<img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
-					<strong><?php _e( 'As an app icon' ); ?></strong>
-					<p class="app-icon-preview">
-						<img id="preview-app-icon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
-					</p>
 				</div>
 			</div>
 		</div>