Add Theme Color Palette to the WordPress Editor

As many of you know, WordPress is in the middle of developing a brand-new editor called Gutenberg, which will present an entirely new way of publishing content: using a block level approach. It is currently available as a plugin, and will be shipped in WordPress 5.0.

The Gutenberg editor will revolutionize the way we publish content with WordPress, and many folks—myself included— are very excited about expedited workflow and granular layout options.

To give users a deeper level of control over the display of content, Gutenberg will offer a number of exciting features.

Theme Color Palettes

Among those features include Background Color and Text Color, which allow you to customize the way that text, paragraphs, and buttons appear on your website.

I can see there being plenty of other uses for these features, but for now, I’ll focus on these—since they will be the most widely used.

Before I show you how to add theme colors to the Gutenberg editor, here’s how the default controls appear in the dashboard:

The Gutenberg editor ships with 11 default colors, including pink, red, orange, yellow, green, blue, and gray. In addition, it will always include a color picker with the palette, for further customization.

This gives the user full control on what color is used for various elements such as text, background, and buttons. But there is also a way to implement a unique color palette as well.

Custom Theme Color Palettes

One of the many benefits of WordPress is the extensibility it offers to designers and developers who build websites for clients.

The Gutenberg editor provides a method to create custom color palettes, which is especially helpful to end users and anyone who publishes content on a regular basis.

Below is the code that is used to add theme colors to the Gutenberg editor. This can be used to customize the Genesis Sample theme: