WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/27/2017 10:24:37 PM (3 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/qunit/index.html

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