Show colour in swatch for global colour pulled from external variable

[sunny]

Minor request, but for colours that are defined outside of Cwicly, it’d be nice to still show their colour in the colour swatch.

Right now instead of picking up the variable value, it will just show up as transparent:

[yankiara]

Hi,
Sorry, but how do you do that???
Can’t find anything in UI or documentation about external variable.

[sunny]

You just change the variable name of the global colour to match your external variable.

Assuming the external variable is still loaded inside Gutenberg, it’ll still work properly when you apply the colour to a block. It just doesn’t show the colour preview in the swatch.

[yankiara]

OK thanks, had tried it before, but as no change occurred in UI, I thought it didn’t work.
Then I tried on a color already defined, and the swatch kept the previously defined color, so not transparent, so again thought it didn’t work like you.
Well, working fine, indeed, except the swatch, and you already had my vote

[Louis]

Hi there,

While this isn’t yet documented, we added this with the new global colour system. Might be what you’re looking for when dealing with external colours.

function cwicly_global_colors_primary( $global_colors ) {
	$global_colors['primary'] = array(
		'name'     => 'Primary',
		'colors'   => array(
			array(
				'name'  => 'Primary P.',
				'color' => 'var(--primary)',
			),
			array(
				'color' => 'var(--primary-alt)',
			),
		),
		'palettes' => array(
			array(
				'name'   => 'Primary P.',
				'colors' => array(
					'var(--primary-100)',
					'var(--primary-200)',
					'var(--primary-300)',
					'var(--primary-400)',
				),
			),
			array(
				'name'   => 'Primary Alt',
				'colors' => array(
					'var(--primary-alt-100)',
					'var(--primary-alt-200)',
					'var(--primary-alt-300)',
					'var(--primary-alt-400)',
				),
			),
		),
	);
	return $global_colors;
}
add_filter( 'cwicly_global_colors', 'cwicly_global_colors_primary', 10, 1 );

Cheers,

[sunny]

Ooh this is cool. Is it already live? Adding the snippet doesn’t seem to do anything.

[JohnD]

Hi,

The filter is live. It allows you to access the colors you add directly within the color picker. The colors will be available in its own folder using the main ‘name’ variable you entered.

Is this not applying for you?

Best regards,
Johnny

[sunny]

Hey John. I popped the snippet into a snippet manager, enabled it, but nothing is added to the Cwicly global colours on my end.

[Louis]

Hello @sunny,

The colours will be available directly within the colour picker in the global folders, not from the Global Styles panel.

Cheers,

[sunny]

Ahhh, totally missed that. Thanks Louis!

[Titus]

Hi @Louis ,

I just started using Cwicly and in the last 30 minutes I tried to find the location you mentioned but without success.
Can you please post a screenshot of where I have to see the colors?

[Araminta]

Hi @Titus,

Sorry to hear you had trouble with this.

You should see the colours here:

Please don’t hesitate to let me know if you have any other questions.