Conditions
Conditions are a powerful feature of Wicked Block Builder. They allow you to use conditional logic to control the output of CSS classes, inline styles, HTML attributes, elements, and components in your block.
Note: conditions are only available in the pro version of Wicked Block Builder.
Using Conditions
To add conditions that control the output of an element or component, click the element or component to select it and then click on Conditions. Click Add Condition to add your first condition.
Conditions consist of an input (first dropdown), an operator (second dropdown), and a comparison value (final text field or dropdown). You create a condition by selecting an input, a comparison operator, and entering a value that you want to compare to the input. If the condition passes, the item will be output. If not, the item will not be generated.
You can add as many conditions as needed. You can choose between all conditions needing to pass or only some. Choose “all” from the dropdown that appears above the conditions to require all conditions to pass. Choose “any” if you only need some conditions to pass.
Conditions work the same way for classes, styles, and HTML attributes. Simply add a class, style, or HTML attribute and then add conditions to control whether or not the item is output.
Condition Inputs
Condition inputs consist of your block’s attributes along with properties of your block such as it’s unique ID and if it is currently selected in the editor.
Only condition inputs that can be checked are displayed in the input dropdown. If you don’t see an input listed that you’re expecting, it’s probably because you’re editing an item that is outside the context of an input that can be checked. For example, the _currentIndex of an array attribute can only be checked inside of a repeater.
attribute._length
Array attributes have a _length property. Use this to check how many items are currently in the attribute.
attribute._currentIndex
Array attributes also have a _currentIndex property. Use this inside of a Repeater component to check if the item that is being output matches a certain index.
Note: _currentIndex starts at one (not zero like most programming languages).
block.isSelected
Use the block.isSelected input to check if your block is currently selected within the block editor.
Note: block.isSelected will always be false on the front-end.
Example: Conditionally Adding a CSS Class to Your Block
A common use for conditions is to dynamically add CSS classes to your block. Let’s say you’re creating a block that allows people to choose a background color for the block. You add an attribute named “color” and a ColorPalette component to let people choose a color. You add two colors to the palette: pink and red.
One way to apply the background color to your block would be to add an inline style that sets the background color. This is less maintainable though and harder to override so you decide to add a CSS class (either bg-pink or bg-red) depending on the selected color.
You could accomplish this by adding a class to your block called “bg-pink” and setting a condition to only add the class if the color attribute equals pink. For the red variation, add another class named “bg-red” and add a condition so it is only applied if the selected color equals red. Now your block will have either the “bg-pink” or “bg-red” class applied depending on what color was selected (or no class if no color has been selected).
Example: Displaying a Message Based on a Condition
Imagine you have a block that lets people add profiles of team members for an About Us page. Your block has an array attribute named “profiles”. When your block is added to a page it initially appears blank because no profiles have been added to it yet. To help people out, you decide to add a message saying “To get started, add a profile”. However, you don’t want this message to appear once some profiles have been added.
To accomplish this, you could add a div element to your block with the message in the div’s Content field. Add a condition to the div and choose “profiles._length” as the input. We only want the div to appear if there is less than one profile in the block so choose “is less than” in the operator dropdown and enter 1 in the value field. Now your message will only be displayed when your block has no profiles.
Example: Showing or Hiding Content Based on a Condition
Let’s look at another example. Imagine you are building a block that displays an accordion-style list of frequently asked questions. By default, all questions will be collapsed. You want the editor preview of your block to match how it will appear on the front-end as closely as possible (i.e. with the answers hidden by default). However, there needs to be a way for people to edit the answers in the block.
One way to accomplish this would be to add an inline style that hides the answer. You then add a condition that only applies the inline style when the block is not selected. Now when someone selects the block in the editor, all of the answers will be revealed so they can be edited. When the person clicks out of your block, the answers will be hidden so it appears the same as it does on the front-end.
