[Resolved] Add theme support editor-color-palette

Home Forums Support [Resolved] Add theme support editor-color-palette

Home Forums Support Add theme support editor-color-palette

  • This topic has 20 replies, 6 voices, and was last updated 5 days ago by David.
Viewing 15 posts - 1 through 15 (of 21 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!

    #1797948
    twarrior

    sorry, but this code is not working for me.

    $theme_colors = array(
    	array(
    		'name'	=> __( 'Blue', 'bs' ),
    		'slug'	=> 'blue',
    		'color'	=> '#aff',
    	),
    	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");
    }

    at least, in the Generatepress Customizer, it changes the palette with other colours, but not with the defined colours!

    #1799109
    David
    Staff
    Customer Support

    Hi there,

    which part is not working ?
    Are the colors loading in the editor but not the customizer?

    #1799150
    twarrior

    Hello,

    I have tried again, but with this code (i use Code Snippets), the palette of color is not showing, either in GP customizer>colors, either in Gutenberg blocks

    #1799160
    twarrior

    this code works for me (but I need to insert two times the colors):

    add_action( 'after_setup_theme', function() {
        add_theme_support( 'editor-color-palette', array(
            array(
                'name'  => __( 'ttt' ),
                'slug'  => 'ttt',
                'color' => '#212121',
            ),
            array(
                'name'  => __( 'rrr' ),
                'slug'  => 'rrr',
                'color' => '#994141',
            ),
            array(
                'name'  => __( 'ddd' ),
                'slug'  => 'ddd',
                'color' => '#020202',
            ),
            array(
                'name'  => __( 'zzz' ),
                'slug'  => 'zzz',
                'color' => '#229784',
            ),
            array(
                'name'  => __( 'yyy' ),
                'slug'  => 'yyy',
                'color' => '#3f3f3f',
            ),
            array(
                'name'  => __( 'xxx' ),
                'slug'  => 'xxx',
                'color' => '#b7b6b5',
            ),
        ) );
    } );
    
    /* must be 8 colors */
    add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
    function tu_custom_color_palettes( $palettes ) {
    	$palettes = array(
    		'#000000',
    		'#FFFFFF',
    		'#212121',
    		'#020202',
    		'#229784',
    		'#1e72bd',
    		'#3f3f3f',
    		'#b7b6b5',
    	);
    	
    	return $palettes;
    }
    #1799915
    David
    Staff
    Customer Support

    Good news …. GP 3.1 update will have a new color module so this will no longer be required.

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