Introducing Gutenberg and How to Add Theme Color Platelet with it.June 15, 2018
Gutenberg, “the revolutional art of typography was invented by Johannes Gutenberg.”
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 on WordPress official plugin website as a plugin, and will be available in WordPress 5.0.
The Gutenberg editor will change the way we publish content with WordPress completely, and I know that many people will definitely like it.
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:
<?php // Do NOT include the opening php tag. // Adds support for editor color palette. add_theme_support( 'editor-color-palette', '#f5f5f5', '#999999', '#333333', get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ), get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ) );
Note: The first 3 hexcodes #f5f5f5, #999999, #333333 are base colors that are found within the theme, and the following two lines pull the link and accent colors that are tied to the Theme Customizer.
A screenshot that shows custom colors in the palette:
The color picker that is standard in the Gutenberg editor can be helpful. But let’s face it—there are plenty of instances when delivering that capability might be considered a suboptimal situation.
A designer or developer might prefer to remove that option from client use. Here’s the code that will remove the color picker:
<?php // Do NOT include the opening php tag. // Disables custom colors in block color palette. add_theme_support( 'disable-custom-colors' );
A screenshot that shows the custom palette, sans color picker:
Use Cases for Custom Theme Colors
The first—and most obvious—use for custom theme colors is to change the color of text. Perhaps you wish to create a separate look for text, much the way I do at the beginning of my blog posts:
An example of using custom theme colors in the Gutenberg editor to style an intro paragraph, paired with italics, and centered text.
Beyond that, you might want to provide a note within your entry content, which points out something specific to your reader:
Or quite possibly, you may want to display a call-to-action button, which draws attention to a potential customer or subscriber:
The Genesis Framework combines expert knowledge in SEO, design, performance, and security, to help you build beautiful and reliable WordPress websites. Click here for more info.