From c1ec341ddbc6af2b20b28a43ae47bca25d206003 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Thu, 12 May 2016 20:22:45 +0000
Subject: [PATCH] Customize: Clean up media control CSS.

Removes unnecessary wrapper elements and refactors class names to eliminate duplication of rule selectors.

Props celloexpressions.
Fixes #30618.


git-svn-id: https://develop.svn.wordpress.org/trunk@37426 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       | 114 +++---------------
 ...lass-wp-customize-header-image-control.php |  21 ++--
 .../class-wp-customize-media-control.php      | 112 ++++++++---------
 .../class-wp-customize-site-icon-control.php  |  50 ++++----
 4 files changed, 96 insertions(+), 201 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 7991e4be6c..0a626118b4 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -524,7 +524,7 @@ p.customize-section-description {
 	font-size: 14px;
 	line-height: 24px;
 	font-weight: 600;
-	margin-bottom: 5px;
+	margin-bottom: 4px;
 }
 
 .customize-control-description {
@@ -720,12 +720,10 @@ p.customize-section-description {
 
 /* Media controls */
 
-.customize-control-media .current,
-.customize-control-upload .current,
-.customize-control-image .current,
-.customize-control-background .current,
-.customize-control-cropped_image .current,
-.customize-control-site_icon .current,
+.customize-control .attachment-media-view .actions {
+	margin-top: 8px;
+}
+
 .customize-control-header .current {
 	margin-bottom: 8px;
 }
@@ -749,24 +747,9 @@ p.customize-section-description {
 	display: block;
 }
 
-.customize-control-media .remove-button,
-.customize-control-media .default-button,
-.customize-control-media .upload-button,
-.customize-control-upload .remove-button,
-.customize-control-upload .default-button,
-.customize-control-upload .upload-button,
-.customize-control-image .remove-button,
-.customize-control-image .default-button,
-.customize-control-image .upload-button,
-.customize-control-background .remove-button,
-.customize-control-background .default-button,
-.customize-control-background .upload-button,
-.customize-control-cropped_image .remove-button,
-.customize-control-cropped_image .default-button,
-.customize-control-cropped_image .upload-button,
-.customize-control-site_icon .remove-button,
-.customize-control-site_icon .default-button,
-.customize-control-site_icon .upload-button,
+.customize-control .attachment-media-view .remove-button,
+.customize-control .attachment-media-view .default-button,
+.customize-control .attachment-media-view .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
 	white-space: normal;
@@ -774,35 +757,12 @@ p.customize-section-description {
 	height: auto;
 }
 
-.customize-control-media .current .container,
-.customize-control-upload .current .container,
-.customize-control-image .current .container,
-.customize-control-background .current .container,
-.customize-control-cropped_image .current .container,
-.customize-control-site_icon .current .container,
+.customize-control .attachment-media-view .thumbnail,
 .customize-control-header .current .container {
 	overflow: hidden;
-	-webkit-border-radius: 2px;
-	border: 1px solid #eee;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
 }
 
-.customize-control-media .current .container,
-.customize-control-upload .current .container,
-.customize-control-background .current .container,
-.customize-control-cropped_image .current .container,
-.customize-control-site_icon .current .container,
-.customize-control-image .current .container {
-	min-height: 40px;
-}
-
-.customize-control-media .placeholder,
-.customize-control-upload .placeholder,
-.customize-control-image .placeholder,
-.customize-control-background .placeholder,
-.customize-control-cropped_image .placeholder,
-.customize-control-site_icon .placeholder,
+.customize-control .attachment-media-view .placeholder,
 .customize-control-header .placeholder {
 	width: 100%;
 	position: relative;
@@ -812,15 +772,10 @@ p.customize-section-description {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-	min-height: 40px;
+	padding: 9px 0;
+	line-height: 20px;
 }
 
-.customize-control-media .inner,
-.customize-control-upload .inner,
-.customize-control-image .inner,
-.customize-control-background .inner,
-.customize-control-cropped_image .inner,
-.customize-control-site_icon .inner,
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
@@ -831,22 +786,6 @@ p.customize-section-description {
 	overflow: hidden;
 }
 
-.customize-control-media .inner,
-.customize-control-upload .inner,
-.customize-control-background .inner,
-.customize-control-cropped_image .inner,
-.customize-control-site_icon .inner,
-.customize-control-image .inner {
-	display: block;
-	min-height: 40px;
-}
-
-.customize-control-media .inner,
-.customize-control-upload .inner,
-.customize-control-image .inner,
-.customize-control-background .inner,
-.customize-control-cropped_image .inner,
-.customize-control-site_icon .inner,
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
 	line-height: 20px;
@@ -956,40 +895,19 @@ p.customize-section-description {
 	margin-bottom: 0;
 }
 
-.customize-control-media img,
-.customize-control-upload img,
-.customize-control-image img,
-.customize-control-background img,
-.customize-control-cropped_image img,
+.customize-control .attachment-media-view .thumbnail-image img,
 .customize-control-header img {
 	width: 100%;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
 }
 
-.customize-control-media .remove-button,
-.customize-control-media .default-button,
-.customize-control-upload .remove-button,
-.customize-control-upload .default-button,
-.customize-control-image .remove-button,
-.customize-control-image .default-button,
-.customize-control-background .remove-button,
-.customize-control-background .default-button,
-.customize-control-cropped_image .remove-button,
-.customize-control-cropped_image .default-button,
-.customize-control-site_icon .remove-button,
-.customize-control-site_icon .default-button,
+.customize-control .attachment-media-view .remove-button,
+.customize-control .attachment-media-view .default-button,
 .customize-control-header .remove {
 	float: left;
 	margin-right: 3px;
 }
 
-.customize-control-media .upload-button,
-.customize-control-upload .upload-button,
-.customize-control-image .upload-button,
-.customize-control-background .upload-button,
-.customize-control-cropped_image .upload-button,
-.customize-control-site_icon .upload-button,
+.customize-control .attachment-media-view .upload-button,
 .customize-control-header .new {
 	float: right;
 }
diff --git a/src/wp-includes/customize/class-wp-customize-header-image-control.php b/src/wp-includes/customize/class-wp-customize-header-image-control.php
index 8bbb572b8f..9852de6ddc 100644
--- a/src/wp-includes/customize/class-wp-customize-header-image-control.php
+++ b/src/wp-includes/customize/class-wp-customize-header-image-control.php
@@ -121,15 +121,12 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 				<# if (data.random) { #>
 
 			<div class="placeholder">
-				<div class="inner">
-					<span><span class="dashicons dashicons-randomize dice"></span>
-					<# if ( data.type === 'uploaded' ) { #>
-						<?php _e( 'Randomizing uploaded headers' ); ?>
-					<# } else if ( data.type === 'default' ) { #>
-						<?php _e( 'Randomizing suggested headers' ); ?>
-					<# } #>
-					</span>
-				</div>
+				<span class="dashicons dashicons-randomize dice"></span>
+				<# if ( data.type === 'uploaded' ) { #>
+					<?php _e( 'Randomizing uploaded headers' ); ?>
+				<# } else if ( data.type === 'default' ) { #>
+					<?php _e( 'Randomizing suggested headers' ); ?>
+				<# } #>
 			</div>
 
 				<# } else { #>
@@ -140,11 +137,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 			<# } else { #>
 
 			<div class="placeholder">
-				<div class="inner">
-					<span>
-						<?php _e( 'No image set' ); ?>
-					</span>
-				</div>
+				<?php _e( 'No image set' ); ?>
 			</div>
 
 			<# } #>
diff --git a/src/wp-includes/customize/class-wp-customize-media-control.php b/src/wp-includes/customize/class-wp-customize-media-control.php
index 4793b255bd..f3ec32b41d 100644
--- a/src/wp-includes/customize/class-wp-customize-media-control.php
+++ b/src/wp-includes/customize/class-wp-customize-media-control.php
@@ -154,72 +154,62 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
 		</label>
 
 		<# 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 }}">
-						<div class="thumbnail thumbnail-{{ data.attachment.type }}">
-							<# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
-								<img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
-							<# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
-								<img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
-							<# } else if ( 'audio' === data.attachment.type ) { #>
-								<# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
-									<img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
-								<# } else { #>
-									<img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
-								<# } #>
-								<p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
-								<# if ( data.attachment.album || data.attachment.meta.album ) { #>
-								<p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
-								<# } #>
-								<# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
-								<p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
-								<# } #>
-								<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
-									<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
-								</audio>
-							<# } else if ( 'video' === data.attachment.type ) { #>
-								<div class="wp-media-wrapper wp-video">
-									<video controls="controls" class="wp-video-shortcode" preload="metadata"
-										<# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
-										<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
-									</video>
-								</div>
-							<# } else { #>
-								<img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
-								<p class="attachment-title">{{ data.attachment.title }}</p>
-							<# } #>
+			<div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
+				<div class="thumbnail thumbnail-{{ data.attachment.type }}">
+					<# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
+						<img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" alt="" />
+					<# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
+						<img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" alt="" />
+					<# } else if ( 'audio' === data.attachment.type ) { #>
+						<# if ( data.attachment.image && data.attachment.image.src && data.attachment.image.src !== data.attachment.icon ) { #>
+							<img src="{{ data.attachment.image.src }}" class="thumbnail" draggable="false" alt="" />
+						<# } else { #>
+							<img src="{{ data.attachment.icon }}" class="attachment-thumb type-icon" draggable="false" alt="" />
+						<# } #>
+						<p class="attachment-meta attachment-meta-title">&#8220;{{ data.attachment.title }}&#8221;</p>
+						<# if ( data.attachment.album || data.attachment.meta.album ) { #>
+						<p class="attachment-meta"><em>{{ data.attachment.album || data.attachment.meta.album }}</em></p>
+						<# } #>
+						<# if ( data.attachment.artist || data.attachment.meta.artist ) { #>
+						<p class="attachment-meta">{{ data.attachment.artist || data.attachment.meta.artist }}</p>
+						<# } #>
+						<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+							<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+						</audio>
+					<# } else if ( 'video' === data.attachment.type ) { #>
+						<div class="wp-media-wrapper wp-video">
+							<video controls="controls" class="wp-video-shortcode" preload="metadata"
+								<# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
+								<source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+							</video>
 						</div>
-					</div>
+					<# } else { #>
+						<img class="attachment-thumb type-icon icon" src="{{ data.attachment.icon }}" draggable="false" alt="" />
+						<p class="attachment-title">{{ data.attachment.title }}</p>
+					<# } #>
+				</div>
+				<div class="actions">
+					<# if ( data.canUpload ) { #>
+					<button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
+					<button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
+					<div style="clear:both"></div>
+					<# } #>
 				</div>
-			</div>
-			<div class="actions">
-				<# if ( data.canUpload ) { #>
-				<button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
-				<button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
-				<div style="clear:both"></div>
-				<# } #>
 			</div>
 		<# } else { #>
-			<div class="current">
-				<div class="container">
-					<div class="placeholder">
-						<div class="inner">
-							<span>
-								{{ data.button_labels.placeholder }}
-							</span>
-						</div>
-					</div>
+			<div class="attachment-media-view">
+				<div class="placeholder">
+						{{ data.button_labels.placeholder }}
+				</div>
+				<div class="actions">
+					<# if ( data.defaultAttachment ) { #>
+						<button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
+					<# } #>
+					<# if ( data.canUpload ) { #>
+					<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
+					<# } #>
+					<div style="clear:both"></div>
 				</div>
-			</div>
-			<div class="actions">
-				<# if ( data.defaultAttachment ) { #>
-					<button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
-				<# } #>
-				<# if ( data.canUpload ) { #>
-				<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
-				<# } #>
-				<div style="clear:both"></div>
 			</div>
 		<# } #>
 		<?php
diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
index 077e9955cf..7442fecaa2 100644
--- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php
+++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
@@ -60,8 +60,7 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 		</label>
 
 		<# if ( data.attachment && data.attachment.id ) { #>
-		<div class="current">
-			<div class="container">
+			<div class="attachment-media-view">
 				<div class="site-icon-preview">
 					<div class="favicon-preview">
 						<img src="<?php echo esc_url( admin_url( 'images/browser.png' ) ); ?>" class="browser-preview" width="182" alt="" />
@@ -73,34 +72,29 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 					</div>
 					<img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
 				</div>
-			</div>
-		</div>
-		<div class="actions">
-			<# if ( data.canUpload ) { #>
-				<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
-				<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
-				<div style="clear:both"></div>
-			<# } #>
-		</div>
-		<# } else { #>
-		<div class="current">
-			<div class="container">
-				<div class="placeholder">
-					<div class="inner">
-						<span><?php echo $this->button_labels['placeholder']; ?></span>
-					</div>
+				<div class="actions">
+					<# if ( data.canUpload ) { #>
+						<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
+						<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['change']; ?></button>
+						<div style="clear:both"></div>
+					<# } #>
+				</div>
+			</div>
+		<# } else { #>
+			<div class="attachment-media-view">
+				<div class="placeholder">
+					<?php echo $this->button_labels['placeholder']; ?>
+				</div>
+				<div class="actions">
+					<# if ( data.defaultAttachment ) { #>
+						<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
+					<# } #>
+					<# if ( data.canUpload ) { #>
+						<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
+					<# } #>
+					<div style="clear:both"></div>
 				</div>
 			</div>
-		</div>
-		<div class="actions">
-			<# if ( data.defaultAttachment ) { #>
-				<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
-			<# } #>
-			<# if ( data.canUpload ) { #>
-				<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button"><?php echo $this->button_labels['select']; ?></button>
-			<# } #>
-			<div style="clear:both"></div>
-		</div>
 		<# } #>
 		<?php
 	}