Kirki: Enqueue selected Google Fonts on admin editor page

[daviedR]

Hi Ari,

What if I want to use the Google Fonts selected from Customizer in the admin page, specifically on the editor page? I can use the admin_enqueue_scripts hook but I need to call the Kirki_Fonts_Google::enqueue(), right? It seems it's not a static function.

Is there any workaround on this?

UPDATE:
Turns out, we shouldn't call the enqueue(). Instead, we need the generated Google Fonts URL to be called via add_editor_style function.

[daveromsey]

Samesies!

I posted a wordier, more meandering issue over here, but essentially I'm looking for the same functionality.

I'd be totally stoked at the ability to get the google font info (ideally the formatted link) based on a given Kirki configuration id. Then we'd be able to handle the enqueue on our own.

[daviedR]

Any update on this?

The idea is to include Google Fonts and custom (output) styles from Customizer generated by Kirki, into our tinyMCE in WP editor page. It seems impossible since we can't generate Google Fonts link by ourself (it's privately done inside the Kirki_Fonts_Google class). And also for the output styles from Customizer, it's privately enqueued from Kirki_Styles_Frontend class.

[aristath]

My apologies for not being able to commit as often as I'd like here... I'll soon be able to continue adding new features and improvements.
This is high on my to-do list.
Just a little more patience... 👍

[sayedtaqui]

I was also waiting for adding the google font to be added in editor. But why not also add the dynamic css generated by Kirki to to the editor so that the editor and the front look the same, @aristath I know a php hooks which can do that.

add_action( 'teeny_mce_before_init', array( $this, 'add_editor_dynamic_css' ) );
add_action( 'tiny_mce_before_init', array( $this, 'add_editor_dynamic_css' ) );
public function add_editor_dynamic_css( $mceInit ) {
            $css = '';

            $mceInit[ 'content_style' ] = isset( $mceInit[ 'content_style' ] ) ? $mceInit[ 'content_style' ] . ' ' . $css : $css;
            return $mceInit;
        }

because after adding the dynamic font, you would need a way to add the font-family css dynamically.

[timelsass]

Yeah I think this would be helpful. I know in my case I ended up copying the kirki methods which was pretty redundant, but I needed it in the editor: https://github.com/BoldGrid/boldgrid-theme-framework/blob/master/src/includes/class-boldgrid-framework-editor.php#L180

[aristath]

Version 3.0 now compiles the CSS to file (and if the file-write fails, it falls back to inline mode).
This will be a lot easier to implement now 👍

[aristath]

Obviously I can't do this by default for everyone, but here's how it can be done:

// Compiles the CSS to a file instead of adding inline.
add_filter( 'kirki/dynamic_css/method', function() {
    return 'file';
});
// Embed googlefonts in styles instead of loading separate link.
// REPLACE MY_CONFIG WITH YOUR ACTUAL CONFIG-ID.
add_filter( 'kirki/MY_CONFIG/googlefonts_load_method', function() {
    return 'embed';
});
// Add editor styles.
add_filter( 'mce_css', function( $mce_css ) {
    if ( ! empty( $mce_css ) ) {
        $mce_css .= ',';
    }
    $upload_dir = wp_upload_dir();
    return $mce_css . esc_url_raw( $upload_dir['baseurl'] . '/kirki-css/styles.css' );
});

Please note that I haven't tested the above code, but with the latest changes in the development branch that should work 👍

[Micemade]

Hi Aristath ,
how about adding this to documentation ? I looked for it and it isn't there ... That could be in , say - "Modules" sub section of documentation ...
Cheers and keep up good work ! :)

[aristath]

@Micemade I was thinking of adding something like that to the docs, but the WordPress editor is going to change radically pretty soon with the release of WP 5.0 and Gutenberg.
A better method will have to be implemented for that.

[Micemade]

yeah, you're right - I've been searching for Gutenberg version of add_editor_style or this method with add_filter( 'mce_css' ... , but didn't have much luck ... Are you familiar with that, I mean, are Gutenberg devs planning to implement something similar ?
Thnx