WordPress—A Complete Guide/

...

/

Color Settings

Color Settings

Explore the different options for color settings.

We'll cover the following...

In this lesson, we will let the user pick a color for the button. There are a few options when it comes to adding color to your custom block like ColorPalette, ColorPicker, and PanelColorSettings.

Attribute for storing color

We need access to the button's color in both the editor and the frontend. This calls for making it an attribute. Open the block.json file. We will create a new attribute called buttonColor.

"attributes": {
     "text": {
         "type": "string",
         "default": ""
     },
     "linkObject": {
         "type": "object",
         "default": {}
     },
     "buttonColor":{
         "type": "string"
     }
 },
buttonColor attribute

ColorPalette

Open the edit.js file. We will add a color picker tool in the sidebar. As mentioned in the previous lesson, the inspector controls the settings in the sidebar. It contains panels for different settings. We added a link picker tool inside the PanelBody component in the previous lesson.

First, we will import the ColorPalette component from the components package. To place the ColorPalette component inside a panel, add a new PanelBody element right after the link picker panel. The panel has a title of Color Picker and initialOpen prop is set to true.

<InspectorControls>
    <PanelBody title='Link Picker' initialOpen={true} >          
        <LinkControl
        ...
        />          
    </PanelBody>
    <PanelBody title='Color Picker' initialOpen={true}>
    
    </PanelBody>
</InspectorControls>
Create a PanelBody component for the ColorPalette component

Nested inside the PanelBody is the ColorPalette component. ColorPalette is a self closing tag. It has the following props:

  • colors prop takes an array of colors which specifies the colors the user will choose from. Every color is specified as an object with a name and color property. We have created a variable themeColors (above the return statement) and specified three colors from our theme.

const themeColors = [
    { name: "blue", color: "#0d3b66" },
    { name: "orange", color: "#ee964b" },
    { name: "dark-orange", color: "#f95738" }
  ]
Array of colors

  • value is the attribute that stores the color choice which, in our case is the buttonColor attribute.

  • onChange function changes the buttonColor attribute. It passes ...