Day February 20, 2020

In previous tutorial blog post, we have learned how to use Settings Sidebar to add option to change to change the color of Colored Lines block. We have used the PanelColorSettings element with custom color options which lets the user change the color of the Colored Lines. In this tutorial, we will learn about the other type of editable fields (text field, text area field, radio button field etc.) also known as controls for settings sidebar and how to use them inside the edit() function.

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.