Uma maneira de fazer isso é usar os eventos editor:image-edit
e editor:image-update
(muito convenientes) acionados pelo plugin tinymce wpeditimage
para obter / definir o dom diretamente ( atualizado para finalizar em wp_enqueue_media
action):
add_action( 'wp_enqueue_media', function () {
add_action( 'admin_footer', function () {
?>
<script type="text/javascript">
jQuery(function ($) {
if (wp && wp.media && wp.media.events) {
wp.media.events.on( 'editor:image-edit', function (data) {
data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
} );
wp.media.events.on( 'editor:image-update', function (data) {
data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
} );
}
});
</script>
<?php
}, 11 );
} );
Para adicionar e preencher o campo de configurações, talvez seja mais interessante hackear a saída de wp_print_media_templates()
em vez de substituir ImageDetails.initialize()
( atualizado para agrupar em wp_enqueue_media
action):
add_action( 'wp_enqueue_media', function () {
remove_action( 'admin_footer', 'wp_print_media_templates' );
add_action( 'admin_footer', $func = function () {
ob_start();
wp_print_media_templates();
$tpl = ob_get_clean();
// To future-proof a bit, search first for the template and then for the section.
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;
} );
} );