WIP: Global Classes in Components – Warning & Ordering Issue

Bugs
1

Browser: Chrome 136
OS: Windows
Video: ClickUp

Hi Bricks Team,

Thank you for the fantastic Bricks 2.0 beta—new component variations are an absolute game-changer. While testing today’s beta, I encountered two separate issues in the Builder. You can reproduce both with the same simple component:

Reproduction Steps

  1. Create a component, e.g.: div with class .card .

  2. Add a Global Classes property with two options:

  • card--primary
  • card--secondary
  1. Connect that Global Classes property to the component’s class attribute.
  2. Select the component instance and choose the “Primary” variant.
  3. Save and Refresh the Builder.

Bug 1. PHP Warning with External Files

With CSS Loading Method set to External Files, saving and refreshing produces this warning:

Warning: foreach() argument must be of type array|object, string given
  in …/bricks/includes/assets.php on line 3271

Switching to Inline Styles removes the warning.

Bug 2. Component Classes Order Resets on Save/Refresh

  • When you select a variant on the component instance, the Builder initially applies styles in the correct order (base .card first, then .card--primary).
  • After you save and refresh the builder, the variant <style> block is injected before the base <style>, so the .card--primary rules no longer override the base styles:
<style> /* .card--primary styles */ </style>
<style> /* .card styles */ </style>
  • On the front end, class order and styling remain correct.

Expected behavior:
The Builder should preserve the base-then-variant ordering exactly as on the front end.

I’ve recorded a screen capture showing both issues in action. Thanks again for all your hard work—Bricks 2.0 is looking fantastic!

DUPLICATE: CSS Class Emission Order Breaks eq Specificity Overrides
DUPLICATE: Component Class Select Style Override bug
DUPLICATE: Global Classes component property not reflecting on builder canvas (frontend works correctly)
DUPLICATE: Bricks Builder display error due to unlinked classes (compound selector)
2

Hello @aidardev,

thank you for your report. First, it’s better if you create the separate reports, if there are two issues. That way, we can link the correct internal tasks to the correct reports - and we can link other reports to this topic as well. :slight_smile:

But, checking the reports:

#1: I was unable to replicate this issue. Can you send me your component, just to check if I can replicate it with yours?

#2: Yep, I was able to replicate this one, and I’ve added it to the bug tracker.

Thank you,
Matej

1 Like
3

Hello Matej,

Thank you for your response.

Regarding splitting the reports: what would you recommend? Should I delete this topic and open two new ones, or open them alongside this one?

Here’s the component’s JSON file. Please let me know if this is sufficient or if you need anything else.

5

Hi @aidardev,

Now I’m able to also replicate the #1 issue. I’ve created a task for this :), Thank you!

As for splitting the reports, you can keep it like they are now, and keep in mind for next time :wink:

Thank you,
Matej

1 Like
6

Hi Aidar,

We fixed this issue in Bricks 2.0 RC, which is now available in your account.
Changelog: Bricks 2.0-rc Changelog – Bricks

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

1 Like
DUPLICATE: Wrong CSS class order
7

Hi @timmse,

Thanks for the update! I tested Bricks 2.0 RC and can confirm Bug #1 (PHP Warning) is resolved.

However, Bug #2 (Component Classes Order) still persists.

8

This shows you why you should create separate reports for different problems :slight_smile: The second task will probably still be in progress :v:

1 Like