WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30236 closed defect (bug) (fixed)

Trigger widget-added event in Customizer when initializing

Reported by: westonruter Owned by: ocean90
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Customize Keywords: has-patch
Focuses: javascript Cc:
PR Number:

Description

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.

Attachments (1)

30236.diff (871 bytes) - added by westonruter 5 years ago.

Download all attachments as: .zip

Change History (7)

@westonruter
5 years ago

#1 @westonruter
5 years ago

  • Keywords has-patch added
  • Owner set to ocean90
  • Status changed from new to reviewing

#2 follow-up: @ocean90
5 years ago

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

#3 in reply to: ↑ 2 ; follow-up: @westonruter
5 years ago

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?

#4 in reply to: ↑ 3 @ocean90
5 years ago

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().

#5 @westonruter
5 years ago

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.

#6 @ocean90
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.