Changeset 41095 for branches/4.8

Timestamp:

07/19/2017 08:50:48 PM (7 years ago)

Author:

westonruter

Message:

Widgets: Improve Text widget's reliability in syncing Visual tab's contents with Text tab and with hidden sync inputs.

Merges [41094] onto 4.8 branch.
Amends [40631].
Props azaozz, westonruter, rinkuyadav999 for testing.
See #35243.
Fixes #40974 for 4.8.1.

Location:

branches/4.8

Files:

• . (modified) (1 prop)
• src/wp-admin/js/widgets/text-widgets.js (modified) (5 diffs)

branches/4.8/src/wp-admin/js/widgets/text-widgets.js

@@ -82 +82 @@
                 fieldInput.on( 'input change', function updateSyncField() {
                     var syncInput = control.syncContainer.find( 'input[type=hidden].' + fieldName );
-                    if ( syncInput.val() !== $( this ).val() ) {
-                        syncInput.val( $( this ).val() );
+                    if ( syncInput.val() !== fieldInput.val() ) {
+                        syncInput.val( fieldInput.val() );
                         syncInput.trigger( 'change' );
                     }
@@ -165 +165 @@
          */
         initializeEditor: function initializeEditor() {
-            var control = this, changeDebounceDelay = 1000, id, textarea, restoreTextMode = false;
+            var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false;
             textarea = control.fields.text;
             id = textarea.attr( 'id' );
+
+            /**
+             * Trigger change if dirty.
+             *
+             * @returns {void}
+             */
+            triggerChangeIfDirty = function() {
+                var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
+                if ( control.editor.isDirty() ) {
+
+                    /*
+                     * Account for race condition in customizer where user clicks Save & Publish while
+                     * focus was just previously given to to the editor. Since updates to the editor
+                     * are debounced at 1 second and since widget input changes are only synced to
+                     * settings after 250ms, the customizer needs to be put into the processing
+                     * state during the time between the change event is triggered and updateWidget
+                     * logic starts. Note that the debounced update-widget request should be able
+                     * to be removed with the removal of the update-widget request entirely once
+                     * widgets are able to mutate their own instance props directly in JS without
+                     * having to make server round-trips to call the respective WP_Widget::update()
+                     * callbacks. See <https://core.trac.wordpress.org/ticket/33507>.
+                     */
+                    if ( wp.customize && wp.customize.state ) {
+                        wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
+                        _.delay( function() {
+                            wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
+                        }, updateWidgetBuffer );
+                    }
+
+                    if ( ! control.editor.isHidden() ) {
+                        control.editor.save();
+                    }
+                }
+
+                // Trigger change on textarea when it is dirty for sake of widgets in the Customizer needing to sync form inputs to setting models.
+                if ( needsTextareaChangeTrigger ) {
+                    textarea.trigger( 'change' );
+                    needsTextareaChangeTrigger = false;
+                }
+            };
+
+            // Just-in-time force-update the hidden input fields.
+            control.syncContainer.closest( '.widget' ).find( '[name=savewidget]:first' ).on( 'click', function onClickSaveButton() {
+                triggerChangeIfDirty();
+            });
 
             /**
@@ -175 +220 @@
              */
             function buildEditor() {
-                var editor, triggerChangeIfDirty, onInit, showPointerElement;
+                var editor, onInit, showPointerElement;
 
                 // Abort building if the textarea is gone, likely due to the widget having been deleted entirely.
@@ -231 +276 @@
                     // If a prior mce instance was replaced, and it was in text mode, toggle to text mode.
                     if ( restoreTextMode ) {
-                        switchEditors.go( id, 'toggle' );
+                        switchEditors.go( id, 'html' );
                     }
 
@@ -270 +315 @@
 
                 control.editorFocused = false;
-                triggerChangeIfDirty = function() {
-                    var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
-                    if ( editor.isDirty() ) {
-
-                        /*
-                         * Account for race condition in customizer where user clicks Save & Publish while
-                         * focus was just previously given to to the editor. Since updates to the editor
-                         * are debounced at 1 second and since widget input changes are only synced to
-                         * settings after 250ms, the customizer needs to be put into the processing
-                         * state during the time between the change event is triggered and updateWidget
-                         * logic starts. Note that the debounced update-widget request should be able
-                         * to be removed with the removal of the update-widget request entirely once
-                         * widgets are able to mutate their own instance props directly in JS without
-                         * having to make server round-trips to call the respective WP_Widget::update()
-                         * callbacks. See <https://core.trac.wordpress.org/ticket/33507>.
-                         */
-                        if ( wp.customize && wp.customize.state ) {
-                            wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
-                            _.delay( function() {
-                                wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
-                            }, updateWidgetBuffer );
-                        }
-
-                        editor.save();
-                        textarea.trigger( 'change' );
-                    }
-                };
-                editor.on( 'focus', function() {
+
+                editor.on( 'focus', function onEditorFocus() {
                     control.editorFocused = true;
                 });
+                editor.on( 'paste', function onEditorPaste() {
+                    editor.setDirty( true ); // Because pasting doesn't currently set the dirty state.
+                    triggerChangeIfDirty();
+                });
+                editor.on( 'NodeChange', function onNodeChange() {
+                    needsTextareaChangeTrigger = true;
+                });
                 editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) );
-                editor.on( 'blur', function() {
+                editor.on( 'blur hide', function onEditorBlur() {
                     control.editorFocused = false;
                     triggerChangeIfDirty();