How to Custom Color Palette to Gutenberg Block in WordPress
source link: https://webomnizz.com/how-to-custom-color-palette-to-gutenberg-block-in-wordpress/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Gutenberg team doing a great job of making the editor more flexible for user’s and developer’s points of view. We can extend it by creating custom blocks or extend the existing blocks. This article is focusing on adding a custom color palette to Gutenberg’s paragraph block.
Default Theme Color Palettes
Gutenberg comes with some random color palettes as you can see below screenshot. But if we think from a designer’s point of view then we don’t require these random color palettes to the WordPress site.
Every design must have some unique color palette set as per their design. For example, take a look at a custom color palette that we are going to use in the Gutenberg color settings section.
Gutenberg Custom Color Palettes
WordPress provides the theme support hook to set the editor color palette for your theme. Now, let’s attach our own color palette for the theme. Open the functions.php file from your active theme directory and add the following code.
// Adds support for editor color palette.
$color_palette = array(
array(
'name' => __( 'Blue', 'wpastra' ),
'slug' => 'monte-blue',
'color' => '#406186',
),
array(
'name' => __( 'Pink', 'wpastra' ),
'slug' => 'monte-pink',
'color' => '#df7c88',
),
array(
'name' => __( 'Yellow', 'wpastra' ),
'slug' => 'monte-yellow',
'color' => '#ffc372',
),
array(
'name' => __( 'Purple', 'wpastra' ),
'slug' => 'monte-purple',
'color' => '#b5aebe',
),
array(
'name' => __( 'Light Yellow', 'wpastra' ),
'slug' => 'monte-light-yellow',
'color' => '#ffd49c',
),
array(
'name' => __( 'Light Pink', 'wpastra' ),
'slug' => 'monte-light-pink',
'color' => '#e8a3ab',
),
array(
'name' => __( 'Grey', 'wpastra' ),
'slug' => 'monte-grey',
'color' => '#393939',
),
array(
'name' => __( 'White', 'wpastra' ),
'slug' => 'monte-white',
'color' => '#ffffff',
),
);
add_theme_support( 'editor-color-palette', $color_palette );The editor-color-palette accepts a multi-dimensional array in name, slug and color format. Where the name key for the color name, slug key for the unique key, and the color key hold the color code.
array(
'name' => __( 'Blue', 'themeLangDomain' ),
'slug' => 'monte-blue',
'color' => '#406186',
),Now refresh the page and you can find the color palettes similar to the below screenshot.
Now when you select the color, the color settings section applies the has-{$color-slug}-color for text color and has-{$color-slug}-background-color class for the background color to an entire paragraph block. And it will work properly in the backend with Gutenberg editor but not in the front-end.
To make it working on the frontend, we need the add all the color slugs with color code to our style.css file that you can find under your active theme directory.
.has-monte-blue-color{color: #406186;}
.has-monte-pink-color{color: #df7c88;}
.has-monte-yellow-color{color: #ffc372;}
.has-monte-purple-color{color: #b5aebe;}
.has-monte-light-yellow-color{color: #ffd49c;}
.has-monte-light-pink-color{color: #e8a3ab;}
.has-monte-grey-color{color: #393939;}
.has-monte-white-color{color: #ffffff;}
.has-monte-blue-background-color{background-color: #406186;}
.has-monte-pink-background-color{background-color: #df7c88;}
.has-monte-yellow-background-color{background-color: #ffc372;}
.has-monte-purple-background-color{background-color: #b5aebe;}
.has-monte-light-yellow-background-color{background-color: #ffd49c;}
.has-monte-light-pink-background-color{background-color: #e8a3ab;}
.has-monte-grey-background-color{background-color: #393939;}
.has-monte-white-background-color{background-color: #ffffff;}Support Inline Color Palettes
The above codes only work with the entire block or the background-color but if in case it won’t work with the inline-code then you have to add the has-{$color-slug}-color classes for the Gutenberg editor.
We can use the enqueue_block_editor_assets hook to add style for the Gutenberg editor. Let’s create a new file for editor and add the following style to it.
.has-monte-blue-color{color: #406186;}
.has-monte-pink-color{color: #df7c88;}
.has-monte-yellow-color{color: #ffc372;}
.has-monte-purple-color{color: #b5aebe;}
.has-monte-light-yellow-color{color: #ffd49c;}
.has-monte-light-pink-color{color: #e8a3ab;}
.has-monte-grey-color{color: #393939;}
.has-monte-white-color{color: #ffffff;}Now, save the file and use the wp_enqueue_style() function with enqueue_block_editor_assets hook.
add_action( 'enqueue_block_editor_assets', 'wrg_guten_enqueue' );
function wrg_guten_enqueue() {
wp_enqueue_style(
'wrg_guten-style',
get_stylesheet_directory_uri() . '/wrg-editor.css',
null,
'1.0.0'
);
}We hope this article will help you to learn the how to add custom color palette to the Gutenberg block. If you like it then please follow us on Facebook and Twitter.
Posted by Jogesh Sharma
Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.
Post navigation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK