Ticket #37032: 37032.3.diff

src/wp-admin/js/customize-controls.js

@@ -4299 +4299 @@
                         var previewer = this, synced = {}, constructs;
 
                         synced.settings = api.get();
+                        synced['settings-modified-while-loading'] = previewer.settingsModifiedWhileLoading;
                         if ( 'resolved' !== previewer.deferred.active.state() || previewer.loading ) {
                                 synced.scroll = previewer.scroll;
                         }
@@ -4421 +4422 @@
                  * Refresh the preview seamlessly.
                  */
                 refresh: function() {
-                        var previewer = this;
+                        var previewer = this, onSettingChange;
 
                         // Display loading indicator
                         previewer.send( 'loading-initiated' );
@@ -4435 +4436 @@
                                 container:  previewer.container
                         });
 
+                        previewer.settingsModifiedWhileLoading = {};
+                        onSettingChange = function( setting ) {
+                                previewer.settingsModifiedWhileLoading[ setting.id ] = true;
+                        };
+                        api.bind( 'change', onSettingChange );
+                        previewer.loading.always( function() {
+                                api.unbind( 'change', onSettingChange );
+                        } );
+
                         previewer.loading.done( function( readyData ) {
                                 var loadingFrame = this, previousPreview, onceSynced;
 

src/wp-includes/js/customize-preview.js

@@ -654 +654 @@
                 });
 
                 api.preview.bind( 'sync', function( events ) {
+
+                        /*
+                         * Delete any settings that already exist locally which haven't been
+                         * modified in the pane while the preview was loading. This prevents
+                         * situations where the JS value being synced from the pane may differ
+                         * from the PHP-sanitized JS value in the preview which causes the
+                         * non-sanitized JS value to clobber the PHP-sanitized value. This
+                         * is particularly important for selective refresh partials that
+                         * have a fallback refresh behavior since infinite refreshing would
+                         * result.
+                         */
+                        if ( events.settings && events['settings-modified-while-loading'] ) {
+                                _.each( _.keys( events.settings ), function( syncedSettingId ) {
+                                        if ( api.has( syncedSettingId ) && ! events['settings-modified-while-loading'][ syncedSettingId ] ) {
+                                                delete events.settings[ syncedSettingId ];
+                                        }
+                                } );
+                        }
+
                         $.each( events, function( event, args ) {
                                 api.preview.trigger( event, args );
                         });