WordPress : API Customizer JS : l’ajout dynamique de paramètres ne fonctionne pas

J’utilise le code JS & PHP affiché ci-dessous pour ajouter dynamiquement un paramètre de personnalisation. Je sais que l’enregistrement du paramètre fonctionne car lorsque je suis echo get_theme_mod('mySetting')dans un fichier de modèle de thème, la valeur enregistrée est renvoyée. Cependant, après une actualisation du navigateur dans le personnalisateur, l’entrée n’affiche pas la valeur enregistrée mais plutôt la valeur utilisée lors de l’instanciation du paramètre ( JS Default Value?). Qu’est-ce que je fais mal?

Remarque : Veuillez également lire le premier commentaire.

// JS enqueued via action hook: customize_controls_enqueue_scripts
(function( $, api ) {
api.bind( 'ready', function() {

    var section = new api.Section( 'my-section', {
        title           : 'Dynamic Setting Section',
        priority        : 1,
        customizeAction : 'Customizing'
    });

    var setting = new api.Setting( 'mySetting', 'JS Default Value?' );

    var control = new api.Control( 'my-control', {
        type    : 'text',
        section : 'my-section',
        setting : setting
    });

    api.section.add( section );

    api.add( setting );

    api.control.add( control );

});
})( jQuery, wp.customize );

Comme expliqué plus en détail par Weston Ruter ici et ici, les paramètres créés dynamiquement doivent également être enregistrés dans PHP car :

Pour qu’un paramètre soit stocké en toute sécurité, il doit être nettoyé et validé par le serveur. S’appuyer sur le nettoyage et la validation côté client est dangereux.

<?php
add_filter( 'customize_dynamic_setting_args',function( $setting_args, $setting_id )
{
    if ( 'mySetting' == $setting_id ) {
        $setting_args = array(
            'transport'         => 'postMessage',
            'default'           => 'PHP Default Value!',
            'sanitize_callback' => 'wp_strip_all_tags',
        );
    }

    return $setting_args;
});
?>

Solution n°1 trouvée

Lorsque vous enregistrez le paramètre dans JS, vous devez fournir la valeur actuelle enregistrée dans la base de données comme valeur, et non une valeur par défaut. Donc au lieu de :

var setting = new api.Setting( 'mySetting', 'JS Default Value?' );

Vous auriez besoin d’obtenir la valeur via des moyens tels que l’API REST, puis de l’utiliser lors de l’instanciation. Vous devez également assurer le transport. Donc ça ressemblerait à ça :

var setting = new api.Setting( 'mySetting', someResponse.value, { transport: 'postMessage' } );

Voici quelques exemples de réalisation :

• dans Personnaliser la démo de contenu en vedette
• dans Personnaliser les publications
• dans Personnaliser les ressources REST