Typography: output property not working

[themenow]

Issue description:

Outputting css doesn't recognize property.

I was trying to add a left padding to a centered page title element by the value of letter-spacing, which would fix the issue of page title not exactly centered due to the letter spacing.

    'output' => array(
        array(
            'element' => '.page-title',
        ),
        array(
            'choice' => 'letter-spacing',
            'element' => '.page-title',
            'property' => 'padding-left',
        ),
    ),

The code above works by adding an additional css rule to the page title, but on 'letter-spacing', not 'padding-left', the argument property seems ignored.

Version used 3.0.9:

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

Using theme_mods or options?

theme_mods

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

Kirki::add_field('my-theme', array(
    'section' => $section,
    'settings' => 'page_title_font',
    'type' => 'typography',
    'default'     => array(
        'font-family'    => 'Raleway',
        'variant'        => 'bold',
        'font-size'      => '1.6rem',
        'line-height'    => '1.618',
        'letter-spacing' => '20px',
        'subsets'        => array( 'latin-ext' ),
        'color'          => '#333',
        'text-transform' => 'none',
    ),
    'label' => esc_html__('Page Title Font', 'my-theme'),
    'transport' => 'postMessage',
    'output' => array(
        array(
            'element' => '.page-title',
        ),
        array(
            'choice' => 'letter-spacing',
            'element' => '.page-title',
            'property' => 'padding-left',
        ),
    ),
    'js_vars' => array(
        array(
            'element' => '.page-title',
        ),
    ),
));

[Ari Stathopoulos]

Fixed.

I would also advise you to remove the js_vars argument, and set transport to auto:

Kirki::add_field( '_s', array(
    'section'   => 'theme_options',
    'settings'  => 'page_title_font',
    'type'      => 'typography',
    'label'     => esc_html__('Page Title Font', 'my-theme'),
    'transport' => 'auto',
    'default'   => array(
        'font-family'    => 'Raleway',
        'variant'        => 'bold',
        'font-size'      => '1.6rem',
        'line-height'    => '1.618',
        'letter-spacing' => '20px',
        'subsets'        => array( 'latin-ext' ),
        'color'          => '#333',
        'text-transform' => 'none',
    ),
    'output'    => array(
        array(
            'element' => '.page-title',
        ),
        array(
            'element'  => '.page-titleeeee',
            'property' => 'padding-left',
            'choice'   => 'letter-spacing',
        ),
    ),
) );

This will make it properly work in the customizer as well.