Как добавить класс в предпросмотр Кастомайзера на основе класса элемента управления Кастомайзера? (JavaScript API Кастомайзера)

Я достаточно слабо понимаю JavaScript API Настройщика, но стараюсь. Я сделал несколько вещей, но теперь мне нужно отправить данные в предпросмотр Настройщика на основе клика по элементу управления.

Когда элемент управления нажимается в Настройщике, к этому элементу применяется класс “.invisible”. Исходя из этого, я хочу скрыть <section class="about_me"></section> на сайте. Значение элемента управления — это этот класс. Как мне это сделать? Вот что я пробовал:

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');

                }


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

Мне удалось понять, как получить значение “.invisible” из элемента управления, но как мне затем отправить это и обновить CSS или добавить класс в секцию в предпросмотре (а затем фактически обновить сайт для сохранения этого theme_mod_).

Подумайте еще раз, как вы хотите, чтобы элемент управления работал. Если вы скрываете элемент управления, как бы вы его снова открыли?

Похоже, вы хотите флажок, чтобы указать, отображается ли секция или скрыта. В вашем PHP на действии ‘customize_register’ вы определяете держатель индикатора. Его назвали setting, с значением по умолчанию, которое является типом ‘theme_mod’. И вы определяете control для взаимодействия пользователя. Для булевых опций лучше называть их для состояния ‘включено’, чтобы логика имела смысл и они соответствовали основным опциям.

$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'    => __( 'Отобразить раздел "О нас"', 'myprefix' ),
        'section'  => 'myprefix_theme_section',
        'type'     => 'checkbox',
) );

Предполагая, что секция всегда выводится, мы можем просто добавить к ней класс, чтобы скрыть ее. Ваш PHP будет использовать этот theme_mod, когда раздел “О нас” выводится:

$class="about_me";
if ( ! get_theme_mod( 'show_about_section', true ) ) {
    $class .= ' invisible';
}
// код для вывода секции с использованием $class

В JavaScript, который загружается на действии ‘customize_preview_init’, используйте что-то вроде этого.

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

Нет необходимости отправлять имя класса в предпросмотр, хотя вы можете закодировать это по-другому, если вам нужно, чтобы один элемент управления обрабатывал несколько имен классов. Настройщик уже отправляет значение элемента управления в предпросмотр, но в этом примере кода это логическое значение, а не имя класса. Нет дополнительного кода, необходимого для сохранения theme_mod. Это сделано за вас.