Color Picker Field Type
Renders Gutenberg’s ColorPalette component inside the block.
The type we would use inside the schema’s field_meta property to render this field is “color”: "type": "color"
If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before continuing.
Minimum Schema needed to create the field
"text_color": {
"type": "object",
"field_meta": {
"type": "color",
"options": [
{ "name": "red", "color": "#f00" },
{ "name": "blue", "color": "#00f" },
{ "name": "white", "color": "#fff" }
],
"label": "Text Color",
},
"default": {
"value": "#f00"
}
}This snippet of code will generate a simple color picker control with three predefined colors. The field name will be “text_color”, its label will be “Text Color” and it will have a value of red (#f00) by default.
What it would look like inside the block in the editor.
Rendering field’s data on the front-end:
We would use the same property that’s present inside the “default” object; "value", in this case.
In latte, it would look something like this.
<h3
style="color: {$text_color['value']|noescape};"
>
Selected Color: {$text_color['value']|noescape}
</h3>We are using the latte’s |noescape filter to properly print the color.
Additional / Optional field_meta properties
Besides the field_meta properties we saw above, color Field Type has one additional and optional field_meta property that can change its behavior and two more that all root level Field Types can have.
customColorshelp– written about on the Field Types pagecol– written about on the model.json page
customColors property
If present, this property accepts the value in the boolean format. If true is passed as a value, it will “unlock” the color palette feature. (In the basic example above, we only see the three predefined colors that we can choose from).
Here’s the code to unlock the color palette, and then the GIF showing how it will look inside the block in the editor.
"text_color": {
"type": "object",
"field_meta": {
"type": "color",
"options": [
{ "name": "red", "color": "#f00" },
{ "name": "blue", "color": "#00f" }
{ "name": "white", "color": "#fff" },
],
"customColors": true,
"label": "Text Color",
},
"default": {
"value": "#f00"
}
}
Even tho we have the option to adjust the color in three modes: HEX, RGB, and HSL, the value will still be saved in the HEX format.