: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
_.each( widgetPartial.placements(), function( placement ) {
placement.context.sidebar_id === sidebarPartial.sidebarId ||
( placement.context.sidebar_args && placement.context.sidebar_args.id === sidebarPartial.sidebarId )
placement.container.remove();
delete self.renderedWidgets[ removedWidgetId ];
// Handle insertion of widgets.
widgetsAdded = _.difference( newWidgetIds, oldWidgetIds );
_.each( widgetsAdded, function( addedWidgetId ) {
var widgetPartial = sidebarPartial.ensureWidgetPlacementContainers( addedWidgetId );
addedWidgetPartials.push( widgetPartial );
self.renderedWidgets[ addedWidgetId ] = true;
_.each( addedWidgetPartials, function( widgetPartial ) {
api.selectiveRefresh.trigger( 'sidebar-updated', sidebarPartial );
* Refreshes the sidebar partial.
* Note that the meat is handled in handleSettingChange because it has the
* context of which widgets were removed.
* @return {Promise} A promise postponing the refresh.
var partial = this, deferred = $.Deferred();
deferred.fail( function() {
if ( 0 === partial.placements().length ) {
_.each( partial.reflowWidgets(), function( sidebarPlacement ) {
api.selectiveRefresh.trigger( 'partial-content-rendered', sidebarPlacement );
return deferred.promise();
api.selectiveRefresh.partialConstructor.sidebar = self.SidebarPartial;
api.selectiveRefresh.partialConstructor.widget = self.WidgetPartial;
* Adds partials for the registered widget areas (sidebars).
self.addPartials = function() {
_.each( self.registeredSidebars, function( registeredSidebar ) {
var partial, partialId = 'sidebar[' + registeredSidebar.id + ']';
partial = api.selectiveRefresh.partial( partialId );
partial = new self.SidebarPartial( partialId, {
sidebarArgs: registeredSidebar
api.selectiveRefresh.partial.add( partial );
* Calculates the selector for the sidebar's widgets based on the registered
* @memberOf wp.customize.widgetsPreview
self.buildWidgetSelectors = function() {
$.each( self.registeredSidebars, function( i, sidebar ) {
emptyWidget = $( widgetTpl );
widgetSelector = emptyWidget.prop( 'tagName' ) || '';
widgetClasses = emptyWidget.prop( 'className' ) || '';
// Prevent a rare case when before_widget, before_title, after_title and after_widget is empty.
// Remove class names that incorporate the string formatting placeholders %1$s and %2$s.
widgetClasses = widgetClasses.replace( /\S*%[12]\$s\S*/g, '' );
widgetClasses = widgetClasses.replace( /^\s+|\s+$/g, '' );
widgetSelector += '.' + widgetClasses.split( /\s+/ ).join( '.' );
self.widgetSelectors.push( widgetSelector );
* Highlights the widget on widget updates or widget control mouse overs.
* @memberOf wp.customize.widgetsPreview
* @param {string} widgetId ID of the widget.
self.highlightWidget = function( widgetId ) {
var $body = $( document.body ),
$widget = $( '#' + widgetId );
$body.find( '.widget-customizer-highlighted-widget' ).removeClass( 'widget-customizer-highlighted-widget' );
$widget.addClass( 'widget-customizer-highlighted-widget' );
$widget.removeClass( 'widget-customizer-highlighted-widget' );
* Shows a title and highlights widgets on hover. On shift+clicking focuses the
* @memberOf wp.customize.widgetsPreview
self.highlightControls = function() {
selector = this.widgetSelectors.join( ',' );
// Skip adding highlights if not in the customizer preview iframe.
if ( ! api.settings.channel ) {
$( selector ).attr( 'title', this.l10n.widgetTooltip );
// Highlights widget when entering the widget editor.
$( document ).on( 'mouseenter', selector, function() {
self.preview.send( 'highlight-widget-control', $( this ).prop( 'id' ) );
// Open expand the widget control when shift+clicking the widget element.
$( document ).on( 'click', selector, function( e ) {
self.preview.send( 'focus-widget-control', $( this ).prop( 'id' ) );
* @memberOf wp.customize.widgetsPreview
* @param {string} widgetId The widget ID.
* @return {{idBase: string, number: number|null}} An object containing the idBase
* and number of the parsed widget ID.
self.parseWidgetId = function( widgetId ) {
matches = widgetId.match( /^(.+)-(\d+)$/ );
parsed.idBase = matches[1];
parsed.number = parseInt( matches[2], 10 );
parsed.idBase = widgetId; // Likely an old single widget.
* Parses a widget setting ID.
* @memberOf wp.customize.widgetsPreview
* @param {string} settingId Widget setting ID.
* @return {{idBase: string, number: number|null}|null} Either an object containing the idBase
* and number of the parsed widget setting ID,
self.parseWidgetSettingId = function( settingId ) {
matches = settingId.match( /^widget_([^\[]+?)(?:\[(\d+)])?$/ );
parsed.idBase = matches[1];
parsed.number = parseInt( matches[2], 10 );
* Converts a widget ID into a Customizer setting ID.
* @memberOf wp.customize.widgetsPreview
* @param {string} widgetId The widget ID.
* @return {string} The setting ID.
self.getWidgetSettingId = function( widgetId ) {
var parsed = this.parseWidgetId( widgetId ), settingId;
settingId = 'widget_' + parsed.idBase;
settingId += '[' + String( parsed.number ) + ']';
api.bind( 'preview-ready', function() {
$.extend( self, _wpWidgetCustomizerPreviewSettings );
})( jQuery, _, wp, wp.customize );