WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/02/2017 04:11:50 AM (9 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.