WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/02/2017 04:11:50 AM (8 years ago)
Author:
westonruter
Message:

Customize: Fix WP_Customize_Date_Time_Control to be re-usable for plugins and custom settings.

  • Allow time fields to be omitted by constructing with timeIncluded as false.
  • Ensure reportValidity is only called on a control when it is in an expanded section.
  • Rename "ampm" to "meridian".
  • Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control.
  • Fix styling of dropdowns and clean CSS.
  • Improve accessibility of nav menus component.

Props westonruter, afercia, sayedwp, melchoyce.
Amends [41626].
See #39896.
Fixes #42022.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php

    r41626 r41670  
    5050
    5151    /**
     52     * Whether hours, minutes, and meridian should be shown.
     53     *
     54     * @since 4.9.0
     55     * @var boolean
     56     */
     57    public $include_time = true;
     58
     59    /**
    5260     * If set to false the control will appear in 24 hour format,
    5361     * the value will still be saved in Y-m-d H:i:s format.
    … …  
    8492        $data['maxYear'] = intval( $this->max_year );
    8593        $data['minYear'] = intval( $this->min_year );
    86         $data['allowPastDate'] = $this->allow_past_date ? true : false;
    87         $data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
     94        $data['allowPastDate'] = (bool) $this->allow_past_date;
     95        $data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
     96        $data['includeTime'] = (bool) $this->include_time;
    8897        $data['defaultValue'] = $this->default_value;
    8998
    … …  
    102111
    103112        <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
     113        <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    104114
    105115        <span class="customize-control-title">
    106             <label>{{ data.label }}</label>
     116            {{ data.label }}
    107117        </span>
    108118        <div class="customize-control-notifications-container"></div>
    109119        <span class="description customize-control-description">{{ data.description }}</span>
    110120        <div class="date-time-fields">
    111             <div class="day-row">
    112                 <span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
     121            <fieldset class="day-row">
     122                <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
    113123                <div class="day-fields clear">
    114                     <label class="month-field">
    115                         <span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
    116                             <select class="date-input month" data-component="month">
    117                                 <# _.each( data.month_choices, function( choice ) {
    118                                     if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    119                                         text = choice.text;
    120                                         value = choice.value;
    121                                     }
    122                                     #>
    123                                     <option value="{{ value }}" >
    124                                         {{ text }}
    125                                     </option>
    126                                 <# } ); #>
     124                    <label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
     125                    <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
     126                        <# _.each( data.month_choices, function( choice ) {
     127                            if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     128                                text = choice.text;
     129                                value = choice.value;
     130                            }
     131                            #>
     132                            <option value="{{ value }}" >
     133                                {{ text }}
     134                            </option>
     135                        <# } ); #>
     136                    </select>
     137                    <label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
     138                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
     139                    <span class="time-special-char date-time-separator">,</span>
     140                    <label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
     141                    <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 }}">
     142                </div>
     143            </fieldset>
     144            <# if ( data.includeTime ) { #>
     145                <fieldset class="time-row clear">
     146                    <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
     147                    <div class="time-fields clear">
     148                        <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
     149                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
     150                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
     151                        <span class="time-special-char date-time-separator">:</span>
     152                        <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
     153                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
     154                        <# if ( data.twelveHourFormat ) { #>
     155                            <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
     156                            <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
     157                                <option value="am"><?php esc_html_e( 'AM' ); ?></option>
     158                                <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
    127159                            </select>
    128                     </label>
    129                     <label class="day-field">
    130                         <span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
    131                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    132                     </label>
    133                     <span class="time-special-char date-time-separator">,</span>
    134                     <label class="year-field">
    135                         <span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
    136                         <# var maxYearLength = String( data.maxYear ).length; #>
    137                         <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    138                     </label>
    139                 </div>
    140             </div>
    141             <div class="time-row clear">
    142                 <span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
    143                 <div class="time-fields clear">
    144                     <label class="hour-field">
    145                         <span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
    146                         <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    147                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    148                     </label>
    149                     <span class="time-special-char date-time-separator">:</span>
    150                     <label class="minute-field">
    151                         <span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
    152                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    153                     </label>
    154                     <# if ( data.twelveHourFormat ) { #>
    155                     <label class="am-pm-field">
    156                         <span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
    157                         <select class="date-input" data-component="ampm">
    158                             <option value="am"><?php esc_html_e( 'AM' ); ?></option>
    159                             <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
    160                         </select>
    161                     </label>
    162                     <# } #>
    163                     <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
    164                 </div>
    165             </div>
     160                        <# } #>
     161                        <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
     162                    </div>
     163                </fieldset>
     164            <# } #>
    166165        </div>
    167166        <?php
Note: See TracChangeset for help on using the changeset viewer.