Improve handling of active state for dynamically-created controls/sections/panels

[mohdsayed]

When creating a dynamic control using wp.customize.DynamicControl, it does not give access to the methods that are available in the default controls. So we cannot do wp.customize.control( 'dynamicId' ).deactivate(); on these newly added controls.

Default control :

Dynamic Control :

I am using the develop branch( Version: 0.5.0 ) of this plugin

[westonruter]

@sayedwp The deactivate method should be present. I just tried this and it doesn't error:

wp.customize.control('post[post][5779][post_excerpt]').deactivate()

But actually, there is no effect. The control does not hide. The reason for this is we override the active.validate method:

wp-customize-posts/js/customize-post-section.js

Lines 662 to 665 in d75de18

	// Override preview trying to de-activate control not present in preview context.
	control.active.validate = function() {
	return true;
	};

So this override would need to be removed or overridden. See also the custom logic for validate on the section itself, where it prevents the active state from going false if the setting is dirty:

wp-customize-posts/js/customize-post-section.js

Lines 78 to 85 in d75de18

	section.active.validate = function( active ) {
	var setting = api( section.id );
	if ( setting ) {
	return setting._dirty || active;
	} else {
	return true;
	}
	};

[mohdsayed]

okay I see, it was not working because of active.validate method. It was not visible in console, so I thought it's probably not available, thanks

[westonruter]

Yes, it's not exactly intuitive right now. An improvement is needed in core to prevent dynamically-added controls from being deactivated when the preview refreshes, to avoid us needing to add these validate overrides.

The relevant code is right here: https://github.com/xwp/wordpress-develop/blob/230f2986fb744a9d0dcaa09a448f9982b26322d6/src/wp-admin/js/customize-controls.js#L2883-L2911

And the specific code causing the problem is:

var active = !! ( activeConstructs && activeConstructs[ id ] );

We could potentially fix this in Core by something like:

if ( ! activeConstructs ) {
    return;
}
var active, isDynamicallyCreated;
if ( ! _.isUndefined( activeConstructs[ id ] ) {
    active = _.isUndefined( activeConstructs[ id ];
} else {
    isDynamicallyCreated = ! _.isUndefined( wp.customize.settings[ type + 's' ][ id ] );
    active = isDynamicallyCreated ? null : false;
}
if ( _.isBoolean( active ) ) {
    if ( active ) {
        construct.activate();
    } else {
        construct.deactivate();
    }
}

The isDynamicallyCreated check prevents dynamically-created constructs from being deactivated from preview refreshes since the control wouldn't be shown in the preview. So if it was dynamically created, and it didn't exist when the preview refreshed, then the change to the active state would be eliminated. This would allow us to get rid of our validate overrides.

Could you give that a try and see if it works? We could get this into 4.6.

[westonruter]

Moved to Trac: https://core.trac.wordpress.org/ticket/37270