Part Three: Enhancing the Block with Conditions

In part two we added an accent color to our block. To accomplish this, we added an inline style to the Image component to change its border color. But what happens if after adding a bunch of resource card blocks to our site, we decide we want to change the accent colors?

Since the colors are added inline, we’d have to go back to every page that contains one of our blocks and update it to use the new accent color. That could be a lot of work!

Instead of adding the colors using inline styles, another approach is to add a CSS class to our block to control the color. The benefit of using a class is that we only have to update the color in one place and it will apply automatically to all blocks that have the class assigned.  We can use conditions to apply the appropriate CSS class based on the color selected.

Note: conditions are only available in the pro version of Wicked Block Builder.

Let’s start by undoing the change we made in part two where we added a border-color style to our <Image> component.

1. Edit the block and go to the Editor View
2. Click the <Image> component to select it
3. Expand the Styles panel and click the Settings icon (the icon that looks like a gear) next to the border-color property
4. Click Delete Style

Okay, let’s add our classes. We’re going to use three classes to control the accent color of our block:

• accent-1
• accent-2
• accent-3

We’re keeping the names generic so that if we change the accent color later, our class name still makes sense (instead of a class name like blue-accent that later ends up being changed to a green color for example).

Let’s update our block’s styles to include the new CSS classes.

1. Click on the Styles tab
2. Copy the following CSS and paste it at the end of your block’s existing styles (don’t replace the styles that are already there)

See the Pen
Resource Card CSS – Part Three by Vinny (@wickedplugins)
on CodePen.

Okay, let’s see how we can use conditions to add the class we want based on the selected color. We’ll be adding the class to our block’s root element.

1. Click Editor View
2. Click the very first <div> element in your block
3. Expand the Classes panel
4. Click Add Class
5. In the Class Name field, enter “accent-1”
6. Under Conditions: click Add Condition
7. In the first dropdown, choose attributes.accentColor
8. Leave the middle dropdown set to equals
9. In the text field, enter #0000ff

Let’s review what we’ve done. We’ve added a new class to our block’s root element named “accent-1”; however, we also added a condition. The condition we choose was attribute.accentColor equals #0000ff. This means that the accent-1 class will only be added to the block if the selected accent color is #0000ff (the blue color).

Let’s repeat the steps for the other accent colors.

1. Click Add Class
2. In the Class Name field, enter “accent-2”
3. Add a condition, choose attributes.accentColor, and enter #ff00ff
4. Click Add Class
5. Enter “accent-3” in the Class Name field
6. Add a condition, choose attributes.accentColor, and enter #cc9933

That’s it! Now your block will assign a class instead of an inline style based on the selected accent color. If you ever want to change the accent colors, all you have to do is update the color in your block’s styles and your condition.

Congratulations on building your first block.  We hope this guide was helpful.  For more in-depth details, check out the rest of the documentation.