Contents
How to add color settings to your custom Gutenberg block?
For example a custom color #DD0000 chosen for background color will get the attribute “ style=”background-color: #DD0000; “. When we implement color settings for our block we will need to implement the correct class and inline style.
How do you set up styles in Gutenberg?
A somewhat less known feature in Gutenberg is the option to set up different styles for blocks. You can register as many different styles upon any type of block in order to give the same block different designs. Possible styles for blocks are displayed as a section in the editor’s right hand side.
How to save a block in WordPress Gutenberg?
Then it’s up to us to render setting inputs, such as text inputs, checkboxes or whatnot. Filter the block’s save props. We can adjust the props for save, which is responsible for both saving the block and rendering it in frontend (outside of editor).
How to filter save props in WordPress Gutenberg?
Filter the block’s save props. We can adjust the props for save, which is responsible for both saving the block and rendering it in frontend (outside of editor). In our case we want to add a class or inline style.
What happens when you change the color of a post in Gutenberg?
You can see that it remembers your color choice when saving the post. However, nothing visually happens when you change colors. The color choice is stored in the attributes, but no color change happens in the editor, nor when previewing the post. This is because we need to add code for the block’s classes and styles.
Where do I find the hex code in Gutenberg?
If a palette color was chosen it will store properties for hex code, palette slug, class name, and more. If a custom color was chosen the object will contain the hex code. The hex code is always found in the property color. And the class name, (only if a palette color was chosen) will be set in the property class.