Part Two: Adding a Sidebar and Color Accent

In this part we’re going to add a sidebar to our block along with a way to select an accent color. When we’re finished, we’ll have the option to make our block look like one of these variations:

To get started, let’s edit the block we created in part one. Go to Wicked Block Builder > Blocks, and click on your block.

We want to add the ability to select an accent color. Let’s start by adding a new attribute that will store the selected color.

1. Click on the Attributes tab
2. Under Attribute Types, click String
3. Select the attribute and change the name to “accentColor”

Perfect. Now we need a way to select a color. To do that, we’re going to add a color palette to our block’s sidebar that will let people select a color.

1. Click on the Sidebar tab
2. Click Panel under Components
3. Click on the <Panel> component to select it
4. In the Title field type “Settings”
5. Click on the Add Items tab
6. Click ColorPalette under Components
7. Click on the <ColorPalette> component to select it
8. Change the Attribute to accentColor
9. In the Label field type “Accent Color”
10. Expand the Colors panel and click Add Color
11. Enter “Blue” for the name and #0000ff in the Color field
12. Click Add Color again and this time enter “Pink” for the name and #ff00ff for the color
13. Finally, click Add Color again and enter “Mustard” for the name and #cc9933 for the color

Okay, so now we should have a way to select our accent color from our block’s sidebar. Now we need to make the color appear in our block when it’s selected. The CSS we added in part one actually adds a white bottom border to the image. So we’ll leverage that and simply add a border-color style to our Image component to change the border color to the accent color that was selected.

1. Click on the Editor View tab
2. Click on the <Image> component to select it
3. Expand the Styles panel and click Add Style
4. The Styles panel lets us add inline styles to elements and components (that support inline styles). In the Property field, enter the CSS property “border-color”
5. In the Value field click the Insert Token button and choose attributes.accentColor. This will insert a placeholder token that looks like {{ attributes.accentColor }}. When an accent color is selected, this token will be replaced by the color

Head back over to the page you created in part one, refresh the page, and select your block. You should now see a color palette in the sidebar like this:

If everything is working correctly, clicking a color should change the border color of the image. If not, review the steps above to see if you missed something.

In part three, we’ll look at conditions to see how we can make our block more flexible.