Widgets: Add dirty state tracking for widgets on admin screen.

* Mark a widget as dirty when a field input triggers a `change` or `input` event; clear dirty state when widget is successfully saved.
* Disable Save button and re-label "Saved" when widget not dirty.
* Show AYS dialog when leaving widgets admin screen with unsaved changes.
* When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
* Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
* The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
* Prevent saving widget when form fails `checkValidity`.
* Fix frequency of triggering of `change` event on the rich Text widget's `textarea` limited now to when there are actual changes.
* Add a class of `widget-dirty` to widget containers when the widget has unsaved changes.

Props westonruter, timmydcrawford, melchoyce.
Fixes #41610, #23120.


git-svn-id: https://develop.svn.wordpress.org/trunk@41352 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2017-09-08 19:10:59 +00:00
parent 6e7053a6df
commit f5c342ce76
5 changed files with 108 additions and 12 deletions

View File

@@ -672,6 +672,12 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'admin-gallery', "/wp-admin/js/gallery$suffix.js", array( 'jquery-ui-sortable' ) );
$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
$scripts->add_inline_script( 'admin-widgets', sprintf( 'wpWidgets.l10n = %s;', wp_json_encode( array(
'save' => __( 'Save' ),
'saved' => __( 'Saved' ),
'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
) ) ) );
$scripts->add( 'media-widgets', "/wp-admin/js/widgets/media-widgets$suffix.js", array( 'jquery', 'media-models', 'media-views', 'wp-api-request' ) );
$scripts->add_inline_script( 'media-widgets', 'wp.mediaWidgets.init();', 'after' );