Taggutenberg

Gutenberg editor color palettes for WordPress themes

One of my favorite features of the Gutenberg block editor is the editor color palette. It allows themes to register a color palette that is shown in the block editor whenever a block needs to choose a color.

Allowing the theme to have a say in the styling of the content of the post is a powerful idea. It helps guide the user’s design choices while still allowing them freedom to make changes. When working on Zuari, it was important for me to get this right since the theme is otherwise just black and gray. 

Editor colors from Zuari
Since I am not very good at colors, I collected over a hundred references on Pinterest to pick and tweak from.

Once we have the colors picked and named (This can be tricky. What is ecru?) we need to let WordPress know that our theme would like to register a palette, and add our colors to it:

add_theme_support( 'editor-color-palette', array(
            array(
                'name' => __('Brick', 'zuari'),
                'slug' => 'brick',
                'color' => '#825A58'
            ),
            array(
                'name' => __('Baby Pink', 'zuari'),
                'slug' => 'baby-pink',
                'color' => '#E0BAC0'
            ),
            array(
                'name' => __('Ecru', 'zuari'),
                'slug' => 'ecru',
                'color' => '#E1D9D3'
            )
) );

Next, we’ll need to add two CSS classes for each of these colors so that they can be used on the different blocks as background and foreground colors. The naming convention for these classes is has-{slug}-color and has-{slug}-background-color:

.has-brick-color { color: #825a58; }
.has-baby-pink-color { color: #e0bac0; }
.has-ecru-color { color: #e1d9d3; }

.has-brick-background-color { background-color: #825a58; }
.has-baby-pink-background-color { background-color: #e0bac0; }
.has-ecru-background-color { background-color: #e1d9d3; }
Screenshot of Color settings in Gutenberg

That’s it! This will add the color palette to the block inspector for any blocks that need color, and show the right colors in the website once they’re selected.

I hope that WordPress adds these colors as options in the Customizer panels as well, allowing for more design guidance coming from the theme. I’ve been thinking about WordPress themes as design patterns and guidelines rather than skeletons for a website. I’ll be writing about this soon.

WordPress meet-up, December 2017

Siddharth has been organizing WordPress meet-ups in Goa for the last three years. Unfortunately, I am often not in the city to attend them. So, this time, to ensure that I am there, I offered to help him organize it.
Both of us have recently joined a co-working place, 91Springboard, and they offered to host the event. Hampus made us a logo, complete with coconut trees, a Portuguese style house, and a fish thali! Sid wanted circular transparent stickers which we got printed from Midway.

Wordpress Goa sticker on a laptop

Along with the informal meeting, we decided to have two short talks. The first by Abhishek about Open Source, and the second by me about Gutenberg. This was really an excuse for me to explore WordPress’ new editor.

On the day of the meet-up, we were a bit disappointed with the turnout. Of the 40 people who RSVP’d on meetup.com, only 15 came. We started the talks at 6:15 pm and in an hour both were done. What followed was a lively discussion about the future of WordPress, the nuances of theme licensing, and the standard of government websites. Later, everyone went to Joseph’s to get a drink, but I got sleepy soon after and left for home. What had started with disappointment turned into the realization that the people who did come were the perfect ones.

WordPress Goa, Prateek talking

For next time, we need to remember to start a little late, 5:00 pm on a Friday is too early. We also need to try and get the word out to students. If you would like to attend, talk, or have any suggestions, do get in touch.