Customize: Add setting validation model and control notifications to augment setting sanitization.
When a setting is invalid, not only will it be blocked from being saved but all other settings will be blocked as well. This ensures that Customizer saves aren't partial but are more transactional. User will be displayed the error in a notification so that they can fix and re-attempt saving.
PHP changes:
* Introduces `WP_Customize_Setting::validate()`, `WP_Customize_Setting::$validate_callback`, and the `customize_validate_{$setting_id}` filter.
* Introduces `WP_Customize_Manager::validate_setting_values()` to do validation (and sanitization) for the setting values supplied, returning a list of `WP_Error` instances for invalid settings.
* Attempting to save settings that are invalid will result in the save being blocked entirely, with the errors being sent in the `customize_save_response`. Modifies `WP_Customize_Manager::save()` to check all settings for validity issues prior to calling their `save` methods.
* Introduces `WP_Customize_Setting::json()` for parity with the other Customizer classes. This includes exporting of the `type`.
* Modifies `WP_Customize_Manager::post_value()` to apply `validate` after `sanitize`, and if validation fails, to return the `$default`.
* Introduces `customize_save_validation_before` action which fires right before the validation checks are made prior to saving.
JS changes:
* Introduces `wp.customize.Notification` in JS which to represent `WP_Error` instances returned from the server when setting validation fails.
* Introduces `wp.customize.Setting.prototype.notifications`.
* Introduces `wp.customize.Control.prototype.notifications`, which are synced with a control's settings' notifications.
* Introduces `wp.customize.Control.prototype.renderNotifications()` to re-render a control's notifications in its notification area. This is called automatically when the notifications collection changes.
* Introduces `wp.customize.settingConstructor`, allowing custom setting types to be used in the same way that custom controls, panels, and sections can be made.
* Injects a notification area into existing controls which is populated in response to the control's `notifications` collection changing. A custom control can customize the placement of the notification area by overriding the new `getNotificationsContainerElement` method.
* When a save fails due to setting invalidity, the invalidity errors will be added to the settings to then populate in the controls' notification areas, and the first such invalid control will be focused.
Props westonruter, celloexpressions, mrahmadawais.
See #35210.
See #30937.
Fixes #34893.
Built from https://develop.svn.wordpress.org/trunk@37476
git-svn-id: http://core.svn.wordpress.org/trunk@37444 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-05-20 23:10:27 +02:00
|
|
|
body{overflow:hidden;-webkit-text-size-adjust:100%}#customize-controls a{text-decoration:none}#customize-controls h3{font-size:14px}#customize-controls img{max-width:100%}#customize-controls .submit{text-align:center}#customize-controls .description{color:#555}#customize-header-actions .button-primary{float:left;margin-top:9px}#customize-header-actions .spinner{margin-top:13px;margin-left:4px}.saving #customize-header-actions .spinner{visibility:visible}#customize-header-actions{border-bottom:1px solid #ddd}#customize-controls .wp-full-overlay-sidebar-content{overflow-y:auto;overflow-x:hidden}#customize-controls .customize-info{border:none;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-bottom:15px}#customize-controls .customize-info .accordion-section-title{background:#fff;color:#555;border-right:none;border-left:none;border-bottom:none;cursor:default}#customize-controls .customize-info .accordion-section-title:focus:after,#customize-controls .customize-info .accordion-section-title:hover:after,#customize-controls .customize-info.open .accordion-section-title:after{color:#333}#customize-controls .customize-info .accordion-section-title:after{display:none}#customize-controls .customize-info .preview-notice{font-size:13px;line-height:24px}#customize-controls .control-section .customize-section-title h3,#customize-controls .control-section h3.customize-section-title,#customize-controls .customize-info .panel-title{font-size:20px;font-weight:200;line-height:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-section-title span.customize-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#customize-controls .customize-info .customize-help-toggle{position:absolute;top:4px;left:1px;padding:20px 10px 10px 20px;width:20px;height:20px;cursor:pointer;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;background:0 0;color:#555;border:none}#customize-controls .customize-info .customize-help-toggle:before{position:absolute;top:5px;right:6px}#customize-controls .customize-info .customize-help-toggle:focus,#customize-controls .customize-info .customize-help-toggle:hover,#customize-controls .customize-info.open .customize-help-toggle{color:#0073aa}#customize-controls .customize-info .customize-panel-description,#customize-controls .no-widget-areas-rendered-notice{color:#555;display:none;background:#fff;padding:12px 15px;border-top:1px solid #ddd}#customize-controls .customize-info .customize-panel-description.open+.no-widget-areas-rendered-notice{border-top:none}#customize-controls .customize-info .customize-panel-description p:first-child{margin-top:0}#customize-controls .customize-info .customize-panel-description p:last-child{margin-bottom:0}#customize-controls .current-panel .control-section>h3.accordion-section-title{padding-left:30px}#customize-theme-controls .control-section{border:none}#customize-theme-controls .accordion-section-title{color:#555;background-color:#fff;border-bottom:1px solid #eee}#customize-theme-controls .accordion-section-title:after{content:"\f341";color:#a0a5aa}#customize-theme-controls .accordion-section-content{color:#555;background:0 0;position:absolute;top:0;right:100%;width:100%;margin:0;padding:12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#customize-controls .control-section .accordion-section-title:focus,#customize-controls .control-section .accordion-section-title:hover,#customize-controls .control-section.open .accordion-section-title,#customize-controls .control-section:hover>.accordion-section-title{color:#23282d;background:#f5f5f5}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{background:#f5f5f5}#customize-theme-controls .control-section .accordion-section-title:focus:after,#customize-theme-controls .control-section .accordion-section-title:hover:after,#customize-theme-controls .control-section.open .acco
|