I am trying to send data from customize control to customize previewer. The scripts work fine until the customize previewer is refresh. The problem is only the previewer is refresh, the customize control won't send the data again, so there is no data for previewer to get and perform actions. Is there a way for customize control to send data again every time the previewer has been refresh? Here are my scripts: customize-preview.js
(function ($) {
wp.customize.bind('preview-ready', function () {
console.log('Previewer is ready');
wp.customize.preview.bind('widget-show-name', function (data) {
showWidgetName(data);
showWidgetOutline(data);
});
function showWidgetName(widgetId) {
//Find the widget span
let $widget = $('body').find('[data-customize-partial-id="widget[' + widgetId + ']"]');
//Get its name
let name = $widget.data('customize-widget-name');
//Show the name
if (name && !$widget.find('.widget__text').length) {
$widget.prepend('<span class="widget__text"><strong>Editing</strong>: ' + name + '</span>');
}
}
function showWidgetOutline(widgetId) {
//Find the widget area
let $widget = $('body').find('#' + widgetId);
//Highlight it when mouse enters and remove when mouse leaves
$($widget).on({
mouseenter: function () {
$widget.addClass('widget-customizer-highlighted-widget');
},
mouseleave: function () {
$widget.removeClass('widget-customizer-highlighted-widget');
}
})
}
});})(jQuery);
customize-controls.js
(function ($) {
wp.customize.bind('ready', function () {
console.log('Control is ready.');
wp.customize.control.bind('change', function (widget) {
let widgetIdArray = widget.selector.split('_');
widgetIdArray.splice(0, 1);
let widgetId = widgetIdArray.join('_');
wp.customize.previewer.send('widget-show-name', widgetId);
});
});})(jQuery);