Add CSS Variable without a value, to be able to define them outiside of the manager

[tresorama]

TLDR:
add ability to define a CSS Variable inside the Builder’s Variable Manager without providing a value (only name), so that you can define the value’s part inside a CSS Stylesheets and having the varile name suggested in the dropdown that appear on every Bricks controls.

Context

The CSS Variable manager it’s a great addition, and the main benefits is that now we have a dropdown to pick variable accessibile from every control in Bricks. Awesome.

The workflow for now (1.9.8) is to open the Variable Manager from Builder, then define variables there, so that the dropdown is populated with them.
To define a Variable we provide a “name” and “value”. This is expected behavior of course.

But CSS Varibels defined somewhere else are not “shown” in the control’s dropdown…

CSS Variables defined outside of this Variable Manager are not used to populate the dropdown. Typical places are:

• in “Bricks > Settings > Custom Code > Custom CSS”
• in Child Theme’s CSS file

For now (1.9.8) if you try to add a new variable without a value, the variable previously defined is overwritten with “empty” value, resulting in “broken” variable.

Requested Feature

The final goal is to be able to define CSS Variable in every “outside” places:

• in “Bricks > Settings > Custom Code > Custom CSS”
• in Child Theme’s CSS file
• in Code Snippets plugin

and then add only “names” inside the Builder’s Variable Manager, so them are shown in the dropdown.

[tresorama]

Is this request clear ?

Because i think that everyone will need this sooner or later if they need to use a CSS Variable defined not in the the builder.

i don’t want to stress but only te ensure the dev team has knowledge of this request.
@timmse

[timmse]

Hi,
You can already bulk-add variables without values by using the import dialog (top right corner » import).

Best regards,
timmse

[tresorama]

I tried and it works!
But only on the frontend!

In the builder the CSS variable “value” is undefined. Because of that undefined overwrite the previously defined value.

Video

https://jam.dev/c/9a50a5df-2656-4bbf-b6be-073b0983604e

Builder Dev Tools

[tresorama]

Made few discovery about this issue (bricks 1.9.9) .

Working Workflow

Step A

Imagine that this CSS is defined in Bricks > Custom Code > Custom CSS

:root {
  --color: red;
}

Step B

Then you open Bricks Builder > CSS Variable Manager, then click Import button in top right (as suggested by @timmse ) and import this:

--color;

You will get what you want:

• bricks variable picker suggest the variable
• bricks do not overwrite your CSS defined outside of Variable Manager

So this is the way to use it for now.

Broken Workflows

Instead, if you do one these workflow - defined below - you will get this broken CSS injected in frontend.

--color: ; 

This empty variable will overwrite your variable.

Broken workflows

• Go to Bricks Builder > CSS Variable Manager > Import and import
  --color:;
  (NOTE the colon)
• Go to Bricks Builder > CSS Variable Manager > Import and import
  --color: ;
  (NOTE the colon and the space)
• Go to Bricks Builder > CSS Variable Manager then erase the value from an already defined variable from the list.

Broken workflows workaround

Delete the variable, then import again, to have a working scenario.

Edit

Forget it, unfortunately the promised “working solution” do not works always. Sometimes Bricks injects the broken CSS variable anyway, sometimes not.

[tresorama]

Request for dev team @timmse @Matej

If…
…we import CSS variable without value , like this

… or like that

… or we erase the value of variables ( by clearing the <input> on the right )

The frontend AND the builder mustn’t inject any CSS for these variables.
But the builder must still suggests variable in variable picker

The problem now is that the builder sometimes inject this CSS in the builder and/or frontend

// sometimes this css
--color: ;
--border-radius: ;

// sometimes that css
--color: undefined;
--border-radius: undefined;

I haven’t tested 1.10beta, only 1.9.9.

Thanks, Jacopo