Как обновить Настройщик тем после изменения цвета в wpColorPicker?

Я разрабатываю свой собственный виджет с настройкой, где я могу установить пользовательский цвет для виджета. Я использую этот код для инициализации wpColorPicker вместо стандартного текстового ввода в методе form() класса Виджет:

jQuery(document).ready(function($){
    $('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker();
});

Все работает отлично, но если вы пытаетесь изменить цвет в настройщике Тем, после изменения значения ничего не происходит: кнопка Сохранить все еще не активна, и страница сайта не обновляется с новым цветом.

Ранее я пробовал вызвать событие change, но это не сработало:

$('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').wpColorPicker({
    change: function(event, ui) {
        $('#<?php echo $this->get_field_id( 'bg_color_1' ); ?>').change();
    }
});

Как перезагрузить предварительный просмотр страницы (вызвать событие, когда значение внутри моего ввода изменилось)?

Попробуйте использовать существующую функцию WordPress для изменения цветовой палитры, как:

function my_mce4_options( $init ) {
    $default_colours="
        "000000", "Черный",
        "993300", "Сожженный апельсин",
        "333300", "Темный оливковый",
        "003300", "Темно-зеленый",
        "003366", "Темно-азурный",
        "000080", "Темно-синий",
        "333399", "Индиго",
        "333333", "Очень темно-серый",
        "800000", "Темно-красный",
        "FF6600", "Оранжевый",
        "808000", "Оливковый",
        "008000", "Зеленый",
        "008080", "Бирюзовый",
        "0000FF", "Синий",
        "666699", "Серо-голубой",
        "808080", "Серый",
        "FF0000", "Красный",
        "FF9900", "Янтарь",
        "99CC00", "Желто-зеленый",
        "339966", "Морская зелень",
        "33CCCC", "Бирюзовый",
        "3366FF", "Королевский синий",
        "800080", "Пурпурный",
        "999999", "Средний серый",
        "FF00FF", "Пурпурный",
        "FFCC00", "Золото",
        "FFFF00", "Желтый",
        "00FF00", "Лаймовый",
        "00FFFF", "Аква",
        "00CCFF", "Небесно-голубой",
        "993366", "Коричневый",
        "C0C0C0", "Серебряный",
        "FF99CC", "Розовый",
        "FFCC99", "Персиковый",
        "FFFF99", "Светло-желтый",
        "CCFFCC", "Бледно-зеленый",
        "CCFFFF", "Бледно-циановый",
        "99CCFF", "Светло-небесно-голубой",
        "CC99FF", "Слива",
        "FFFFFF", "Белый"
        ";
    $custom_colours="
        "e14d43", "Название цвета 1",
        "d83131", "Название цвета 2",
        "ed1c24", "Название цвета 3",
        "f99b1c", "Название цвета 4",
        "50b848", "Название цвета 5",
        "00a859", "Название цвета 6",
        "00aae7", "Название цвета 7",
        "282828", "Название цвета 8"
        ";
    $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
    $init['textcolor_rows'] = 6; // расширить цветовую сетку до 6 строк
    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Надеюсь, это поможет вам!

Это моя такая же проблема, которая была решена с помощью этого кода:

<?php

class my_widget extends WP_Widget 
{
    function __construct() 
    {   
        parent::__construct(__CLASS__, __('Заголовок', TEXT_DOMAIN), array ( 'description' => __( 'Описание', TEXT_DOMAIN ), ) );
    
        //...
        
        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
        add_action( 'admin_footer-widgets.php', array( $this, 'print_widget_scripts' ), 9999 );
    }

    public function enqueue_scripts( $hook_suffix ) {
        if ( 'widgets.php' !== $hook_suffix ) {
            return;
        }

        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' );
        wp_enqueue_script( 'underscore' );
    }   

    public function print_widget_scripts() {
        ?>
        <script>
            ( function( $ ){
                function initColorPicker( widget ) {
                    widget.find( '.color-picker' ).wpColorPicker( {
                        change: _.throttle( function() { // Для Настройщика
                            $(this).trigger( 'change' );
                        }, 3000 )
                    });
                }

                function onFormUpdate( event, widget ) {
                    initColorPicker( widget );
                }

                $( document ).on( 'widget-added widget-updated', onFormUpdate );

                $( document ).ready( function() {
                    $( '.widget:has(.color-picker)' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
                
            }( jQuery ) );
        </script>
        <?php
    }   
}