Changeset 36407

Timestamp:

01/26/2016 11:51:17 PM (11 years ago)

Author:

westonruter

Message:

Customizer: Improve parity between JS Setting models in preview with JS Setting models in pane.

• Ensure that Setting Value objects in preview get initial _dirty flag set if values among POST data.
• Upon saved event, send saved message to preview with the response to trigger saved event there.
• Reset _dirty flag for all setting Value objects in preview upon saved.
• Continue to create settings synced from pane even after initial bootstrap, and create them as dirty.
• Ensure that id property is set for setting Value objects in preview.

See #27355.
Fixes #35616.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-includes/class-wp-customize-manager.php (modified) (1 diff)
• wp-includes/js/customize-preview.js (modified) (3 diffs)

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

@@ -3346 +3346 @@
                                                 } );
 
+                                                api.previewer.send( 'saved', response );
+
                                                 api.trigger( 'saved', response );
                                         } );

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -806 +806 @@
                         'activeSections' => array(),
                         'activeControls' => array(),
+                        '_dirty' => array_keys( $this->unsanitized_post_values() ),
                 );
 

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

@@ -85 +85 @@
 
         $( function() {
+                var bg, setValue;
+
                 api.settings = window._wpCustomizeSettings;
-                if ( ! api.settings )
+                if ( ! api.settings ) {
                         return;
-
-                var bg;
+                }
 
                 api.preview = new api.Preview({
@@ -96 +97 @@
                 });
 
+                /**
+                 * Create/update a setting value.
+                 *
+                 * @param {string}  id            - Setting ID.
+                 * @param {*}       value         - Setting value.
+                 * @param {boolean} [createDirty] - Whether to create a setting as dirty. Defaults to false.
+                 */
+                setValue = function( id, value, createDirty ) {
+                        var setting = api( id );
+                        if ( setting ) {
+                                setting.set( value );
+                        } else {
+                                createDirty = createDirty || false;
+                                setting = api.create( id, value, {
+                                        id: id
+                                } );
+
+                                // Mark dynamically-created settings as dirty so they will get posted.
+                                if ( createDirty ) {
+                                        setting._dirty = true;
+                                }
+                        }
+                };
+
                 api.preview.bind( 'settings', function( values ) {
-                        $.each( values, function( id, value ) {
-                                if ( api.has( id ) )
-                                        api( id ).set( value );
-                                else
-                                        api.create( id, value );
-                        });
+                        $.each( values, setValue );
                 });
 
                 api.preview.trigger( 'settings', api.settings.values );
 
+                $.each( api.settings._dirty, function( i, id ) {
+                        var setting = api( id );
+                        if ( setting ) {
+                                setting._dirty = true;
+                        }
+                } );
+
                 api.preview.bind( 'setting', function( args ) {
-                        var value;
-
-                        args = args.slice();
-
-                        if ( value = api( args.shift() ) )
-                                value.set.apply( value, args );
+                        var createDirty = true;
+                        setValue.apply( null, args.concat( createDirty ) );
                 });
 
@@ -130 +153 @@
                         api.preview.send( 'documentTitle', document.title );
                 });
+
+                api.preview.bind( 'saved', function( response ) {
+                        api.trigger( 'saved', response );
+                } );
+
+                api.bind( 'saved', function() {
+                        api.each( function( setting ) {
+                                setting._dirty = false;
+                        } );
+                } );
 
                 /*