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 automatic output via inline css not working? #1992

Closed
devonmather opened this Issue Oct 7, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@devonmather

devonmather commented Oct 7, 2018

I've run into an issue with automatics CSS output for typography fields. Given the lack of issues on what I imagine is a popular feature I'm wondering if it's just an issue for me. If that's the case is there any obvious way to debug why the CSS is not outputting?

I'm running latest Wordpress version on 5.9.8 and using latest Kirki version on 3.0.3. I've tried running Kirki in both the plugin as well as via manual include via functions.php

function seawaves_typography($wp_customize) {

    Kirki::add_section(
        'seawaves_typography_section',
        array(
            'title' => 'Typography',
            'priority' => 10,
            'description' => 'Set site typography.',
        )
    );


    Kirki::add_field('body_font', array(
        'type' => 'typography',
        'settings' => 'body_font',
        'label' => 'Body Font',
        'section' => 'seawaves_typography_section',
        'default' => array(
            'font-family' => 'Roboto',
        ),
        'choices' => array(
            'fonts' => array(
                'google' => array( 'popularity', 30 ),
            ),
        ),
        'output' => array(
            array(
                'element' => 'body',
                'property' => 'font-family',
            ),
        ),
    ) );




    Kirki::add_field( 'heading_font', array(
        'type' => 'typography',
        'settings' => 'heading_font',
        'label' => 'Heading Font',
        'section' => 'seawaves_typography_section',
        'default' => array(
            'font-family' => 'Roboto',
        ),
        'choices' => array(
            'fonts' => array(
                'google' => array( 'popularity', 30 ),
            ),
        ),
        'output' => array(
            array(
                'element' => array(
                    '.content h1',
                    '.content h2',
                    '.content h3',
                    '.content h4',
                    '.content h5',
                    '.content h6'
                ),
            ),
        ),
    ) );
}
add_action('customize_register', 'seawaves_typography');

I realize this might be a niche issue as everything else in the plugin is working fine. In any case help would be appreciated :)

@aristath

This comment has been minimized.

Owner

aristath commented Oct 17, 2018

@DevelopOnline hey there!

2 issues:
1st issue. In the typography fields you don't need to define a property inside the output argument, so this should work:

        'output' => array(
            array(
                'element' => 'body',
            ),
        ),

2nd issue: You should not add Kirki fields in side a customize_register hook.
So instead of this:

function my_function() {
    // Kirki fields etc here.
}
add_action('customize_register', 'my_function');

you should do this:

if ( class_exists( 'Kirki' ) ) {
    // Kirki fields etc here.
}

The problem is this:
customize_register runs only in the customizer. So when you're outside the customizer (viewing your site for example) the Kirki fields don't get added and the plugin can't detect that there's a typography field it should check for values in order to generate the CSS.
If you absolutely must use an action use after_setup_theme, though 99% of the time using it directly works perfectly fine, provided of course that the Kirki class is loaded before the fields.

@aristath aristath closed this Oct 17, 2018

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