[Resolved] Add theme support editor-color-palette

Home Forums Support Add theme support editor-color-palette

  • This topic has 9 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1053022
    Simone

    Hi there,

    I’m trying to add theme support for the editor-color-palette feature of WordPress.

    I added the following code to the functions.php file of my child theme. But in the backend the color selectors do not appear:

    if ( ! function_exists( 'castiglioni_setup' ) ) :
    	function castiglioni_setup() {
    		add_theme_support(
    			'editor-color-palette',
    			array(
    				array(
    					'name'  => __( 'Scuro', 'castiglioni' ),
    					'slug'  => 'dark',
    					'color' => '#382c33',
    				),
    				array(
    					'name'  => __( 'Chiaro', 'castiglioni' ),
    					'slug'  => 'light',
    					'color' => '#eeeeee',
    				),
    			)
    		);
    	}
    endif;
    add_action( 'after_setup_theme', 'castiglioni_setup' );

    Thanks a lot for your help,

    Simone

    #1053397
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if you do this?:

    add_action( 'after_setup_theme', function() {
        add_theme_support(
            'editor-color-palette',
            array(
                array(
                    'name'  => __( 'Scuro', 'castiglioni' ),
                    'slug'  => 'dark',
                    'color' => '#382c33',
                ),
                array(
                    'name'  => __( 'Chiaro', 'castiglioni' ),
                    'slug'  => 'light',
                    'color' => '#eeeeee',
                ),
            )
        );
    }, 50 );

    Let me know 🙂

    #1053546
    Simone

    Hi Tom,

    that did the trick.

    Thanks a lot.

    Cheers,

    Simone

    #1054073
    Tom
    Lead Developer
    Lead Developer
    #1396621
    Nic

    May i hook in this question? I inserted the code and color picker with color presets appear in common wordpress blocks but the colors do not appear in your customizer fields. why? seems in customizer the color picker works different.

    View post on imgur.com

    #1396865
    David
    Staff
    Customer Support
    #1396872
    Nic

    Nice! thank you david. here is my complete code to have predefined color palettes everywhere:

    $theme_colors = array(
    	array(
    		'name'	=> __( 'Blue', 'bs' ),
    		'slug'	=> 'blue',
    		'color'	=> '#1e72bd',
    	),
    	array(
    		'name'	=> __( 'Lightblue', 'bs' ),
    		'slug'	=> 'lightblue',
    		'color'	=> '#05bcbf',
    	),
    	array(
    		'name'	=> __( 'Yellow', 'bs' ),
    		'slug'	=> 'yellow',
    		'color'	=> '#fcb900',
    	),
    	array(
    		'name'	=> __( 'Textfarbe', 'bs' ),
    		'slug'	=> 'textcolor',
    		'color'	=> '#2b2b2b',
    	),
    	array(
    		'name'	=> __( 'White', 'bs' ),
    		'slug'	=> 'white',
    		'color'	=> '#ffffff',
    	),
    	array(
    		'name'	=> __( 'Light', 'bs' ),
    		'slug'	=> 'light',
    		'color'	=> '#dadada',
    	)
    );
    
    function custom_setup(){
    	global $theme_colors;
    	add_theme_support( 'editor-color-palette', $theme_colors );
    
    }
    add_action( 'after_setup_theme', 'custom_setup' );
    
    add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
    function tu_custom_color_palettes() {
    	global $theme_colors;
    	return array_column($theme_colors,"color");
    }

    put this in your functions.php

    #1396989
    David
    Staff
    Customer Support

    Awesome – thanks for sharing it was somewhere on my to do list – so that saved us a job 🙂

    #1407583
    Nic

    hi guys. made some additional code tweaks if you use SCSS for your theme (like me). normally you need to define theme colors in php and scss. so you have to write one array in functions.php (as already described here earlier) AND one scss-map in your scss file. i wrote a code to have only one place where you define your colors:
    1. create _colors.scss (simplified example):

    $theme-colors: (
        (
          "slug": "blue",
          "name": "Blau",
          "color": #104d83
        ),
        (
          "slug": "lightblue",
          "name": "Hellblau",
          "color": #05bcbf
        )
    );

    this file is where you define all your colors. Gutenberg and GeneratePress and WPStackable will use it.
    2. import into your style.scss:

    @import "colors";
    @each $map in $theme-colors {
    
        .has-#{map-get($map, slug)}-background-color,
        .has-#{map-get($map, slug)}-background-color:before {
          background-color: map-get($map, color);
        }
        .has-#{map-get($map, slug)}-color {
          color: map-get($map, color);
        }
        .wp-block-button__link.has-#{map-get($map, slug)}-background-color:hover {
          background-color: lighten(map-get($map, color),10%);
        }
    
    }

    3. import it in your functions.php and make several explodes to match expected php format:

    function get_data($url){
    
    	// Get remote HTML file
    	$response = wp_remote_get( $url );
    
    	// Check for error
    	if ( is_wp_error( $response ) ) {
    		return false;
    	}
    
    	// Parse remote HTML file
    	$html = wp_remote_retrieve_body( $response );
    
    	// Check for error
    	if ( is_wp_error( $html ) ) {
    		return false;
    	}
    
    	return $html;
    }
    function theme_colors(){
    	if($colors = get_data(get_stylesheet_directory_uri() . '/assets/_colors.scss')){
    		$theme_colors = array();
    		$colors = array_filter(array_map('trim', explode("(",$colors)));
    		$i = 0;
    		foreach($colors as $key=>$color){
    			if($key==0 OR $key==1) continue;
    			$color = explode(",",preg_replace("/\s+/", "", $color));
    			foreach($color as $key2=>$onecolor){
    				if(empty($onecolor)) continue;
    				$onecolor = explode(":",$onecolor);
    				if(isset($onecolor[0])){
    					$final_key = str_replace('"','',$onecolor[0]);
    					$final_value = $onecolor[1];
    					if($final_key == "color"){
    						$final_value = str_replace(array(")",";"),"",$final_value);
    					}
    					$theme_colors[$i][$final_key] = str_replace('"','',$final_value);
    				}
    			}
    			$i++;
    		}
    		return $theme_colors;
    	}
    	return false;
    }
    function custom_setup(){
    	if(theme_colors())
    	    add_theme_support( 'editor-color-palette', theme_colors() );
    }
    add_action( 'after_setup_theme', 'custom_setup' );
    add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
    function tu_custom_color_palettes() {
    	if(theme_colors())
    	    return array_column(theme_colors(),"color");
    	return false;
    }

    maybe someone finds a sleeker method for part 3 but for me its works like a charm.

    #1408134
    Tom
    Lead Developer
    Lead Developer

    Very cool, thanks for sharing that!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.