Access Default Widget's Controls in Customizer Pane

Question

I'm trying to access any default widget's control in the customizer pane, not the preview !
So I've enqueue a testing.js file under a customize_controls_enqueue_scripts action
/** * Enqueue script for custom customize control. */ function custom_customize_enqueue() { wp_enqueue_script( 'testing', get_template_directory_uri() . '/assets/js/testing.js', array( 'jquery', 'customize-controls' ), false, true ); } add_action( 'customize_controls_enqueue_scripts', 'custom_customize_enqueue' );

In this testing.js file, if I try to reach a control's container like so
alert(wp.customize.control('text_widget_color_setting').container.length);
Everything is okay and the result of alert is 1, so I'm reaching the control by the DOM.

But if I try to reach a default widget control's container like so
alert(wp.customize.control('widget_search-2').container.length);
I get Uncaught TypeError: Cannot read property 'container' of undefined
I understand that I didn't define/create this default widget control but WP did, however this control have id="customize-control-widget_search-2" ?!

The part that is driving me crazy is that if I try :
alert(wp.customize.section('sidebar-widgets-sidebar-1').controls().length);
The DOM can see all the default widget's controls under this sidebar-1 section that is created by WP !

Thanks in advance for any help.

Answer 1

You should wait until the control is guaranteed to be created. There is a deferred pattern you should use:

wp.customize.control('widget_search[2]', function( control ) {
    // ...
    console.info( control.container );
    // ...
});

Also, the ID format for widget customizer controls is widget_search[2] not widget_search-2. Note the difference from the DOM element ID.