In previous blog post we have developed a custom Gutenberg block i.e Colored Lines which adds colored lines in post/page editor. After that we have learned how to use Block Controls (Block Toolbar) to change the alignment of the colored lines. In this tutorial blog post, we will use the Settings Sidebar to add the options to change the color of the Colored Lines Gutenberg block.
Settings Sidebar – Gutenberg Block Development
Settings Sidebar appears when we add/edit the block inside the Gutenberg post/page editor. By default the settings sidebar contains the block title, icon and default setting to define custom CSS class for that instance of the block.
Now we will use the settings sidebar to define other customization settings to change the color of the colored lines.
Importing Required Elements
First of all we need to import components package as an input argument of main parent function inside block.js as follows:
( function(blocks, editor, element, components) {
......
......
})(window.wp.blocks,
window.wp.editor,
window.wp.element,
window.wp.components
);Now we can import the InspectorControls and PanelColorSettings elements from the editor package, Fragment element from element package and PanelBody element from components package inside the block.js file’s main function as shown below:
const {BlockControls, InspectorControls, AlignmentToolbar, PanelColorSettings} = editor;
const { Fragment } = element;
const { PanelBody } = components;Adding Color Option in Settings Sidebar
To add the color option, first we will add another attribute in attributes and example objects which will hold and save the value of the color.
attributes: {
alignment: {
type: 'string',
default: 'left',
},
lineColor: {
type: 'string',
default: "#FF7F50",
},
}, //placeholders to store customized settings information about the block
example: { // used to define default values for the attributes
attributes: {
alignment: 'left',
lineColor: "#FF7F50",
},
},Now inside the edit() function we will define an array with default color options which will be visible along with the color picker:
const colorSamples = [
{
name: 'Coral',
slug: 'coral',
color: '#FF7F50'
},
{
name: 'Brown',
slug: 'brown',
color: '#964B00'
},
{
name: 'Purple',
slug: 'purple',
color: '#800080'
}
];Now we will use Fragment, InspectorControls, PanelBody and PanelColorSettings elements to define Settings Sidebar with color option for our Custom Gutenberg Block.
el( Fragment, {},
el( InspectorControls, {},
el( PanelBody, { title: 'Line Settings', initialOpen: true },
el( PanelColorSettings, {
colorSettings: [
{
colors: colorSamples, // here you can pass custom colors
value: props.attributes.lineColor,
label: 'Line color',
onChange: ( value ) => {
props.setAttributes( { lineColor: value } );
},
},
]
}),
),
),
),- Fragment: This element acts as a container and make sure that the contents inside this element are not outputted on the front-end side
- InspectorControls: This element defines a container for block settings.
- PanelBody: This element defines a collapsible section and can be used to group settings in same section
- PanelColorSettings: This element actually defines the color picker with default color options inside the Settings Sidebar.
Now we can use the lineColor attribute’s value while defining the styles object for Colored Lines block both inside the edit() and save() functions.
const blockInnerStyle = {
backgroundColor: props.attributes.lineColor,
width: '100%',
height: '2px',
display: 'inline-block',
};Complete Code (block.js)
( function(blocks, editor, element, components) {
const __ = wp.i18n.__; // The __() for internationalization.
const el = element.createElement; // The wp.element.createElement() function to create elements.
const registerBlockType = blocks.registerBlockType; // The registerBlockType() to register blocks.
const {BlockControls, InspectorControls, AlignmentToolbar, PanelColorSettings} = editor;
const { Fragment } = element;
const { PanelBody, RangeControl } = components;
registerBlockType( 'customwpblock/colored-lines', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Colored Lines', 'customwpblock' ), // Block title.
icon: 'text', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [ 'customwpblock', 'colored', 'lines' ], // keywords for custom block
attributes: {
alignment: {
type: 'string',
default: 'left',
},
lineColor: {
type: 'string',
default: "#FF7F50",
},
}, //placeholders to store customized settings information about the block
example: { // used to define default values for the attributes
attributes: {
alignment: 'left',
lineColor: "#FF7F50",
},
},
// The "edit" property must be a valid function.
edit: (function( props ) {
const onChangeAlignment = ( newAlignment ) => {
props.setAttributes( { alignment: newAlignment === undefined ? 'left' : newAlignment } );
};
const blockParentStyle = {
width: '100%',
padding: '0',
marginTop: '0px',
marginBottom: '0px',
textAlign: props.attributes.alignment,
};
const blockInnerStyle = {
backgroundColor: props.attributes.lineColor,
width: '100%',
height: '2px',
display: 'inline-block',
};
const colorSamples = [
{
name: 'Coral',
slug: 'coral',
color: '#FF7F50'
},
{
name: 'Brown',
slug: 'brown',
color: '#964B00'
},
{
name: 'Purple',
slug: 'purple',
color: '#800080'
}
];
return [
el( Fragment, {},
el( InspectorControls, {},
el( PanelBody, { title: 'Line Settings', initialOpen: true },
el( PanelColorSettings, {
colorSettings: [
{
colors: colorSamples, // here you can pass custom colors
value: props.attributes.lineColor,
label: 'Line color',
onChange: ( value ) => {
props.setAttributes( { lineColor: value } );
},
},
]
}),
),
),
),
el(
BlockControls,
{ key: 'controls' },
el(
AlignmentToolbar,
{
value: props.attributes.alignment,
onChange: onChangeAlignment,
},
)
),
el( 'div', { className: props.className },
el( 'div', { className: 'customwpblock-colored-lines', style : blockParentStyle },
el( 'span', {style : blockInnerStyle},
)
)
)
];
}),
// The "save" property must be specified and must be a valid function.
save: function( props ) {
const blockParentStyle = {
width: '100%',
padding: '0',
marginTop: '0px',
marginBottom: '0px',
textAlign: props.attributes.alignment,
};
const blockInnerStyle = {
backgroundColor: props.attributes.lineColor,
width: '100%',
height: '2px',
display: 'inline-block',
};
return (
el( 'div', { className: props.className }, // className property is automatically enabled for each block
el( 'div', { className: 'customwpblock-colored-lines', style : blockParentStyle },
el( 'span', {style : blockInnerStyle},
)
)
)
);
},
} );
})(window.wp.blocks,
window.wp.editor,
window.wp.element,
window.wp.components
);
Output:
Conclusion
In this tutorial blog post, we have learned how to use the Settings Sidebar to add an option to change the color of the Colored Lines Gutenberg block. You can further improve this custom Gutenberg block with the options to change the width and height of the Colored Lines block. If you have any questions or do you want to learn any other feature of Gutenberg Block Development, please let us know in comments section and we will post another blog post about it.