Use a class added/created in Bricks inside Gutenberg

How To
1

Hey guys,

Hope you are all having a great weekend.

I am just wondering if I created a class in Bricks, could I use it inside Gutenberg…here is a use case"

I create a button in Bricks add a class ‘.button’ for example and style it. I then create a post in Gutenberg and add a button and give that button the class .button that i created in Bricks, would that apply to the styling?

Many thanks

Mick

2

Hi Michael,

Unfortunately not, because the class and its styling are related and attached to the element you’ve applied it to.

For example, you add a button in bricks, add a class of .gtb-btn to it and change the background-color and color, the generated styles will look like this:

.gtb-btn.bricks-element-button .bricks-button {
    background-color: var(--bricks-color-d17103);
    color: var(--bricks-color-35c339);
}

The classes of Gutenberg buttons are different, namely: .wp-block-button and .wp-block-button__link.

What you can do to override them is to create your button styling in bricks, inspect the button on the frontend, copy the code and paste it to bricks > settings > custom code > custom CSS.

.gtb-btn .wp-block-button__link {
    background-color: var(--bricks-color-d17103);
    color: var(--bricks-color-35c339);
}

Then, add the .gtb-btn class to the Gutenberg Button, which becomes the same styling as your bricks button. It’s best to take a look at how the default Gutenberg Buttons are styled (border-radius, padding, and so on) to get to know what needs to be overridden and to get a consistent look. The downside is: the styles are not in sync.

To make them in sync, you can add the same styling at once in bricks > settings > custom code > custom css:

.gtb-btn .wp-block-button__link,
.gtb-btn.bricks-element-button .bricks-button {
    background-color: var(--bricks-color-d17103);
    color: var(--bricks-color-35c339);
}

If you need to change the styling, edit the custom CSS, and it will apply to every button with the class .gtb-btn.

Best regards,
timmse

1 Like
3

Thanks Stefan, i did think as much.

I really, really appreciate the time you took to set a really detailed brief! Awesome thank you!

Kindest regards

Mick

4

No problem, it’s Sunday, the outside temperature is 2 degrees ( :cold_face:), it’s raining… what else should I do (except test new features for Bricks 1.3.7 :sunglasses: and plan new features for Bricks 1.3.8 :sunglasses: :sunglasses:)… But now it’s closing time! :tv:

5

Haha, I havent felt a temp below 2x for the last 4 years…jealous!! haha

Enjoy the rest of your Sunday mate and get watching some crimbo movies haha!

1 Like
6

Best Christmas Movie of all time :joy:

1 Like