Support » Plugin: Central Color Palette » True Global CSS Variable Linking Support

  • Resolved utsavmadaan823

    (@utsavmadaan823)


    Thanks for the plugin.

    I have one request.
    I want that colors defined in CCP can be used everywhere and whereever they are used instead of directly saving hex color it saves css variable instead (not – #ffffff but var(–color_text_primary). So what it would mean is change colors in CCP and than everywhere where colors from CCP are used they will be changed since they are linked to css variable not to hard coded hex color. I am already doing this thing with CCP + ACF + Elementor + Custom Code but now when i am starting with Gutenberg again this issue. Can this featured be added in CCP ?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter utsavmadaan823

    (@utsavmadaan823)

    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);
    		}
    	});
    }
    Thread Starter utsavmadaan823

    (@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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘True Global CSS Variable Linking Support’ is closed to new replies.