Typography control issues

[aristath]

This one was posted on #717 (comment) by @misfist, I'm copying the message here since it's a completely different issue:

I finding the following when using the _S fork with Kirki Toolkit Version 2.2.3:

Typography Controls:

• letter-spacing:; is output even though there is no letter spacing field supplied.
• color is not output at all even when a color is selected.

Here is a screenshot of my saved selection:

Here is the CSS that is output:

body{font-family:Lato, Helvetica, Arial, sans-serif;font-weight:300;font-size:16px;line-height:1.5;letter-spacing:;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto, Helvetica, Arial, sans-serif;font-weight:100;font-size:;line-height:;letter-spacing:;}Arial, sans-serif;font-weight:100;font-size:;line-height:;letter-spacing:;}

[aristath]

@misfist This was just fixed in the develop branch and will be included in the next release of the plugin.

If you can test it and confirm it fixes the issue for you as well I'd really appreciate it! You can test it by downloading the develop branch, or simply by replacing the includes/output/control/class-kirki-output-control-typography.php file with this one: https://github.com/aristath/kirki/blob/develop/includes/output/control/class-kirki-output-control-typography.php

Thank you for reporting this! The more stuff you report the better this plugin will keep getting 👍

[misfist]

I switched to the develop branch and confirmed that my local version is identical to the one you posted.

• letter-spacing:; is no longer output when no input is supplied.
• However color is still not output at all even when a color is selected.

body{font-family:Lato, Helvetica, Arial, sans-serif;font-weight:300;font-size:16px;line-height:1.5;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto, Helvetica, Arial, sans-serif;font-weight:100;}

It doesn't look like there is any code to output the color.

I found adding the follow worked as expected:

// Take care of color
if ( isset( $value['color'] ) && ! empty( $value['color'] ) ) {
    $this->styles[ $output['media_query'] ][ $output['element'] ]['color'] = $value['color'];
}

The output is:

body{font-family:Lato, Helvetica, Arial, sans-serif;font-weight:300;font-size:16px;line-height:1.5;color:#DD3333;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto, Helvetica, Arial, sans-serif;font-weight:100;}

[aristath]

You're absolutely right... I don't know how I missed that!
Thanks, fixed. 👍