Trigger widget-added event in Customizer when initializing

[westonruter]

Parent ticket: #28709

We need to trigger the widget-added event when a WidgetControl is ready so that plugins can attach any event listeners and dynamic UI elements. Before 4.1 this was not needed because the widget controls were rendered into the pane via PHP and so they could be selected as children of #widgets-right, but now in 4.1 (#28709) the controls are added to the pane dynamically via JS at jQuery.ready, which may be too late for widgets' enqueued scripts.

[ocean90]

I added

$( document ).on( 'widget-added', function(event, widget) {
	console.log(widget);
});

before the .trigger() line and got this with 4 widgets:

[div#widget-15_search-3.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-16_color-picker-3.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-16_color-picker-3.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-17_pages-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-17_pages-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-17_pages-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-18_rss-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-18_rss-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-18_rss-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437
[div#widget-18_rss-2.widget, prevObject: jQuery.fn.init[1], context: undefined, selector: ".widget:first", jquery: "1.11.1", constructor: function…] customize-widgets.js?ver=4.1-alpha-30000-src:437

[westonruter]

Replying to ocean90:

I added […] before the .trigger() line and got this with 4 widgets: […]

Isn't this to be expected? With each widget becomingready a new widget-added event handler gets registered and then gets triggered with that widget as the param to the event.

To test, don't you mean to place your snippet in the root of the script so it doesn't get called multiple times?

[ocean90]

Replying to westonruter:

To test, don't you mean to place your snippet in the root of the script so it doesn't get called multiple times?

You're right, my mistake.

But adding a new widget triggers widget-added now twice for me: api.Widgets.WidgetControl.ready() and api.Widgets.SidebarControl.addWidget().

[westonruter]

Good point. So what do you think about removing the trigger from the latter? It is now going to be done in ready every time now regardless. And actually, the one inside of addWidget could technically fire before the control is even added to the DOM, since a control will wait to embed its container until its containing section also gets embedded.

[ocean90]

In 30308:

Customizer: Trigger widget-added event when initializing.

Widget controls are now added to the pane dynamically via JavaScript, see #28709.
Remove the event trigger from SidebarControl.addWidget() as it's covered by WidgetControl.ready().

props westonruter.
fixes #30236.