Components: style options work only when default class is enabled

Bugs
1

I’m not sure if this is a bug or if it’s supposed to work this way, but I hope it’s a bug that can be fixed in the future.

Experimenting more with components, I’ve noticed that component style options work only when the default block class is active - either activated by default if there’s some styling applied to the block, or I have to activate it manually by enabling the green dot next to the block class in order to make the style options to work on the frontend.

As shown in the video, my component has two style options which change the background color. For each background color variation appropriate global classes are used. However, it doesn’t work on the frontend. It starts to work when I enable the block’s default class by activating the green dot next to the block class.

Upon inspecting the source code, I see that the default auto generated class is added, then another auto generated class, and my global class for the style option.

<section class="section-c692e55 cs-h6z89 bg-red cc-sct" data-cc-comp="component-ce833a7">

My issue is that I almost exclusively use only global and utility classes and don’t want default block classes to appear in the code. But it seems that currently, with components using style options, this isn’t an option. Maybe I am missing something but I don’t see the real purpose of adding autogenerated classes in the frontend if none of the styling is attached to them.

@Louis, is this supposed to work this way, and are those autogenerated classes needed on the frontend even if I use only global/utility classes?

2

Hi!

As a new user I can only add one embedded media item.

For this reason I have only been able to add one graphic.

Here is the text without images:

I have created two styles for a button component.

Only utility classes are added to these styles.

If I now select the corresponding style in the component, the classes are not output in the code.

Only when I add a setting from the design options of Cwicly, the classes are also output in the code.

29-11-2023_18-47-10
29-11-2023_18-47-101903×2292 205 KB

I hope that is understandable.

3

Hi @krievinshj,

Apologies for the lack of reactivity on this!

Indeed, currently, component styles will only apply with an active default class.

We hear you, and understand its limitation.

Rest assured, we plan to improve this to avoid the need to force default classes when unnecessary.

For the time being @Reasion, when exclusively using global and utility classes, kindly force the block class to apply a component style:

force-class
force-class564×508 20.2 KB

Thank you for your understanding.

4

Thank you for your patience on this, @krievinshj and @Reasion!

With 1.3.4.6, Component styles will apply without the need to activate the local class:

Kindly let me know if this is the case on your ends.

Thank you in advance.

5

Hi @Araminta!

Thanks for letting me know. After the initial test, I was super excited that it works, but upon further testing, I noticed that it works great with global classes but doesn’t work with external classes, well at least on my end.

Sorry for being so nitpicky but my aim is to have HTML as clean and readable as possible. So, a question also about the auto-generated data attribute which is added to the component like data-cc-comp="component-cadfac8".

I know it is used to hold a variable if you use properties to style your component, but again, in my case, when I use only style presets and global/external classes, then I get the feeling that this auto-generated attribute is not used for any purpose in the frontend. Correct me if I am wrong.

I wish it was added automatically when needed (for example, when properties are used) but removed when not in use (as in my case). But as mentioned, I might be wrong and that attribute is crucial for the frontend in any case for component to work. Any comment on this, @Araminta and @Louis?

6

Hello @krievinshj,

Thanks for noticing the issue with external classes, this will be fixed in the next update.

As for the data-cc-comp attribute, we tried our best to keep this as clean as possible by only adding it to top-level elements within your component.
I appreciate this might not be welcome for components that don’t rely on (component) property styling. Definitely something we should explore for this use-case. Thanks for bringing it up.

Cheers,

1 Like
7

Hi @Louis,

Thanks for the latest update, 1.3.4.7.

According to my tests, I can confirm that now both global classes and external classes are working with component Style options. So, this can be marked as completed.

And I would appreciate it if you could explore more on options to remove data-cc-comp when not in use by component properties in future updates.