Customize: Fix `WP_Customize_Date_Time_Control` to be re-usable for plugins and custom settings.
* Allow time fields to be omitted by constructing with `timeIncluded` as `false`. * Ensure `reportValidity` is only called on a control when it is in an expanded section. * Rename "ampm" to "meridian". * Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control. * Fix styling of dropdowns and clean CSS. * Improve accessibility of nav menus component. Props westonruter, afercia, sayedwp, melchoyce. Amends [41626]. See #39896. Fixes #42022. Built from https://develop.svn.wordpress.org/trunk@41670 git-svn-id: http://core.svn.wordpress.org/trunk@41504 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
parent
8294b40161
commit
a83e4eb40e
|
|
@ -173,25 +173,7 @@ body.trashing #publish-settings {
|
|||
}
|
||||
|
||||
#customize-controls .date-input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.date-time-fields .month-field {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
.date-time-fields .day-field,
|
||||
.date-time-fields .hour-field,
|
||||
.date-time-fields .minute-field {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.date-time-fields .year-field {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.date-time-fields .am-pm-field {
|
||||
width: 53px;
|
||||
border-color: #dc3232;
|
||||
}
|
||||
|
||||
#customize-control-changeset_status label {
|
||||
|
|
@ -225,7 +207,7 @@ body.trashing #publish-settings {
|
|||
|
||||
.customize-copy-preview-link:before,
|
||||
.customize-copy-preview-link:after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
|
|
@ -250,7 +232,7 @@ body.trashing #publish-settings {
|
|||
border-right: none;
|
||||
border-left: none;
|
||||
text-indent: -999px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#customize-control-changeset_preview_link label {
|
||||
|
|
@ -258,7 +240,7 @@ body.trashing #publish-settings {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#customize-control-changeset_preview_link a.preview-control-element {
|
||||
#customize-control-changeset_preview_link a {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
|
|
@ -269,10 +251,10 @@ body.trashing #publish-settings {
|
|||
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 {
|
||||
#customize-control-changeset_preview_link a.disabled,
|
||||
#customize-control-changeset_preview_link a.disabled:active,
|
||||
#customize-control-changeset_preview_link a.disabled:focus,
|
||||
#customize-control-changeset_preview_link a.disabled:visited {
|
||||
color: black;
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
|
|
@ -293,10 +275,30 @@ body.trashing #publish-settings {
|
|||
padding-bottom:10px;
|
||||
}
|
||||
|
||||
.date-time-fields label,
|
||||
.date-time-fields .date-time-separator {
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-input,
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
|
||||
float: right;
|
||||
margin-left:5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.month {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.day,
|
||||
.date-time-fields .date-input.hour,
|
||||
.date-time-fields .date-input.minute {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.year {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.meridian {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-time-fields .date-time-separator {
|
||||
|
|
@ -304,7 +306,7 @@ body.trashing #publish-settings {
|
|||
}
|
||||
|
||||
.date-time-fields .time-row {
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-timezone {
|
||||
|
|
@ -1035,7 +1037,7 @@ p.customize-section-description {
|
|||
}
|
||||
|
||||
.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
|
||||
border: 1px solid #f00;
|
||||
border: 1px solid #dc3232;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .add-new-toggle {
|
||||
|
|
@ -1198,7 +1200,7 @@ p.customize-section-description {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
#customize-control-show_on_front.has-error .customize-control-notifications-container {
|
||||
margin-top:12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1383,7 +1385,10 @@ p.customize-section-description {
|
|||
content: '';
|
||||
position: absolute;
|
||||
height: auto;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 4px solid #00a0d2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -2685,23 +2690,25 @@ body.adding-widget .add-new-widget:before,
|
|||
height: 39px;
|
||||
}
|
||||
|
||||
.date-time-fields .month-field {
|
||||
.date-time-fields .date-input.month {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
.date-time-fields .day-field,
|
||||
.date-time-fields .hour-field,
|
||||
.date-time-fields .minute-field {
|
||||
.date-time-fields .date-input.day,
|
||||
.date-time-fields .date-input.hour,
|
||||
.date-time-fields .date-input.minute {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.date-time-fields .year-field {
|
||||
.date-time-fields .date-input.year {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-time-separator,
|
||||
.date-time-fields .date-timezone {
|
||||
line-height: 3.2;
|
||||
}
|
||||
|
||||
.wp-core-ui.wp-customizer .button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -173,25 +173,7 @@ body.trashing #publish-settings {
|
|||
}
|
||||
|
||||
#customize-controls .date-input:invalid {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.date-time-fields .month-field {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
.date-time-fields .day-field,
|
||||
.date-time-fields .hour-field,
|
||||
.date-time-fields .minute-field {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.date-time-fields .year-field {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.date-time-fields .am-pm-field {
|
||||
width: 53px;
|
||||
border-color: #dc3232;
|
||||
}
|
||||
|
||||
#customize-control-changeset_status label {
|
||||
|
|
@ -225,7 +207,7 @@ body.trashing #publish-settings {
|
|||
|
||||
.customize-copy-preview-link:before,
|
||||
.customize-copy-preview-link:after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
|
|
@ -250,7 +232,7 @@ body.trashing #publish-settings {
|
|||
border-left: none;
|
||||
border-right: none;
|
||||
text-indent: -999px;
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#customize-control-changeset_preview_link label {
|
||||
|
|
@ -258,7 +240,7 @@ body.trashing #publish-settings {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#customize-control-changeset_preview_link a.preview-control-element {
|
||||
#customize-control-changeset_preview_link a {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
|
|
@ -269,10 +251,10 @@ body.trashing #publish-settings {
|
|||
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 {
|
||||
#customize-control-changeset_preview_link a.disabled,
|
||||
#customize-control-changeset_preview_link a.disabled:active,
|
||||
#customize-control-changeset_preview_link a.disabled:focus,
|
||||
#customize-control-changeset_preview_link a.disabled:visited {
|
||||
color: black;
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
|
|
@ -293,10 +275,30 @@ body.trashing #publish-settings {
|
|||
padding-bottom:10px;
|
||||
}
|
||||
|
||||
.date-time-fields label,
|
||||
.date-time-fields .date-time-separator {
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-input,
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
|
||||
float: left;
|
||||
margin-right:5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.month {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.day,
|
||||
.date-time-fields .date-input.hour,
|
||||
.date-time-fields .date-input.minute {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.year {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.meridian {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-time-fields .date-time-separator {
|
||||
|
|
@ -304,7 +306,7 @@ body.trashing #publish-settings {
|
|||
}
|
||||
|
||||
.date-time-fields .time-row {
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-timezone {
|
||||
|
|
@ -1035,7 +1037,7 @@ p.customize-section-description {
|
|||
}
|
||||
|
||||
.customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
|
||||
border: 1px solid #f00;
|
||||
border: 1px solid #dc3232;
|
||||
}
|
||||
|
||||
.customize-control-dropdown-pages .add-new-toggle {
|
||||
|
|
@ -1198,7 +1200,7 @@ p.customize-section-description {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
#customize-control-show_on_front.has-error .customize-control-notifications-container {
|
||||
margin-top:12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1383,7 +1385,10 @@ p.customize-section-description {
|
|||
content: '';
|
||||
position: absolute;
|
||||
height: auto;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: 4px solid #00a0d2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -2685,23 +2690,25 @@ body.adding-widget .add-new-widget:before,
|
|||
height: 39px;
|
||||
}
|
||||
|
||||
.date-time-fields .month-field {
|
||||
.date-time-fields .date-input.month {
|
||||
width: 79px;
|
||||
}
|
||||
|
||||
.date-time-fields .day-field,
|
||||
.date-time-fields .hour-field,
|
||||
.date-time-fields .minute-field {
|
||||
.date-time-fields .date-input.day,
|
||||
.date-time-fields .date-input.hour,
|
||||
.date-time-fields .date-input.minute {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.date-time-fields .year-field {
|
||||
.date-time-fields .date-input.year {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.date-time-fields .date-time-separator,
|
||||
.date-time-fields .date-timezone {
|
||||
line-height: 3.2;
|
||||
}
|
||||
|
||||
.wp-core-ui.wp-customizer .button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -132,7 +132,6 @@
|
|||
|
||||
.customize-control input.menu-name-field {
|
||||
width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.wp-customizer .menu-item .item-edit {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -132,7 +132,6 @@
|
|||
|
||||
.customize-control input.menu-name-field {
|
||||
width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.wp-customizer .menu-item .item-edit {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4929,10 +4929,6 @@
|
|||
*/
|
||||
api.DateTimeControl = api.Control.extend({
|
||||
|
||||
dateInputs: {},
|
||||
inputElements: {},
|
||||
invalidDate: false,
|
||||
|
||||
/**
|
||||
* Initialize behaviors.
|
||||
*
|
||||
|
|
@ -4942,50 +4938,68 @@
|
|||
ready: function ready() {
|
||||
var control = this;
|
||||
|
||||
_.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
|
||||
control.inputElements = {};
|
||||
control.invalidDate = false;
|
||||
|
||||
control.dateInputs = control.container.find( '.date-input' );
|
||||
_.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour', 'populateDateInputs' );
|
||||
|
||||
// @todo This needs https://core.trac.wordpress.org/ticket/37964
|
||||
if ( ! control.setting ) {
|
||||
control.setting = new api.Value();
|
||||
}
|
||||
|
||||
// @todo Should this be? Default should be on client. The default value should be in the setting itself.
|
||||
if ( ! control.setting.get() && control.params.defaultValue ) {
|
||||
control.setting.set( control.params.defaultValue );
|
||||
}
|
||||
|
||||
control.dateInputs.each( function() {
|
||||
control.container.find( '.date-input' ).each( function() {
|
||||
var input = $( this ), component, element;
|
||||
component = input.data( 'component' );
|
||||
element = new api.Element( input );
|
||||
element.validate = function( value ) {
|
||||
return _.contains( [ 'am', 'pm' ], value ) ? value : parseInt( value, 10 );
|
||||
};
|
||||
if ( 'meridian' === component ) {
|
||||
element.validate = function( value ) {
|
||||
if ( 'am' !== value && 'pm' !== value ) {
|
||||
return null;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
} else {
|
||||
element.validate = function( value ) {
|
||||
var val = parseInt( value, 10 );
|
||||
if ( isNaN( val ) ) {
|
||||
return null;
|
||||
}
|
||||
return val;
|
||||
};
|
||||
}
|
||||
element.bind( control.populateSetting );
|
||||
control.inputElements[ component ] = element;
|
||||
control.elements.push( element );
|
||||
} );
|
||||
|
||||
control.dateInputs.on( 'input', control.populateSetting );
|
||||
control.inputElements.month.bind( control.updateDaysForMonth );
|
||||
control.inputElements.year.bind( control.updateDaysForMonth );
|
||||
control.inputElements.hour.bind( control.updateMinutesForHour );
|
||||
if ( control.params.includeTime ) {
|
||||
control.inputElements.hour.bind( control.updateMinutesForHour );
|
||||
}
|
||||
control.populateDateInputs();
|
||||
control.setting.bind( control.populateDateInputs );
|
||||
},
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format.
|
||||
* @returns {object|null} Returns object containing date components or null if parse error.
|
||||
*/
|
||||
parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
|
||||
var matches, date, midDayHour = 12;
|
||||
parseDateTime: function parseDateTime( datetime ) {
|
||||
var control = this, matches, date, midDayHour = 12;
|
||||
|
||||
if ( datetime ) {
|
||||
matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
|
||||
matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ );
|
||||
}
|
||||
|
||||
if ( ! matches ) {
|
||||
|
|
@ -4998,16 +5012,16 @@
|
|||
year: matches.shift(),
|
||||
month: matches.shift(),
|
||||
day: matches.shift(),
|
||||
hour: matches.shift(),
|
||||
minute: matches.shift(),
|
||||
second: matches.shift()
|
||||
hour: matches.shift() || '00',
|
||||
minute: matches.shift() || '00',
|
||||
second: matches.shift() || '00'
|
||||
};
|
||||
|
||||
if ( twelveHourFormat ) {
|
||||
if ( control.params.includeTime && control.params.twelveHourFormat ) {
|
||||
date.hour = parseInt( date.hour, 10 );
|
||||
date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
|
||||
date.meridian = date.hour >= midDayHour ? 'pm' : 'am';
|
||||
date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
|
||||
delete date.second;
|
||||
delete date.second; // @todo Why only if twelveHourFormat?
|
||||
}
|
||||
|
||||
return date;
|
||||
|
|
@ -5020,25 +5034,31 @@
|
|||
* @return {boolean} If date input fields has error.
|
||||
*/
|
||||
validateInputs: function validateInputs() {
|
||||
var control = this, errorMessage;
|
||||
var control = this, errorMessage, components;
|
||||
|
||||
control.invalidDate = false;
|
||||
|
||||
_.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
|
||||
var element, el, max, min, maxLength, value;
|
||||
components = [ 'year', 'day' ];
|
||||
if ( control.params.includeTime ) {
|
||||
components.push( 'hour', 'minute' );
|
||||
}
|
||||
|
||||
_.each( components, function( component ) {
|
||||
var element, el, max, min, value;
|
||||
|
||||
if ( ! control.invalidDate ) {
|
||||
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;
|
||||
control.invalidDate = value > max || value < min;
|
||||
errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
|
||||
|
||||
el.setCustomValidity( errorMessage );
|
||||
_.result( el, 'reportValidity' );
|
||||
if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
|
||||
_.result( el, 'reportValidity' );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
|
@ -5077,7 +5097,7 @@
|
|||
updateMinutesForHour: function updateMinutesForHour() {
|
||||
var control = this, maxHours = 24, minuteEl;
|
||||
|
||||
if ( control.inputElements.ampm ) {
|
||||
if ( control.inputElements.meridian ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -5086,11 +5106,9 @@
|
|||
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' ) );
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -5142,8 +5160,11 @@
|
|||
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' ];
|
||||
dateFormat = [ 'year', '-', 'month', '-', 'day' ];
|
||||
if ( control.params.includeTime ) {
|
||||
hourInTwentyFourHourFormat = control.inputElements.meridian ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.meridian() ) : control.inputElements.hour();
|
||||
dateFormat = dateFormat.concat( [ ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ] );
|
||||
}
|
||||
|
||||
_.each( dateFormat, function( component ) {
|
||||
date += control.inputElements[ component ] ? getElementValue( component ) : component;
|
||||
|
|
@ -5167,18 +5188,21 @@
|
|||
* 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.
|
||||
* @param {string} hourInTwelveHourFormat - Hour in twelve hour format.
|
||||
* @param {string} meridian - Either 'am' or 'pm'.
|
||||
* @returns {string} Hour in twenty four hour format.
|
||||
*/
|
||||
convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, ampm ) {
|
||||
convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) {
|
||||
var hourInTwentyFourHourFormat, hour, midDayHour = 12;
|
||||
|
||||
hour = parseInt( hourInTwelveHourFormat, 10 );
|
||||
if ( isNaN( hour ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( 'pm' === ampm && hour < midDayHour ) {
|
||||
if ( 'pm' === meridian && hour < midDayHour ) {
|
||||
hourInTwentyFourHourFormat = hour + midDayHour;
|
||||
} else if ( 'am' === ampm && midDayHour === hour ) {
|
||||
} else if ( 'am' === meridian && midDayHour === hour ) {
|
||||
hourInTwentyFourHourFormat = hour - midDayHour;
|
||||
} else {
|
||||
hourInTwentyFourHourFormat = hour;
|
||||
|
|
@ -5196,7 +5220,7 @@
|
|||
populateDateInputs: function populateDateInputs() {
|
||||
var control = this, parsed;
|
||||
|
||||
parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
|
||||
parsed = control.parseDateTime( control.setting.get() );
|
||||
|
||||
if ( ! parsed ) {
|
||||
return false;
|
||||
|
|
@ -5245,8 +5269,6 @@
|
|||
*/
|
||||
api.PreviewLinkControl = api.Control.extend({
|
||||
|
||||
previewElements: {},
|
||||
|
||||
/**
|
||||
* Override the templateSelector before embedding the control into the page.
|
||||
*
|
||||
|
|
@ -5266,7 +5288,7 @@
|
|||
* @returns {void}
|
||||
*/
|
||||
ready: function ready() {
|
||||
var control = this, element, component, node, link, input, button;
|
||||
var control = this, element, component, node, url, input, button;
|
||||
|
||||
_.bindAll( control, 'updatePreviewLink' );
|
||||
|
||||
|
|
@ -5274,6 +5296,8 @@
|
|||
control.setting = new api.Value();
|
||||
}
|
||||
|
||||
control.previewElements = {};
|
||||
|
||||
control.container.find( '.preview-control-element' ).each( function() {
|
||||
node = $( this );
|
||||
component = node.data( 'component' );
|
||||
|
|
@ -5282,21 +5306,23 @@
|
|||
control.elements.push( element );
|
||||
} );
|
||||
|
||||
link = control.previewElements.link;
|
||||
url = control.previewElements.url;
|
||||
input = control.previewElements.input;
|
||||
button = control.previewElements.button;
|
||||
|
||||
input.link( control.setting );
|
||||
link.link( control.setting );
|
||||
url.link( control.setting );
|
||||
|
||||
link.bind( function( value ) {
|
||||
link.element.attr( 'href', value );
|
||||
link.element.attr( 'target', api.settings.changeset.uuid );
|
||||
url.bind( function( value ) {
|
||||
url.element.parent().attr( {
|
||||
href: value,
|
||||
target: api.settings.changeset.uuid
|
||||
} );
|
||||
} );
|
||||
|
||||
api.bind( 'ready', control.updatePreviewLink );
|
||||
api.bind( 'change', control.updatePreviewLink );
|
||||
api.state( 'saved' ).bind( control.updatePreviewLink );
|
||||
api.state( 'changesetStatus' ).bind( control.updatePreviewLink );
|
||||
|
||||
button.element.on( 'click', function( event ) {
|
||||
event.preventDefault();
|
||||
|
|
@ -5307,8 +5333,8 @@
|
|||
}
|
||||
} );
|
||||
|
||||
link.element.on( 'click', function( event ) {
|
||||
if ( link.element.hasClass( 'disabled' ) ) {
|
||||
url.element.parent().on( 'click', function( event ) {
|
||||
if ( $( this ).hasClass( 'disabled' ) ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
} );
|
||||
|
|
@ -5329,12 +5355,10 @@
|
|||
updatePreviewLink: function updatePreviewLink() {
|
||||
var control = this, unsavedDirtyValues;
|
||||
|
||||
unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
|
||||
unsaved: true
|
||||
} ) );
|
||||
unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get();
|
||||
|
||||
control.toggleSaveNotification( unsavedDirtyValues );
|
||||
control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
|
||||
control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues );
|
||||
control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
|
||||
control.setting.set( api.previewer.getFrontendPreviewUrl() );
|
||||
},
|
||||
|
|
@ -6508,9 +6532,7 @@
|
|||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Find all invalid setting less controls with notification type error.
|
||||
*/
|
||||
// Find all invalid setting less controls with notification type error.
|
||||
api.control.each( function( control ) {
|
||||
if ( ! control.setting || ! control.setting.id && control.active.get() ) {
|
||||
control.notifications.each( function( notification ) {
|
||||
|
|
@ -7930,9 +7952,7 @@
|
|||
});
|
||||
})();
|
||||
|
||||
/**
|
||||
* Publish settings section and controls.
|
||||
*/
|
||||
// Publish settings section and controls.
|
||||
api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
|
||||
$.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
|
||||
var radioNodes, statusElement, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3622,18 +3622,20 @@ final class WP_Customize_Manager {
|
|||
</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>
|
||||
<# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
|
||||
<p class="customize-control-title">
|
||||
<?php esc_html_e( 'Share Preview Link' ); ?>
|
||||
</p>
|
||||
<p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
|
||||
<div class="customize-control-notifications-container"></div>
|
||||
<div class="preview-link-wrapper">
|
||||
<label>
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
|
||||
<a class="preview-control-element" data-component="link" href="" target=""></a>
|
||||
<input readonly class="preview-control-element" data-component="input" value="test" >
|
||||
<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
|
||||
</label>
|
||||
<label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
|
||||
<a href="" target="">
|
||||
<span class="preview-control-element" data-component="url"></span>
|
||||
<span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
|
||||
</a>
|
||||
<input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
|
||||
<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="tmpl-customize-trash-changeset-control">
|
||||
|
|
@ -4236,6 +4238,7 @@ final class WP_Customize_Manager {
|
|||
} else {
|
||||
$initial_date = current_time( 'mysql', false );
|
||||
}
|
||||
|
||||
$this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
|
||||
'section' => 'publish_settings',
|
||||
'priority' => 20,
|
||||
|
|
@ -4243,6 +4246,7 @@ final class WP_Customize_Manager {
|
|||
'type' => 'date_time',
|
||||
'min_year' => date( 'Y' ),
|
||||
'allow_past_date' => false,
|
||||
'include_time' => true,
|
||||
'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
|
||||
'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
|
||||
'capability' => 'customize',
|
||||
|
|
|
|||
|
|
@ -674,13 +674,12 @@ final class WP_Customize_Nav_Menus {
|
|||
) ) );
|
||||
|
||||
$this->manager->add_control( 'new_menu_name', array(
|
||||
'label' => '',
|
||||
'label' => __( 'New menu name' ),
|
||||
'section' => 'add_menu',
|
||||
'type' => 'text',
|
||||
'settings' => array(),
|
||||
'input_attrs' => array(
|
||||
'class' => 'menu-name-field',
|
||||
'placeholder' => __( 'New menu name' ),
|
||||
),
|
||||
) );
|
||||
|
||||
|
|
@ -1017,7 +1016,8 @@ final class WP_Customize_Nav_Menus {
|
|||
<?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
|
||||
<?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
|
||||
<div class="new-content-item">
|
||||
<input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
|
||||
<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
|
||||
<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
|
||||
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,14 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
|
|||
*/
|
||||
public $allow_past_date = true;
|
||||
|
||||
/**
|
||||
* Whether hours, minutes, and meridian should be shown.
|
||||
*
|
||||
* @since 4.9.0
|
||||
* @var boolean
|
||||
*/
|
||||
public $include_time = true;
|
||||
|
||||
/**
|
||||
* If set to false the control will appear in 24 hour format,
|
||||
* the value will still be saved in Y-m-d H:i:s format.
|
||||
|
|
@ -83,8 +91,9 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
|
|||
|
||||
$data['maxYear'] = intval( $this->max_year );
|
||||
$data['minYear'] = intval( $this->min_year );
|
||||
$data['allowPastDate'] = $this->allow_past_date ? true : false;
|
||||
$data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
|
||||
$data['allowPastDate'] = (bool) $this->allow_past_date;
|
||||
$data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
|
||||
$data['includeTime'] = (bool) $this->include_time;
|
||||
$data['defaultValue'] = $this->default_value;
|
||||
|
||||
return $data;
|
||||
|
|
@ -101,68 +110,58 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
|
|||
?>
|
||||
|
||||
<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
|
||||
<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
|
||||
|
||||
<span class="customize-control-title">
|
||||
<label>{{ data.label }}</label>
|
||||
{{ data.label }}
|
||||
</span>
|
||||
<div class="customize-control-notifications-container"></div>
|
||||
<span class="description customize-control-description">{{ data.description }}</span>
|
||||
<div class="date-time-fields">
|
||||
<div class="day-row">
|
||||
<span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
|
||||
<fieldset class="day-row">
|
||||
<legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
|
||||
<div class="day-fields clear">
|
||||
<label class="month-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
|
||||
<select class="date-input month" data-component="month">
|
||||
<# _.each( data.month_choices, function( choice ) {
|
||||
if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
|
||||
text = choice.text;
|
||||
value = choice.value;
|
||||
}
|
||||
#>
|
||||
<option value="{{ value }}" >
|
||||
{{ text }}
|
||||
</option>
|
||||
<# } ); #>
|
||||
</select>
|
||||
</label>
|
||||
<label class="day-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
|
||||
<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
|
||||
</label>
|
||||
<label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
|
||||
<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
|
||||
<# _.each( data.month_choices, function( choice ) {
|
||||
if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
|
||||
text = choice.text;
|
||||
value = choice.value;
|
||||
}
|
||||
#>
|
||||
<option value="{{ value }}" >
|
||||
{{ text }}
|
||||
</option>
|
||||
<# } ); #>
|
||||
</select>
|
||||
<label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
|
||||
<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
|
||||
<span class="time-special-char date-time-separator">,</span>
|
||||
<label class="year-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
|
||||
<# var maxYearLength = String( data.maxYear ).length; #>
|
||||
<input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
|
||||
</label>
|
||||
<label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
|
||||
<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-row clear">
|
||||
<span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
|
||||
<div class="time-fields clear">
|
||||
<label class="hour-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
|
||||
</fieldset>
|
||||
<# if ( data.includeTime ) { #>
|
||||
<fieldset class="time-row clear">
|
||||
<legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
|
||||
<div class="time-fields clear">
|
||||
<label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
|
||||
<# var maxHour = data.twelveHourFormat ? 12 : 24; #>
|
||||
<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
|
||||
</label>
|
||||
<span class="time-special-char date-time-separator">:</span>
|
||||
<label class="minute-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
|
||||
<input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
|
||||
</label>
|
||||
<# if ( data.twelveHourFormat ) { #>
|
||||
<label class="am-pm-field">
|
||||
<span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
|
||||
<select class="date-input" data-component="ampm">
|
||||
<option value="am"><?php esc_html_e( 'AM' ); ?></option>
|
||||
<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
|
||||
</select>
|
||||
</label>
|
||||
<# } #>
|
||||
<abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
|
||||
</div>
|
||||
</div>
|
||||
<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
|
||||
<span class="time-special-char date-time-separator">:</span>
|
||||
<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
|
||||
<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
|
||||
<# if ( data.twelveHourFormat ) { #>
|
||||
<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
|
||||
<select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
|
||||
<option value="am"><?php esc_html_e( 'AM' ); ?></option>
|
||||
<option value="pm"><?php esc_html_e( 'PM' ); ?></option>
|
||||
</select>
|
||||
<# } #>
|
||||
<abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
|
||||
</div>
|
||||
</fieldset>
|
||||
<# } #>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-alpha-41669';
|
||||
$wp_version = '4.9-alpha-41670';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue