Changeset 41670

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.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (11 diffs)
• src/wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• src/wp-admin/js/customize-controls.js (modified) (20 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (3 diffs)
• src/wp-includes/class-wp-customize-nav-menus.php (modified) (3 diffs)
• src/wp-includes/customize/class-wp-customize-date-time-control.php (modified) (3 diffs)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-admin/js/customize-controls.js (modified) (12 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -174 +174 @@
 
 #customize-controls .date-input:invalid {
-        border-color: red;
-}
-
-.date-time-fields .month-field {
-        width: 79px;
-}
-
-.date-time-fields .day-field,
-.date-time-fields .hour-field,
-.date-time-fields .minute-field {
-        width: 46px;
-}
-
-.date-time-fields .year-field {
-        width: 60px;
-}
-
-.date-time-fields .am-pm-field {
-        width: 53px;
+        border-color: #dc3232;
 }
 
@@ -226 +208 @@
 .customize-copy-preview-link:before,
 .customize-copy-preview-link:after {
-        content: '';
+        content: "";
         height: 28px;
         position: absolute;
@@ -251 +233 @@
         border-right: none;
         text-indent: -999px;
-        color: white;
+        color: #fff;
 }
 
@@ -259 +241 @@
 }
 
-#customize-control-changeset_preview_link a.preview-control-element {
+#customize-control-changeset_preview_link a {
         display: inline-block;
         position: absolute;
@@ -270 +252 @@
 }
 
-#customize-control-changeset_preview_link a.preview-control-element.disabled,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:active,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:focus,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:visited {
+#customize-control-changeset_preview_link a.disabled,
+#customize-control-changeset_preview_link a.disabled:active,
+#customize-control-changeset_preview_link a.disabled:focus,
+#customize-control-changeset_preview_link a.disabled:visited {
         color: black;
         opacity: 0.4;
@@ -294 +276 @@
 }
 
-.date-time-fields label,
-.date-time-fields .date-time-separator {
+.customize-control.customize-control-date_time .date-time-fields .date-input,
+.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
         float: left;
-        margin-right:5px;
+        margin-right: 5px;
+}
+
+.date-time-fields .date-input.month {
+        width: auto;
+        margin: 0;
+}
+
+.date-time-fields .date-input.day,
+.date-time-fields .date-input.hour,
+.date-time-fields .date-input.minute {
+        width: 46px;
+}
+
+.date-time-fields .date-input.year {
+        width: 60px;
+}
+
+.date-time-fields .date-input.meridian {
+        width: auto;
+        margin: 0;
 }
 
@@ -305 +307 @@
 
 .date-time-fields .time-row {
-        padding-top: 12px;
+        margin-top: 12px;
 }
 
@@ -1036 +1038 @@
 
 .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
-        border: 1px solid #f00;
+        border: 1px solid #dc3232;
 }
 
@@ -1199 +1201 @@
 }
 #customize-control-show_on_front.has-error .customize-control-notifications-container {
-        margin-top:12px;
+        margin-top: 12px;
 }
 
@@ -1384 +1386 @@
         position: absolute;
         height: auto;
-        top: 0; left: 0; bottom: 0; right: 0;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
         border: 4px solid #00a0d2;
         border-radius: 2px;
@@ -2686 +2691 @@
         }
 
-        .date-time-fields .month-field {
+        .date-time-fields .date-input.month {
                 width: 79px;
         }
 
-        .date-time-fields .day-field,
-        .date-time-fields .hour-field,
-        .date-time-fields .minute-field {
+        .date-time-fields .date-input.day,
+        .date-time-fields .date-input.hour,
+        .date-time-fields .date-input.minute {
                 width: 55px;
         }
 
-        .date-time-fields .year-field {
+        .date-time-fields .date-input.year {
                 width: 80px;
         }
 
+        .date-time-fields .date-time-separator,
         .date-time-fields .date-timezone {
                 line-height: 3.2;
         }
+
         .wp-core-ui.wp-customizer .button {
                 margin-top: 12px;

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -133 +133 @@
 .customize-control input.menu-name-field {
         width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
-        margin: 12px 0;
 }
 

trunk/src/wp-admin/js/customize-controls.js

@@ -4930 +4930 @@
         api.DateTimeControl = api.Control.extend({
 
-                dateInputs: {},
-                inputElements: {},
-                invalidDate: false,
-
                 /**
                  * Initialize behaviors.
@@ -4943 +4939 @@
                         var control = this;
 
-                        _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
-
-                        control.dateInputs = control.container.find( '.date-input' );
+                        control.inputElements = {};
+                        control.invalidDate = false;
+
+                        _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour', 'populateDateInputs' );
 
                         // @todo This needs https://core.trac.wordpress.org/ticket/37964
@@ -4952 +4949 @@
                         }
 
+                        // @todo Should this be? Default should be on client. The default value should be in the setting itself.
                         if ( ! control.setting.get() && control.params.defaultValue ) {
                                 control.setting.set( control.params.defaultValue );
                         }
 
-                        control.dateInputs.each( function() {
+                        control.container.find( '.date-input' ).each( function() {
                                 var input = $( this ), component, element;
                                 component = input.data( 'component' );
                                 element = new api.Element( input );
-                                element.validate = function( value ) {
-                                        return _.contains( [ 'am', 'pm' ], value ) ? value : parseInt( value, 10 );
-                                };
+                                if ( 'meridian' === component ) {
+                                        element.validate = function( value ) {
+                                                if ( 'am' !== value && 'pm' !== value ) {
+                                                        return null;
+                                                }
+                                                return value;
+                                        };
+                                } else {
+                                        element.validate = function( value ) {
+                                                var val = parseInt( value, 10 );
+                                                if ( isNaN( val ) ) {
+                                                        return null;
+                                                }
+                                                return val;
+                                        };
+                                }
+                                element.bind( control.populateSetting );
                                 control.inputElements[ component ] = element;
                                 control.elements.push( element );
                         } );
 
-                        control.dateInputs.on( 'input', control.populateSetting );
                         control.inputElements.month.bind( control.updateDaysForMonth );
                         control.inputElements.year.bind( control.updateDaysForMonth );
-                        control.inputElements.hour.bind( control.updateMinutesForHour );
+                        if ( control.params.includeTime ) {
+                                control.inputElements.hour.bind( control.updateMinutesForHour );
+                        }
                         control.populateDateInputs();
+                        control.setting.bind( control.populateDateInputs );
                 },
 
@@ -4978 +4992 @@
                  *
                  * @since 4.9.0
-                 * @param {string} datetime Date/Time string. Accepts Y-m-d H:i:s format.
-                 * @param {boolean} twelveHourFormat If twelve hour format array is required.
+                 *
+                 * @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format.
                  * @returns {object|null} Returns object containing date components or null if parse error.
                  */
-                parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
-                        var matches, date, midDayHour = 12;
+                parseDateTime: function parseDateTime( datetime ) {
+                        var control = this, matches, date, midDayHour = 12;
 
                         if ( datetime ) {
-                                matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
+                                matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ );
                         }
 
@@ -4999 +5013 @@
                                 month: matches.shift(),
                                 day: matches.shift(),
-                                hour: matches.shift(),
-                                minute: matches.shift(),
-                                second: matches.shift()
+                                hour: matches.shift() || '00',
+                                minute: matches.shift() || '00',
+                                second: matches.shift() || '00'
                         };
 
-                        if ( twelveHourFormat ) {
+                        if ( control.params.includeTime && control.params.twelveHourFormat ) {
                                 date.hour = parseInt( date.hour, 10 );
-                                date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
+                                date.meridian = date.hour >= midDayHour ? 'pm' : 'am';
                                 date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
-                                delete date.second;
+                                delete date.second; // @todo Why only if twelveHourFormat?
                         }
 
@@ -5021 +5035 @@
                  */
                 validateInputs: function validateInputs() {
-                        var control = this, errorMessage;
+                        var control = this, errorMessage, components;
 
                         control.invalidDate = false;
 
-                        _.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
-                                var element, el, max, min, maxLength, value;
+                        components = [ 'year', 'day' ];
+                        if ( control.params.includeTime ) {
+                                components.push( 'hour', 'minute' );
+                        }
+
+                        _.each( components, function( component ) {
+                                var element, el, max, min, value;
 
                                 if ( ! control.invalidDate ) {
@@ -5033 +5052 @@
                                         max = parseInt( element.element.attr( 'max' ), 10 );
                                         min = parseInt( element.element.attr( 'min' ), 10 );
-                                        maxLength = parseInt( element.element.attr( 'maxlength' ), 10 );
                                         value = element();
-                                        control.invalidDate = value > max || value < min || String( value ).length > maxLength;
+                                        control.invalidDate = value > max || value < min;
                                         errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
 
                                         el.setCustomValidity( errorMessage );
-                                        _.result( el, 'reportValidity' );
+                                        if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
+                                                _.result( el, 'reportValidity' );
+                                        }
                                 }
                         } );
@@ -5078 +5098 @@
                         var control = this, maxHours = 24, minuteEl;
 
-                        if ( control.inputElements.ampm ) {
+                        if ( control.inputElements.meridian ) {
                                 return;
                         }
@@ -5087 +5107 @@
                                 control.inputElements.minute( 0 );
                                 minuteEl.data( 'default-max', minuteEl.attr( 'max' ) );
-                                minuteEl.data( 'default-maxlength', minuteEl.attr( 'maxlength' ) );
                                 minuteEl.attr( 'max', '0' );
                         } else if ( minuteEl.data( 'default-max' ) ) {
                                 minuteEl.attr( 'max', minuteEl.data( 'default-max' ) );
-                                minuteEl.attr( 'maxlength', minuteEl.data( 'maxlength' ) );
                         }
                 },
@@ -5143 +5161 @@
                         };
 
-                        hourInTwentyFourHourFormat = control.inputElements.ampm ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.ampm() ) : control.inputElements.hour();
-                        dateFormat = [ 'year', '-', 'month', '-', 'day', ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ];
+                        dateFormat = [ 'year', '-', 'month', '-', 'day' ];
+                        if ( control.params.includeTime ) {
+                                hourInTwentyFourHourFormat = control.inputElements.meridian ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.meridian() ) : control.inputElements.hour();
+                                dateFormat = dateFormat.concat( [ ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ] );
+                        }
 
                         _.each( dateFormat, function( component ) {
@@ -5168 +5189 @@
                  *
                  * @since 4.9.0
-                 * @param {string} hourInTwelveHourFormat Hour in twelve hour format.
-                 * @param {string} ampm am/pm
-                 * @return {string} Hour in twenty four hour format.
-                 */
-                convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, ampm ) {
+                 * @param {string} hourInTwelveHourFormat - Hour in twelve hour format.
+                 * @param {string} meridian - Either 'am' or 'pm'.
+                 * @returns {string} Hour in twenty four hour format.
+                 */
+                convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) {
                         var hourInTwentyFourHourFormat, hour, midDayHour = 12;
 
                         hour = parseInt( hourInTwelveHourFormat, 10 );
-
-                        if ( 'pm' === ampm && hour < midDayHour ) {
+                        if ( isNaN( hour ) ) {
+                                return '';
+                        }
+
+                        if ( 'pm' === meridian && hour < midDayHour ) {
                                 hourInTwentyFourHourFormat = hour + midDayHour;
-                        } else if ( 'am' === ampm && midDayHour === hour ) {
+                        } else if ( 'am' === meridian && midDayHour === hour ) {
                                 hourInTwentyFourHourFormat = hour - midDayHour;
                         } else {
@@ -5197 +5221 @@
                         var control = this, parsed;
 
-                        parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
+                        parsed = control.parseDateTime( control.setting.get() );
 
                         if ( ! parsed ) {
@@ -5246 +5270 @@
         api.PreviewLinkControl = api.Control.extend({
 
-                previewElements: {},
-
                 /**
                  * Override the templateSelector before embedding the control into the page.
@@ -5267 +5289 @@
                  */
                 ready: function ready() {
-                        var control = this, element, component, node, link, input, button;
+                        var control = this, element, component, node, url, input, button;
 
                         _.bindAll( control, 'updatePreviewLink' );
@@ -5274 +5296 @@
                             control.setting = new api.Value();
                         }
+
+                        control.previewElements = {};
 
                         control.container.find( '.preview-control-element' ).each( function() {
@@ -5283 +5307 @@
                         } );
 
-                        link = control.previewElements.link;
+                        url = control.previewElements.url;
                         input = control.previewElements.input;
                         button = control.previewElements.button;
 
                         input.link( control.setting );
-                        link.link( control.setting );
-
-                        link.bind( function( value ) {
-                                link.element.attr( 'href', value );
-                                link.element.attr( 'target', api.settings.changeset.uuid );
+                        url.link( control.setting );
+
+                        url.bind( function( value ) {
+                                url.element.parent().attr( {
+                                        href: value,
+                                        target: api.settings.changeset.uuid
+                                } );
                         } );
 
                         api.bind( 'ready', control.updatePreviewLink );
-                        api.bind( 'change', control.updatePreviewLink );
                         api.state( 'saved' ).bind( control.updatePreviewLink );
+                        api.state( 'changesetStatus' ).bind( control.updatePreviewLink );
 
                         button.element.on( 'click', function( event ) {
@@ -5308 +5334 @@
                         } );
 
-                        link.element.on( 'click', function( event ) {
-                                if ( link.element.hasClass( 'disabled' ) ) {
+                        url.element.parent().on( 'click', function( event ) {
+                                if ( $( this ).hasClass( 'disabled' ) ) {
                                         event.preventDefault();
                                 }
@@ -5330 +5356 @@
                         var control = this, unsavedDirtyValues;
 
-                        unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
-                                unsaved: true
-                        } ) );
+                        unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get();
 
                         control.toggleSaveNotification( unsavedDirtyValues );
-                        control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
+                        control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues );
                         control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
                         control.setting.set( api.previewer.getFrontendPreviewUrl() );
@@ -6509 +6533 @@
                                         } );
 
-                                        /**
-                                         * Find all invalid setting less controls with notification type error.
-                                         */
+                                        // Find all invalid setting less controls with notification type error.
                                         api.control.each( function( control ) {
                                                 if ( ! control.setting || ! control.setting.id && control.active.get() ) {
@@ -7931 +7953 @@
                 })();
 
-                /**
-                 * Publish settings section and controls.
-                 */
+                // Publish settings section and controls.
                 api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
                         $.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -3623 +3623 @@
                 </script>
                 <script type="text/html" id="tmpl-customize-preview-link-control" >
-                        <span class="customize-control-title">
-                                <label><?php esc_html_e( 'Share Preview Link' ); ?></label>
-                        </span>
-                        <span class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></span>
+                        <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+                        <p class="customize-control-title">
+                                <?php esc_html_e( 'Share Preview Link' ); ?>
+                        </p>
+                        <p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
                         <div class="customize-control-notifications-container"></div>
                         <div class="preview-link-wrapper">
-                                <label>
-                                        <span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
-                                        <a class="preview-control-element" data-component="link" href="" target=""></a>
-                                        <input readonly class="preview-control-element" data-component="input" value="test" >
-                                        <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
-                                </label>
+                                <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
+                                <a href="" target="">
+                                        <span class="preview-control-element" data-component="url"></span>
+                                        <span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
+                                </a>
+                                <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+                                <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
                         </div>
                 </script>
@@ -4237 +4239 @@
                         $initial_date = current_time( 'mysql', false );
                 }
+
                 $this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
                         'section' => 'publish_settings',
@@ -4244 +4247 @@
                         'min_year' => date( 'Y' ),
                         'allow_past_date' => false,
+                        'include_time' => true,
                         'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
                         'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -675 +675 @@
 
                 $this->manager->add_control( 'new_menu_name', array(
-                        'label'       => '',
+                        'label'       => __( 'New menu name' ),
                         'section'     => 'add_menu',
                         'type'        => 'text',
@@ -681 +681 @@
                         'input_attrs' => array(
                                 'class'       => 'menu-name-field',
-                                'placeholder' => __( 'New menu name' ),
                         ),
                 ) );
@@ -1018 +1017 @@
                                         <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
                                                 <div class="new-content-item">
-                                                        <input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
+                                                        <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
+                                                        <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
                                                         <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
                                                 </div>

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

@@ -50 +50 @@
 
         /**
+         * Whether hours, minutes, and meridian should be shown.
+         *
+         * @since 4.9.0
+         * @var boolean
+         */
+        public $include_time = true;
+
+        /**
          * If set to false the control will appear in 24 hour format,
          * the value will still be saved in Y-m-d H:i:s format.
@@ -84 +92 @@
                 $data['maxYear'] = intval( $this->max_year );
                 $data['minYear'] = intval( $this->min_year );
-                $data['allowPastDate'] = $this->allow_past_date ? true : false;
-                $data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
+                $data['allowPastDate'] = (bool) $this->allow_past_date;
+                $data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
+                $data['includeTime'] = (bool) $this->include_time;
                 $data['defaultValue'] = $this->default_value;
 
@@ -102 +111 @@
 
                 <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
+                <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 
                 <span class="customize-control-title">
-                        <label>{{ data.label }}</label>
+                        {{ data.label }}
                 </span>
                 <div class="customize-control-notifications-container"></div>
                 <span class="description customize-control-description">{{ data.description }}</span>
                 <div class="date-time-fields">
-                        <div class="day-row">
-                                <span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
+                        <fieldset class="day-row">
+                                <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
                                 <div class="day-fields clear">
-                                        <label class="month-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
-                                                        <select class="date-input month" data-component="month">
-                                                                <# _.each( data.month_choices, function( choice ) {
-                                                                        if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
-                                                                                text = choice.text;
-                                                                                value = choice.value;
-                                                                        }
-                                                                        #>
-                                                                        <option value="{{ value }}" >
-                                                                                {{ text }}
-                                                                        </option>
-                                                                <# } ); #>
+                                        <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">
+                                                <# _.each( data.month_choices, function( choice ) {
+                                                        if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+                                                                text = choice.text;
+                                                                value = choice.value;
+                                                        }
+                                                        #>
+                                                        <option value="{{ value }}" >
+                                                                {{ text }}
+                                                        </option>
+                                                <# } ); #>
+                                        </select>
+                                        <label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
+                                        <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
+                                        <span class="time-special-char date-time-separator">,</span>
+                                        <label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
+                                        <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 }}">
+                                </div>
+                        </fieldset>
+                        <# if ( data.includeTime ) { #>
+                                <fieldset class="time-row clear">
+                                        <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
+                                        <div class="time-fields clear">
+                                                <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
+                                                <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
+                                                <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+                                                <span class="time-special-char date-time-separator">:</span>
+                                                <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
+                                                <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+                                                <# if ( data.twelveHourFormat ) { #>
+                                                        <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
+                                                        <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
+                                                                <option value="am"><?php esc_html_e( 'AM' ); ?></option>
+                                                                <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
                                                         </select>
-                                        </label>
-                                        <label class="day-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
-                                                <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
-                                        </label>
-                                        <span class="time-special-char date-time-separator">,</span>
-                                        <label class="year-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
-                                                <# var maxYearLength = String( data.maxYear ).length; #>
-                                                <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
-                                        </label>
-                                </div>
-                        </div>
-                        <div class="time-row clear">
-                                <span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
-                                <div class="time-fields clear">
-                                        <label class="hour-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
-                                                <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
-                                                <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
-                                        </label>
-                                        <span class="time-special-char date-time-separator">:</span>
-                                        <label class="minute-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
-                                                <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
-                                        </label>
-                                        <# if ( data.twelveHourFormat ) { #>
-                                        <label class="am-pm-field">
-                                                <span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
-                                                <select class="date-input" data-component="ampm">
-                                                        <option value="am"><?php esc_html_e( 'AM' ); ?></option>
-                                                        <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
-                                                </select>
-                                        </label>
-                                        <# } #>
-                                        <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>
-                                </div>
-                        </div>
+                                                <# } #>
+                                                <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>
+                                        </div>
+                                </fieldset>
+                        <# } #>
                 </div>
                 <?php

trunk/tests/qunit/index.html

@@ -873 +873 @@
                         <# } #>
                 </script>
-        <script type="text/html" id="tmpl-customize-control-date_time-content">
-
-                <# _.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}}} ); #>
+                <script type="text/html" id="tmpl-customize-control-date_time-content">
+
+                <# _.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}}} ); #>
+                <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
 
                 <span class="customize-control-title">
-                        <label>{{ data.label }}</label>
+                        {{ data.label }}
                 </span>
                 <div class="customize-control-notifications-container"></div>
                 <span class="description customize-control-description">{{ data.description }}</span>
                 <div class="date-time-fields">
-                        <div class="day-row">
-                                <span class="title-day">Day</span>
+                        <fieldset class="day-row">
+                                <legend class="title-day">Date</legend>
                                 <div class="day-fields clear">
-                                        <label class="month-field">
-                                                <span class="screen-reader-text">Month</span>
-                                                <select class="date-input month" data-component="month">
-                                                        <# _.each( data.month_choices, function( choice ) {
-                                                                        if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
-                                                                        text = choice.text;
-                                                                        value = choice.value;
-                                                                        }
-                                                                        #>
-                                                                <option value="{{ value }}" >
-                                                                        {{ text }}
-                                                                </option>
-                                                                <# } ); #>
-                                                </select>
-                                        </label>
-                                        <label class="day-field">
-                                                <span class="screen-reader-text">Day</span>
-                                                <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
-                                        </label>
+                                        <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
+                                        <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
+                                                <# _.each( data.month_choices, function( choice ) {
+                                                                if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+                                                                text = choice.text;
+                                                                value = choice.value;
+                                                                }
+                                                                #>
+                                                        <option value="{{ value }}" >
+                                                                {{ text }}
+                                                        </option>
+                                                <# } ); #>
+                                        </select>
+                                        <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
+                                        <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
                                         <span class="time-special-char date-time-separator">,</span>
-                                        <label class="year-field">
-                                                <span class="screen-reader-text">Year</span>
-                                                <# var maxYearLength = String( data.maxYear ).length; #>
-                                                        <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
-                                        </label>
-                                </div>
-                        </div>
-                        <div class="time-row clear">
-                                <span class="title-time">Time</span>
-                                <div class="time-fields clear">
-                                        <label class="hour-field">
-                                                <span class="screen-reader-text">Hour</span>
+                                        <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
+                                        <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 }}">
+                                </div>
+                        </fieldset>
+                        <# if ( data.includeTime ) { #>
+                                <fieldset class="time-row clear">
+                                        <legend class="title-time">Time</legend>
+                                        <div class="time-fields clear">
+                                                <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
                                                 <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
-                                                        <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
-                                        </label>
-                                        <span class="time-special-char date-time-separator">:</span>
-                                        <label class="minute-field">
-                                                <span class="screen-reader-text">Minute</span>
-                                                <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
-                                        </label>
-                                        <# if ( data.twelveHourFormat ) { #>
-                                                <label class="am-pm-field">
-                                                        <span class="screen-reader-text">AM / PM</span>
-                                                        <select class="date-input" data-component="ampm">
+                                                <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+                                                <span class="time-special-char date-time-separator">:</span>
+                                                <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
+                                                <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+                                                <# if ( data.twelveHourFormat ) { #>
+                                                        <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
+                                                        <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
                                                                 <option value="am">AM</option>
                                                                 <option value="pm">PM</option>
                                                         </select>
-                                                </label>
                                                 <# } #>
-                                        <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
-                                </div>
-                        </div>
+                                                <abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
+                                        </div>
+                                </fieldset>
+                        <# } #>
                 </div>
         </script>
         <script type="text/html" id="tmpl-customize-preview-link-control" >
-                <span class="customize-control-title">
-                <label>Share Preview Link</label>
-        </span>
-                <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>
+                <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+                <p class="customize-control-title">
+                        Share Preview Link                      </p>
+                <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>
                 <div class="customize-control-notifications-container"></div>
                 <div class="preview-link-wrapper">
-                        <label>
-                                <span class="screen-reader-text">Preview Link</span>
-                                <a class="preview-control-element" data-component="link" href="" target=""></a>
-                                <input readonly class="preview-control-element" data-component="input" value="test" >
-                                <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>
-                        </label>
+                        <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
+                        <a href="" target="">
+                                <span class="preview-control-element" data-component="url"></span>
+                                <span class="screen-reader-text">(opens in a new window)</span>
+                        </a>
+                        <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+                        <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>
                 </div>
         </script>

trunk/tests/qunit/wp-admin/js/customize-controls.js

@@ -703 +703 @@
                 var control, controlId = 'date_time', section, sectionId = 'fixture-section',
                         datetime = '2599-08-06 18:12:13', dateTimeArray, dateTimeArrayInampm, timeString,
-                        day, year, month, minute, ampm, hour;
+                        day, year, month, minute, meridian, hour;
 
                 section = wp.customize.section( sectionId );
@@ -711 +711 @@
                                 section: section.id,
                                 type: 'date_time',
+                                includeTime: true,
                                 content: '<li id="customize-control-' + controlId + '" class="customize-control"></li>',
                                 defaultValue: datetime
@@ -729 +730 @@
                 minute = control.inputElements.minute;
                 hour = control.inputElements.hour;
-                ampm = control.inputElements.ampm;
+                meridian = control.inputElements.meridian;
 
                 year( '23' );
                 assert.equal( typeof year(), 'number', 'Should always return integer' );
 
+                month( '8' );
                 month( 'test' );
-                assert.notOk( month(), 'Should not accept text' );
+                assert.equal( 8, month(), 'Should not accept text' );
 
                 // Test control.parseDateTime();
+                control.params.twelveHourFormat = false;
                 dateTimeArray = control.parseDateTime( datetime );
                 assert.deepEqual( dateTimeArray, {
@@ -748 +751 @@
                 } );
 
-                dateTimeArrayInampm = control.parseDateTime( datetime, true );
+                control.params.twelveHourFormat = true;
+                dateTimeArrayInampm = control.parseDateTime( datetime );
                 assert.deepEqual( dateTimeArrayInampm, {
                         year: '2599',
@@ -754 +758 @@
                         hour: '6',
                         minute: '12',
-                        ampm: 'pm',
+                        meridian: 'pm',
                         day: '06'
                 } );
@@ -763 +767 @@
                 hour( '3' );
                 minute( '44' );
-                ampm( 'am' );
+                meridian( 'am' );
 
                 // Test control.convertInputDateToString().
@@ -769 +773 @@
                 assert.equal( timeString, '2010-12-18 03:44:00' );
 
-                ampm( 'pm' );
+                meridian( 'pm' );
                 timeString = control.convertInputDateToString();
                 assert.equal( timeString, '2010-12-18 15:44:00' );
+
+                control.params.includeTime = false;
+                timeString = control.convertInputDateToString();
+                assert.equal( timeString, '2010-12-18' );
+                control.params.includeTime = true;
 
                 // Test control.updateDaysForMonth();.
@@ -797 +806 @@
 
                 // Test control.populateDateInputs();
+                control.setting._value = '2000-12-30 12:34:56';
                 control.populateDateInputs();
-                control.dateInputs.each( function() {
-                        var node = jQuery( this );
-                    assert.equal( node.val(), control.inputElements[ node.data( 'component' ) ].get() );
-                } );
+                assert.equal( '2000', control.inputElements.year.get() );
+                assert.equal( '12', control.inputElements.month.get() );
+                assert.equal( '30', control.inputElements.day.get() );
+                assert.equal( '12', control.inputElements.hour.get() );
+                assert.equal( '34', control.inputElements.minute.get() );
+                assert.equal( 'pm', control.inputElements.meridian.get() );
 
                 // Test control.validateInputs();
@@ -819 +831 @@
                 hour( 4 );
                 minute( 20 );
-                ampm( 'pm' );
+                meridian( 'pm' );
                 control.populateSetting();
                 assert.equal( control.setting(), '2018-11-02 16:20:00' );
@@ -837 +849 @@
                 hour( 4 );
                 minute( 20 );
-                ampm( 'pm' );
+                meridian( 'pm' );
                 assert.ok( control.isFutureDate() );
 
@@ -849 +861 @@
                 hour( 24 );
                 minute( 32 );
-                control.inputElements.ampm = false; // Because it works only when the time is twenty four hour format.
+                control.inputElements.meridian = false; // Because it works only when the time is twenty four hour format.
                 control.updateMinutesForHour();
                 assert.deepEqual( minute(), 0 );
@@ -911 +923 @@
 
                                         assert.equal( control.previewElements.input(), newLink );
-                                        assert.equal( control.previewElements.link(), newLink );
-                                        assert.equal( control.previewElements.link.element.attr( 'href' ), newLink );
-                                        assert.equal( control.previewElements.link.element.attr( 'target' ), wp.customize.settings.changeset.uuid );
+                                        assert.equal( control.previewElements.url(), newLink );
+                                        assert.equal( control.previewElements.url.element.parent().attr( 'href' ), newLink );
+                                        assert.equal( control.previewElements.url.element.parent().attr( 'target' ), wp.customize.settings.changeset.uuid );
 
                                         // Test control.toggleSaveNotification().