Kirki: Switch class with the toggle/checkbox control?

[runnickrun]

Issue description:

I’m trying to switch the class on an element to hide/show it. I’ve achieved it with output with using display: none and exclude. Yet I was thinking to switch to class like ’.hidden’ for more control. Does Kirki supports class switching on toggle out of the box?

In my experience it only adds class, but doesn’t remove when toggle is switched off. So currently output is like .header .true
Also how would I replace true there?

Version used:

(Did you try using the develop branch from github? There's a chance your issue has already been adressed there)
3.0.17

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

/* Show / hide subheader */

Kirki::add_field( 'my_config', array(
    'type'     => 'toggle',
    'settings' => 'show_header',
    'label'    => __( 'Show header?' ),
    'section'  => 'header',
    'transport' => 'postMessage',
    'js_vars'     => array(
        array(
            'element'       => '.header',
            'function'      => 'html',
            'attr'          => 'class',
            'value_pattern' => '.header $',
        ),
    ),
) );

[aristath]

@runnickrun I am currently refactoring the postMessage module on a separate branch.
Could you please test the https://github.com/aristath/kirki/tree/postMessage-refactor branch and let me know if it works for you there?
I am slowly moving away from PHP and migrating most of the logic to JS to make things simpler and support more functions.
Your example-code would look like this:

Kirki::add_field( 'my_config', array(
    'type'     => 'toggle',
    'settings' => 'show_header',
    'label'    => __( 'Show header?' ),
    'section'  => 'header',
    'transport' => 'postMessage',
    'js_vars'     => array(
        array(
            'element'  => '.header',
            'function' => 'toggleClass',
            'class'    => 'hidden',
            'value'    => true,
        ),
    ),
) );

• hidden is the class you want to toggle.
• value is the value which will turn the class on. if the value is not equal to that, the class will not be added.

If you're using postMessage or auto in other fields as well, please check if those also work with the new branch... If you find something that doesn't work please let me know so that I may fix it.
The current implementation for postMessage is very old and confusing, this new one is a lot better and more versatile 👍

[Alanimus]

If you just want to hide/show an element, this is how I did it:

MyTheme_Kirki::add_field( 'my_theme', array(
                'type'      => 'toggle',
                'settings'  => 'show_hide_sections',
                'label'     => esc_attr__( 'Hide an HTML section', 'mytheme' ),
                'section'   => 'my_sections',
                'priority'  => 10,
                'default'   => '1',
                'transport' => 'auto',
                'output'    => array(
                    array(
                        'element'  => 'section',
                        'property' => 'display',
                        'suffix'   => 'none',

                    )
                )
            ) );

Could do with visibility: hidden as well

[DannyCooper]

Tested the following code in 3.0.43 and it works as expected:

Kirki::add_field( 'my_config', array(
    'type'     => 'toggle',
    'settings' => 'show_header',
    'label'    => __( 'Show header?' ),
    'section'  => 'header',
    'transport' => 'postMessage',
    'js_vars'     => array(
        array(
            'element'  => '.header',
            'function' => 'toggleClass',
            'class'    => 'hidden',
            'value'    => true,
        ),
    ),
) );