From 4f0527afdc564d74bc796ef8a9b5103c17d02927 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Thu, 2 Nov 2017 22:59:04 +0000
Subject: [PATCH] Customize: Present the date/time control input fields in the
 same format (and order) as `date_format`.

Props westonruter, obenland, atachibana for testing, Mirucon for testing.
See #42373, #28721.
Fixes #42394.


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

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index b888f610bb..d7d538739d 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -332,11 +332,6 @@ body.trashing #publish-settings {
 	margin-top: 10px;
 }
 
-.customize-control.customize-control-date_time .date-time-fields .date-input,
-.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
-	float: left;
-	margin-right: 5px;
-}
 .customize-control.customize-control-date_time .date-time-fields .date-input.day {
 	margin-right: 0;
 }
@@ -361,16 +356,11 @@ body.trashing #publish-settings {
 	margin: 0;
 }
 
-.date-time-fields .date-time-separator {
-	line-height: 2;
-}
-
 .date-time-fields .time-row {
 	margin-top: 12px;
 }
 
 .date-time-fields .date-timezone {
-	float: left;
 	line-height: 2.2;
 	text-decoration: none;
 }
@@ -2830,7 +2820,6 @@ body.adding-widget .add-new-widget:before,
 		width: 80px;
 	}
 
-	.date-time-fields .date-time-separator,
 	.date-time-fields .date-timezone {
 		line-height: 3.2;
 	}
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 d1e8d12500..c163ba1408 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
@@ -98,6 +98,17 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 	public function content_template() {
 		$data = array_merge( $this->json(), $this->get_month_choices() );
 		$timezone_info = $this->get_timezone_info();
+
+		$date_format = get_option( 'date_format' );
+		foreach ( array( 'Y', 'y', 'o' ) as $year_token ) {
+			$date_format = preg_replace( '/(?<!\\\\)' . $year_token . '/', '%1$s', $date_format );
+		}
+		foreach ( array( 'F', 'm', 'M', 'n' ) as $month_token ) {
+			$date_format = preg_replace( '/(?<!\\\\)' . $month_token . '/', '%2$s', $date_format );
+		}
+		foreach ( array( 'j', 'd' ) as $day_token ) {
+			$date_format = preg_replace( '/(?<!\\\\)' . $day_token . '/', '%3$s', $date_format );
+		}
 		?>
 
 		<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
@@ -116,6 +127,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 			<fieldset class="day-row">
 				<legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
 				<div class="day-fields clear">
+					<?php ob_start(); ?>
 					<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">
 						<# _.each( data.month_choices, function( choice ) {
@@ -129,11 +141,19 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 							</option>
 						<# } ); #>
 					</select>
+					<?php $month_field = trim( ob_get_clean() ); ?>
+
+					<?php ob_start(); ?>
 					<label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
 					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
-					<span class="time-special-char date-time-separator">,</span>
+					<?php $day_field = trim( ob_get_clean() ); ?>
+
+					<?php ob_start(); ?>
 					<label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
 					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
+					<?php $year_field = trim( ob_get_clean() ); ?>
+
+					<?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
 				</div>
 			</fieldset>
 			<# if ( data.includeTime ) { #>
@@ -144,7 +164,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
 						<# var maxHour = data.twelveHourFormat ? 12 : 23; #>
 						<# var minHour = data.twelveHourFormat ? 1 : 0; #>
 						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
-						<span class="time-special-char date-time-separator">:</span>
+						:
 						<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
 						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
 						<# if ( data.twelveHourFormat ) { #>