From 32a6ac3918030cb1e9bfd0b167724f165cca9077 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Mon, 2 Oct 2017 17:33:10 +0000
Subject: [PATCH] Customize: Improve styling of date/time Customizer control.

* Let date `legend` be screen reader text when time is not included.
* Skip rendering containers for label (title) and description when not supplied in registered control.
* Fix margins and padding.

Amends [41670].
Props westonruter, afercia, sayedwp.
Fixes #42022.


git-svn-id: https://develop.svn.wordpress.org/trunk@41672 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css          |  8 +++++---
 .../class-wp-customize-date-time-control.php     | 16 ++++++++++------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 6180998951..5f09a4622e 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -270,9 +270,8 @@ body.trashing #publish-settings {
 	margin-bottom: 15px;
 }
 
-.date-time-fields {
-	padding-top: 10px;
-	padding-bottom:10px;
+.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
+	margin-top: 10px;
 }
 
 .customize-control.customize-control-date_time .date-time-fields .date-input,
@@ -280,6 +279,9 @@ body.trashing #publish-settings {
 	float: left;
 	margin-right: 5px;
 }
+.customize-control.customize-control-date_time .date-time-fields .date-input.day {
+	margin-right: 0;
+}
 
 .date-time-fields .date-input.month {
 	width: auto;
diff --git a/src/wp-includes/customize/class-wp-customize-date-time-control.php b/src/wp-includes/customize/class-wp-customize-date-time-control.php
index 9f36da0e68..11fc66971e 100644
--- a/src/wp-includes/customize/class-wp-customize-date-time-control.php
+++ b/src/wp-includes/customize/class-wp-customize-date-time-control.php
@@ -112,14 +112,18 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 		<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
 		<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 
-		<span class="customize-control-title">
-			{{ data.label }}
-		</span>
+		<# if ( data.label ) { #>
+			<span class="customize-control-title">
+				{{ data.label }}
+			</span>
+		<# } #>
 		<div class="customize-control-notifications-container"></div>
-		<span class="description customize-control-description">{{ data.description }}</span>
-		<div class="date-time-fields">
+		<# if ( data.description ) { #>
+			<span class="description customize-control-description">{{ data.description }}</span>
+		<# } #>
+		<div class="date-time-fields {{ data.includeTime ? 'includes-time' : '' }}">
 			<fieldset class="day-row">
-				<legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
+				<legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
 				<div class="day-fields clear">
 					<label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
 					<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">