WordPress Custom Widget Image Selector - кнопка «Сохранить» отключена

Question

Я пытаюсь создать собственный виджет WordPress, который позволяет пользователю выбирать изображение, ссылку и заголовок. Виджет будет отображаться в виде рекламного изображения на боковой панели. Это код:

PHP:

<?php


class Ad extends WP_Widget {

public function __construct() {
    parent::__construct(
        'widget-ad',
        'Advertisement',
        array(
            'description' => 'Advertisement Widget',
            'classname'   => 'widget-ad',
        ) );
}

public function widget( $args, $instance ) {
    ...
}

public function form( $instance ) {
    $title       = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $url         = ! empty( $instance['url'] ) ? $instance['url'] : '';
    $image_url         = ! empty( $instance['image_url'] ) ? $instance['image_url'] : '';
    ?>
    <p>
        <label
                for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
            Title:
        </label>
        <input
                class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
                type="text"
                value="<?php echo esc_attr( $title ); ?>">
    </p>
    <p>
        <label
                for="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>">
            URL:
        </label>
        <input
                class="widefat"
                id="<?php echo esc_attr( $this->get_field_id( 'url' ) ); ?>"
                name="<?php echo esc_attr( $this->get_field_name( 'url' ) ); ?>"
                type="text"
                value="<?php echo esc_attr( $url ); ?>"
                dir="ltr">
    </p>
    <p>
        <img
             class="image-fluid"
             id="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ) . "-img"; ?>"
             src="<?php echo esc_url( $image_url ); ?>"
             alt="" />
        <input type="text"
               id="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>"
               name="<?php echo esc_attr( $this->get_field_name( 'image_url' ) ); ?>"
               value="<?php echo esc_url( $image_url ); ?>" />
        <br>
        <a href="#" class="button js-select-media"
           data-target="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>">
            Select Image
        </a>
        <a href="#" class="button js-remove-media"
           data-target="<?php echo esc_attr( $this->get_field_id( 'image_url' ) ); ?>">
            Remove Image
        </a>
    </p>
    <?php
}

public function update( $new_instance, $old_instance ) {
    $instance                = array();
    $instance['title']       = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['url']         = ( ! empty( $new_instance['url'] ) ) ? strip_tags( $new_instance['url'] ) : '';
    $instance['image_url']         = ( ! empty( $new_instance['image_url'] ) ) ? strip_tags( $new_instance['image_url'] ) : '';

    return $instance;
}
}

/**
 * Register Widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'Ad' );
});

JavaScript:

$(document).ready(() => {

    // Open WP media selector
    $(document).on('click', '.js-select-media', (e) => {
        e.preventDefault();
        const target_id = $(e.target).data('target');
        const input_element = $('#' + target_id);
        const img_element = $('#' + target_id + '-img');
        const image = wp.media({
            title: 'Select An Image',
            multiple: false,
            library: { 
                type: 'image'
            },
            button: {
                text: 'Select'
            },
        }).open().on('select', (e) => {
            const image_url = image.state().get('selection').first().toJSON().url;
            input_element.val(image_url).trigger('change');
            img_element.attr('src', image_url);
        });
    });

    // Remove selected Image
    $(document).on('click', '.js-remove-media', (e) => {
        e.preventDefault();
        const element = $(e.target);
        const target_id = element.data('target');
        $('#' + target_id).val('').trigger('change');
        $('#' + target_id + '-img').attr('src', '');
    });

Проблема:

В административной области сайта WordPress, когда я выбираю изображение или удаляю выбранное, кнопка сохранения виджета не включается (не обнаруживает изменение значения поля ввода изображения). ). Я перепробовал все. Я не знаю, в чем проблема.

Answer 1

После просмотра файлов WordPress (PHP и JS) я наткнулся на функцию, которая, казалось, отвечала за сохранение виджетов (с помощью Ajax запросов).

Расположение:

website-root\wp-admin\js\widgets.js

Он определяет объект с именем wpWidgets для объекта window, поэтому он доступен глобально. В строке 529 wpWidgets определяется функция с такой сигнатурой:

save : function( widget, del, animate, order ) { ... }

widget аргумент - это элемент div с классом widget.

Так в моем JavaScript Я назвал это так, чтобы вручную сохранить виджет:

wpWidgets.save( input_element.closest('div.widget'), 0, 1, 0 );