Updating Styles After Color Change

[jasonmj]

Updating Styles After Color Change

[BraadMartin]

Hello jasonmj,

First, thank you for using! I'm happy to help you get it working.

It sounds like you're saying that after a color is picked, or as a color is being picked, the site preview window isn't updating with the new color. If this is what you're saying, that's probably happening because you're using transport: postMessage but haven't included the extra JS needed to handle the live previewing. For the JS you need and more information about postMessage vs. refresh, check out my answer on this issue.

If you're having a different issue, for example when you change a color the Customizer isn't recognizing that something has changed and making the Save button active, or when you save and refresh the page the new color doesn't save, then please paste the code you're using to register the setting and control and I'll let you know if there are any issues there.

I know that the live previewing via postMessage works great or using refresh works great, as I'm using this control on many of my client sites in both ways, so I'm confident that we can get it working for you. Try adding the extra JS if you're missing that, or share your code and I'll take a look. :)

[jasonmj]

I gave it a try, but couldn’t get the code to work. Was I using the wrong hook for the JS?

I add the setting: 

$wp_customize->add_setting(
    'menu-background',
    array(
        'default'     => 'RGBA(39, 40, 33, 1)',
        'type'        => 'theme_mod',
        'capability'  => 'edit_theme_options',
        'transport'   => ‘postMessage'
    )
);

And enqueue the JS: 

function initialize_alpha_color_picker() {
    wp_enqueue_script('color_picker_fields', get_template_directory_uri() . '/includes/customizer/alpha-color-picker/fields.js');
}
add_action( 'customize_preview_init', 'initialize_alpha_color_picker' );

Which successfully loads this code: 

( function( $ ) {
    
    console.log(‘loaded!’);
    wp.customize( 'menu-background', function( value ) {
        value.bind( function( to ) {
            $( '.top-bar' ).css( 'background-color', to );
        });
    });

} )( jQuery );

However, I get no response in the preview when I change the color picker. Thanks for your time on this one! 

-=-
Jason Johnson
FullSteam Labs
828.202.5300

On September 10, 2015 at 2:08:56 AM, Braad ([email protected]) wrote:

Hello jasonmj,

First, thank you for using! I'm happy to help you get it working.

It sounds like you're saying that after a color is picked, or as a color is being picked, the site preview window isn't updating with the new color. If this is what you're saying, that's probably happening because you're using transport: postMessage but haven't included the extra JS needed to handle the live previewing. For the JS you need and more information about postMessage vs. refresh, check out my answer on this issue.

If you're having a different issue, for example when you change a color the Customizer isn't recognizing that something has changed and making the Save button active, or when you save and refresh the page the new color doesn't save, then please paste the code you're using to register the setting and control and I'll let you know if there are any issues there.

I know that the live previewing via postMessage works great or using refresh works great, as I'm using this control on many of my client sites in both ways, so I'm confident that we can get it working for you. Try adding the extra JS if you're missing that, or share your code and I'll take a look. :)

—
Reply to this email directly or view it on GitHub.

[BraadMartin]

Thanks for sharing your code. I think the issue is that your setting name is registered with hyphens instead of underscores. I think "menu-background" needs to be "menu_background".

I couldn't find anything in the official documentation about this but all of the official examples use underscores, and I just took a working setting in my test theme and converted it from underscores to hyphens to test it, and the live previewing stopped working.

Can you try switching your setting name in both the setting registration PHP and the JS and let me know if it starts working?

[jasonmj]

Can you try switching your setting name in both the setting registration PHP and the JS and let me know if it starts working?

Ok, I’ve tried that too, but it’s not working. Maybe I can check whether the script is running and trace back from there. I know the js is loaded, but I’m not sure wp.customize( ‘menu_background’ is firing. 

I tried adding a console.log() to check: 

wp.customize( 'menu_background', function( value ) {
    console.log('alpha color picker changed!');
    value.bind( function( to ) {
        $( '.top-bar, #nav_wrapper, .contain-to-grid, .top-bar-section ul, .top-bar-section ul li, .top-bar-section li:not(.has-form) a:not(.button)' ).css( 'background-color', to );
    });
});

However, it only logs when the customizer page loads, not when I use the color picker. Here’s how I’m setting it up: 

$wp_customize->add_setting(
        'menu_background',
        array(
            'default'     => 'RGBA(39, 40, 33, 1)',
            'type'        => 'theme_mod',
            'capability'  => 'edit_theme_options',
            'transport'   => 'postMessage'
        )
    );
    $wp_customize->add_control(
        new Customize_Alpha_Color_Control(
            $wp_customize,
            'menu_background',
            array(
                'label'         => __( 'Menu Background' ),
                'section'       => 'menu_background_section',
                'settings'      => 'menu_background',
                'show_opacity'  => true, // Optional.
                'palette'   => array(
                    'rgb(150, 50, 220)',
                    'rgba(50,50,50,0.8)',
                    'rgba( 255, 255, 255, 0.2 )',
                    '#00CC99' // Mix of color types = no problem
                )
            )
        )
    );

-=-
Jason Johnson
FullSteam Labs
828.202.5300

On September 11, 2015 at 10:37:48 AM, Braad ([email protected]) wrote:

Thanks for sharing your code. I think the issue is that your setting name is registered with hyphens instead of underscores. I think "menu-background" needs to be "menu_background".

I couldn't find anything in the official documentation about this but all of the official examples use underscores, and I just took a working setting in my test theme and converted it from underscores to hyphens to test it, and the live previewing stopped working.

Can you try switching your setting name in both the setting registration PHP and the JS and let me know if it starts working?

—
Reply to this email directly or view it on GitHub.

[BraadMartin]

Hmm, I think I found the issue. When you enqueue the JS you need to define both 'customize-preview' and 'jquery' as dependencies so that those scripts load before your script. Like this:

function xxx_customizer_preview_js() {
    wp_enqueue_script(
        'xxx-customizer-preview',
        get_stylesheet_directory_uri() . '/admin/customizer/customizer-preview.js',
        array( 'customize-preview', 'jquery' ),
        '0.1.0',
        true
    );
}
add_action( 'customize_preview_init', 'xxx_customizer_preview_js' );

More information: https://codex.wordpress.org/Plugin_API/Action_Reference/customize_preview_init

Right now it sounds like when your script is running the wp global JS object doesn't yet have its wp.customize method, which would happen if your script was firing too early.

Try adding that dependency array as the 3rd arg to wp_enqueue_script and let me know if that fixes it.

[jasonmj]

Ok, I got it. Turns out there was an !important tag set on the element in style.php. I added !important to the js and now it’s working. =) 

Thanks again for sticking with me on this one! 

-=-
Jason Johnson
FullSteam Labs
828.202.5300

On September 11, 2015 at 11:43:31 AM, Braad ([email protected]) wrote:

Hmm, I think I found the issue. When you enqueue the JS you need to define both 'customize-preview' and 'jquery' as dependencies so that those scripts load before your script. Like this:

function xxx_customizer_preview_js() {
wp_enqueue_script(
'xxx-customizer-preview',
get_stylesheet_directory_uri() . '/admin/customizer/customizer-preview.js',
array( 'customize-preview', 'jquery' ),
'0.1.0',
true
);
}
add_action( 'customize_preview_init', 'xxx_customizer_preview_js' );

More information: https://codex.wordpress.org/Plugin_API/Action_Reference/customize_preview_init

Right now it sounds like when your script is running the wp global JS object doesn't yet have its wp.customize method, which would happen if your script was firing too early.

Try adding that dependency array as the 3rd arg to wp_enqueue_script and let me know if that fixes it.

—
Reply to this email directly or view it on GitHub.

[BraadMartin]

Glad to hear you got it working! Happy to help. :)