Gutenberg Color Pallette

I know that the rather lovely Gutenberg isn’t supposed to be used on production sites yet but I figure this blog doesn’t really count so I’m using this as my playground. I am also very aware that Gutenberg has split opinion in the WordPress community and there are a lot of issues to work through but, as I mentioned very briefly before, I am enjoying Gutenberg and like the direction it is taking WordPress as a content editor.

There will be a lot of head scratching and working out to be done to make sure sites I’ve made work with it, and to work out how Gutenberg sits alongside all the WordPress site builders that I’ve inherited over the last few years, but I’ve added it in to my work flow for site development now, taking me away from encouraging people to use something such as Divi or similar. They are great, but, when simplicity is desired, Gutenberg works for me.

add_theme_support('editor-color-palette',
'#ba1200',
'#031927',
'#9dd1f1',
'#508aa8',
'#c8e0f4'
);

Anyway – enough of that – the above code snippet is one of my new favourite things. It is, I think, pretty obvious what it does – as the code suggests it edits the colour palette options that are available in the Gutenberg editor (for those of you who don’t know Gutenberg – see the image, it’s a handy little Background / Text Colour editor). Drop the snippet in to your theme’s functions file and you’re away.

Simply put, this snippet lets you, the designer / developer behind the website, encourage the content creator for the site to use specific colours within their content. Very handy! The colour picker remains in place so people can go off-piste if they are that way inclined although even that functionality can be removed with the addition of add_theme_support('disable-custom-colors') if you need such restrictions.

Nice.

NB Thanks to Coolers.co for the colour scheme in this example.

Author: Andy

Actually have no idea what I am doing. Live in Sheffield with my wife and three kids. That's about all there is to it.

Leave a Reply

Your email address will not be published. Required fields are marked *