web-dev-qa-db-fra.com

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

J'utilise le code JS & PHP affiché ci-dessous pour ajouter un paramètre de personnalisation de manière dynamique. Je sais que l'enregistrement des paramètres fonctionne, car lorsque je echo get_theme_mod('mySetting') dans un fichier de modèle de thème, la valeur enregistrée est renvoyée. Toutefois, après une actualisation du navigateur dans le personnaliseur, 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 lire le premier commentaire également.

// 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 Weston Ruter l'explique plus en détail ici et ici , les paramètres créés dynamiquement doivent également être enregistrés dans PHP car:

Pour qu'un paramètre puisse être stocké en toute sécurité, il doit être nettoyé et validé par le serveur. Compter sur la désinfection 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;
});
?>
javascripttheme-customizerapi
2
Marc Wiest

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

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

Vous devez obtenir la valeur via un moyen tel que l'API REST, puis l'utiliser lors de l'instanciation. Vous devez également fournir le transport. Donc, cela ressemblerait à ceci:

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

Voici quelques exemples de ce faire:

2
Weston Ruter