Kirki and Gutenberg editor

[vlthemes]

Hello!

Is it possible to use Kirki output in editor.css ?

Just I receive recent new WP requirements. https://forums.envato.com/t/wordpress-requirements-update-and-new-gutenberg-optimized-attribute/207103

[timelsass]

Have a look in #2009 which does provide two ways to integrate Kirki output with Gutenberg. I don't believe there's any specific documentation out there right now for Kirki.

[DanyDD]

@timelsass

Look like this is not working at all.

Now this is outputting CSS in the dashboard :

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

Even though it's supposed to be sending it only to the front-end.

And that just doesn't work : 'context' => array( 'editor' ),

Also, I've tested this with a fresh install and twentynineteen :

Kirki::add_config( 'twentynineteen', array(
	'gutenberg_support' => true,
	'capability'  => 'edit_theme_options',
	'option_type' => 'theme_mod',
) );

Kirki::add_section( 'typography_testing', array(
	'title'    => esc_attr__( 'Typography Testing', 'twentynineteen' ),
	'priority' => 100,
) );

Kirki::add_field( 'twentynineteen', array(
	'type'        => 'typography',
	'settings'    => 'typography_testing',
	'label'       => esc_attr__( 'Control Label', 'twentynineteen' ),
	'section'     => 'typography_testing',
	'default'     => array(
		'font-family'    => 'Roboto',
		'variant'        => 'regular',
		'font-size'      => '14px',
		'line-height'    => '1.5',
		'letter-spacing' => '0',
		'color'          => '#333333',
		'text-transform' => 'none',
		'text-align'     => 'left',
	),
	'priority'    => 10,
	'output'      => array(
		array(
			'element' => 'body',
		),
	),
) );

That doesn't work either, it output it to the dashboard also, chaning the font will change the font in the dashboard.

[aristath]

I believe this was a bug which was just fixed. in #2102.
This should work now:

'output' => array(
	array(
		'element'  => 'body',
		'property' => 'font-size',
	),
	array(
		'element'  => '.edit-post-visual-editor.editor-styles-wrapper',
		'property' => 'font-size',
		'context'  => array( 'editor' ),
	),
),

[DanyDD]

Hi,

Definitely working better! Thanks a lot.

Some properties need to be a bit more specific for them to work so I'm trying this but it doesn't work. For example it still apply 'font-size' to '.edit-post-visual-editor.editor-styles-wrapper .editor-post-title__input', am I doing something wrong?

	'output'      => [
		[
			'element' 	=> 'body',
		],
		[
			'element' 	=> '.edit-post-visual-editor.editor-styles-wrapper',
			'context'  => array( 'editor' ),
		],
		[
			'element' 	=> '.edit-post-visual-editor.editor-styles-wrapper .editor-post-title__input',
			'context'  => array( 'editor' ),
			'property' => 'font-family',
		],
				[
			'element' 	=> '.edit-post-visual-editor.editor-styles-wrapper p',
			'context'  => array( 'editor' ),
			'property' => 'font-size',
		],
	],

Thanks!

[DanyDD]

@aristath Not sure if you had the notification for my last question.

Thanks!