Changeset 41626

Timestamp:

09/27/2017 10:24:37 PM (7 years ago)

Author:

westonruter

Message:

Customize: Introduce drafting and scheduling for Customizer changesets.

• Incorporates code from the Customize Snapshots and Customize Posts feature plugins.
• Adds a new Publish Settings section for managing the changeset status, scheduled date, and frontend preview link.
• Updates Publish button to reflect the status selected in the Publish Settings (including Save Draft and Schedule).
• Deactivates the Themes section when a non-publish status selected, and deactivates the Publish Settings section when previewing a theme switch.
• Introduces an outer section type (wp.customize.OuterSection in JS) for the Publish Settings section to use and for available widgets and available nav menu panels to use in the future. These sections can be expanded while other sections are expanded.
• Introduces WP_Customize_Date_Time_Control in PHP and wp.customize.DateTimeControl in JS for managing a date/time value.
• Keeps track of scheduled time and proactively publish from the client when the time arrives, as opposed to waiting for WP Cron.
• Auto-publishes a scheduled changeset when attempting to access one that missed its schedule.
• Starts a new changeset if attempting to save a changeset that was previously publish.
• Adds force arg to requestChangesetUpdate() to force an update request even when there are no pending changes.
• Adds utils methods for getCurrentTimestamp and getRemainingTime.
• Adds new state values for selectedChangesetStatus, changesetDate, selectedChangesetDate.
• Fixes logic for when to short-circuit check to close Customizer when there are unsaved changes.
• Adds getter methods for autosaved and branching parameters, with the latter applying the customize_changeset_branching filter.
• Call to establish_loaded_changeset on the fly when changeset_uuid() is called if no changeset UUID was specififed.
• De-duplicates logic for dismissing auto-draft changesets.
• Includes unit tests.

Builds on [41597].
Props sayedwp, westonruter, melchoyce, JoshuaWold, folletto, stubgo, karmatosed, dlh, paaljoachim, afercia, johnregan3, utkarshpatel, valendesigns.
See #30937.
Fixes #39896, #28721, #39275.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (16 diffs)
• src/wp-admin/customize.php (modified) (4 diffs)
• src/wp-admin/js/customize-controls.js (modified) (34 diffs)
• src/wp-includes/class-wp-customize-control.php (modified) (1 diff)
• src/wp-includes/class-wp-customize-manager.php (modified) (17 diffs)
• src/wp-includes/customize/class-wp-customize-date-time-control.php (added)
• src/wp-includes/js/customize-preview.js (modified) (2 diffs)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/ajax/CustomizeManager.php (modified) (10 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (7 diffs)
• tests/qunit/fixtures/customize-settings.js (modified) (2 diffs)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-admin/js/customize-controls.js (modified) (1 diff)

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

@@ -25 +25 @@
 }
 
-#customize-header-actions .button-primary {
+#customize-save-button-wrapper {
     float: right;
     margin-top: 9px;
+}
+
+#customize-save-button-wrapper .save {
+    float: left;
+    border-radius: 3px;
+    box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
+    display: none; /* Shown when ready. */
+    margin-top: 0;
+}
+#customize-save-button-wrapper .save.has-next-sibling {
+    border-radius: 3px 0 0 3px;
+}
+
+#customize-outer-theme-controls-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -301px;
+    visibility: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 300px;
+    margin: 0;
+    z-index: 4;
+    background: #eee;
+    transition: left .18s;
+    border-right: 1px solid #ddd;
+}
+
+.outer-section-open .wp-full-overlay.expanded {
+    margin-left: 300px;
+}
+
+#customize-theme-controls .control-section-outer {
+    display: none !important;
+}
+
+#customize-outer-theme-controls .accordion-section-content {
+    padding: 12px;
+}
+
+#customize-outer-theme-controls .accordion-section-content.open {
+    display: block;
+}
+
+.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper {
+    visibility: visible;
+    left: 0;
+    transition: left .18s;
+}
+
+.customize-outer-pane-parent {
+    margin: 0;
+}
+
+.outer-section-open .wp-full-overlay.expanded #customize-preview {
+    opacity: 0.4;
+}
+
+body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
+    left: 300px;
+}
+
+#customize-outer-theme-controls li.notice {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    margin-left: 0;
+    margin-bottom: 10px;
+}
+
+#publish-settings {
+    text-indent: 0;
+    border-radius: 0 3px 3px 0;
+    padding-left: 0;
+    padding-right: 0;
+    box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
+    font-size: 14px;
+    width: 30px;
+    float: left;
+    display: none; /* Shown when ready. */
+    -webkit-transform: none;
+    transform: none;
+    margin-top: 0;
 }
 
@@ -54 +137 @@
 }
 
+#customize-control-changeset_status label,
+#customize-control-changeset_preview_link input {
+    background-color: #ffffff;
+    border-bottom: 1px solid #ddd;
+    box-sizing: content-box;
+    width: 100%;
+    margin-left: -12px;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+#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;
+}
+
+#customize-control-changeset_status label {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-weight: 500;
+}
+
+#customize-control-changeset_status label:first-of-type {
+    border-top: 1px solid #ddd;
+}
+
+#customize-control-changeset_status .customize-control-title {
+    margin-bottom: 6px;
+}
+
+#customize-control-changeset_status input {
+    margin-left: 0;
+}
+
+#customize-control-changeset_preview_link {
+    position: relative;
+    display: block;
+}
+
+.customize-copy-preview-link {
+    position: absolute;
+    bottom: 9px;
+    right: 0;
+}
+
+.customize-copy-preview-link:before,
+.customize-copy-preview-link:after {
+    content: '';
+    height: 28px;
+    position: absolute;
+    background: #ffffff;
+    top: -1px;
+}
+
+.customize-copy-preview-link:before {
+    left: -10px;
+    width: 9px;
+    opacity: 0.75;
+}
+
+.customize-copy-preview-link:after {
+    left: -5px;
+    width: 4px;
+    opacity: 0.8;
+}
+
+#customize-control-changeset_preview_link input {
+    line-height: 2.5;
+    border-top: 1px solid #ddd;
+    border-left: none;
+    border-right: none;
+    text-indent: -999px;
+    color: white;
+}
+
+#customize-control-changeset_preview_link label {
+    position: relative;
+    display: block;
+}
+
+#customize-control-changeset_preview_link a.preview-control-element {
+    display: inline-block;
+    position: absolute;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 217px;
+    bottom: 14px;
+    font-size: 14px;
+    text-decoration: none;
+}
+
+#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 {
+    color: black;
+    opacity: 0.4;
+    cursor: default;
+    outline: none;
+    box-shadow: none;
+}
+
+#sub-accordion-section-publish_settings .customize-section-description-container {
+    display: none;
+}
+
 #customize-controls .customize-info.section-meta {
     margin-bottom: 15px;
+}
+
+.date-time-fields {
+    padding-top: 10px;
+    padding-bottom:10px;
+}
+
+.date-time-fields label,
+.date-time-fields .date-time-separator {
+    float: left;
+    margin-right:5px;
+}
+
+.date-time-fields .date-time-separator {
+    line-height: 2;
+}
+
+.date-time-fields .time-row {
+    padding-top: 12px;
+}
+
+.date-time-fields .date-timezone {
+    float: left;
+    line-height: 2.2;
+    text-decoration: none;
+}
+
+#customize-control-changeset_preview_link {
+    margin-top: 20px;
+}
+
+#customize-control-changeset_status {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+#customize-control-changeset_scheduled_date {
+    box-sizing: content-box;
+    width: 100%;
+    margin-left: -12px;
+    padding: 12px 12px 18px;
+    background: #ffffff;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 0;
+}
+
+#customize-control-changeset_scheduled_date .customize-control-description {
+    font-style: normal;
 }
 
@@ -106 +360 @@
 #customize-controls .customize-pane-child .customize-section-title h3,
 #customize-controls .customize-pane-child h3.customize-section-title,
+#customize-outer-theme-controls .customize-pane-child .customize-section-title h3,
+#customize-outer-theme-controls .customize-pane-child h3.customize-section-title,
 #customize-controls .customize-info .panel-title {
     font-size: 20px;
@@ -151 +407 @@
 #customize-controls .customize-info .customize-panel-description,
 #customize-controls .customize-info .customize-section-description,
+#customize-outer-theme-controls .customize-info .customize-section-description,
 #customize-controls .no-widget-areas-rendered-notice {
     color: #555d66;
@@ -172 +429 @@
 }
 
-#customize-controls .customize-info .customize-section-description {
+#customize-controls .customize-info .customize-section-description,
+#customize-outer-theme-controls .customize-section-description {
     margin-bottom: 15px;
 }
@@ -190 +448 @@
 }
 
-#customize-theme-controls .control-section {
+#customize-theme-controls .control-section,
+#customize-outer-theme-controls .control-section {
     border: none;
 }
 
-#customize-theme-controls .accordion-section-title {
+#customize-theme-controls .accordion-section-title,
+#customize-outer-theme-controls .accordion-section-title {
     color: #555d66;
     background-color: #fff;
@@ -210 +470 @@
 }
 
-#customize-theme-controls .accordion-section-title:after {
+#customize-theme-controls .accordion-section-title:after,
+#customize-outer-theme-controls .accordion-section-title:after {
     content: "\f345";
     color: #a0a5aa;
 }
 
-#customize-theme-controls .accordion-section-content {
+#customize-theme-controls .accordion-section-content,
+#customize-outer-theme-controls .accordion-section-content {
     color: #555d66;
     background: transparent;
@@ -223 +485 @@
 #customize-controls .control-section .accordion-section-title:hover,
 #customize-controls .control-section.open .accordion-section-title,
+#customize-outer-theme-controls .control-section .accordion-section-title:hover,
+#customize-outer-theme-controls .control-section.open .accordion-section-title,
+#customize-outer-theme-controls .control-section .accordion-section-title:focus,
 #customize-controls .control-section .accordion-section-title:focus {
     color: #0073aa;
@@ -243 +508 @@
 #customize-theme-controls .control-section .accordion-section-title:hover:after,
 #customize-theme-controls .control-section.open .accordion-section-title:after,
-#customize-theme-controls .control-section .accordion-section-title:focus:after {
+#customize-theme-controls .control-section .accordion-section-title:focus:after,
+#customize-outer-theme-controls .control-section:hover > .accordion-section-title:after,
+#customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
+#customize-outer-theme-controls .control-section.open .accordion-section-title:after,
+#customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
     color: #0073aa;
 }
@@ -251 +520 @@
 }
 
-#customize-theme-controls .control-section.open .accordion-section-title {
+#customize-theme-controls .control-section.open .accordion-section-title,
+#customize-outer-theme-controls .control-section.open .accordion-section-title {
     border-bottom-color: #eee !important;
 }
@@ -829 +1099 @@
 }
 
+.wp-full-overlay.collapsed #customize-controls #customize-notifications-area {
+    display: none !important;
+}
+
 #customize-controls #customize-notifications-area,
 #customize-controls .customize-section-title > .customize-control-notifications-container,
@@ -1120 +1394 @@
 }
 
-@-webkit-keyframes dice-color-change {
-    0% { color: #d4b146; }
-    50% { color: #ef54b0; }
-    75% { color: #7190d3; }
-    100% { color: #d4b146; }
-}
-
-@keyframes dice-color-change {
-    0% { color: #d4b146; }
-    50% { color: #ef54b0; }
-    75% { color: #7190d3; }
-    100% { color: #d4b146; }
+.button-see-me {
+    -webkit-animation: bounce .7s 1;
+    animation: bounce .7s 1;
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+}
+
+@-webkit-keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        -webkit-transform: translate3d(0,0,0);
+    }
+
+    40%, 43% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        -webkit-transform: translate3d(0, -12px, 0);
+    }
+
+    70% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        -webkit-transform: translate3d(0, -6px, 0);
+    }
+
+    90% {
+        -webkit-transform: translate3d(0,-1px,0);
+    }
+}
+
+@keyframes bounce {
+    from, 20%, 53%, 80%, to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        -webkit-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0);
+    }
+
+    40%, 43% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        -webkit-transform: translate3d(0, -12px, 0);
+        transform: translate3d(0, -12px, 0);
+    }
+
+    70% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+        -webkit-transform: translate3d(0, -6px, 0);
+        transform: translate3d(0, -6px, 0);
+    }
+
+    90% {
+        -webkit-transform: translate3d(0,-1px,0);
+        transform: translate3d(0,-1px,0);
+    }
 }
 
@@ -1311 +1627 @@
 
 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
-#customize-controls .customize-section-title span.customize-action {
+#customize-controls .customize-section-title span.customize-action,
+#customize-outer-theme-controls .customize-section-title span.customize-action {
     font-size: 13px;
     display: block;
@@ -1844 +2161 @@
     }
 
+    .customize-control .date-time-fields select {
+        height: 39px;
+    }
+
+    .date-time-fields .month-field {
+        width: 79px;
+    }
+
+    .date-time-fields .day-field,
+    .date-time-fields .hour-field,
+    .date-time-fields .minute-field {
+        width: 55px;
+    }
+
+    .date-time-fields .year-field {
+        width: 80px;
+    }
+
+    .date-time-fields .date-timezone {
+        line-height: 3.2;
+    }
     .wp-core-ui.wp-customizer .button {
         margin-top: 12px;
@@ -1854 +2192 @@
     }
 
-    .wp-full-overlay.expanded {
+    .wp-full-overlay.expanded,
+    .outer-section-open .wp-full-overlay.expanded {
         margin-left: 0;
     }
@@ -1932 +2271 @@
     }
 
-    #customize-header-actions .button-primary {
-        margin-top: 6px;
+    #publish-settings {
+        height: 31px;
+    }
+
+    #customize-control-changeset_status label {
+        padding-top: 15px;
     }
 
     body.adding-widget div#available-widgets,
-    body.adding-menu-items div#available-menu-items {
+    body.adding-menu-items div#available-menu-items,
+    body.outer-section-open div#customize-outer-theme-controls-wrapper {
         top: 46px;
         left: 0;

trunk/src/wp-admin/customize.php

@@ -28 +28 @@
 
 if ( $wp_customize->changeset_post_id() ) {
-    if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $wp_customize->changeset_post_id() ) ) {
+    $changeset_post = get_post( $wp_customize->changeset_post_id() );
+
+    if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->edit_post, $changeset_post->ID ) ) {
         wp_die(
             '<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
@@ -35 +37 @@
         );
     }
-    if ( in_array( get_post_status( $wp_customize->changeset_post_id() ), array( 'publish', 'trash' ), true ) ) {
+
+    $missed_schedule = (
+        'future' === $changeset_post->post_status &&
+        get_post_time( 'G', true, $changeset_post ) < time()
+    );
+    if ( $missed_schedule ) {
+        wp_publish_post( $changeset_post->ID );
+        wp_die(
+            '<h1>' . __( 'Your scheduled changes just published' ) . '</h1>' .
+            '<p><a href="' . esc_url( remove_query_arg( 'changeset_uuid' ) ) . '">' . __( 'Customize New Changes' ) . '</a></p>',
+            200
+        );
+    }
+
+    if ( in_array( get_post_status( $changeset_post->ID ), array( 'publish', 'trash' ), true ) ) {
         wp_die(
             '<h1>' . __( 'Cheatin&#8217; uh?' ) . '</h1>' .
@@ -133 +149 @@
     <form id="customize-controls" class="wrap wp-full-overlay-sidebar">
         <div id="customize-header-actions" class="wp-full-overlay-header">
-            <?php
-            $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
-            $save_attrs = array();
-            if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ) ) {
-                $save_attrs['style'] = 'display: none';
-            }
-            submit_button( $save_text, 'primary save', 'save', false, $save_attrs );
-            ?>
+            <?php $save_text = $wp_customize->is_theme_active() ? __( 'Publish' ) : __( 'Activate &amp; Publish' ); ?>
+            <div id="customize-save-button-wrapper" class="customize-save-button-wrapper" >
+                <?php submit_button( $save_text, 'primary save', 'save', false ); ?>
+                <button id="publish-settings" class="publish-settings button-primary button dashicons dashicons-admin-generic" aria-label="<?php esc_attr_e( 'Publish Settings' ); ?>" aria-expanded="false" disabled></button>
+            </div>
             <span class="spinner"></span>
             <button type="button" class="customize-controls-preview-toggle">
@@ -204 +217 @@
     </form>
     <div id="customize-preview" class="wp-full-overlay-main"></div>
+    <div id="customize-sidebar-outer-content">
+        <div id="customize-outer-theme-controls-wrapper">
+            <div id="customize-outer-theme-controls">
+                <ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
+            </div>
+        </div>
+    </div>
     <?php
 

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

@@ -360 +360 @@
      * @param {object}  [args] - Additional options for the save request.
      * @param {boolean} [args.autosave=false] - Whether changes will be stored in autosave revision if the changeset has been promoted from an auto-draft.
+     * @param {boolean} [args.force=false] - Send request to update even when there are no changes to submit. This can be used to request the latest status of the changeset on the server.
      * @param {string}  [args.title] - Title to update in the changeset. Optional.
      * @param {string}  [args.date] - Date to update in the changeset. Optional.
@@ -371 +372 @@
             title: null,
             date: null,
-            autosave: false
+            autosave: false,
+            force: false
         }, args );
 
@@ -389 +391 @@
         } );
 
+        // Allow plugins to attach additional params to the settings.
+        api.trigger( 'changeset-save', submittedChanges, submittedArgs );
+
         // Short-circuit when there are no pending changes.
-        if ( _.isEmpty( submittedChanges ) && null === submittedArgs.title && null === submittedArgs.date ) {
+        if ( ! submittedArgs.force && _.isEmpty( submittedChanges ) && null === submittedArgs.title && null === submittedArgs.date ) {
             deferred.resolve( {} );
             return deferred.promise();
         }
-
-        // Allow plugins to attach additional params to the settings.
-        api.trigger( 'changeset-save', submittedChanges, submittedArgs );
 
         // A status would cause a revision to be made, and for this wp.customize.previewer.save() should be used. Status is also disallowed for revisions regardless.
@@ -441 +443 @@
 
             api.state( 'changesetStatus' ).set( data.changeset_status );
+
+            if ( data.changeset_date ) {
+                api.state( 'changesetDate' ).set( data.changeset_date );
+            }
+
             deferred.resolve( data );
             api.trigger( 'changeset-saved', data );
@@ -583 +590 @@
         );
         return equal;
+    };
+
+    /**
+     * Get current timestamp adjusted for server clock time.
+     *
+     * Same functionality as the `current_time( 'mysql', false )` function in PHP.
+     *
+     * @since 4.9.0
+     *
+     * @returns {int} Current timestamp.
+     */
+    api.utils.getCurrentTimestamp = function getCurrentTimestamp() {
+        var currentDate, currentClientTimestamp, timestampDifferential;
+        currentClientTimestamp = _.now();
+        currentDate = new Date( api.settings.initialServerDate.replace( /-/g, '/' ) );
+        timestampDifferential = currentClientTimestamp - api.settings.initialClientTimestamp;
+        timestampDifferential += api.settings.initialClientTimestamp - api.settings.initialServerTimestamp;
+        currentDate.setTime( currentDate.getTime() + timestampDifferential );
+        return currentDate.getTime();
+    };
+
+    /**
+     * Get remaining time of when the date is set.
+     *
+     * @since 4.9.0
+     *
+     * @param {string|int|Date} datetime - Date time or timestamp of the future date.
+     * @return {int} remainingTime - Remaining time in milliseconds.
+     */
+    api.utils.getRemainingTime = function getRemainingTime( datetime ) {
+        var millisecondsDivider = 1000, remainingTime, timestamp;
+        if ( datetime instanceof Date ) {
+            timestamp = datetime.getTime();
+        } else if ( 'string' === typeof datetime ) {
+            timestamp = ( new Date( datetime.replace( /-/g, '/' ) ) ).getTime();
+        } else {
+            timestamp = datetime;
+        }
+
+        remainingTime = timestamp - api.utils.getCurrentTimestamp();
+        remainingTime = Math.ceil( remainingTime / millisecondsDivider );
+        return remainingTime;
     };
 
@@ -1081 +1130 @@
     api.Section = Container.extend({
         containerType: 'section',
+        containerParent: '#customize-theme-controls',
+        containerPaneParent: '.customize-pane-parent',
         defaults: {
             title: '',
@@ -1133 +1184 @@
         embed: function () {
             var inject,
-                section = this,
-                container = $( '#customize-theme-controls' );
+                section = this;
+
+            section.containerParent = api.ensure( section.containerParent );
 
             // Watch for changes to the panel state
@@ -1149 +1201 @@
                             }
                             if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
-                                container.append( section.contentContainer );
+                                section.containerParent.append( section.contentContainer );
                             }
                             section.deferred.embedded.resolve();
@@ -1156 +1208 @@
                 } else {
                     // There is no panel, so embed the section in the root of the customizer
-                    parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
+                    parentContainer = api.ensure( section.containerPaneParent );
                     if ( ! section.headContainer.parent().is( parentContainer ) ) {
                         parentContainer.append( section.headContainer );
                     }
                     if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
-                        container.append( section.contentContainer );
+                        section.containerParent.append( section.contentContainer );
                     }
                     section.deferred.embedded.resolve();
@@ -1298 +1350 @@
                     });
                 } else {
-                    api.panel.each( function( panel ) {
-                        panel.collapse();
-                    });
+                    if ( ! args.allowMultiple ) {
+                        api.panel.each( function( panel ) {
+                            panel.collapse();
+                        });
+                    }
                     expand();
                 }
@@ -1837 +1891 @@
                 }
             });
+        }
+    });
+
+    /**
+     * Class wp.customize.OuterSection.
+     *
+     * Creates section outside of the sidebar, there is no ui to trigger collapse/expand so
+     * it would require custom handling.
+     *
+     * @since 4.9
+     *
+     * @constructor
+     * @augments wp.customize.Section
+     * @augments wp.customize.Container
+     */
+    api.OuterSection = api.Section.extend({
+
+        /**
+         * Initialize.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        initialize: function() {
+            var section = this;
+            section.containerParent = '#customize-outer-theme-controls';
+            section.containerPaneParent = '.customize-outer-pane-parent';
+            return api.Section.prototype.initialize.apply( section, arguments );
+        },
+
+        /**
+         * Overrides api.Section.prototype.onChangeExpanded to prevent collapse/expand effect
+         * on other sections and panels.
+         *
+         * @since 4.9.0
+         *
+         * @param {Boolean}  expanded - The expanded state to transition to.
+         * @param {Object}   [args] - Args.
+         * @param {boolean}  [args.unchanged] - Whether the state is already known to not be changed, and so short-circuit with calling completeCallback early.
+         * @param {Function} [args.completeCallback] - Function to call when the slideUp/slideDown has completed.
+         * @param {Object}   [args.duration] - The duration for the animation.
+         */
+        onChangeExpanded: function( expanded, args ) {
+            var section = this,
+                container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
+                content = section.contentContainer,
+                backBtn = content.find( '.customize-section-back' ),
+                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
+                body = $( 'body' ),
+                expand, panel;
+
+            body.toggleClass( 'outer-section-open', expanded );
+            section.container.toggleClass( 'open', expanded );
+            section.container.removeClass( 'busy' );
+            api.section.each( function( _section ) {
+                if ( 'outer' === _section.params.type && _section.id !== section.id ) {
+                    _section.container.removeClass( 'open' );
+                }
+            } );
+
+            if ( expanded && ! content.hasClass( 'open' ) ) {
+
+                if ( args.unchanged ) {
+                    expand = args.completeCallback;
+                } else {
+                    expand = $.proxy( function() {
+                        section._animateChangeExpanded( function() {
+                            sectionTitle.attr( 'tabindex', '-1' );
+                            backBtn.attr( 'tabindex', '0' );
+
+                            backBtn.focus();
+                            content.css( 'top', '' );
+                            container.scrollTop( 0 );
+
+                            if ( args.completeCallback ) {
+                                args.completeCallback();
+                            }
+                        } );
+
+                        content.addClass( 'open' );
+                    }, this );
+                }
+
+                if ( section.panel() ) {
+                    api.panel( section.panel() ).expand({
+                        duration: args.duration,
+                        completeCallback: expand
+                    });
+                } else {
+                    expand();
+                }
+
+            } else if ( ! expanded && content.hasClass( 'open' ) ) {
+                if ( section.panel() ) {
+                    panel = api.panel( section.panel() );
+                    if ( panel.contentContainer.hasClass( 'skip-transition' ) ) {
+                        panel.collapse();
+                    }
+                }
+                section._animateChangeExpanded( function() {
+                    backBtn.attr( 'tabindex', '-1' );
+                    sectionTitle.attr( 'tabindex', '0' );
+
+                    sectionTitle.focus();
+                    content.css( 'top', '' );
+
+                    if ( args.completeCallback ) {
+                        args.completeCallback();
+                    }
+                } );
+
+                content.removeClass( 'open' );
+
+            } else {
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+            }
         }
     });
@@ -3961 +4134 @@
     });
 
+    /**
+     * Class wp.customize.DateTimeControl.
+     *
+     * @since 4.9.0
+     * @constructor
+     * @augments wp.customize.Control
+     * @augments wp.customize.Class
+     */
+    api.DateTimeControl = api.Control.extend({
+
+        dateInputs: {},
+        inputElements: {},
+        invalidDate: false,
+
+        /**
+         * Initialize behaviors.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        ready: function ready() {
+            var control = this;
+
+            _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
+
+            control.dateInputs = control.container.find( '.date-input' );
+
+            // @todo This needs https://core.trac.wordpress.org/ticket/37964
+            if ( ! control.setting ) {
+                control.setting = new api.Value();
+            }
+
+            if ( ! control.setting.get() && control.params.defaultValue ) {
+                control.setting.set( control.params.defaultValue );
+            }
+
+            control.dateInputs.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 );
+                };
+                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 );
+            control.populateDateInputs();
+        },
+
+        /**
+         * Parse datetime string.
+         *
+         * @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.
+         * @returns {object|null} Returns object containing date components or null if parse error.
+         */
+        parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
+            var matches, date, midDayHour = 12;
+
+            if ( datetime ) {
+                matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
+            }
+
+            if ( ! matches ) {
+                return null;
+            }
+
+            matches.shift();
+
+            date = {
+                year: matches.shift(),
+                month: matches.shift(),
+                day: matches.shift(),
+                hour: matches.shift(),
+                minute: matches.shift(),
+                second: matches.shift()
+            };
+
+            if ( twelveHourFormat ) {
+                date.hour = parseInt( date.hour, 10 );
+                date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
+                date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
+                delete date.second;
+            }
+
+            return date;
+        },
+
+        /**
+         * Validates if input components have valid date and time.
+         *
+         * @since 4.9.0
+         * @return {boolean} If date input fields has error.
+         */
+        validateInputs: function validateInputs() {
+            var control = this, errorMessage;
+
+            control.invalidDate = false;
+
+            _.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
+                var element, el, max, min, maxLength, value;
+
+                if ( ! control.invalidDate ) {
+                    element = control.inputElements[ component ];
+                    el = element.element.get( 0 );
+                    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;
+                    errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
+
+                    el.setCustomValidity( errorMessage );
+                    _.result( el, 'reportValidity' );
+                }
+            } );
+
+            return control.invalidDate;
+        },
+
+        /**
+         * Updates number of days according to the month and year selected.
+         *
+         * @since 4.9.0
+         * @return {void}
+         */
+        updateDaysForMonth: function updateDaysForMonth() {
+            var control = this, daysInMonth, year, month, day;
+
+            month = control.inputElements.month();
+            year = control.inputElements.year();
+            day = control.inputElements.day();
+
+            if ( month && year ) {
+                daysInMonth = new Date( year, month, 0 ).getDate();
+                control.inputElements.day.element.attr( 'max', daysInMonth );
+
+                if ( day > daysInMonth ) {
+                    control.inputElements.day( daysInMonth );
+                }
+            }
+        },
+
+        /**
+         * Updates number of minutes according to the hour selected.
+         *
+         * @since 4.9.0
+         * @return {void}
+         */
+        updateMinutesForHour: function updateMinutesForHour() {
+            var control = this, maxHours = 24, minuteEl;
+
+            if ( control.inputElements.ampm ) {
+                return;
+            }
+
+            minuteEl = control.inputElements.minute.element;
+
+            if ( maxHours === control.inputElements.hour() ) {
+                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' ) );
+            }
+        },
+
+        /**
+         * Populate setting value from the inputs.
+         *
+         * @since 4.9.0
+         * @returns {boolean} If setting updated.
+         */
+        populateSetting: function populateSetting() {
+            var control = this, date;
+
+            if ( control.validateInputs() || ! control.params.allowPastDate && ! control.isFutureDate() ) {
+                return false;
+            }
+
+            date = control.convertInputDateToString();
+            control.setting.set( date );
+            return true;
+        },
+
+        /**
+         * Converts input values to string in Y-m-d H:i:s format.
+         *
+         * @since 4.9.0
+         * @return {string} Date string.
+         */
+        convertInputDateToString: function convertInputDateToString() {
+            var control = this, date = '', dateFormat, hourInTwentyFourHourFormat,
+                getElementValue, pad;
+
+            pad = function( number, padding ) {
+                var zeros;
+                if ( String( number ).length < padding ) {
+                    zeros = padding - String( number ).length;
+                    number = Math.pow( 10, zeros ).toString().substr( 1 ) + String( number );
+                }
+                return number;
+            };
+
+            getElementValue = function( component ) {
+                var value = control.inputElements[ component ].get();
+
+                if ( _.contains( [ 'month', 'day', 'hour', 'minute' ], component ) ) {
+                    value = pad( value, 2 );
+                } else if ( 'year' === component ) {
+                    value = pad( value, 4 );
+                }
+                return value;
+            };
+
+            hourInTwentyFourHourFormat = control.inputElements.ampm ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.ampm() ) : control.inputElements.hour();
+            dateFormat = [ 'year', '-', 'month', '-', 'day', ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ];
+
+            _.each( dateFormat, function( component ) {
+                date += control.inputElements[ component ] ? getElementValue( component ) : component;
+            } );
+
+            return date;
+        },
+
+        /**
+         * Check if the date is in the future.
+         *
+         * @since 4.9.0
+         * @returns {boolean} True if future date.
+         */
+        isFutureDate: function isFutureDate() {
+            var control = this;
+            return 0 < api.utils.getRemainingTime( control.convertInputDateToString() );
+        },
+
+        /**
+         * Convert hour in twelve hour format to twenty four hour format.
+         *
+         * @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 ) {
+            var hourInTwentyFourHourFormat, hour, midDayHour = 12;
+
+            hour = parseInt( hourInTwelveHourFormat, 10 );
+
+            if ( 'pm' === ampm && hour < midDayHour ) {
+                hourInTwentyFourHourFormat = hour + midDayHour;
+            } else if ( 'am' === ampm && midDayHour === hour ) {
+                hourInTwentyFourHourFormat = hour - midDayHour;
+            } else {
+                hourInTwentyFourHourFormat = hour;
+            }
+
+            return String( hourInTwentyFourHourFormat );
+        },
+
+        /**
+         * Populates date inputs in date fields.
+         *
+         * @since 4.9.0
+         * @returns {boolean} Whether the inputs were populated.
+         */
+        populateDateInputs: function populateDateInputs() {
+            var control = this, parsed;
+
+            parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
+
+            if ( ! parsed ) {
+                return false;
+            }
+
+            _.each( control.inputElements, function( element, component ) {
+                element.set( parsed[ component ] );
+            } );
+
+            return true;
+        },
+
+        /**
+         * Toggle future date notification for date control.
+         *
+         * @since 4.9.0
+         * @param {boolean} notify Add or remove the notification.
+         * @return {wp.customize.DateTimeControl}
+         */
+        toggleFutureDateNotification: function toggleFutureDateNotification( notify ) {
+            var control = this, notificationCode, notification;
+
+            notificationCode = 'not_future_date';
+
+            if ( notify ) {
+                notification = new api.Notification( notificationCode, {
+                    type: 'error',
+                    message: api.l10n.futureDateError
+                } );
+                control.notifications.add( notificationCode, notification );
+            } else {
+                control.notifications.remove( notificationCode );
+            }
+
+            return control;
+        }
+    });
+
+    /**
+     * Class PreviewLinkControl.
+     *
+     * @since 4.9.0
+     * @constructor
+     * @augments wp.customize.Control
+     * @augments wp.customize.Class
+     */
+    api.PreviewLinkControl = api.Control.extend({
+
+        previewElements: {},
+
+        /**
+         * Override the templateSelector before embedding the control into the page.
+         *
+         * @since 4.9.0
+         * @return {void}
+         */
+        embed: function() {
+            var control = this;
+            control.templateSelector = 'customize-preview-link-control';
+            return api.Control.prototype.embed.apply( control, arguments );
+        },
+
+        /**
+         * Initialize behaviors.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        ready: function ready() {
+            var control = this, element, component, node, link, input, button;
+
+            _.bindAll( control, 'updatePreviewLink' );
+
+            if ( ! control.setting ) {
+                control.setting = new api.Value();
+            }
+
+            control.container.find( '.preview-control-element' ).each( function() {
+                node = $( this );
+                component = node.data( 'component' );
+                element = new api.Element( node );
+                control.previewElements[ component ] = element;
+                control.elements.push( element );
+            } );
+
+            link = control.previewElements.link;
+            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 );
+            } );
+
+            api.bind( 'ready', control.updatePreviewLink );
+            api.bind( 'change', control.updatePreviewLink );
+            api.state( 'saved' ).bind( control.updatePreviewLink );
+
+            button.element.on( 'click', function( event ) {
+                event.preventDefault();
+                if ( control.setting() ) {
+                    input.element.select();
+                    document.execCommand( 'copy' );
+                    button( button.element.data( 'copied-text' ) );
+                }
+            } );
+
+            link.element.on( 'click', function( event ) {
+                if ( link.element.hasClass( 'disabled' ) ) {
+                    event.preventDefault();
+                }
+            } );
+
+            button.element.on( 'mouseenter', function() {
+                if ( control.setting() ) {
+                    button( button.element.data( 'copy-text' ) );
+                }
+            } );
+        },
+
+        /**
+         * Updates Preview Link
+         *
+         * @since 4.9.0
+         * @return {void}
+         */
+        updatePreviewLink: function updatePreviewLink() {
+            var control = this, unsavedDirtyValues;
+
+            unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
+                unsaved: true
+            } ) );
+
+            control.toggleSaveNotification( unsavedDirtyValues );
+            control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
+            control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
+            control.setting.set( api.previewer.getFrontendPreviewUrl() );
+        },
+
+        /**
+         * Toggles save notification.
+         *
+         * @since 4.9.0
+         * @param {boolean} notify Add or remove notification.
+         * @return {void}
+         */
+        toggleSaveNotification: function toggleSaveNotification( notify ) {
+            var control = this, notificationCode, notification;
+
+            notificationCode = 'changes_not_saved';
+
+            if ( notify ) {
+                notification = new api.Notification( notificationCode, {
+                    type: 'info',
+                    message: api.l10n.saveBeforeShare
+                } );
+                control.notifications.add( notificationCode, notification );
+            } else {
+                control.notifications.remove( notificationCode );
+            }
+        }
+    });
+
     // Change objects contained within the main customize object to Settings.
     api.defaultConstructor = api.Setting;
@@ -4060 +4677 @@
                 }
             );
-            if ( ! api.state( 'saved' ).get() ) {
+            if ( api.settings.changeset.autosaved || ! api.state( 'saved' ).get() ) {
                 params.customize_autosaved = 'on';
             }
@@ -4661 +5278 @@
         background_position: api.BackgroundPositionControl,
         theme:               api.ThemeControl,
+        date_time:           api.DateTimeControl,
         code_editor:         api.CodeEditorControl
     };
     api.panelConstructor = {};
     api.sectionConstructor = {
-        themes: api.ThemesSection
+        themes: api.ThemesSection,
+        outer: api.OuterSection
     };
 
@@ -4837 +5456 @@
     }, api );
 
+    // Define state values.
+    api.state = new api.Values();
+    _.each( [
+        'saved',
+        'autosaved',
+        'saving',
+        'activated',
+        'processing',
+        'paneVisible',
+        'expandedPanel',
+        'expandedSection',
+        'changesetDate',
+        'selectedChangesetDate',
+        'changesetStatus',
+        'selectedChangesetStatus',
+        'remainingTimeToPublish',
+        'previewerAlive',
+        'editShortcutVisibility'
+    ], function( name ) {
+        api.state.create( name );
+    });
+
     $( function() {
         api.settings = window._wpCustomizeSettings;
@@ -4864 +5505 @@
             closeBtn = $( '.customize-controls-close' ),
             saveBtn = $( '#save' ),
+            btnWrapper = $( '#customize-save-button-wrapper' ),
+            publishSettingsBtn = $( '#publish-settings' ),
             footerActions = $( '#customize-footer-actions' );
+
+        saveBtn.show();
+
+        api.section( 'publish_settings', function( section ) {
+            var updateButtonsState, previewLinkControl, previewLinkControlId = 'changeset_preview_link';
+
+            previewLinkControl = new api.PreviewLinkControl( previewLinkControlId, {
+                params: {
+                    section: section.id,
+                    active: true,
+                    priority: 100,
+                    content: '<li id="customize-control-' + previewLinkControlId + '" class="customize-control"></li>'
+                }
+            } );
+
+            api.control.add( previewLinkControlId, previewLinkControl );
+
+            // Make sure publish settings are not available until the theme has been activated.
+            if ( ! api.settings.theme.active ) {
+                section.active.set( false );
+                section.active.link( api.state( 'activated' ) );
+            }
+
+            // Bind visibility of the publish settings button to whether the section is active.
+            updateButtonsState = function() {
+                publishSettingsBtn.toggle( section.active.get() );
+                saveBtn.toggleClass( 'has-next-sibling', section.active.get() );
+            };
+            updateButtonsState();
+            section.active.bind( updateButtonsState );
+
+            section.contentContainer.find( '.customize-action' ).text( api.l10n.updating );
+            section.contentContainer.find( '.customize-section-back' ).removeAttr( 'tabindex' );
+            publishSettingsBtn.prop( 'disabled', false );
+
+            publishSettingsBtn.on( 'click', function( event ) {
+                event.preventDefault();
+                section.expanded.set( ! section.expanded.get() );
+            } );
+
+            section.expanded.bind( function( isExpanded ) {
+                publishSettingsBtn.attr( 'aria-expanded', String( isExpanded ) );
+                publishSettingsBtn.toggleClass( 'active', isExpanded );
+            } );
+
+            api.state( 'changesetStatus' ).bind( function( status ) {
+                if ( 'publish' === status ) {
+                    section.collapse();
+                }
+            } );
+        } );
 
         // Prevent the form from saving when enter is pressed on an input or select element.
@@ -4924 +5618 @@
                     customize_changeset_uuid: api.settings.changeset.uuid
                 };
-                if ( ! api.state( 'saved' ).get() ) {
+                if ( api.settings.changeset.autosaved || ! api.state( 'saved' ).get() ) {
                     queryVars.customize_autosaved = 'on';
                 }
@@ -4960 +5654 @@
                 var previewer = this,
                     deferred = $.Deferred(),
-                    changesetStatus = 'publish',
+                    changesetStatus = api.state( 'selectedChangesetStatus' ).get(),
+                    selectedChangesetDate = api.state( 'selectedChangesetDate' ).get(),
                     processing = api.state( 'processing' ),
                     submitWhenDoneProcessing,
@@ -4966 +5661 @@
                     modifiedWhileSaving = {},
                     invalidSettings = [],
-                    invalidControls;
+                    invalidControls = [],
+                    invalidSettingLessControls = [];
 
                 if ( args && args.status ) {
@@ -5005 +5701 @@
                         } );
                     } );
-                    invalidControls = api.findControlsForSettings( invalidSettings );
+
+                    /**
+                     * Find all invalid setting less controls with notification type error.
+                     */
+                    api.control.each( function( control ) {
+                        if ( ! control.setting || ! control.setting.id && control.active.get() ) {
+                            control.notifications.each( function( notification ) {
+                                if ( 'error' === notification.type ) {
+                                    invalidSettingLessControls.push( [ control ] );
+                                }
+                            } );
+                        }
+                    } );
+
+                    invalidControls = _.union( invalidSettingLessControls, _.values( api.findControlsForSettings( invalidSettings ) ) );
                     if ( ! _.isEmpty( invalidControls ) ) {
-                        _.values( invalidControls )[0][0].focus();
+
+                        invalidControls[0][0].focus();
                         api.unbind( 'change', captureSettingModifiedDuringSave );
 
-                        api.notifications.add( errorCode, new api.Notification( errorCode, {
-                            message: ( 1 === invalidSettings.length ? api.l10n.saveBlockedError.singular : api.l10n.saveBlockedError.plural ).replace( /%s/g, String( invalidSettings.length ) ),
-                            type: 'error',
-                            dismissible: true,
-                            saveFailure: true
-                        } ) );
+                        if ( invalidSettings.length ) {
+                            api.notifications.add( errorCode, new api.Notification( errorCode, {
+                                message: ( 1 === invalidSettings.length ? api.l10n.saveBlockedError.singular : api.l10n.saveBlockedError.plural ).replace( /%s/g, String( invalidSettings.length ) ),
+                                type: 'error',
+                                dismissible: true,
+                                saveFailure: true
+                            } ) );
+                        }
 
                         deferred.rejectWith( previewer, [
@@ -5032 +5745 @@
                         customize_changeset_status: changesetStatus
                     } );
+
                     if ( args && args.date ) {
                         query.customize_changeset_date = args.date;
+                    } else if ( 'future' === changesetStatus && selectedChangesetDate ) {
+                        query.customize_changeset_date = selectedChangesetDate;
                     }
+
                     if ( args && args.title ) {
                         query.customize_changeset_title = args.title;
@@ -5071 +5788 @@
 
                     request.fail( function ( response ) {
+                        var notification, notificationArgs;
+                        notificationArgs = {
+                            type: 'error',
+                            dismissible: true,
+                            fromServer: true,
+                            saveFailure: true
+                        };
 
                         if ( '0' === response ) {
@@ -5088 +5812 @@
                             } );
                         } else if ( response.code ) {
-                            api.notifications.add( response.code, new api.Notification( response.code, {
-                                message: response.message,
-                                type: 'error',
-                                dismissible: true,
-                                fromServer: true,
-                                saveFailure: true
+                            if ( 'not_future_date' === response.code && api.section.has( 'publish_settings' ) && api.section( 'publish_settings' ).active.get() && api.control.has( 'changeset_scheduled_date' ) ) {
+                                api.control( 'changeset_scheduled_date' ).toggleFutureDateNotification( true ).focus();
+                            } else {
+                                notification = new api.Notification( response.code, _.extend( notificationArgs, {
+                                    message: response.message
+                                } ) );
+                            }
+                        } else {
+                            notification = new api.Notification( 'unknown_error', _.extend( notificationArgs, {
+                                message: api.l10n.serverSaveError
                             } ) );
-                        } else {
-                            api.notifications.add( 'unknown_error', new api.Notification( 'unknown_error', {
-                                message: api.l10n.serverSaveError,
-                                type: 'error',
-                                dismissible: true,
-                                fromServer: true,
-                                saveFailure: true
-                            } ) );
+                        }
+
+                        if ( notification ) {
+                            api.notifications.add( notification.code, notification );
                         }
 
@@ -5114 +5838 @@
                         deferred.rejectWith( previewer, [ response ] );
                         api.trigger( 'error', response );
+
+                        // Start a new changeset if the underlying changeset was published.
+                        if ( 'changeset_already_published' === response.code && response.next_changeset_uuid ) {
+                            api.settings.changeset.uuid = response.next_changeset_uuid;
+                            api.state( 'changesetStatus' ).set( '' );
+                            parent.send( 'changeset-uuid', api.settings.changeset.uuid );
+                            api.previewer.send( 'changeset-uuid', api.settings.changeset.uuid );
+                        }
                     } );
 
@@ -5121 +5853 @@
 
                         api.state( 'changesetStatus' ).set( response.changeset_status );
+                        api.state( 'changesetDate' ).set( response.changeset_date );
+
                         if ( 'publish' === response.changeset_status ) {
 
@@ -5174 +5908 @@
 
                 return deferred.promise();
+            },
+
+            /**
+             * Builds the front preview url with the current state of customizer.
+             *
+             * @since 4.9
+             *
+             * @return {string} Preview url.
+             */
+            getFrontendPreviewUrl: function() {
+                var previewer = this,
+                    a = document.createElement( 'a' ),
+                    params = {};
+
+                if ( api.state( 'changesetStatus' ).get() && 'publish' !== api.state( 'changesetStatus' ).get() ) {
+                    params.customize_changeset_uuid = api.settings.changeset.uuid;
+                }
+
+                a.href = previewer.previewUrl();
+                a.search = $.param( params );
+
+                return a.href;
             }
         });
@@ -5300 +6056 @@
 
         // Save and activated states
-        (function() {
-            var state = new api.Values(),
-                saved = state.create( 'saved' ),
-                saving = state.create( 'saving' ),
-                activated = state.create( 'activated' ),
-                processing = state.create( 'processing' ),
-                paneVisible = state.create( 'paneVisible' ),
-                expandedPanel = state.create( 'expandedPanel' ),
-                expandedSection = state.create( 'expandedSection' ),
-                changesetStatus = state.create( 'changesetStatus' ),
-                previewerAlive = state.create( 'previewerAlive' ),
-                editShortcutVisibility  = state.create( 'editShortcutVisibility' ),
+        (function( state ) {
+            var saved = state.instance( 'saved' ),
+                saving = state.instance( 'saving' ),
+                activated = state.instance( 'activated' ),
+                processing = state.instance( 'processing' ),
+                paneVisible = state.instance( 'paneVisible' ),
+                expandedPanel = state.instance( 'expandedPanel' ),
+                expandedSection = state.instance( 'expandedSection' ),
+                changesetStatus = state.instance( 'changesetStatus' ),
+                selectedChangesetStatus = state.instance( 'selectedChangesetStatus' ),
+                changesetDate = state.instance( 'changesetDate' ),
+                selectedChangesetDate = state.instance( 'selectedChangesetDate' ),
+                previewerAlive = state.instance( 'previewerAlive' ),
+                editShortcutVisibility  = state.instance( 'editShortcutVisibility' ),
                 populateChangesetUuidParam;
 
             state.bind( 'change', function() {
                 var canSave;
+
+                btnWrapper.removeClass( 'button-see-me' );
 
                 if ( ! activated() ) {
                     saveBtn.val( api.l10n.activate );
                     closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
+                    publishSettingsBtn.prop( 'disabled', false );
 
                 } else if ( '' === changesetStatus.get() && saved() ) {
-                    saveBtn.val( api.l10n.saved );
+                    if ( api.settings.changeset.currentUserCanPublish ) {
+                        saveBtn.val( api.l10n.published );
+                    } else {
+                        saveBtn.val( api.l10n.saved );
+                    }
+                    publishSettingsBtn.prop( 'disabled', true );
                     closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
 
                 } else {
-                    saveBtn.val( api.l10n.save );
+                    if ( 'draft' === selectedChangesetStatus() ) {
+                        if ( saved() && selectedChangesetStatus() === changesetStatus() ) {
+                            saveBtn.val( api.l10n.draftSaved );
+                        } else {
+                            saveBtn.val( api.l10n.saveDraft );
+                        }
+                    } else if ( 'future' === selectedChangesetStatus() ) {
+                        if ( saved() && selectedChangesetStatus() === changesetStatus() ) {
+                            if ( changesetDate.get() !== selectedChangesetDate.get() ) {
+                                saveBtn.val( api.l10n.schedule );
+                                btnWrapper.addClass( 'button-see-me' );
+                            } else {
+                                saveBtn.val( api.l10n.scheduled );
+                            }
+                        } else {
+                            btnWrapper.addClass( 'button-see-me' );
+                            saveBtn.val( api.l10n.schedule );
+                        }
+                    } else if ( ! api.settings.changeset.currentUserCanPublish ) {
+                        selectedChangesetStatus( 'draft' );
+                    } else {
+                        saveBtn.val( api.l10n.publish );
+                    }
                     closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
+                    publishSettingsBtn.prop( 'disabled', false );
                 }
 
@@ -5334 +6123 @@
                  * and if the theme is not active or the changeset exists but is not published.
                  */
-                canSave = ! saving() && ( ! activated() || ! saved() || ( '' !== changesetStatus() && 'publish' !== changesetStatus() ) );
+                canSave = ! saving() && ( ! activated() || ! saved() || ( changesetStatus() !== selectedChangesetStatus() && '' !== changesetStatus() ) || ( 'future' === selectedChangesetStatus() && changesetDate.get() !== selectedChangesetDate.get() ) );
 
                 saveBtn.prop( 'disabled', ! canSave );
             });
+
+            selectedChangesetStatus.validate = function( status ) {
+                if ( '' === status || 'auto-draft' === status ) {
+                    return null;
+                }
+                return status;
+            };
 
             // Set default states.
             changesetStatus( api.settings.changeset.status );
+            changesetDate( api.settings.changeset.publishDate );
+            selectedChangesetStatus( '' === api.settings.changeset.status || 'auto-draft' === api.settings.changeset.status ? 'publish' : api.settings.changeset.status );
+            selectedChangesetStatus.link( changesetStatus ); // Ensure that direct updates to status on server via wp.customizer.previewer.save() will update selection.
             saved( true );
             if ( '' === changesetStatus() ) { // Handle case for loading starter content.
@@ -5425 +6224 @@
             };
 
+            /**
+             * Deactivate themes section if changeset status is not auto-draft
+             */
+            api.section( 'themes', function( section ) {
+                var canActivate;
+
+                canActivate = function() {
+                    return ! changesetStatus() || 'auto-draft' === changesetStatus();
+                };
+
+                section.active.validate = canActivate;
+                section.active.set( canActivate() );
+                changesetStatus.bind( function() {
+                    section.active.set( canActivate() );
+                } );
+            } );
+
             // Show changeset UUID in URL when in branching mode and there is a saved changeset.
             if ( api.settings.changeset.branching ) {
@@ -5431 +6247 @@
                 } );
             }
-
-            // Expose states to the API.
-            api.state = state;
-        }());
-
-        // Set up autosave prompt.
+        }( api.state ) );
+
+        // Set up initial notifications.
         (function() {
 
@@ -5523 +6336 @@
                 onStateChange = function() {
                     api.notifications.remove( code );
-                    api.state( 'saved' ).unbind( onStateChange );
-                    api.state( 'saving' ).unbind( onStateChange );
+                    api.unbind( 'change', onStateChange );
                     api.state( 'changesetStatus' ).unbind( onStateChange );
                 };
-                api.state( 'saved' ).bind( onStateChange );
-                api.state( 'saving' ).bind( onStateChange );
+                api.bind( 'change', onStateChange );
                 api.state( 'changesetStatus' ).bind( onStateChange );
             }
@@ -5554 +6365 @@
             event.preventDefault();
         }).keydown( function( event ) {
-            if ( 9 === event.which ) // tab
+            if ( 9 === event.which ) { // Tab.
                 return;
-            if ( 13 === event.which ) // enter
+            }
+            if ( 13 === event.which ) { // Enter.
                 api.previewer.save();
+            }
             event.preventDefault();
         });
 
         closeBtn.keydown( function( event ) {
-            if ( 9 === event.which ) // tab
+            if ( 9 === event.which ) { // Tab.
                 return;
-            if ( 13 === event.which ) // enter
+            }
+            if ( 13 === event.which ) { // Enter.
                 this.click();
+            }
             event.preventDefault();
         });
@@ -5940 +6755 @@
                  * when customize-loader.js is used.
                  */
-                if ( isInsideIframe && isCleanState() ) {
+                if ( isInsideIframe || isCleanState() ) {
                     clearedToClose.resolve();
                 } else if ( confirm( api.l10n.saveAlert ) ) {
@@ -6221 +7036 @@
             });
         })();
+
+        /**
+         * Publish settings section and controls.
+         */
+        api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
+            $.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
+                var radioNodes, statusElement, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
+
+                radioNodes = statusControl.container.find( 'input[type=radio][name]' );
+                statusElement = new api.Element( radioNodes );
+                statusControl.elements.push( statusElement );
+
+                statusElement.sync( api.state( 'selectedChangesetStatus' ) );
+                statusElement.set( api.state( 'selectedChangesetStatus' ).get() );
+
+                dateControl.notifications.alt = true;
+                dateControl.deferred.embedded.done( function() {
+                    api.state( 'selectedChangesetDate' ).sync( dateControl.setting );
+                    api.state( 'selectedChangesetDate' ).set( dateControl.setting() );
+                } );
+
+                publishWhenTime = function() {
+                    var publishSettingsSection;
+
+                    api.state( 'selectedChangesetStatus' ).set( 'publish' );
+                    publishSettingsSection = api.section( 'publish_settings' );
+                    if ( publishSettingsSection ) {
+                        publishSettingsSection.collapse();
+                    }
+                    api.previewer.save();
+                };
+
+                // Start countdown for when the dateTime arrives, or clear interval when it is .
+                updateTimeArrivedPoller = function() {
+                    var shouldPoll = (
+                        'future' === api.state( 'changesetStatus' ).get() &&
+                        'future' === api.state( 'selectedChangesetStatus' ).get() &&
+                        api.state( 'changesetDate' ).get() &&
+                        api.state( 'selectedChangesetDate' ).get() === api.state( 'changesetDate' ).get() &&
+                        api.utils.getRemainingTime( api.state( 'changesetDate' ).get() ) >= 0
+                    );
+
+                    if ( shouldPoll && ! pollInterval ) {
+                        pollInterval = setInterval( function() {
+                            var remainingTime = api.utils.getRemainingTime( api.state( 'changesetDate' ).get() );
+                            api.state( 'remainingTimeToPublish' ).set( remainingTime );
+                            if ( remainingTime <= 0 ) {
+                                clearInterval( pollInterval );
+                                pollInterval = 0;
+                                publishWhenTime();
+                            }
+                        }, timeArrivedPollingInterval );
+                    } else if ( ! shouldPoll && pollInterval ) {
+                        clearInterval( pollInterval );
+                        pollInterval = 0;
+                    }
+                };
+
+                api.state( 'changesetDate' ).bind( updateTimeArrivedPoller );
+                api.state( 'selectedChangesetDate' ).bind( updateTimeArrivedPoller );
+                api.state( 'changesetStatus' ).bind( updateTimeArrivedPoller );
+                api.state( 'selectedChangesetStatus' ).bind( updateTimeArrivedPoller );
+                updateTimeArrivedPoller();
+
+                // Ensure dateControl only appears when selected status is future.
+                dateControl.active.validate = function() {
+                    return 'future' === statusElement.get();
+                };
+                toggleDateControl = function( value ) {
+                    dateControl.active.set( 'future' === value );
+                };
+                toggleDateControl( statusElement.get() );
+                statusElement.bind( toggleDateControl );
+
+                // Show notification on date control when status is future but it isn't a future date.
+                api.state( 'saving' ).bind( function( isSaving ) {
+                    if ( isSaving && 'future' === api.state( 'selectedChangesetStatus' ).get() ) {
+                        dateControl.toggleFutureDateNotification( ! dateControl.isFutureDate() );
+                    }
+                } );
+            } );
+        } );
 
         // Toggle visibility of Header Video notice when active state change.

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

@@ -748 +748 @@
  */
 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-new-menu-control.php' );
+
+/**
+ * WP_Customize_Date_Time_Control class.
+ */
+require_once( ABSPATH . WPINC . '/customize/class-wp-customize-date-time-control.php' );

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

@@ -597 +597 @@
      */
     public function establish_loaded_changeset() {
+        if ( empty( $this->_changeset_uuid ) ) {
+            $changeset_uuid = null;
+
+            if ( ! $this->branching() ) {
+                $unpublished_changeset_posts = $this->get_changeset_posts( array(
+                    'post_status' => array_diff( get_post_stati(), array( 'auto-draft', 'publish', 'trash', 'inherit', 'private' ) ),
+                    'exclude_restore_dismissed' => false,
+                    'posts_per_page' => 1,
+                    'order' => 'DESC',
+                    'orderby' => 'date',
+                ) );
+                $unpublished_changeset_post = array_shift( $unpublished_changeset_posts );
+                if ( ! empty( $unpublished_changeset_post ) && wp_is_uuid( $unpublished_changeset_post->post_name ) ) {
+                    $changeset_uuid = $unpublished_changeset_post->post_name;
+                }
+            }
+
+            // If no changeset UUID has been set yet, then generate a new one.
+            if ( empty( $changeset_uuid ) ) {
+                $changeset_uuid = wp_generate_uuid4();
+            }
+
+            $this->_changeset_uuid = $changeset_uuid;
+        }
+    }
+
+    /**
+     * Callback to validate a theme once it is loaded
+     *
+     * @since 3.4.0
+     */
+    public function after_setup_theme() {
+        $doing_ajax_or_is_customized = ( $this->doing_ajax() || isset( $_POST['customized'] ) );
+        if ( ! $doing_ajax_or_is_customized && ! validate_current_theme() ) {
+            wp_redirect( 'themes.php?broken=true' );
+            exit;
+        }
+    }
+
+    /**
+     * If the theme to be previewed isn't the active theme, add filter callbacks
+     * to swap it out at runtime.
+     *
+     * @since 3.4.0
+     */
+    public function start_previewing_theme() {
+        // Bail if we're already previewing.
+        if ( $this->is_preview() ) {
+            return;
+        }
+
+        $this->previewing = true;
+
+        if ( ! $this->is_theme_active() ) {
+            add_filter( 'template', array( $this, 'get_template' ) );
+            add_filter( 'stylesheet', array( $this, 'get_stylesheet' ) );
+            add_filter( 'pre_option_current_theme', array( $this, 'current_theme' ) );
+
+            // @link: https://core.trac.wordpress.org/ticket/20027
+            add_filter( 'pre_option_stylesheet', array( $this, 'get_stylesheet' ) );
+            add_filter( 'pre_option_template', array( $this, 'get_template' ) );
+
+            // Handle custom theme roots.
+            add_filter( 'pre_option_stylesheet_root', array( $this, 'get_stylesheet_root' ) );
+            add_filter( 'pre_option_template_root', array( $this, 'get_template_root' ) );
+        }
+
+        /**
+         * Fires once the Customizer theme preview has started.
+         *
+         * @since 3.4.0
+         *
+         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
+         */
+        do_action( 'start_previewing_theme', $this );
+    }
+
+    /**
+     * Stop previewing the selected theme.
+     *
+     * Removes filters to change the current theme.
+     *
+     * @since 3.4.0
+     */
+    public function stop_previewing_theme() {
+        if ( ! $this->is_preview() ) {
+            return;
+        }
+
+        $this->previewing = false;
+
+        if ( ! $this->is_theme_active() ) {
+            remove_filter( 'template', array( $this, 'get_template' ) );
+            remove_filter( 'stylesheet', array( $this, 'get_stylesheet' ) );
+            remove_filter( 'pre_option_current_theme', array( $this, 'current_theme' ) );
+
+            // @link: https://core.trac.wordpress.org/ticket/20027
+            remove_filter( 'pre_option_stylesheet', array( $this, 'get_stylesheet' ) );
+            remove_filter( 'pre_option_template', array( $this, 'get_template' ) );
+
+            // Handle custom theme roots.
+            remove_filter( 'pre_option_stylesheet_root', array( $this, 'get_stylesheet_root' ) );
+            remove_filter( 'pre_option_template_root', array( $this, 'get_template_root' ) );
+        }
+
+        /**
+         * Fires once the Customizer theme preview has stopped.
+         *
+         * @since 3.4.0
+         *
+         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
+         */
+        do_action( 'stop_previewing_theme', $this );
+    }
+
+    /**
+     * Gets whether settings are or will be previewed.
+     *
+     * @since 4.9.0
+     * @see WP_Customize_Setting::preview()
+     *
+     * @return bool
+     */
+    public function settings_previewed() {
+        return $this->settings_previewed;
+    }
+
+    /**
+     * Gets whether data from a changeset's autosaved revision should be loaded if it exists.
+     *
+     * @since 4.9.0
+     * @see WP_Customize_Manager::changeset_data()
+     *
+     * @return bool Is using autosaved changeset revision.
+     */
+    public function autosaved() {
+        return $this->autosaved;
+    }
+
+    /**
+     * Whether the changeset branching is allowed.
+     *
+     * @since 4.9.0
+     * @see WP_Customize_Manager::establish_loaded_changeset()
+     *
+     * @return bool Is changeset branching.
+     */
+    public function branching() {
 
         /**
@@ -625 +773 @@
         $this->branching = apply_filters( 'customize_changeset_branching', $this->branching, $this );
 
-        if ( empty( $this->_changeset_uuid ) ) {
-            $changeset_uuid = null;
-
-            if ( ! $this->branching ) {
-                $unpublished_changeset_posts = $this->get_changeset_posts( array(
-                    'post_status' => array_diff( get_post_stati(), array( 'auto-draft', 'publish', 'trash', 'inherit', 'private' ) ),
-                    'exclude_restore_dismissed' => false,
-                    'posts_per_page' => 1,
-                    'order' => 'DESC',
-                    'orderby' => 'date',
-                ) );
-                $unpublished_changeset_post = array_shift( $unpublished_changeset_posts );
-                if ( ! empty( $unpublished_changeset_post ) && wp_is_uuid( $unpublished_changeset_post->post_name ) ) {
-                    $changeset_uuid = $unpublished_changeset_post->post_name;
-                }
-            }
-
-            // If no changeset UUID has been set yet, then generate a new one.
-            if ( empty( $changeset_uuid ) ) {
-                $changeset_uuid = wp_generate_uuid4();
-            }
-
-            $this->_changeset_uuid = $changeset_uuid;
-        }
-    }
-
-    /**
-     * Callback to validate a theme once it is loaded
-     *
-     * @since 3.4.0
-     */
-    public function after_setup_theme() {
-        $doing_ajax_or_is_customized = ( $this->doing_ajax() || isset( $_POST['customized'] ) );
-        if ( ! $doing_ajax_or_is_customized && ! validate_current_theme() ) {
-            wp_redirect( 'themes.php?broken=true' );
-            exit;
-        }
-    }
-
-    /**
-     * If the theme to be previewed isn't the active theme, add filter callbacks
-     * to swap it out at runtime.
-     *
-     * @since 3.4.0
-     */
-    public function start_previewing_theme() {
-        // Bail if we're already previewing.
-        if ( $this->is_preview() ) {
-            return;
-        }
-
-        $this->previewing = true;
-
-        if ( ! $this->is_theme_active() ) {
-            add_filter( 'template', array( $this, 'get_template' ) );
-            add_filter( 'stylesheet', array( $this, 'get_stylesheet' ) );
-            add_filter( 'pre_option_current_theme', array( $this, 'current_theme' ) );
-
-            // @link: https://core.trac.wordpress.org/ticket/20027
-            add_filter( 'pre_option_stylesheet', array( $this, 'get_stylesheet' ) );
-            add_filter( 'pre_option_template', array( $this, 'get_template' ) );
-
-            // Handle custom theme roots.
-            add_filter( 'pre_option_stylesheet_root', array( $this, 'get_stylesheet_root' ) );
-            add_filter( 'pre_option_template_root', array( $this, 'get_template_root' ) );
-        }
-
-        /**
-         * Fires once the Customizer theme preview has started.
-         *
-         * @since 3.4.0
-         *
-         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
-         */
-        do_action( 'start_previewing_theme', $this );
-    }
-
-    /**
-     * Stop previewing the selected theme.
-     *
-     * Removes filters to change the current theme.
-     *
-     * @since 3.4.0
-     */
-    public function stop_previewing_theme() {
-        if ( ! $this->is_preview() ) {
-            return;
-        }
-
-        $this->previewing = false;
-
-        if ( ! $this->is_theme_active() ) {
-            remove_filter( 'template', array( $this, 'get_template' ) );
-            remove_filter( 'stylesheet', array( $this, 'get_stylesheet' ) );
-            remove_filter( 'pre_option_current_theme', array( $this, 'current_theme' ) );
-
-            // @link: https://core.trac.wordpress.org/ticket/20027
-            remove_filter( 'pre_option_stylesheet', array( $this, 'get_stylesheet' ) );
-            remove_filter( 'pre_option_template', array( $this, 'get_template' ) );
-
-            // Handle custom theme roots.
-            remove_filter( 'pre_option_stylesheet_root', array( $this, 'get_stylesheet_root' ) );
-            remove_filter( 'pre_option_template_root', array( $this, 'get_template_root' ) );
-        }
-
-        /**
-         * Fires once the Customizer theme preview has stopped.
-         *
-         * @since 3.4.0
-         *
-         * @param WP_Customize_Manager $this WP_Customize_Manager instance.
-         */
-        do_action( 'stop_previewing_theme', $this );
-    }
-
-    /**
-     * Gets whether settings are or will be previewed.
-     *
-     * @since 4.9.0
-     * @see WP_Customize_Setting::preview()
-     *
-     * @return bool
-     */
-    public function settings_previewed() {
-        return $this->settings_previewed;
+        return $this->branching;
     }
 
@@ -764 +788 @@
     public function changeset_uuid() {
         if ( empty( $this->_changeset_uuid ) ) {
-            throw new Exception( 'Changeset UUID has not been set.' ); // @todo Replace this with a call to `WP_Customize_Manager::establish_loaded_changeset()` during 4.9-beta2.
+            $this->establish_loaded_changeset();
         }
         return $this->_changeset_uuid;
@@ -982 +1006 @@
 
     /**
+     * Dismiss all of the current user's auto-drafts (other than the present one).
+     *
+     * @since 4.9.0
+     * @return int The number of auto-drafts that were dismissed.
+     */
+    protected function dismiss_user_auto_draft_changesets() {
+        $changeset_autodraft_posts = $this->get_changeset_posts( array(
+            'post_status' => 'auto-draft',
+            'exclude_restore_dismissed' => true,
+            'posts_per_page' => -1,
+        ) );
+        $dismissed = 0;
+        foreach ( $changeset_autodraft_posts as $autosave_autodraft_post ) {
+            if ( $autosave_autodraft_post->ID === $this->changeset_post_id() ) {
+                continue;
+            }
+            if ( update_post_meta( $autosave_autodraft_post->ID, '_customize_restore_dismissed', true ) ) {
+                $dismissed++;
+            }
+        }
+        return $dismissed;
+    }
+
+    /**
      * Get the changeset post id for the loaded changeset.
      *
@@ -1051 +1099 @@
             $this->_changeset_data = array();
         } else {
-            if ( $this->autosaved ) {
+            if ( $this->autosaved() ) {
                 $autosave_post = wp_get_post_autosave( $changeset_post_id );
                 if ( $autosave_post ) {
@@ -1973 +2021 @@
             'changeset' => array(
                 'uuid' => $this->changeset_uuid(),
-                'autosaved' => $this->autosaved,
+                'autosaved' => $this->autosaved(),
             ),
             'timeouts' => array(
@@ -2346 +2394 @@
         } else {
             $response = $r;
+            $changeset_post = get_post( $this->changeset_post_id() );
 
             // Dismiss all other auto-draft changeset posts for this user (they serve like autosave revisions), as there should only be one.
             if ( $is_new_changeset ) {
-                $changeset_autodraft_posts = $this->get_changeset_posts( array(
-                    'post_status' => 'auto-draft',
-                    'exclude_restore_dismissed' => true,
-                    'posts_per_page' => -1,
-                ) );
-                foreach ( $changeset_autodraft_posts as $autosave_autodraft_post ) {
-                    if ( $autosave_autodraft_post->ID !== $this->changeset_post_id() ) {
-                        update_post_meta( $autosave_autodraft_post->ID, '_customize_restore_dismissed', true );
-                    }
-                }
+                $this->dismiss_user_auto_draft_changesets();
             }
 
             // Note that if the changeset status was publish, then it will get set to trash if revisions are not supported.
-            $response['changeset_status'] = get_post_status( $this->changeset_post_id() );
+            $response['changeset_status'] = $changeset_post->post_status;
             if ( $is_publish && 'trash' === $response['changeset_status'] ) {
                 $response['changeset_status'] = 'publish';
             }
 
-            if ( 'publish' === $response['changeset_status'] ) {
+            if ( 'future' === $response['changeset_status'] ) {
+                $response['changeset_date'] = $changeset_post->post_date;
+            }
+
+            if ( 'publish' === $response['changeset_status'] || 'trash' === $response['changeset_status'] ) {
                 $response['next_changeset_uuid'] = wp_generate_uuid4();
             }
@@ -2435 +2479 @@
             $existing_status = get_post_status( $changeset_post_id );
             if ( 'publish' === $existing_status || 'trash' === $existing_status ) {
-                return new WP_Error( 'changeset_already_published' );
+                return new WP_Error(
+                    'changeset_already_published',
+                    __( 'The previous set of changes already been published. Please try saving your current set of changes again.' ),
+                    array(
+                        'next_changeset_uuid' => wp_generate_uuid4(),
+                    )
+                );
             }
 
@@ -2454 +2504 @@
             $is_future_dated = ( mysql2date( 'U', $args['date_gmt'], false ) > mysql2date( 'U', $now, false ) );
             if ( ! $is_future_dated ) {
-                return new WP_Error( 'not_future_date' ); // Only future dates are allowed.
+                return new WP_Error( 'not_future_date', __( 'You must supply a future date to schedule.' ) ); // Only future dates are allowed.
             }
 
@@ -2469 +2519 @@
             $changeset_post = get_post( $changeset_post_id );
             if ( mysql2date( 'U', $changeset_post->post_date_gmt, false ) <= mysql2date( 'U', $now, false ) ) {
-                return new WP_Error( 'not_future_date' );
+                return new WP_Error( 'not_future_date', __( 'You must supply a future date to schedule.' ) );
             }
         }
@@ -3057 +3107 @@
 
         if ( empty( $changeset_post_id ) || 'auto-draft' === get_post_status( $changeset_post_id ) ) {
-            $changeset_autodraft_posts = $this->get_changeset_posts( array(
-                'post_status' => 'auto-draft',
-                'exclude_restore_dismissed' => true,
-                'posts_per_page' => -1,
-            ) );
-            $dismissed = 0;
-            foreach ( $changeset_autodraft_posts as $autosave_autodraft_post ) {
-                if ( $autosave_autodraft_post->ID === $changeset_post_id ) {
-                    continue;
-                }
-                if ( update_post_meta( $autosave_autodraft_post->ID, '_customize_restore_dismissed', true ) ) {
-                    $dismissed++;
-                }
-            }
+            $dismissed = $this->dismiss_user_auto_draft_changesets();
             if ( $dismissed > 0 ) {
                 wp_send_json_success( 'auto_draft_dismissed' );
             } else {
-                wp_send_json_error( 'no_autosave_to_delete', 404 );
+                wp_send_json_error( 'no_auto_draft_to_delete', 404 );
             }
         } else {
@@ -3090 +3127 @@
                 }
             } else {
-                wp_send_json_error( 'no_autosave_to_delete', 404 );
+                wp_send_json_error( 'no_autosave_revision_to_delete', 404 );
             }
         }
@@ -3517 +3554 @@
             </ul>
         </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>
+            <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>
+            </div>
+        </script>
         <?php
     }
@@ -3878 +3930 @@
         $autosave_autodraft_post = null;
         $changeset_post_id = $this->changeset_post_id();
-        if ( ! $this->saved_starter_content_changeset && ! $this->autosaved ) {
+        if ( ! $this->saved_starter_content_changeset && ! $this->autosaved() ) {
             if ( $changeset_post_id ) {
                 $autosave_revision_post = wp_get_post_autosave( $changeset_post_id );
@@ -3894 +3946 @@
 
         // Prepare Customizer settings to pass to JavaScript.
+        $changeset_post = null;
+        if ( $changeset_post_id ) {
+            $changeset_post = get_post( $changeset_post_id );
+        }
+
         $settings = array(
             'changeset' => array(
                 'uuid' => $this->changeset_uuid(),
-                'branching' => $this->branching,
-                'autosaved' => $this->autosaved,
+                'branching' => $this->branching(),
+                'autosaved' => $this->autosaved(),
                 'hasAutosaveRevision' => ! empty( $autosave_revision_post ),
                 'latestAutoDraftUuid' => $autosave_autodraft_post ? $autosave_autodraft_post->post_name : null,
-                'status' => $changeset_post_id ? get_post_status( $changeset_post_id ) : '',
+                'status' => $changeset_post ? $changeset_post->post_status : '',
+                'currentUserCanPublish' => current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ),
+                'publishDate' => $changeset_post ? $changeset_post->post_date : '', // @todo Only if future status? Rename to just date?
             ),
+            'initialServerDate' => current_time( 'mysql', false ),
+            'initialServerTimestamp' => floor( microtime( true ) * 1000 ),
+            'initialClientTimestamp' => -1, // To be set with JS below.
             'timeouts' => array(
                 'windowRefresh' => 250,
@@ -3958 +4020 @@
         <script type="text/javascript">
             var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>;
+            _wpCustomizeSettings.initialClientTimestamp = _.now();
             _wpCustomizeSettings.controls = {};
             _wpCustomizeSettings.settings = {};
@@ -4048 +4111 @@
         $this->register_control_type( 'WP_Customize_Theme_Control' );
         $this->register_control_type( 'WP_Customize_Code_Editor_Control' );
+        $this->register_control_type( 'WP_Customize_Date_Time_Control' );
+
+        /* Publish Settings */
+
+        $this->add_section( 'publish_settings', array(
+            'title' => __( 'Publish Settings' ),
+            'priority' => 0,
+            'capability' => 'customize',
+            'type' => 'outer',
+            'active_callback' => array( $this, 'is_theme_active' ),
+        ) );
+
+        /* Publish Settings Controls */
+        $status_choices = array(
+            'publish' => __( 'Publish' ),
+            'draft' => __( 'Save Draft' ),
+            'future' => __( 'Schedule' ),
+        );
+
+        if ( ! current_user_can( get_post_type_object( 'customize_changeset' )->cap->publish_posts ) ) {
+            unset( $status_choices['publish'] );
+        }
+
+        $this->add_control( 'changeset_status', array(
+            'section' => 'publish_settings',
+            'settings' => array(),
+            'type' => 'radio',
+            'label' => __( 'Action' ),
+            'choices' => $status_choices,
+            'capability' => 'customize',
+        ) );
+
+        if ( $this->changeset_post_id() && 'future' === get_post_status( $this->changeset_post_id() ) ) {
+            $initial_date = get_the_time( 'Y-m-d H:i:s', $this->changeset_post_id() );
+        } else {
+            $initial_date = current_time( 'mysql', false );
+        }
+        $this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
+            'section' => 'publish_settings',
+            'settings' => array(),
+            'type' => 'date_time',
+            'min_year' => date( 'Y' ),
+            'allow_past_date' => false,
+            'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
+            'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
+            'capability' => 'customize',
+            'default_value' => $initial_date,
+        ) ) );
 
         /* Themes */

trunk/src/wp-includes/js/customize-preview.js

@@ -673 +673 @@
 
     $( function() {
-        var bg, setValue;
+        var bg, setValue, handleUpdatedChangesetUuid;
 
         api.settings = window._wpCustomizeSettings;
@@ -766 +766 @@
         });
 
+        /**
+         * Handle update to changeset UUID.
+         *
+         * @param {string} uuid - UUID.
+         * @returns {void}
+         */
+        handleUpdatedChangesetUuid = function( uuid ) {
+            api.settings.changeset.uuid = uuid;
+
+            // Update UUIDs in links and forms.
+            $( document.body ).find( 'a[href], area' ).each( function() {
+                api.prepareLinkPreview( this );
+            } );
+            $( document.body ).find( 'form' ).each( function() {
+                api.prepareFormPreview( this );
+            } );
+
+            /*
+             * Replace the UUID in the URL. Note that the wrapped history.replaceState()
+             * will handle injecting the current api.settings.changeset.uuid into the URL,
+             * so this is merely to trigger that logic.
+             */
+            if ( history.replaceState ) {
+                history.replaceState( currentHistoryState, '', location.href );
+            }
+        };
+
+        api.preview.bind( 'changeset-uuid', handleUpdatedChangesetUuid );
+
         api.preview.bind( 'saved', function( response ) {
             if ( response.next_changeset_uuid ) {
-                api.settings.changeset.uuid = response.next_changeset_uuid;
-
-                // Update UUIDs in links and forms.
-                $( document.body ).find( 'a[href], area' ).each( function() {
-                    api.prepareLinkPreview( this );
-                } );
-                $( document.body ).find( 'form' ).each( function() {
-                    api.prepareFormPreview( this );
-                } );
-
-                /*
-                 * Replace the UUID in the URL. Note that the wrapped history.replaceState()
-                 * will handle injecting the current api.settings.changeset.uuid into the URL,
-                 * so this is merely to trigger that logic.
-                 */
-                if ( history.replaceState ) {
-                    history.replaceState( currentHistoryState, '', location.href );
-                }
-            }
-
+                handleUpdatedChangesetUuid( response.next_changeset_uuid );
+            }
             api.trigger( 'saved', response );
         } );

trunk/src/wp-includes/script-loader.php

@@ -548 +548 @@
     $scripts->add( 'customize-controls', "/wp-admin/js/customize-controls$suffix.js", array( 'customize-base', 'wp-a11y', 'wp-util' ), false, 1 );
     did_action( 'init' ) && $scripts->localize( 'customize-controls', '_wpCustomizeControlsL10n', array(
-        'activate'           => __( 'Save & Activate' ),
-        'save'               => __( 'Save & Publish' ),
+        'activate'           => __( 'Activate & Publish' ),
+        'save'               => __( 'Save & Publish' ), // @todo Remove as not required.
+        'publish'            => __( 'Publish' ),
+        'published'          => __( 'Published' ),
+        'saveDraft'          => __( 'Save Draft' ),
+        'draftSaved'         => __( 'Draft Saved' ),
+        'updating'           => __( 'Updating' ),
+        'schedule'           => __( 'Schedule' ),
+        'scheduled'          => __( 'Scheduled' ),
+        'invalid'            => __( 'Invalid' ),
+        'saveBeforeShare'    => __( 'Please save your changes in order to share the preview.' ),
+        'futureDateError'    => __( 'You must supply a future date to schedule.' ),
         'saveAlert'          => __( 'The changes you made will be lost if you navigate away from this page.' ),
         'saved'              => __( 'Saved' ),
@@ -564 +574 @@
         /* translators: placeholder is URL to the Customizer to load the autosaved version */
         'autosaveNotice'     => __( 'There is a more recent autosave of your changes than the one you are previewing. <a href="%s">Restore the autosave</a>' ),
-        'videoHeaderNotice'   => __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ),
+        'videoHeaderNotice'  => __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ),
         // Used for overriding the file types allowed in plupload.
         'allowedFiles'       => __( 'Allowed Files' ),

trunk/tests/phpunit/tests/ajax/CustomizeManager.php

@@ -166 +166 @@
         $this->assertFalse( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'changeset_already_published', $this->_last_response_parsed['data']['code'] );
-        wp_update_post( array( 'ID' => $wp_customize->changeset_post_id(), 'post_status' => 'auto-draft' ) );
+        wp_update_post( array(
+            'ID' => $wp_customize->changeset_post_id(),
+            'post_status' => 'auto-draft',
+        ) );
 
         // User cannot edit.
@@ -223 +226 @@
         $this->assertTrue( $this->_last_response_parsed['success'] );
         $this->assertEquals( 'future', get_post_status( $wp_customize->changeset_post_id() ) );
-        wp_update_post( array( 'ID' => $wp_customize->changeset_post_id(), 'post_status' => 'auto-draft' ) );
-
+        wp_update_post( array(
+            'ID' => $wp_customize->changeset_post_id(),
+            'post_status' => 'auto-draft',
+        ) );
     }
 
@@ -255 +260 @@
         $wp_customize = $this->set_up_valid_state();
 
-        // Successful future.
         $_POST['customize_changeset_status'] = 'publish';
         $_POST['customize_changeset_title'] = 'Success Changeset';
@@ -269 +273 @@
         $this->assertEquals( 'publish', $this->_last_response_parsed['data']['changeset_status'] );
         $this->assertArrayHasKey( 'next_changeset_uuid', $this->_last_response_parsed['data'] );
+        $this->assertTrue( wp_is_uuid( $this->_last_response_parsed['data']['next_changeset_uuid'], 4 ) );
         $this->assertEquals( 'Success Changeset', get_post( $wp_customize->changeset_post_id() )->post_title );
         $this->assertEquals( 'Successful Site Title', get_option( 'blogname' ) );
-
     }
 
@@ -296 +300 @@
         $wp_customize = $this->set_up_valid_state( $uuid );
 
-        // Successful future.
         $_POST['customize_changeset_status'] = 'publish';
         $_POST['customize_changeset_title'] = 'Published';
@@ -305 +308 @@
         $this->assertEquals( 'publish', $this->_last_response_parsed['data']['changeset_status'] );
         $this->assertArrayHasKey( 'next_changeset_uuid', $this->_last_response_parsed['data'] );
+        $this->assertTrue( wp_is_uuid( $this->_last_response_parsed['data']['next_changeset_uuid'], 4 ) );
         $this->assertEquals( 'New Site Title', get_option( 'blogname' ) );
         $this->assertEquals( 'Published', get_post( $post_id )->post_title );
@@ -337 +341 @@
         $this->make_ajax_call( 'customize_save' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertArrayHasKey( 'changeset_date', $this->_last_response_parsed['data'] );
         $changeset_post_schedule = get_post( $post_id );
         $this->assertEquals( $future_date, $changeset_post_schedule->post_date );
@@ -345 +350 @@
         $this->make_ajax_call( 'customize_save' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertArrayNotHasKey( 'changeset_date', $this->_last_response_parsed['data'] );
         $changeset_post_draft = get_post( $post_id );
         $this->assertEquals( $future_date, $changeset_post_draft->post_date );
@@ -352 +358 @@
         $this->make_ajax_call( 'customize_save' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertArrayHasKey( 'changeset_date', $this->_last_response_parsed['data'] );
         $changeset_post_schedule = get_post( $post_id );
         $this->assertEquals( $future_date, $changeset_post_schedule->post_date );
@@ -381 +388 @@
         $this->make_ajax_call( 'customize_save' );
         $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertArrayHasKey( 'next_changeset_uuid', $this->_last_response_parsed['data'] );
+        $this->assertTrue( wp_is_uuid( $this->_last_response_parsed['data']['next_changeset_uuid'], 4 ) );
         $changeset_post_publish = get_post( $post_id );
         $this->assertNotEquals( $future_date, $changeset_post_publish->post_date );
+
+        // Check response when trying to update an already-published post.
+        $this->assertEquals( 'trash', get_post_status( $post_id ) );
+        $_POST['customize_changeset_status'] = 'publish';
+        $this->make_ajax_call( 'customize_save' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'changeset_already_published', $this->_last_response_parsed['data']['code'] );
+        $this->assertArrayHasKey( 'next_changeset_uuid', $this->_last_response_parsed['data'] );
+        $this->assertTrue( wp_is_uuid( $this->_last_response_parsed['data']['next_changeset_uuid'], 4 ) );
+    }
+
+    /**
+     * Test WP_Customize_Manager::save().
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::save()
+     */
+    public function test_save_autosave() {
+        $uuid = wp_generate_uuid4();
+
+        $post_id = $this->factory()->post->create( array(
+            'post_name' => $uuid,
+            'post_type' => 'customize_changeset',
+            'post_status' => 'draft',
+            'post_content' => wp_json_encode( array(
+                'blogname' => array(
+                    'value' => 'New Site Title',
+                ),
+            ) ),
+        ) );
+        $this->set_up_valid_state( $uuid );
+
+        $this->assertFalse( wp_get_post_autosave( $post_id ) );
+
+        $_POST['customize_changeset_data'] = wp_json_encode( array(
+            'blogname' => array(
+                'value' => 'Autosaved Site Title',
+            ),
+        ) );
+
+        $_POST['customize_changeset_autosave'] = 'on';
+        $this->make_ajax_call( 'customize_save' );
+        $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'draft', $this->_last_response_parsed['data']['changeset_status'] );
+        $autosave_revision = wp_get_post_autosave( $post_id );
+        $this->assertInstanceOf( 'WP_Post', $autosave_revision );
+
+        $this->assertContains( 'New Site Title', get_post( $post_id )->post_content );
+        $this->assertContains( 'Autosaved Site Title', $autosave_revision->post_content );
+    }
+
+    /**
+     * Test request for dismissing autosave changesets.
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::handle_dismiss_changeset_autosave_request()
+     * @covers WP_Customize_Manager::dismiss_user_auto_draft_changesets()
+     */
+    public function test_handle_dismiss_changeset_autosave_request() {
+        $uuid = wp_generate_uuid4();
+        $wp_customize = $this->set_up_valid_state( $uuid );
+
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'invalid_nonce', $this->_last_response_parsed['data'] );
+
+        $nonce = wp_create_nonce( 'dismiss_customize_changeset_autosave' );
+        $_POST['nonce'] = $_GET['nonce'] = $_REQUEST['nonce'] = $nonce;
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'no_auto_draft_to_delete', $this->_last_response_parsed['data'] );
+
+        $other_user_id = $this->factory()->user->create();
+
+        // Create auto-drafts.
+        $user_auto_draft_ids = array();
+        for ( $i = 0; $i < 3; $i++ ) {
+            $user_auto_draft_ids[] = $this->factory()->post->create( array(
+                'post_name' => wp_generate_uuid4(),
+                'post_type' => 'customize_changeset',
+                'post_status' => 'auto-draft',
+                'post_author' => self::$admin_user_id,
+                'post_content' => wp_json_encode( array() ),
+            ) );
+        }
+        $other_user_auto_draft_ids = array();
+        for ( $i = 0; $i < 3; $i++ ) {
+            $other_user_auto_draft_ids[] = $this->factory()->post->create( array(
+                'post_name' => wp_generate_uuid4(),
+                'post_type' => 'customize_changeset',
+                'post_status' => 'auto-draft',
+                'post_author' => $other_user_id,
+                'post_content' => wp_json_encode( array() ),
+            ) );
+        }
+        foreach ( array_merge( $user_auto_draft_ids, $other_user_auto_draft_ids ) as $post_id ) {
+            $this->assertFalse( (bool) get_post_meta( $post_id, '_customize_restore_dismissed', true ) );
+        }
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'auto_draft_dismissed', $this->_last_response_parsed['data'] );
+        foreach ( $user_auto_draft_ids as $post_id ) {
+            $this->assertEquals( 'auto-draft', get_post_status( $post_id ) );
+            $this->assertTrue( (bool) get_post_meta( $post_id, '_customize_restore_dismissed', true ) );
+        }
+        foreach ( $other_user_auto_draft_ids as $post_id ) {
+            $this->assertEquals( 'auto-draft', get_post_status( $post_id ) );
+            $this->assertFalse( (bool) get_post_meta( $post_id, '_customize_restore_dismissed', true ) );
+        }
+
+        // Subsequent test results in none dismissed.
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'no_auto_draft_to_delete', $this->_last_response_parsed['data'] );
+
+        // Save a changeset as a draft.
+        $r = $wp_customize->save_changeset_post( array(
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Foo',
+                ),
+            ),
+            'status' => 'draft',
+        ) );
+        $this->assertNotInstanceOf( 'WP_Error', $r );
+        $this->assertFalse( wp_get_post_autosave( $wp_customize->changeset_post_id() ) );
+        $this->assertContains( 'Foo', get_post( $wp_customize->changeset_post_id() )->post_content );
+
+        // Since no autosave yet, confirm no action.
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'no_autosave_revision_to_delete', $this->_last_response_parsed['data'] );
+
+        // Add the autosave revision.
+        $r = $wp_customize->save_changeset_post( array(
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Bar',
+                ),
+            ),
+            'autosave' => true,
+        ) );
+        $this->assertNotInstanceOf( 'WP_Error', $r );
+        $autosave_revision = wp_get_post_autosave( $wp_customize->changeset_post_id() );
+        $this->assertInstanceOf( 'WP_Post', $autosave_revision );
+        $this->assertContains( 'Foo', get_post( $wp_customize->changeset_post_id() )->post_content );
+        $this->assertContains( 'Bar', $autosave_revision->post_content );
+
+        // Confirm autosave gets deleted.
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertTrue( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'autosave_revision_deleted', $this->_last_response_parsed['data'] );
+        $this->assertFalse( wp_get_post_autosave( $wp_customize->changeset_post_id() ) );
+
+        // Since no autosave yet, confirm no action.
+        $this->make_ajax_call( 'dismiss_customize_changeset_autosave' );
+        $this->assertFalse( $this->_last_response_parsed['success'] );
+        $this->assertEquals( 'no_autosave_revision_to_delete', $this->_last_response_parsed['data'] );
     }
 }

trunk/tests/phpunit/tests/customize/manager.php

@@ -121 +121 @@
         $this->assertEquals( $theme, $wp_customize->get_stylesheet() );
         $this->assertEquals( $messenger_channel, $wp_customize->get_messenger_channel() );
+        $this->assertFalse( $wp_customize->autosaved() );
+        $this->assertTrue( $wp_customize->branching() );
+
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => null,
+        ) );
+        $this->assertTrue( wp_is_uuid( $wp_customize->changeset_uuid(), 4 ) );
 
         $theme = 'twentyfourteen';
@@ -134 +141 @@
         $wp_customize = new WP_Customize_Manager();
         $this->assertEquals( $theme, $wp_customize->get_stylesheet() );
-        $this->assertNotEmpty( $wp_customize->changeset_uuid() );
+        $this->assertTrue( wp_is_uuid( $wp_customize->changeset_uuid(), 4 ) );
+    }
+
+    /**
+     * Test constructor when deferring UUID.
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::establish_loaded_changeset()
+     * @covers WP_Customize_Manager::__construct()
+     */
+    public function test_constructor_deferred_changeset_uuid() {
+        $data = array(
+            'blogname' => array(
+                'value' => 'Test',
+            ),
+        );
+        $uuid = wp_generate_uuid4();
+        $post_id = $this->factory()->post->create( array(
+            'post_type' => 'customize_changeset',
+            'post_name' => $uuid,
+            'post_status' => 'draft',
+            'post_content' => wp_json_encode( $data ),
+        ) );
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => false, // Cause UUID to be deferred.
+            'branching' => false, // To cause drafted changeset to be autoloaded.
+        ) );
+        $this->assertEquals( $uuid, $wp_customize->changeset_uuid() );
+        $this->assertEquals( $post_id, $wp_customize->changeset_post_id() );
     }
 
@@ -255 +290 @@
 
     /**
+     * Test WP_Customize_Manager::autosaved().
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::autosaved()
+     */
+    public function test_autosaved() {
+        $wp_customize = new WP_Customize_Manager();
+        $this->assertFalse( $wp_customize->autosaved() );
+
+        $wp_customize = new WP_Customize_Manager( array( 'autosaved' => false ) );
+        $this->assertFalse( $wp_customize->autosaved() );
+
+        $wp_customize = new WP_Customize_Manager( array( 'autosaved' => true ) );
+        $this->assertTrue( $wp_customize->autosaved() );
+    }
+
+    /**
+     * Test WP_Customize_Manager::branching().
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::branching()
+     */
+    public function test_branching() {
+        $wp_customize = new WP_Customize_Manager();
+        $this->assertTrue( $wp_customize->branching(), 'Branching should default to true since it is original behavior in 4.7.' );
+
+        $wp_customize = new WP_Customize_Manager( array( 'branching' => false ) );
+        $this->assertFalse( $wp_customize->branching() );
+        add_filter( 'customize_changeset_branching', '__return_true' );
+        $this->assertTrue( $wp_customize->branching() );
+        remove_filter( 'customize_changeset_branching', '__return_true' );
+
+        $wp_customize = new WP_Customize_Manager( array( 'branching' => true ) );
+        $this->assertTrue( $wp_customize->branching() );
+        add_filter( 'customize_changeset_branching', '__return_false' );
+        $this->assertFalse( $wp_customize->branching() );
+    }
+
+    /**
      * Test WP_Customize_Manager::changeset_uuid().
      *
@@ -338 +412 @@
      */
     function test_changeset_data() {
+        wp_set_current_user( self::$admin_user_id );
         $uuid = wp_generate_uuid4();
         $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
@@ -343 +418 @@
 
         $uuid = wp_generate_uuid4();
-        $data = array( 'blogname' => array( 'value' => 'Hello World' ) );
+        $data = array(
+            'blogname' => array( 'value' => 'Hello World' ),
+            'blogdescription' => array( 'value' => 'Greet the world' ),
+        );
         $this->factory()->post->create( array(
             'post_name' => $uuid,
             'post_type' => 'customize_changeset',
-            'post_status' => 'auto-draft',
+            'post_status' => 'draft',
             'post_content' => wp_json_encode( $data ),
         ) );
         $wp_customize = new WP_Customize_Manager( array( 'changeset_uuid' => $uuid ) );
         $this->assertEquals( $data, $wp_customize->changeset_data() );
+
+        // Autosave.
+        $wp_customize->set_post_value( 'blogname', 'Hola Mundo' );
+        $wp_customize->register_controls(); // That is, settings, so blogname setting is registered.
+        $r = $wp_customize->save_changeset_post( array(
+            'autosave' => true,
+        ) );
+        $this->assertNotInstanceOf( 'WP_Error', $r );
+
+        // No change to data if not requesting autosave.
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'autosaved' => false,
+        ) );
+        $wp_customize->register_controls(); // That is, settings.
+        $this->assertFalse( $wp_customize->autosaved() );
+        $this->assertEquals( $data, $wp_customize->changeset_data() );
+
+        // No change to data if not requesting autosave.
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+            'autosaved' => true,
+        ) );
+        $this->assertTrue( $wp_customize->autosaved() );
+        $this->assertNotEquals( $data, $wp_customize->changeset_data() );
+        $this->assertEquals(
+            array_merge(
+                wp_list_pluck( $data, 'value' ),
+                array( 'blogname' => 'Hola Mundo' )
+            ),
+            wp_list_pluck( $wp_customize->changeset_data(), 'value' )
+        );
     }
 
@@ -1274 +1384 @@
 
     /**
+     * Test writing changesets when user supplies unchanged values.
+     *
+     * @ticket 39896
+     * @covers WP_Customize_Manager::save_changeset_post()
+     * @covers WP_Customize_Manager::grant_edit_post_capability_for_changeset()
+     */
+    public function test_save_changeset_post_with_autosave() {
+        wp_set_current_user( self::$admin_user_id );
+        $uuid = wp_generate_uuid4();
+        $changeset_post_id = wp_insert_post( array(
+            'post_type' => 'customize_changeset',
+            'post_content' => wp_json_encode( array(
+                'blogname' => array(
+                    'value' => 'Auto-draft Title',
+                ),
+            ) ),
+            'post_author' => self::$admin_user_id,
+            'post_name' => $uuid,
+            'post_status' => 'auto-draft',
+        ) );
+
+        $wp_customize = new WP_Customize_Manager( array(
+            'changeset_uuid' => $uuid,
+        ) );
+        $wp_customize->register_controls(); // And settings too.
+
+        // Autosave of an auto-draft overwrites original.
+        $wp_customize->save_changeset_post( array(
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Autosaved Auto-draft Title',
+                ),
+            ),
+            'autosave' => true,
+        ) );
+        $this->assertFalse( wp_get_post_autosave( $changeset_post_id ) );
+        $this->assertContains( 'Autosaved Auto-draft Title', get_post( $changeset_post_id )->post_content );
+
+        // Update status to draft for subsequent tests.
+        $wp_customize->save_changeset_post( array(
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Draft Title',
+                ),
+            ),
+            'status' => 'draft',
+            'autosave' => false,
+        ) );
+        $this->assertContains( 'Draft Title', get_post( $changeset_post_id )->post_content );
+
+        // Fail: illegal_autosave_with_date_gmt.
+        $r = $wp_customize->save_changeset_post( array(
+            'autosave' => true,
+            'date_gmt' => ( gmdate( 'Y' ) + 1 ) . '-12-01 00:00:00',
+        ) );
+        $this->assertInstanceOf( 'WP_Error', $r );
+        $this->assertEquals( 'illegal_autosave_with_date_gmt', $r->get_error_code() );
+
+        // Fail: illegal_autosave_with_status.
+        $r = $wp_customize->save_changeset_post( array(
+            'autosave' => true,
+            'status' => 'pending',
+        ) );
+        $this->assertEquals( 'illegal_autosave_with_status', $r->get_error_code() );
+
+        // Fail: illegal_autosave_with_non_current_user.
+        $r = $wp_customize->save_changeset_post( array(
+            'autosave' => true,
+            'user_id' => $this->factory()->user->create( array( 'role' => 'administrator' ) ),
+        ) );
+        $this->assertEquals( 'illegal_autosave_with_non_current_user', $r->get_error_code() );
+
+        // Try autosave.
+        $this->assertFalse( wp_get_post_autosave( $changeset_post_id ) );
+        $r = $wp_customize->save_changeset_post( array(
+            'data' => array(
+                'blogname' => array(
+                    'value' => 'Autosave Title',
+                ),
+            ),
+            'autosave' => true,
+        ) );
+        $this->assertInternalType( 'array', $r );
+
+        // Verify that autosave happened.
+        $autosave_revision = wp_get_post_autosave( $changeset_post_id );
+        $this->assertInstanceOf( 'WP_Post', $autosave_revision );
+        $this->assertContains( 'Draft Title', get_post( $changeset_post_id )->post_content );
+        $this->assertContains( 'Autosave Title', $autosave_revision->post_content );
+    }
+
+    /**
      * Test passing `null` for a setting ID to remove it from the changeset.
      *
@@ -2352 +2554 @@
         $this->assertNotEmpty( $data );
 
-        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
+        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts', 'initialClientTimestamp', 'initialServerDate', 'initialServerTimestamp' ), array_keys( $data ) );
         $this->assertEquals( $autofocus, $data['autofocus'] );
         $this->assertArrayHasKey( 'save', $data['nonce'] );
         $this->assertArrayHasKey( 'preview', $data['nonce'] );
+
+        $this->assertEqualSets(
+            array(
+                'branching',
+                'autosaved',
+                'hasAutosaveRevision',
+                'latestAutoDraftUuid',
+                'status',
+                'uuid',
+                'currentUserCanPublish',
+                'publishDate',
+            ),
+            array_keys( $data['changeset'] )
+        );
     }
 

trunk/tests/qunit/fixtures/customize-settings.js

@@ -107 +107 @@
             'type': 'reusing-default-template'
         },
+        'publish_settings': {
+            'active': true,
+            'description': '',
+            'instanceNumber': 6,
+            'priority': 20,
+            'title': 'Fixture section of custom type re-using default template',
+            'type': 'outer'
+        },
         'fixture-section-without-params': {}
     },
@@ -149 +157 @@
         }
     },
+    initialClientTimestamp: 1506510531595,
+    initialServerDate: '2017-09-27 16:38:49',
+    initialServerTimestamp: 1506510529913,
     changeset: {
         status: '',
-        uuid: '0c674ff4-c159-4e7a-beb4-cb830ae73979'
+        uuid: '0c674ff4-c159-4e7a-beb4-cb830ae73979',
+        autosaved: false,
+        branching: false,
+        currentUserCanPublish: false,
+        hasAutosaveRevision: false,
+        latestAutoDraftUuid: '341b06f6-3c1f-454f-96df-3cf197f3e347',
+        publishDate: ''
     },
     timeouts: {

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}}} ); #>
+
+        <span class="customize-control-title">
+            <label>{{ data.label }}</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>
+                <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>
+                    <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>
+                        <# 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">
+                                <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>
+        </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>
+        <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>
+        </div>
+    </script>
     <script type="text/html" id="tmpl-media-modal">
         <div class="media-modal wp-core-ui">

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

@@ -676 +676 @@
         } );
     } );
+
+    module( 'Customize Utils: wp.customize.utils.getRemainingTime()' );
+    test( 'utils.getRemainingTime calculates time correctly', function( assert ) {
+        var datetime = '2599-08-06 12:12:13', timeRemaining, timeRemainingWithDateInstance, timeRemaingingWithTimestamp;
+
+        timeRemaining = wp.customize.utils.getRemainingTime( datetime );
+        timeRemainingWithDateInstance = wp.customize.utils.getRemainingTime( new Date( datetime.replace( /-/g, '/' ) ) );
+        timeRemaingingWithTimestamp = wp.customize.utils.getRemainingTime( ( new Date( datetime.replace( /-/g, '/' ) ) ).getTime() );
+
+        assert.equal( typeof timeRemaining, 'number', timeRemaining );
+        assert.equal( typeof timeRemainingWithDateInstance, 'number', timeRemaining );
+        assert.equal( typeof timeRemaingingWithTimestamp, 'number', timeRemaining );
+        assert.deepEqual( timeRemaining, timeRemainingWithDateInstance );
+        assert.deepEqual( timeRemaining, timeRemaingingWithTimestamp );
+    });
+
+    module( 'Customize Utils: wp.customize.utils.getCurrentTimestamp()' );
+    test( 'utils.getCurrentTimestamp returns timestamp', function( assert ) {
+        var currentTimeStamp;
+        currentTimeStamp = wp.customize.utils.getCurrentTimestamp();
+        assert.equal( typeof currentTimeStamp, 'number' );
+    });
+
+    module( 'Customize Controls: wp.customize.DateTimeControl' );
+    test( 'Test DateTimeControl creation and its methods', function( assert ) {
+        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;
+
+        section = wp.customize.section( sectionId );
+
+        control = new wp.customize.DateTimeControl( controlId, {
+            params: {
+                section: section.id,
+                type: 'date_time',
+                content: '<li id="customize-control-' + controlId + '" class="customize-control"></li>',
+                defaultValue: datetime
+            }
+        } );
+
+        wp.customize.control.add( controlId, control );
+
+        // Test control creations.
+        assert.ok( control.templateSelector, '#customize-control-date_time-content' );
+        assert.ok( control.section(), sectionId );
+        assert.equal( _.size( control.inputElements ), control.elements.length );
+        assert.ok( control.setting(), datetime );
+
+        day = control.inputElements.day;
+        month = control.inputElements.month;
+        year = control.inputElements.year;
+        minute = control.inputElements.minute;
+        hour = control.inputElements.hour;
+        ampm = control.inputElements.ampm;
+
+        year( '23' );
+        assert.equal( typeof year(), 'number', 'Should always return integer' );
+
+        month( 'test' );
+        assert.notOk( month(), 'Should not accept text' );
+
+        // Test control.parseDateTime();
+        dateTimeArray = control.parseDateTime( datetime );
+        assert.deepEqual( dateTimeArray, {
+            year: '2599',
+            month: '08',
+            hour: '18',
+            minute: '12',
+            second: '13',
+            day: '06'
+        } );
+
+        dateTimeArrayInampm = control.parseDateTime( datetime, true );
+        assert.deepEqual( dateTimeArrayInampm, {
+            year: '2599',
+            month: '08',
+            hour: '6',
+            minute: '12',
+            ampm: 'pm',
+            day: '06'
+        } );
+
+        year( '2010' );
+        month( '12' );
+        day( '18' );
+        hour( '3' );
+        minute( '44' );
+        ampm( 'am' );
+
+        // Test control.convertInputDateToString().
+        timeString = control.convertInputDateToString();
+        assert.equal( timeString, '2010-12-18 03:44:00' );
+
+        ampm( 'pm' );
+        timeString = control.convertInputDateToString();
+        assert.equal( timeString, '2010-12-18 15:44:00' );
+
+        // Test control.updateDaysForMonth();.
+        year( 2017 );
+        month( 2 );
+        day( 31 );
+        control.updateDaysForMonth();
+        assert.deepEqual( day(), 28, 'Should update to the correct days' );
+
+        day( 20 );
+        assert.deepEqual( day(), 20, 'Should not update if its less the correct number of days' );
+
+        // Test control.convertHourToTwentyFourHourFormat().
+        assert.equal( control.convertHourToTwentyFourHourFormat( 11, 'pm' ), 23 );
+        assert.equal( control.convertHourToTwentyFourHourFormat( 12, 'pm' ), 12 );
+        assert.equal( control.convertHourToTwentyFourHourFormat( 12, 'am' ), 0 );
+        assert.equal( control.convertHourToTwentyFourHourFormat( 11, 'am' ), 11 );
+
+        // Test control.toggleFutureDateNotification().
+        assert.deepEqual( control.toggleFutureDateNotification(), control );
+        control.toggleFutureDateNotification( true );
+        assert.ok( control.notifications.has( 'not_future_date' ) );
+        control.toggleFutureDateNotification( false );
+        assert.notOk( control.notifications.has( 'not_future_date' ) );
+
+        // Test control.populateDateInputs();
+        control.populateDateInputs();
+        control.dateInputs.each( function() {
+            var node = jQuery( this );
+            assert.equal( node.val(), control.inputElements[ node.data( 'component' ) ].get() );
+        } );
+
+        // Test control.validateInputs();
+        hour( 33 );
+        assert.ok( control.validateInputs() );
+        hour( 10 );
+        assert.notOk( control.validateInputs() );
+        minute( 123 );
+        assert.ok( control.validateInputs() );
+        minute( 20 );
+        assert.notOk( control.validateInputs() );
+
+        // Test control.populateSetting();
+        day( 2 );
+        month( 11 );
+        year( 2018 );
+        hour( 4 );
+        minute( 20 );
+        ampm( 'pm' );
+        control.populateSetting();
+        assert.equal( control.setting(), '2018-11-02 16:20:00' );
+
+        hour( 123 );
+        control.populateSetting();
+        assert.equal( control.setting(), '2018-11-02 16:20:00' ); // Should not update if invalid hour.
+
+        hour( 5 );
+        control.populateSetting();
+        assert.equal( control.setting(), '2018-11-02 17:20:00' );
+
+        // Test control.isFutureDate();
+        day( 2 );
+        month( 11 );
+        year( 2318 );
+        hour( 4 );
+        minute( 20 );
+        ampm( 'pm' );
+        assert.ok( control.isFutureDate() );
+
+        year( 2016 );
+        assert.notOk( control.isFutureDate() );
+
+        /**
+         * Test control.updateMinutesForHour().
+         * Run this at the end or else the above tests may fail.
+         */
+        hour( 24 );
+        minute( 32 );
+        control.inputElements.ampm = false; // Because it works only when the time is twenty four hour format.
+        control.updateMinutesForHour();
+        assert.deepEqual( minute(), 0 );
+
+        // Tear Down.
+        wp.customize.control.remove( controlId );
+    });
+
+    module( 'Customize Sections: wp.customize.OuterSection' );
+    test( 'Test OuterSection', function( assert ) {
+        var section, sectionId = 'test_outer_section', body = jQuery( 'body' ),
+            defaultSection, defaultSectionId = 'fixture-section';
+
+        defaultSection = wp.customize.section( defaultSectionId );
+
+        section = new wp.customize.OuterSection( sectionId, {
+            params: {
+                content: defaultSection.params.content,
+                type: 'outer'
+            }
+        } );
+
+        wp.customize.section.add( sectionId, section );
+        wp.customize.section.add( defaultSectionId, section );
+
+        assert.equal( section.containerPaneParent, '.customize-outer-pane-parent' );
+        assert.equal( section.containerParent.selector, '#customize-outer-theme-controls' );
+
+        defaultSection.expand();
+        section.expand();
+        assert.ok( body.hasClass( 'outer-section-open' ) );
+        assert.ok( section.container.hasClass( 'open' ) );
+        assert.ok( defaultSection.expanded() ); // Ensure it does not affect other sections state.
+
+        section.collapse();
+        assert.notOk( body.hasClass( 'outer-section-open' ) );
+        assert.notOk( section.container.hasClass( 'open' ) ); // Ensure it does not affect other sections state.
+        assert.ok( defaultSection.expanded() );
+
+        // Tear down
+        wp.customize.section.remove( sectionId );
+    });
+
+    module( 'Customize Controls: PreviewLinkControl' );
+    test( 'Test PreviewLinkControl creation and its methods', function( assert ) {
+        var section, sectionId = 'publish_settings', newLink;
+
+        section = wp.customize.section( sectionId );
+        section.deferred.embedded.resolve();
+
+        assert.expect( 9 );
+        section.deferred.embedded.done( function() {
+            _.each( section.controls(), function( control ) {
+                if ( 'changeset_preview_link' === control.id ) {
+                    assert.equal( control.templateSelector, 'customize-preview-link-control' );
+                    assert.equal( _.size( control.previewElements ), control.elements.length );
+
+                    // Test control.ready().
+                    newLink = 'http://example.org?' + wp.customize.settings.changeset.uuid;
+                    control.setting.set( newLink );
+
+                    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 );
+
+                    // Test control.toggleSaveNotification().
+                    control.toggleSaveNotification( true );
+                    assert.ok( control.notifications.has( 'changes_not_saved' ) );
+                    control.toggleSaveNotification( false );
+                    assert.notOk( control.notifications.has( 'changes_not_saved' ) );
+
+                    // Test control.updatePreviewLink().
+                    control.updatePreviewLink();
+                    assert.equal( control.setting.get(), wp.customize.previewer.getFrontendPreviewUrl() );
+                }
+            } );
+        } );
+    });
 });