Conditional logic for Component's Properties

This is not about using properties in conditional logic (this already exists).

It would be good to use properties as conditional visibility to other properties:

we can kind of do it already

hiding or showing a part of the component depending on the property setting

I dont know if we will build components like this alot but even if we use it rarely for multi-purpose components it will be very handy

image

I made short demostration how it works

The OP’s suggestion was pretty clear but you misunderstood it. The OP suggest using component properties to show or hide other component properties, not a component element.

On top of that, we can use component properties in element Conditions to conditionally hide an element, which is a much straightforward and easier way than what you’d demonstrated in your video.

Hi @Illarion,

thanks for this suggestion. I’m writing to you here because you highlighted this in the other task.

Yep, this is currently not possible. I would like to make sure that I understand it, before presenting this internally.

Let say that we have “Title” and “Subtitle” elements, connected to their own properties.
The one use case would be if we would like to show the “Subtitle” property only if the “Title” property is filled in, right? So, that would mean that we would not output the subtitle, if there is no title present.

As far as I understand, this is more of UX thing, because such things can be solved with conditions on the front end - but yeah, the properties shows regardless.

Thanks,
Matej

Hi, @Matej

Yes, this topic was about UX/UI improvements

Hi @Illarion,

thank you. I think it’s best if you add it to the idea board, then other users can vote on it once it’s reviewed.

Thank you,
Matej

Hi @Matej,

Here’s another example:

Hero Section Component with these properties:

  • …other properties (H1 Title, Hero Image, etc.)
  • Show Lede (toggle)
  • Lede Text (text field)
  • Lede Style (global classes)

Currently when editing the component instance, Lede Text and Lede Style always show in the panel even if Show Lede is off. It would be great if these fields only appeared when Show Lede is true - this way there’s less clutter and users only see relevant fields.

This could work for individual properties or even entire property groups.

When there’s no default text you can avoid the toggle and just show text on the frontend, when there’s text in the property.

Also related: Property Toggles in conditions?

Bricks are lucky to have you :slight_smile:

by using the attributes and classes with properties it is possible to create dynamic components easily

for example check this for class selection just made a video for it

we still need more properties 100% agree
and we still need more content/style tab values should be exposed to properties as well

but even as it is components are very powerful no need to wait start using

Actually some things are even simpler than what you are showing, but some are just impossible and require to overload the component with extra conditions.

Binding properties to display conditions, as I was asking in the other similar thread which i linked above, is not an option.

That’s a great use case, yep. :+1: Make sure to add it to the idea board entry, once it’s approved.

Matej

Ran into exactly this need — thanks for opening the request.

My use case: I have a FAQ component (used as a Gutenberg block, not edited on the Bricks canvas) with a fixed number of question/answer property pairs (Q 1/A 1, Q2/A 2, etc.). I’m using element-level Conditions to only render an Accordion item when its “Question” property is not empty, which works fine for the frontend output.

What I’d really want on top of that is for the property input fields themselves to stay hidden in the block editor sidebar until the previous one is filled — e.g. “Question 2” only appears once “Question 1” has a value. Right now editors just see all question fields at once regardless of how many they actually need, which is a bit confusing for content editors who aren’t building the component themselves.

Is this already on the idea board / roadmap somewhere? Would love to add a vote/use case if so.

Didnt find the idea on the idea board and added it

Yup!

Conditional Logic for Component Properties based on other propertise.

Here’s a button component scenario.

Button component with three variants.

Buttons
Text Link
Underline
W/WO Icon for all of them.

Each of these variants has specific properties that would be tied to them.

For example:

Underline has three properties.
Text Color
Underline Color
Icon Color.

Button Has three properties:
Background Color
Text Color
Icon Color

Text Link has two properties
Text Color
Icon Color

All three variants have a switch to on/off Icon.

I hope this makes sense.