postMessage does not work

[auerserg]

Issue description:

Styles update via postMessage does not work. If you use a prefix for output, js produces an error

Version used:

3.0.9
WordPress 4.8

Using theme_mods or options?

theme_mods

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

Kirki::add_field( '5avenue_theme', array(
	'type'			 => 'color-alpha',
	'settings'		 => 'header_mobile_border_color',
	'label'			 => __( 'Header Border Color', 'kirki' ),
	'description'	 => __( 'Color of the border below the header.', 'kirki' ),
	'section'		 => '5avenue_header_mobile_section',
	'default'		 => '#e0e0e0',
	'priority'		 => 10,
	'transport'		 => 'postMessage',
	'output'	 => array(
		array(
			'element'	 => '#header-mobile.header-mobile--border-on',
			'property'	 => 'border-bottom',
			'prefix'		 => ' solid 1px',
		),
	),
	'js_vars'	 => array(
		array(
			'element'	 => '#header-mobile.header-mobile--border-on',
			'property'	 => 'border-bottom',
			'prefix'		 => ' solid 1px',
		),
	),
) );

Module postMessage output

wp.customize('header_mobile_border_color', function (value) {
	value.bind(function (newval) {
		if (null === document.getElementById('kirki-postmessage-header_mobile_border_color') || 'undefined' === typeof document.getElementById('kirki-postmessage-header_mobile_border_color')) {
			jQuery('head').append('<style id="kirki-postmessage-header_mobile_border_color"></style>');
		}
		newval0 = newval;
		var cssContent = '#header-mobile.header-mobile--border-on{border-bottom:' + solid 1px + newval0 + ';}';
		jQuery('#kirki-postmessage-header_mobile_border_color').text(cssContent);
		jQuery('#kirki-postmessage-header_mobile_border_color').appendTo('head');
	});
});

Where solid 1px return error

[sethstha]

Hi @aristath

Also, It seems like we can't get setting to work on customizer.js.

While adding kirki controls using

Kirki::add_field( 'sanjeev_config', array(
    'type'              => 'switch',
    'settings'        => 'show_widget_title_ribbon',
    'label'             => esc_html__( 'Widget Title Ribbon', 'sanjeev' ),
    'description'   => esc_html__( 'Turn on to show ribbon on widget title.', 'sanjeev' ),
    'section'         => 'section_widget',
    'priority'         => 10,
    'transport'      => 'postMessage',
    'default'         => 1,
) );

And controlling it on customizer.js

wp.customize('show_widget_title_ribbon', function(value) {
    value.bind(function(to) {
        if (true === to) {
            jQuery('.widget-area').find('.widget').addClass('widget--ribbon');
        } else {
            jQuery('.widget-area').find('.widget').removeClass('widget--ribbon');
        }
    });
});

It was working fine before and no issue was there. Seems this is an issue. Can you confirm this?

Thanks

[aristath]

@blacksirius try this:

Kirki::add_field( '5avenue_theme', array(
    'type'        => 'color-alpha',
	'settings'    => 'header_mobile_border_color',
	'label'       => __( 'Header Border Color', 'kirki' ),
	'description' => __( 'Color of the border below the header.', 'kirki' ),
	'section'     => '5avenue_header_mobile_section',
	'default'     => '#e0e0e0',
	'priority'    => 10,
	'transport'   => 'auto',
	'output'      => array(
        array(
            'element'  => '#header-mobile.header-mobile--border-on',
			'property' => 'border-bottom',
			'prefix'   => ' solid 1px',
		),
	),
) );

@sethstha I can't replicate your issue.
There was an unrelated bug in switch controls that may have had this side-effect, can you please pull the latest changes from this repository (develop branch) and let me know if your issue has been fixed?
Also, the issue you reported has absolutely no relation to the original issue reported in this ticket. In the future if the issue you're reporting is not the same as the one in the original thread, please avoid commenting and instead create a new ticket. Having multiple issues on the same thread doesn't help maintenance and keeping track of what went wrong, where it went wrong, and where it got fixed.

[aristath]

@blacksirius it works fine if I do these changes to your code:

• Remove the js_vars argument
• Set transport to auto.

Also you need to change the prefix from this: ' solid 1px' to this: '1px solid '.
The

[aristath]

@blacksirius my apologies, it looks like this was indeed a bug. I had it fixed locally but never pushed the fix in the repository. I just pushed it now, it should be fixed for you as well.
But the changes mentioned in my previous comment should be applied anyway.
Removing js_vars and setting transport to auto will clean up your code a lot and Kirki will automatically generate all js_vars using output as a template.
If you don't change the prefix from ' solid 1px' to '1px solid ' the CSS generated will be invalid.

Also, instead of the prefix and suffix arguments you can use the value_pattern argument.
So it would look like this: 'value_pattern' => '1px solid $'. You can use the $ symbol as a placeholder for the value.