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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41506 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-02 17:34:47 +00:00
parent 31647252e7
commit 6db8e66b43
6 changed files with 23 additions and 15 deletions

View File

@ -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: right;
margin-left: 5px;
}
.customize-control.customize-control-date_time .date-time-fields .date-input.day {
margin-left: 0;
}
.date-time-fields .date-input.month {
width: auto;

File diff suppressed because one or more lines are too long

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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">

View File

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