wp.media.view.ImageDetails - Guardar configuraciones como datos HTML5 * atributos para la imagen

Lo que finalmente quiero lograr es una configuración adicional agregada al cuadro de Detalles de la imagen, que se almacenará en la etiqueta <img> de la imagen como data-* de los atributos

Ejemplo: <img src="..." data-my_setting="...">

MI CÓDIGO

Estoy creando un complemento, y necesito crear más configuraciones para cuando edites imágenes. Hasta ahora tengo el siguiente código:

jQuery(function($) {

    var imageDetails = wp.media.view.ImageDetails

    wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
        // Initialize - Call function to add settings when rendered
        initialize: function() {
            this.on('post-render', this.add_settings);
        },
        // To add the Settings
        add_settings: function() {
            $('.advanced-section').prepend('\
                <h2>My Settings</h2>\
                <input type="text" class="my_setting">\
            ');

            // Set Options
            this.controller.image.set({"data-settings": 'setting-value-here'})
        }
    });

}) // End of jQuery(function($))

Creé una nueva publicación y agregué una imagen, luego hice clic en ella y presioné Editar (el ícono de lápiz en la barra de herramientas que apareció). Terminé en la página de detalles de la imagen, y esto es lo que parecía:

Hastaahora,todobien.Enestalínea:

this.controller.image.set({"data-settings": 'setting-value-here'})

Normalmente usaría jQuery para obtener el valor de la entrada, pero para propósitos de prueba lo cambié para que sea un valor estático de 'setting-value-here' . Presioné "Actualizar" en la esquina inferior derecha del cuadro de Detalles de la imagen.

EL PROBLEMA

En el editor de texto, muestra el código HTML como esto:

Estenotieneundata-settings="setting-value-here" , ¿por qué?

Si sustituyo la línea con esto:

 this.controller.image.set({alt: 'setting-value-here'})

sí cambia la etiqueta ALT a alt="setting-value-here" . Entonces, ¿qué estoy haciendo mal al intentar establecer el atributo data- *?

LA SOLUCIÓN

Gracias a @bonger (que obtuvo la recompensa completa de 50 Reputación) , Tengo el siguiente código:

PHP:

function add_my_settings() {
    ob_start();
    wp_print_media_templates();
    $tpl = ob_get_clean();
    if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
            && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
        ob_start();
        ?>
        <div class="my_setting-section">
            <h2><?php _e( 'My Settings' ); ?></h2>
            <div class="my_setting">
                <label class="setting my_setting">
                    <span><?php _e( 'My Setting' ); ?></span>
                        <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
                    </label>
                </div>
            </div>
        <?php
        $my_section = ob_get_clean();
        $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
    }
    echo $tpl;
};

// Hack the output of wp_print_media_templates()
add_action('wp_enqueue_media', $func =
    function() {
        remove_action('admin_footer', 'wp_print_media_templates');
        add_action('admin_footer',  'add_my_settings');
    }
);

JavaScript: (se debe poner en cola usando wp_enqueue_script() )

// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
    data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
});

// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
    data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
});