Add a Custom Colour Pallet to Gutenberg

Published: 28th November 2018


The new WordPress editor is making it very easy for users to change the colour of various elements but is this a good idea?

We’ve already discussed how the new editor comes with blocks and how to limit these in our article Limiting Blocks Within Gutenberg. In this article we want to look at controlling which, if any, colours clients can use within their written content.

We design our websites very carefully, taking into consideration the brand, user experience and user interface. We establish a colour palette that is used throughout the website which is on brand and ensures a smooth user journey. For example, making interactive elements such as buttons a particular colour re-enforces the fact that they are there to be clicked. This carefully thought out pallet is defined by the CSS within the theme.

The WordPress editor has always had the ability to change text colour, but Gutenberg has taken this further, making the option to do so more obvious and including tools to change the background colour of elements. That’s an awful lot of control to give clients, the power to overwrite theme CSS and experiment with an unlimited pallet of colours as they see fit, this can quickly break the design.

We’re not ready to have our Design, Development and Marketing experts shouting at us because a client has overwritten the CSS, set the font colour to yellow, added a pink background which  outshines (for all the wrong reasons) the CTAs that were put in place! As such, we’ve put together some code snippets which should help! All of these can be placed within the functions.php file.

Prevent Custom Colours

By default clients will be able to select any colour they like from the colour wheel, let’s remove this functionality in favour of setting our own colours later.

function theme_disable_custom_colors() {
add_theme_support( 'disable-custom-colors' );
add_action( 'after_setup_theme', 'theme_disable_custom_colors' );

Define a New Colour Palette

If we’re going to give clients the ability to change colours it makes sense for designers to pre-define these to ensure they compliment the overall design as much as possible. This snippet will allow us to do just that, you can see we’ve set 3 colours from our own branding.

function theme_color_palette() {
		'editor-color-palette', array(
				'name'  => esc_html__( 'Orange', '@@textdomain' ),
				'slug' => 'orange',
				'color' => '#f37557',
				'name'  => esc_html__( 'Blue', '@@textdomain' ),
				'slug' => 'blue',
				'color' => '#3aadb4',
				'name'  => esc_html__( 'Grey', '@@textdomain' ),
				'slug' => 'grey',
				'color' => '#454548',
add_action( 'after_setup_theme', 'theme_color_palette' );

Disable All Colours

If we’re still not comfortable giving clients the ability to change colours we can remove this altogether!

function theme_disable_all_colors() {
        add_theme_support( 'editor-color-palette' );
	add_theme_support( 'disable-custom-colors' );
add_action( 'after_setup_theme', 'theme_disable_all_colors' );

In Summary

As in our previous article, we’re excited to see where Gutenberg takes us and how much value it can add to the WordPress editing experience. With simple snippets such as those above we can limit functionality that might not be ideal but also enhance useful features.

Previous Page

More Blog Entries

5 Custom Alerts You Need in Your Google Analytics Set-Up

Published: 15th May 2019

We’ve selected 5 custom alerts we think most businesses would benefit from having set up. If you’ve never used custom alerts before then be sure to read through our blog on setting them up here. W...

Read the full article

Adding Structured Data

Published: 8th April 2019

It's fair to say that search engines have their work cut out, having to regularly crawl billions of websites, extract the information and then index this based on what they find. It's a pretty big tas...

Read the full article

Google Analytics for Beginners: Setting up Custom Alerts

Published: 26th March 2019

By using Custom Alerts you can keep an eye on your site usage and monitor specific changes without having to manually sift through the data in Google Analytics. What Are Custom Alerts and How Do They...

Read the full article

Get in touch today, let's talk about your next project

Follow us on Twitter

Our new developer, Greg, hard at work here at the #UFMedia headquarters 🐶🖥️ #Sproodle #DogsofTwittter

111 days ago

User Friendly Media

RT @Moz: #SEO Competitive Analysis 101: Step 1: Identify your top competitors Step 2: Perform keyword gap analysis Step 3: Perform link ga…

127 days ago

User Friendly Media

@allourwellbeing Oh my goodness!! Ahh all those beauties! Are they doodles of a sort?! 😍😍

144 days ago

User Friendly Media

RT @sejournal: Facebook Gives a Heads-Up About a New Tool That May Affect Ad Targeting via @MattGSouthern: #SMM #S

287 days ago

User Friendly Media

Joomla Development Drupal Development Wordpress Development Shopify Setup and Customisation Google Analytics Google Ads Google Tag Manager Laravel Development Boot Strap Framework development Cloud Flare Content Distribution Google My Business WooCommerce Mailchimp
Any Questions? Ask away!