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/tests/qunit/index.html

    r41626 r41670  
    873873            <# } #>
    874874        </script>
    875     <script type="text/html" id="tmpl-customize-control-date_time-content">
    876 
    877         <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":69,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     875        <script type="text/html" id="tmpl-customize-control-date_time-content">
     876
     877        <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     878        <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    878879
    879880        <span class="customize-control-title">
    880             <label>{{ data.label }}</label>
     881            {{ data.label }}
    881882        </span>
    882883        <div class="customize-control-notifications-container"></div>
    883884        <span class="description customize-control-description">{{ data.description }}</span>
    884885        <div class="date-time-fields">
    885             <div class="day-row">
    886                 <span class="title-day">Day</span>
     886            <fieldset class="day-row">
     887                <legend class="title-day">Date</legend>
    887888                <div class="day-fields clear">
    888                     <label class="month-field">
    889                         <span class="screen-reader-text">Month</span>
    890                         <select class="date-input month" data-component="month">
    891                             <# _.each( data.month_choices, function( choice ) {
    892                                     if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    893                                     text = choice.text;
    894                                     value = choice.value;
    895                                     }
    896                                     #>
    897                                 <option value="{{ value }}" >
    898                                     {{ text }}
    899                                 </option>
    900                                 <# } ); #>
    901                         </select>
    902                     </label>
    903                     <label class="day-field">
    904                         <span class="screen-reader-text">Day</span>
    905                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    906                     </label>
     889                    <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
     890                    <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
     891                        <# _.each( data.month_choices, function( choice ) {
     892                                if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     893                                text = choice.text;
     894                                value = choice.value;
     895                                }
     896                                #>
     897                            <option value="{{ value }}" >
     898                                {{ text }}
     899                            </option>
     900                        <# } ); #>
     901                    </select>
     902                    <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
     903                    <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
    907904                    <span class="time-special-char date-time-separator">,</span>
    908                     <label class="year-field">
    909                         <span class="screen-reader-text">Year</span>
    910                         <# var maxYearLength = String( data.maxYear ).length; #>
    911                             <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    912                     </label>
    913                 </div>
    914             </div>
    915             <div class="time-row clear">
    916                 <span class="title-time">Time</span>
    917                 <div class="time-fields clear">
    918                     <label class="hour-field">
    919                         <span class="screen-reader-text">Hour</span>
     905                    <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
     906                    <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 }}">
     907                </div>
     908            </fieldset>
     909            <# if ( data.includeTime ) { #>
     910                <fieldset class="time-row clear">
     911                    <legend class="title-time">Time</legend>
     912                    <div class="time-fields clear">
     913                        <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
    920914                        <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    921                             <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    922                     </label>
    923                     <span class="time-special-char date-time-separator">:</span>
    924                     <label class="minute-field">
    925                         <span class="screen-reader-text">Minute</span>
    926                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    927                     </label>
    928                     <# if ( data.twelveHourFormat ) { #>
    929                         <label class="am-pm-field">
    930                             <span class="screen-reader-text">AM / PM</span>
    931                             <select class="date-input" data-component="ampm">
     915                        <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
     916                        <span class="time-special-char date-time-separator">:</span>
     917                        <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
     918                        <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
     919                        <# if ( data.twelveHourFormat ) { #>
     920                            <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
     921                            <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
    932922                                <option value="am">AM</option>
    933923                                <option value="pm">PM</option>
    934924                            </select>
    935                         </label>
    936925                        <# } #>
    937                     <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
    938                 </div>
    939             </div>
     926                        <abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
     927                    </div>
     928                </fieldset>
     929            <# } #>
    940930        </div>
    941931    </script>
    942932    <script type="text/html" id="tmpl-customize-preview-link-control" >
    943         <span class="customize-control-title">
    944         <label>Share Preview Link</label>
    945     </span>
    946         <span class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</span>
     933        <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
     934        <p class="customize-control-title">
     935            Share Preview Link          </p>
     936        <p class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</p>
    947937        <div class="customize-control-notifications-container"></div>
    948938        <div class="preview-link-wrapper">
    949             <label>
    950                 <span class="screen-reader-text">Preview Link</span>
    951                 <a class="preview-control-element" data-component="link" href="" target=""></a>
    952                 <input readonly class="preview-control-element" data-component="input" value="test" >
    953                 <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    954             </label>
     939            <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
     940            <a href="" target="">
     941                <span class="preview-control-element" data-component="url"></span>
     942                <span class="screen-reader-text">(opens in a new window)</span>
     943            </a>
     944            <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
     945            <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    955946        </div>
    956947    </script>
Note: See TracChangeset for help on using the changeset viewer.