Add 'Hide in builder' option for conditions

Feature Requests / Improvements
1

To compliment the new element conditions feature, it would be useful to be able to hide elements - for the builder only, directly from the conditions options.

Use case: users are going to be making multiple versions of elements, to display for different conditions and will need a way to make sure they’re not all visible at once while working on the design.

14 Likes
2

like this idea - similar to the modal display in builder toggle.

3

Options missing from the comparison operand probably will be “Does not contain” and etc. I am looking at hiding some sections if the ACF field doesn’t contain any data at all. I don’t think there is anyway to do this with the limited options available.

4

If using ACF, as a workaround you can check if the function get_field() outputs nothing when echoed.

If the field has no value, then the element won’t show.

Screen Shot 2022-09-28 at 10.40.01 pm
Screen Shot 2022-09-28 at 10.40.01 pm723Ă—488 11.3 KB

5 Likes
5

Thanks! It works. :smiley: Wonder if there will be an “official” way to solve this in future.

2 Likes
6

Hello. It would just be useful to quickly hide elements in the builder without affecting the frontend. I know there is a workaround, register the css only for the constructor and hide through the class only in the constructor. But I would like to have a small eye button that would switch the display only in the constructor.

7

I added a CSS solution in the meantime, lightly borrowed from ACSS “hidden-accessible”. I registered the CSS in WPCodeBox “Header After Builders”

.bricks-area .hide-in-builder {
    // General
    white-space: nowrap;
    border: 0;
    overflow: hidden;
    padding: 0;

    // Builder related
    position: relative !important;
    inline-size: 2ch !important;
    block-size: 2ch !important;
    margin: 0;
    line-height: 1;
    visibility: hidden;

    // Visible element
    &::before {
        content: "〶";
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: absolute;
        background: #111;
        color: #f5f5f5;
        font-size: max(60%, 13px);
        padding: 0.5em;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 20px;
        block-size: 20px;
        visibility: visible;
        border-radius: 50%;
    }
}

The only issue is that this class now shows on the frontend in the HTML.

1 Like
8

We need this feature so bad. In my last project I need 3-4 CTA buttons placed in header conditionally for different pages. I have them shown all in builder and I can’t hide them. In Oxygen we have an option to Show/Hide element in builder based on conditions. It’s so helpful and powerful feature.
hide1

Or can we at least have an “eye” button in Structure pane to hide elements only in builder?
hide2

Thanks

3 Likes
9

This is especially useful if you’re using one template for several languages and displaying elements conditionally, depending on the current language. Oxygen has this hide-in-builder option. Please consider implementing it, @thomas

10

There is already an idea posted on the board: Idea board – Bricks :wink:

11

Wasn’t aware, thanks, upvoted!