How do I add a class to Customizer preview based on class of Customizer control? (Customizer Javascript API)

Question

I am pretty weak with understanding the Customizer javascript API but I am trying. I have done a few things but now I need to send data to the Customizer preview based on the click of a control in the Customizer.

When a control is clicked in the Customizer, the class ".invisible" is applied to the control. Based on this, I want to hide <section class="about_me"></section> on the website. The control's value is this class. How do I do this? Here is what I've tried:

api('gm_sortable_sections', function(setting) {
    var section = setting.get(); // aka section.about_me
    setting.bind(function onChange(){
api.control('gm_sortable_sections', function(control) {
    control.sectionToHide = api.previewer.preview.container.find('.' + section);

    control.sortableContainer = $(control.container).find('ul.sortable' ).first();
    control.sortableContainer.find( 'li' ).each( function() {
                if ( $( this ).is( '.invisible' ) ) {
                    console.log(control.sectionToHide);
                    control.sectionToHide.addClass('.invisible');
                  //  api.previewer.send( 'sortable-visible');
                     //   $('section.'+ section).addClass('.invisible');

                }


    });
    });
});
});

I've managed to figure out how to get the ".invisible" value from the control but how do I then send this and update the CSS or add the class to the section in the preview (and then actually update the website to save this theme_mod_).

Answer 1

Consider again how you want the control to work. If you hide the control, how would you unhide it?

It sounds like you want a checkbox, to indicate whether the section is displayed or hidden. In your PHP on the 'customize_register' action, you define the holder of the indicator. They've named this a setting, with the default value being 'theme_mod' type. And you define the control for the user to interact with. For boolean options, it is best to name them for the 'on' state, so the logic makes sense and they match core options.

$wp_customize->add_setting( 'show_about_section', array(
        'default'   => true,
        'transport' => 'postMessage',
        'sanitize_callback' => 'wp_validate_boolean',
) );

$wp_customize->add_control( 'show_about_section', array(
        'label'    => __( 'Display the About section', 'myprefix' ),
        'section'  => 'myprefix_theme_section',
        'type'     => 'checkbox',
) );

Assuming that the section is always output, we can just put a class on it to hide it. Your PHP will use that theme_mod where the About section is output:

$class = 'about_me';
if ( ! get_theme_mod( 'show_about_section', true ) ) {
    $class .= ' invisible';
}
// code to output section using $class on it

In the javascript that is loaded on 'customize_preview_init' action, use something like this.

( function( $ ) {
    wp.customize( 'show_about_section', function( value ) {
        value.bind( function( show ) {
            $( '.about_me' ).toggleClass( 'invisible', show );
        } );
    } );
} )( jQuery );

There is no need to send the class name to the preview, although you can code it differently if you need one control to handle multiple class names. The Customizer is already sending the value of the control to the preview, but in this code example, that is a boolean, not a class name. There is no extra code needed to save the theme_mod. That is done for you.