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.

Built from https://develop.svn.wordpress.org/trunk@36907


git-svn-id: http://core.svn.wordpress.org/trunk@36875 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.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;

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;

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

@@ -24,6 +24,8 @@
 
 .site-icon-preview .browser-title {
 	right: 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: right;
+	margin-left: 12px;
+	margin-bottom: 0;
+}
+
+.customize-control-site_icon .app-icon-preview {
+	margin-top: 9px;
+}

wp-admin/css/site-icon-rtl.min.css

@@ -1 +1 @@
-.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;right:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{right:109px}.site-icon-preview .app-icon-preview{background-color:#000;-webkit-border-radius:16px;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}
+.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;right:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{right:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;-webkit-border-radius:16px;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}.customize-control-site_icon .favicon-preview{float:right;margin-left:12px;margin-bottom:0}.customize-control-site_icon .app-icon-preview{margin-top:9px}

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

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

@@ -1 +1 @@
-.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;left:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{left:109px}.site-icon-preview .app-icon-preview{background-color:#000;-webkit-border-radius:16px;border-radius:16px;height:64px;overflow:hidden;width:64px;margin-top:5px}
+.site-icon-preview .favicon-preview{margin:5px 0 20px;overflow:hidden;position:relative;max-width:180px}.site-icon-preview .browser-title,.site-icon-preview .favicon{height:16px;left:88px;overflow:hidden;position:absolute;top:16px}.site-icon-preview .favicon{width:16px}.site-icon-preview .browser-title{left:109px;width:72px;white-space:nowrap}.site-icon-preview .app-icon-preview{background-color:#000;-webkit-border-radius:16px;border-radius:16px;height:64px;overflow:hidden;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}

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">
-					<strong><?php _e( 'As a browser icon' ); ?></strong>
+				<div class="site-icon-preview">
 					<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>
-
-					<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>
+					<img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
 				</div>
 			</div>
 		</div>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-beta2-36906';
+$wp_version = '4.5-beta2-36907';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.