Wp.customize no guada los cambio

Desarrollo
1

Hola tengo un campo checkbox para activar un modo oscuro en mi tema y al momento de acceder al objeto los cambio se ven en tiempo real y hace lo que tiene que hacer pero cuando le doy en publicar o guarda los cambio no lo aplica en la pagina.

Directorio:

  • Theme
    *assets
    *js\customize.js
    *css\customize.css
    *classes\customize_class.php

Mi configuración:

  $wp_customize->add_setting('s_c_darkmode', [
            'type' => 'theme_mod',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => [$this,'theme_slug_sanitize_checkbox'],
            'transport' => 'postMessage',
            'default' => false
            ]);               
        $wp_customize->add_control('s_c_darkmode', [
            'label' => __('Activar Dark Mode ', 'base'),
            'section' => 'title_tagline',
            'type' => 'checkbox' 
            ]);

Mi código js:

wp.customize('s_c_darkmode', (value) => {
        value.bind((newVal) => {

        let x = document.querySelector('body');
         if (newVal) {
            // Realiza acciones cuando se activa la casilla de verificación
            x.classList.add('dark-mode');
             } else {
                 // Realiza acciones cuando se desactiva la casilla de verificación
                x.classList.remove('dark-mode');
            } 
            
    });

121
1211190×604 46.1 KB

2

No la tengo taaan clara con esa customización pero estas 100% seguro que el JS esta funcionando como corresponde? Yo le tiraria un console log en la primer variable a ver que esta llegando en el front.

Otra cosa, supongo que tenes creada esta funcion: theme_slug_sanitize_checkbox en tu codigo (si no la tenes creo que te puede joder al guardar)

3

si el console.log para ver el objeto fue lo primero que hice. Como puede ver en la imagen realiza la acción cuando doy click en el checkbox pero los cambio al momento de publicar no se ve reflejado.

4

Esta es la solución que encontré no se si es la adecuada pero funciona. la única modificación que hice fue decirle que lo almacene en localStorage

Solución:

wp.customize('s_c_darkmode', (setting) => {

    const x = document.querySelector('body');
    const isDarkModeEnabled = localStorage.getItem('darkModeEnabled') === 'true';
    
    if (isDarkModeEnabled) {
        x.classList.add('dark-mode');
    }
    setting.bind((newVal) => {
        const x = document.querySelector('body');
    
        if (newVal) {
        x.classList.add('dark-mode');
        localStorage.setItem('darkModeEnabled', 'true');
        } else {
        x.classList.remove('dark-mode');
        localStorage.setItem('darkModeEnabled', 'false');
        }
    });
});
1 me gusta