[Resolved] Tip: Custom Palettes for Generate Blocks Color Pickers

[ideawrights]

Sorry if it is inappropriate to post a tip here rather than ask for support. Since the documentation is still a bit sparse for Generate Blocks and since I suspect others might appreciate this.

Also, this isn’t really a Generate Blocks tip, but I think that once you start using Generate Blocks, you might feel the need for this simply customization.

The problem: you’ve decided to use the full power of Generate Blocks to build your sites, or maybe you’ve just pulled in a design from the Site Library only to find that it uses Generate Blocks extensively. It’s great. It’s fast, it’s easy. But you’ll find one thing that gets annoying: to stay consistent with your design colors, you are constantly choosing and cutting and pasting your design hex values into the color choosers for blocks.

This isn’t a problem for the normal customizer because this is a one-and-done process. But for Generate Blocks, you’ll be doing this over and over. Worse, if you have multiple authors/editors/content people or if you are handing a site over to a client, you could end up with a hodge podge of colors.

The solution: create a custom palette.

1. Create a child theme (always create a child theme)
https://docs.generatepress.com/article/using-child-theme/

2. In your functions.php file, create a theme setup function and the necessary action hook.
In the code below, of course you would replace “gcp” with the folder name of your child theme. This is called “namespacing” and it prevents your function names and such from “colliding” with the function names in plugins or themes. You’ll see that Tom often namespaces his functions in demo code with tu for Tom Usborne, as in tu_function_name. Within GeneratePress, it’s usually “generate“. I usually use some abbreviation of the site name.

The idea is simply to make sure your function names will be unique (you can also check for this with function_exists()).

In this case, let’s assume that the name is GeneratePress Child and it’s in a folder in themes/gcp

function gcp_theme_setup() {
  // your palette and other theme setup stuff will go here.
}
add_action( 'after_setup_theme', 'gcp_theme_setup' );

Note that the name of your theme setup function must match the callback in the add_action() function.

3. Determine (or set) the Text Domain of your child theme.
https://developer.wordpress.org/themes/functionality/internationalization/#text-domain

So again if your child theme is named “GeneratePress Child” and it is in a directory called gcp, then your text domain should be “gcp”

You can set it to something different in your child theme styles.css file, but generally it’s best not to. Though not strictly necessary, I always declare a text domain in my styles.css file in the header comment like so:

Text domain: gcp

4. Add your palette colors
As shown here: https://developer.wordpress.org/block-editor/developers/themes/theme-support/

So in our case, the code above in Step 2 gets filled in as follows

function gcp_theme_setup() {
 // Adds support for editor color palette.
  add_theme_support( 'editor-color-palette', array(
    array(
        'name' => esc_attr__( 'White', 'gcp' ),
        'slug' => 'white',
        'color' => '#FFFFFF',
    ),
    array(
        'name' => esc_attr__( 'Black', 'gcp' ),
        'slug' => 'black',
        'color' => '#000000',
    ),
    array(
        'name' => esc_attr__( 'GCP Logo Yellow', 'gcp' ),
        'slug' => 'iw-logo-yellow',
        'color' => '#FDF38C',
    ),
    array(
        'name' => esc_attr__( 'GCP CTA Red', 'gcp' ),
        'slug' => 'iw-red',
        'color' => '#F37748',
    ),
  ) );
}
add_action( 'after_setup_theme', 'gcp_theme_setup' );

5. Disable custom colors
This is optional. If you want to prevent authors/editors/clients from messing with your carefully chosen colors and ending up with a motley of colors of their own choosing, you can disable custom colors. This feels a little aggro, but I have seen people who, given the power, will have 12 different colors of text on a page. So if you need to stop this, you just add this code to your theme setup function.

add_theme_support( 'disable-custom-colors' );

See the documentation here:
https://developer.wordpress.org/block-editor/developers/themes/theme-support/#disabling-custom-colors-in-block-color-palettes

And just like that, the link to Custom Colors is gone. Poof! Happy designer. Possibly unhappy client.

6. Have fun

That’s it. Now when you go to edit blocks with your child theme active, you should see your custom palette. It takes a bit of setup, but over the years, this will save you a lot of time and a lot of aggravation with inconsistent colors.

[ideawrights]

Marking as resolved since it isn’t a support request. No reply is requested, of course. If it is inappropriate to post such things here, please just remove it.

[Leo]

Hey Tom!

Thanks for sharing 🙂

We plan to have a community section in the GenerateBlocks forum in the near future and will be a perfect place to share a solution like this.

I’ll post here again when the forum is available 🙂

[ideawrights]

That would be great. This seems like the wrong place for contributions like that, but whenever I have a GP question, this is the first place I look for an answer, which made it seem like the right place.

A community forum would be perfect. And thank you for NOT making a it Facebook Group. That’s bad for you (no ownership of the content) and for me (I boycott FB, so I am locked out of those groups).

[Leo]

Thanks 🙂

[Jeremy]

Nice writeup and great tip, Tom. I actually wasn’t aware it was possible to disable custom colors.

I just wanted to say a community forum would be a fantastic and welcome addition, glad to hear. I know they take time and effort to moderate and maintain, but there’s a lot of upside to them too.

The fact is, there’s a lot of really talented and helpful people who post here. I’ve also learned so much from Leo, David, and Tom that I’ve often felt compelled to try and contribute back for similar reasons.

But the last thing I want to do, even unintentionally, is confuse a customer support request or step on anyone’s toes. I probably owe Leo an apology for accidentally doing that in the past. Sorry bud! 🙂

Have a great evening guys.

[Leo]

Thornbrand I can’t accept an apology for something that never happened before haha

At least I don’t remember that happened at all 🙂

[Leo]

Hey! The GB community forum is now available:
https://community.generateblocks.com/

Thanks 🙂

[Author]

Posts