sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Weston Ruter 2017-10-02 17:33:10 +00:00
parent e8e027e7a6
commit 32a6ac3918
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/wp-admin/css/customize-controls.css
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;

8
src/wp-includes/customize/class-wp-customize-date-time-control.php
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' ) + '-'; #>
<# if ( data.label ) { #>
<span class="customize-control-title">
{{ data.label }}
</span>
<# } #>
<div class="customize-control-notifications-container"></div>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{ data.description }}</span>
<div class="date-time-fields">
<# } #>
<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">