ColorPalette

Use the ColorPalette component to add a palette of colors that people can select from. The ColorPalette does nothing on it’s own—it just stores the selected color in the attribute you assign to the color palette. The ColorPalette is not output on the front-end.

Settings

Enable Custom Colors

When checked, a button will be displayed in the component that allows people to choose an arbitrary color using a color picker. When left unchecked, users will only be able to select from the colors you define.

Clearble

When checked, a button is displayed allowing the user to reset the color to an empty value. When left unchecked, once a color is selected, users can only select a different color.

Usage

The ColorPalette component can be used in various ways. Here are a few common examples.

Set a Background Color

Use a ColorPalette to allow people to choose the background color for an element in your block. Create an attribute to hold the selected color, add a ColorPalette to your block, and add the desired colors to the palette. Select the element you’d like to apply the background color to, add a style, enter “background-color” for the style name, and use the insert token button in the style’s value field to insert the value from your color attribute.

Assign a Class Based on a Selected Color

Use the ColorPalette to assign a class to your block based on the color selected. Create an attribute to hold the selected color, add a ColorPalette to your block, and add the desired colors to the palette. Select the element you’d like to add a class to and click add class. Add a class for each color option. Use the Conditions section in the Add Class panel to only add the class when a specific color is selected.