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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41940 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-11-02 23:00:49 +00:00
parent 99c19a5a82
commit ef272167c4
6 changed files with 25 additions and 27 deletions

View File

@ -332,11 +332,6 @@ body.trashing #publish-settings {
margin-top: 10px; 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: right;
margin-left: 5px;
}
.customize-control.customize-control-date_time .date-time-fields .date-input.day { .customize-control.customize-control-date_time .date-time-fields .date-input.day {
margin-left: 0; margin-left: 0;
} }
@ -361,16 +356,11 @@ body.trashing #publish-settings {
margin: 0; margin: 0;
} }
.date-time-fields .date-time-separator {
line-height: 2;
}
.date-time-fields .time-row { .date-time-fields .time-row {
margin-top: 12px; margin-top: 12px;
} }
.date-time-fields .date-timezone { .date-time-fields .date-timezone {
float: right;
line-height: 2.2; line-height: 2.2;
text-decoration: none; text-decoration: none;
} }
@ -2830,7 +2820,6 @@ body.adding-widget .add-new-widget:before,
width: 80px; width: 80px;
} }
.date-time-fields .date-time-separator,
.date-time-fields .date-timezone { .date-time-fields .date-timezone {
line-height: 3.2; line-height: 3.2;
} }

File diff suppressed because one or more lines are too long

View File

@ -332,11 +332,6 @@ body.trashing #publish-settings {
margin-top: 10px; 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 { .customize-control.customize-control-date_time .date-time-fields .date-input.day {
margin-right: 0; margin-right: 0;
} }
@ -361,16 +356,11 @@ body.trashing #publish-settings {
margin: 0; margin: 0;
} }
.date-time-fields .date-time-separator {
line-height: 2;
}
.date-time-fields .time-row { .date-time-fields .time-row {
margin-top: 12px; margin-top: 12px;
} }
.date-time-fields .date-timezone { .date-time-fields .date-timezone {
float: left;
line-height: 2.2; line-height: 2.2;
text-decoration: none; text-decoration: none;
} }
@ -2830,7 +2820,6 @@ body.adding-widget .add-new-widget:before,
width: 80px; width: 80px;
} }
.date-time-fields .date-time-separator,
.date-time-fields .date-timezone { .date-time-fields .date-timezone {
line-height: 3.2; line-height: 3.2;
} }

File diff suppressed because one or more lines are too long

View File

@ -98,6 +98,17 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
public function content_template() { public function content_template() {
$data = array_merge( $this->json(), $this->get_month_choices() ); $data = array_merge( $this->json(), $this->get_month_choices() );
$timezone_info = $this->get_timezone_info(); $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 ); ?> ); #> <# _.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"> <fieldset class="day-row">
<legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?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"> <div class="day-fields clear">
<?php ob_start(); ?>
<label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label> <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"> <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
<# _.each( data.month_choices, function( choice ) { <# _.each( data.month_choices, function( choice ) {
@ -129,11 +141,19 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
</option> </option>
<# } ); #> <# } ); #>
</select> </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> <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" /> <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> <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 }}"> <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> </div>
</fieldset> </fieldset>
<# if ( data.includeTime ) { #> <# if ( data.includeTime ) { #>
@ -144,7 +164,7 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
<# var maxHour = data.twelveHourFormat ? 12 : 23; #> <# var maxHour = data.twelveHourFormat ? 12 : 23; #>
<# var minHour = data.twelveHourFormat ? 1 : 0; #> <# 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 }}"> <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> <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"> <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 ) { #> <# if ( data.twelveHourFormat ) { #>

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.9-RC1-42110'; $wp_version = '4.9-RC1-42111';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.