True Global CSS Variable Linking Support

Ok i was able to achieve it myself by using Gutenberg’s API method add_theme_support.

Code for reference –

//gutenberg + ccp integration -  will add ccp colors as palette in Gutenberg + when used in Gutenberg blocks - will be linked to css variable instead of setting hardcoded hex color
add_action('plugins_loaded',function(){
	//mention ccp keys which you want to integrate with acf
	$builder_replacement_array=[
		'color_widget_primary',
		'color_widget_primary_plus',
		'color_widget_secondary',
		'color_widget_secondary_plus',
		'color_body_background',
		'color_widget_background_primary',
		'color_widget_background_secondary',
		'color_border_main',
		'color_border_alternate',
		'color_success',
		'color_error',
		'color_warning',
		'color_text_heading',
		'color_text_primary',
		'color_text_primary_plus',
		'color_text_secondary',
		'color_one',
		'color_two',
		'color_three',
		'color_four',
		'color_five',
		'color_light',
		'color_dark',
		'color_theme_type',
	];
	$gutenburg_global_styles_array = array();
	$gutenburg_compatibility_css='';
	foreach ($builder_replacement_array as $color_variable) {
		$prepared_color_variable = "var(--{$color_variable})";
		array_push($gutenburg_global_styles_array,array(
		    'name' => custom_make_it_human_readable($color_variable),
		    'slug' => $color_variable,
		    'color' => $prepared_color_variable,
		  )
		);
		$color_variable = str_replace('_','-',$color_variable);
		$gutenburg_compatibility_css .= ".has-{$color_variable}-background-color{background-color:{$prepared_color_variable};}.has-{$color_variable}-color{color:{$prepared_color_variable};}";
	}
	add_theme_support('editor-color-palette',$gutenburg_global_styles_array);
	custom_inline_enqueue('wp_enqueue_scripts',true,$gutenburg_compatibility_css,'custom-gutenberg-ccp-integration-css');
	custom_inline_enqueue('admin_enqueue_scripts',true,$gutenburg_compatibility_css,'custom-gutenberg-ccp-integration-css');
});

// custom - wp - inline enqueue css or javascript
function custom_inline_enqueue($enqueue_action,$is_css,$css_or_script,$css_or_script_name,$footer = false){
	add_action($enqueue_action,function()use($enqueue_action,$is_css,$css_or_script,$css_or_script_name,$footer){
		if($is_css){
			wp_register_style($css_or_script_name,false);
			wp_enqueue_style($css_or_script_name);
			wp_add_inline_style($css_or_script_name,$css_or_script);	
		}else{
			if($footer){
				wp_register_script($css_or_script_name,false,array(),false,true);
				wp_enqueue_script($css_or_script_name,false,array(),false,true);
			}else{
				wp_register_script($css_or_script_name,false);
				wp_enqueue_script($css_or_script_name);
			}
			wp_add_inline_script($css_or_script_name,$css_or_script);
		}
	});
}

• This reply was modified 4 years, 9 months ago by utsavmadaan823.

It was fairly easy than Elementor integration, for Elementor i took a longer route –
1. Create ACF Options with Fields same as CCP color keys
2. Link ACF Option Fields with CCP color keys
3. Link Elementor Block value with ACF Option Field value

Wish that these features could be baked in the plugin. My shared code may not be ideal as written with many time constraints but certainly working fine. If anyone needs any help with the shared code let me know.