Add the inbuilt colour palette for Gutenberg custom block - wordpress

Question

I created a Gutenberg custom block. My Gutenberg custom block
In this block, I need to change the background colour (green) and text colours. Is there any way for me to enable the inbuilt Gutenberg colour pallet which appears when I click the default Gutenberg paragraph and other blocks.
Here is my code for my Gutenberg block.
( function( blocks, components, i18n, element ) {
var el = element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var RichText = wp.blocks.RichText;
var BlockControls = wp.blocks.BlockControls;
var AlignmentToolbar = wp.blocks.AlignmentToolbar;
var MediaUpload = wp.blocks.MediaUpload;
var InspectorControls = wp.blocks.InspectorControls;
var TextControl = wp.components.TextControl;
registerBlockType( 'futurelab/color-block', { // The name of our block. Must be a string with prefix. Example: my-plugin/my-custom-block.
title: i18n.__( 'Color Block' ), // The title of our block.
description: i18n.__( 'A custom block for displaying color blocks.' ), // The description of our block.
icon: 'media-document', // Dashicon icon for our block. Custom icons can be added using inline SVGs.
category: 'common', // The category of the block.
attributes: {
title: {
type: 'array',
source: 'children',
selector: 'h3',
},
content: {
type: 'array',
source: 'children',
selector: 'p',
},
buttonText: {
type: 'array',
source: 'children',
selector: 'span',
},
buttonURL: {
type: 'url',
selector:'div'
},
},
// The "edit" property must be a valid function.
edit: function( props ) {
var title = props.attributes.title; // Content in our block.
var content = props.attributes.content; // Content in our block.
var buttonText = props.attributes.buttonText; // Content in our block.
var buttonURL = props.attributes.buttonURL;
/**
* Update title on change.
*/
function onChangeTitle( newTitle ) {
props.setAttributes( { title: newTitle } );
}
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
function onChangeButtonText( newButtonText ) {
props.setAttributes( { buttonText: newButtonText } );
}
// The editable title.
return [
el( InspectorControls, { key: 'inspector' }, // Display the block options in the inspector panel.
el( components.PanelBody, {
title: i18n.__( 'Color Block Settings' ),
className: 'block-social-links',
initialOpen: true,
},
el( 'p', {}, i18n.__( 'Enter the button url here to navigate button when click.' ) ),
el( TextControl, {
type: 'url',
label: i18n.__( 'Button URL' ),
value: buttonURL,
onChange: function( newButton ) {
props.setAttributes( { buttonURL: newButton } );
},
} ),
),
),
el(
'div',
{className: props.className + ' color-content-block'},
el(RichText, // Editable React component.
{
tagName: 'h3', // <p></p>.
className: props.className, // The class="wp-editor-gb-03-block-editable".
value: title, // Content in our block. i.e. props.attributes.title;
placeholder: 'Block Title...',
keepPlaceholderOnFocus: true,
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus,
onChange: onChangeTitle
}
),
el(RichText, // Editable React component.
{
tagName: 'p', // <p></p>.
className: props.className + ' block-content', // The class="wp-editor-gb-03-block-editable".
onChange: onChangeContent, // Run the onChangeContent() function onChange of title.
placeholder: 'Block Content...',
value: content, // Content in our block. i.e. props.attributes.title;
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus
}
),
el (
'span',
{ className: props.className + ' btn' },
el(RichText, // Editable React component.
{
tagName: 'span', // <p></p>.
className: props.className, // The class="wp-editor-gb-03-block-editable".
placeholder: 'Button Title...',
onChange: onChangeButtonText, // Run the onChangeContent() function onChange of title.
value: buttonText, // Content in our block. i.e. props.attributes.title;
focus: focus, // Focus — should be truthy. i.e. props.focus;
onFocus: props.setFocus,
}
),
),
el (
'div',
{ className: props.className + ' display-none' },
buttonURL,
),
)
]
},
// The "save" property must be specified and must be a valid function.
save: function( props ) {
var title = props.attributes.title; // Content in our block.
var content = props.attributes.content; // Content in our block.
var buttonText = props.attributes.buttonText; // Content in our block.
var buttonURL = props.attributes.buttonURL;
// The frontend title.
return el(
'div',
{className: 'color-title-block'},
el( 'h3', { // <p></p>.
className:'', // The class="wp-block-gb-block-editable-03".
},
title,
),
el( 'p', { // <p></p>.
className:'block-content', // The class="wp-block-gb-block-editable-03".
},
content,
),
el('span', {
className: 'btn'
},
buttonText,
),
el( 'div', {
className: ''
},
buttonURL
),
);
},
} );
} )(
window.wp.blocks,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
Please help me with that.

Answer 1

You need to add an attribute to store the color and then wrap your edit function in the Higher Order Component called withColors and include PanelColorSettings in InspectorControls, both of which are in wp.editor.
var PanelColorSettings = wp.editor.ColorPanelSettings;
var withColors = wp.editor.withColors
var compose = wp.compose.compose
...
attributes: {
myColorAttributeName: {
type: 'string'
}
}
...
edit: compose([withColors('myColorAttributeName')])(myRegularEditFunction)
this exposes a new prop function that gets passed automatically called setMyColorAttributeName ( like setAttributes() ) that you can use in the PanelColorSettings elements onChange function.
*Update: March 2019*
updating response with a more complete example
// get these from the wp object.
const { withColors, PanelColorSettings, getColorClassName } = wp.editor;
const { compose } = wp.compose;
const { Fragment } = wp.element;
...
/** extract your edit component into a function like this.
* this will give you a settings panel on the sidebar with
* the color swatches and handle the onChange function
*/
const EditComponent = ({colorScheme, setColorScheme} /* and your other props */) => (
<Fragment>
<InspectorControls>
<PanelColorSettings
title={ 'Color Options' }
colorSettings={ [
{
value: colorScheme.color,
label: 'Block Color Scheme',
onChange: setColorScheme,
},
] }
/>
</InspectorControls>
<YOUR-ACTUAL-BLOCK-MARKUP />
<Fragment>
);
...
registerBlockType( 'namespace/blockslug', {
...
edit: compose( [withColors('colorScheme')] )(EditComponent)
});
Once you add this markup, you have access to getColorClassName( 'background-color', attributes.colorScheme) in the render function. in this instance it returns something like has-purple-background-color. It's a lot of code to write for something that should be much easier, but it works.
the WP and Gutenberg team may have changed this since the official release of WP 5, but it's still working for me on WP 5.1.1 so, I'm submitting it.

Answer 2

Like "8-Bit Echo" said, only use the slug attribute to get, in this case, the "has-color-name-background-color" result IF you are using the color object directly, e.g.:
getColorClassName( 'background-color', colorScheme.slug)
You can also inspect the colorScheme object and see it has the following attributes: class (has-color-name-color-sheme), color (rgba(4,3,2,1)), name (Color Name), slug (color-name).