New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typography: output property not working #1484

Closed
themenow opened this Issue Jul 28, 2017 · 1 comment

Comments

Projects
None yet
2 participants
@themenow

themenow commented Jul 28, 2017

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

@aristath aristath closed this in 86952df Jul 30, 2017

@aristath

This comment has been minimized.

Show comment
Hide comment
@aristath

aristath Jul 30, 2017

Owner

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.

Owner

aristath commented Jul 30, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment