Kirki: 'transport' => 'postMessage' not working on kirki 3.0.3

[notrealdev]

Issue description:

Hi, 'transport' => 'postMessage' working well on kirki 2.3.8 but not working on 3.0.3.
I tried 'transport' => 'auto' but it is still not working
// 'transport' => 'refresh' still works normally

Version used:

Stable: 3.0.3

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

Kirki::add_field( 'my-theme', array(
    'type'      => 'color',
    'settings'  => 'title_text',
    'label'     => esc_attr__( 'Header title color', 'text-domain' ),
    'section'   => 'header',
    'default'   => '#ffffff',
    'transport' => 'postMessage',
    'output' => array(
        array(
            'element' => '.header .title',
            'function' => 'css',
            'property' => 'color'
        )
    ),
));

[rinkuyadav999]

@xttn May be 'function' => 'css', creating issue. Have to test by removing 'function' => 'css', ?

[notrealdev]

@rinkuyadav999 still not working with 'transport' => 'postMessage' and 'transport' => 'auto'

[rinkuyadav999]

@xttn I have tested it and 'transport' => 'auto', setting color without refresh.

[aristath]

This works fine for me:

Kirki::add_field( 'my-theme', array(
    'type'      => 'color',
    'settings'  => 'title_text',
    'label'     => esc_attr__( 'Header title color', 'text-domain' ),
    'section'   => 'header',
    'default'   => '#ffffff',
    'transport' => 'auto',
    'output' => array(
        array(
            'element' => '.header .title',
            'property' => 'color'
        )
    ),
));

If you set transport to postMessage you'll have to write your own scripts, or use the js_vars argument.
Using auto takes care of that automatically.

[notrealdev]

My newest code:

Kirki::add_field( 'my-theme', array(
    'type'      => 'color',
    'settings'  => 'title_text',
    'label'     => esc_attr__( 'Header title color', 'text-domain' ),
    'section'   => 'header',
    'default'   => '#ffffff',
    'transport' => 'auto',
    'output' => array(
        array(
            'element' => '.header .title',
            'property' => 'color'
        )
    ),
));

still not working 😢

[aristath]

Works fine in my tests.
Perhaps it's just a CSS issue? Have you tried with a different CSS selector? Maybe the CSS is getting overriden from styles.css or another stylesheet somewhere. Try using something more specific. for example instead of .header .title try body .header .title.
As for the 2 errors in your console, unfortunately you didn't post the full source of the page so I don't know which files are causing those.
The WebFont issue I know is from Kirki, but it doesn't cause any issues at all.

[minimaluminium]

See #1445. Had similar issue like yours and found what was wrong.

[notrealdev]

Yes, but this code

array(
  'element' => '
      .class-1,
      .class-2,
      .class3
  ',
  'function' => 'css',
  'property' => 'background-color',
),

works normally in version 2.x, why not working on kirki 3.x ?

[aristath]

Yes, but this code works normally in version 2.x, why not working on kirki 3.x ?

It should have never played in 2.x either. It was a bug. It should either be like this:

'element' => '.class-1, .class-2, .class-3',

or preferably like this:

'element' => array(
    '.class-1',
    '.class-2',
    '.class-3',
),