Benutzerdefiniertes jQuery in Widget nach dem Speichern wieder aktivieren

WordPress ist mit mehreren Widgets ausgestattet, die unter Design > Widgts in vordefinierte Bereiche (meistens in eine oder mehrere Seitenleisten und / oder den Fußberech ) geschoben werden, die (üblicherweise) auf allen Seiten gleich sind. Daher findet man in Widgets gerne Steuerelemente die der Navigation, der Suche oder der Proklamation aktueller Neuigkeiten dienen.

Zusätzliche Widgets bringen manche Themes mit. Widgets können aber auch eigenständige Plugins mit komplexer Funktionalität und flexiblen Einstellungen sein. Zum Beispiel lassen sich in selbst definierten Widget-Einstellungen Hintergrundfarben eines Widgets ändern, oder ganze Datensätze anlegen und speichern (z.B. Icon Links). In einem solchen Fall ist nicht auszuschließen, dass eigene jQuery Funktionalität nötig ist, oder man auf jQuery-Plugins des WordPress-Kerns zurückgreifen muss, wie beispielsweise den Color-Picker.

Nachdem ich ein solches Widget bereit für die ersten Tests entwickelt hatte, fiel mir auf, dass von mir im Widget eingebundene jQuery-Funktionalität nach dem ersten Speichern der Widgeteinstellungen nicht mehr funktionierte. Die jQuery-Datei war noch eingebunden, aber das Widget benahm sich, als hätte es seinen Bezug zur jQuery-Funktion verloren. Nach einem Refresh der Seite funktionierte alles wieder.

Das passierte allerdings nur, wenn ich ein Widget im Dashboard konfigurierte, nicht jedoch im Customizer. Dort konnte ich speichern so oft ich wollte. Die Änderungen waren umgehend sichtbar, und ich konnte die Farb-Einstellungen beliebig oft nach dem Speichern mit dem jQuery Color Picker ändern.

In der Customizer-Datei (wp-includes/js/customize-preview-widget), wird nach dem Update eines Widgets ein partieller Refresh veranlasst:

renderContent: function( placement ) {
    var partial = this;
    if ( api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement ) ) {
	api.preview.send( 'widget-updated', partial.widgetId );
	api.selectiveRefresh.trigger( 'widget-updated', partial );
    }
}

Dafür zuständig ist der jQuery Hook 'widget-updated' der abgefeuert wird, nachdem die Daten eines Widgets via Ajax gespeichert wurden. Es gibt noch eine Situation, bei der es erforderlich ist einzugreifen, und zwar, wenn ein neues Widget hinzugefügt wird.

Diese beiden Situationen musste ich abfangen um meine selber in ein Widget eingebundene jQuery-Funktionalität auch nach dem Speichern verfügbar zu halten:

jQuery(document).on('widget-updated', function(event, widget) {...}
jQuery(document).on('widget-added', function(event, widget) {...}

Um sich den Colorpicker „zurückzuholen“, sieht es beispielsweise so aus:

jQuery(document).on('widget-updated', function(event, widget) {
    var widget_id = jQuery(widget).attr('id'); // den Code immer nur an das betroffene Widget binden.
    jQuery('#' + widget_id).find('.colorfield').wpColorPicker();
});
jQuery(document).on('widget-added', function(event, widget) {
    var widget_id = jQuery(widget).attr('id'); // den Code immer nur an das betroffene Widget binden.
    jQuery('#' + widget_id).find('.colorfield').wpColorPicker();
});

Daraus ergibt sich nebenbei das Erfordernis, eigenen für Widgets bestimmten jQuery-Code an Objekte zu binden (jQuery Plugin).

Aktualisierung per 10.10.2017