kirki icon indicating copy to clipboard operation
kirki copied to clipboard

Multicolor - Ability to utilize value_pattern

Open bawright opened this issue 7 years ago • 5 comments

Issue description:

More of a feature request than an issue... the ability to use value_pattern for multicolor control. Here's a past issue #1214 as well.

Multicolor really helps simplifying UI and grouping related colors together. Adding value pattern opens the door to coloring box-shadows, gradients, etc.

bawright avatar Aug 09 '17 14:08 bawright

@aristath I agree this is definitely something I am running into as well.

anthonyryanrusso avatar Feb 20 '18 20:02 anthonyryanrusso

Marking this one as a feature request. This depends on a rewrite of the postMessage module that is currently a work in progress.

aristath avatar Mar 11 '18 12:03 aristath

The postMessage rewrite is posted on https://github.com/aristath/kirki/issues/1709, it could use your feedback. Once that is done and merged I'll be able to start working on adding features like this one. 👍

aristath avatar Mar 17 '18 15:03 aristath

I've done some experimenting with this and discovered that it requires a way to specify the array key of the replacement setting which is not currently possible with the string value. In the example below, the rightColor placeholder won't work because the value of my_setting is an array:

Kirki::add_field( 'mytheme', array(
	'type'     => 'multicolor',
	'settings' => 'my_setting',
	'label'    => esc_html__( 'Label', 'kirki' ),
	'section'  => 'section_id',
	'priority' => 10,
	'choices'  => [
		'left'  => esc_html__( 'Left', 'kirki' ),
		'right' => esc_html__( 'Right', 'kirki' ),
	],
	'default'  => [
		'left'  => '#0088cc',
		'right' => '#00aaff',
	],
	'output'   => array(
		array(
			'choice'          => 'left',
			'element'         => 'button',
			'property'        => 'background',
			'value_pattern'   => 'linear-gradient(90deg, $ 0%, rightColor 100%)',
			'pattern_replace' => array(
				'rightColor' => 'my_setting',
			),
		),
	),
) );

To get around this problem, we could use an array for the replacement setting value, with the name of the setting and the key name as the value:

'pattern_replace' => array(
	'rightColor' => array(
		'my_setting' => 'right',
	),
),

This would make it easy to write the CSS generator logic, all that's needed is an extra check to see if the replacement is an array.

seothemes avatar Mar 08 '19 05:03 seothemes

any update on this issue?

ariona avatar Oct 23 '19 15:10 ariona