I wish global classes had custom css editor and quick code functionality as block has itself

The new quick code functionality (introduced in latest release) is amazing and exactly what I was looking for. It’s even better than I expected. Sometimes, finding the correct settings in the block design panel can take longer than just writing the CSS line of code myself. Now, I have the choice to use the quick code block or the design panel, depending on my preference and skill level. Some new users may prefer to style the block using the design panel, while more experienced users may prefer to write the code directly in the quick code block and still see the changes visually in the design panel. Cwicly has given us so much freedom!

However, I mostly work with global classes, about 90% of the time. I’ve tested the quick code functionality and noticed that it doesn’t work for global classes, only for the block itself. This means that I’m missing out on this functionality for 90% of my work. It would be great if global classes had the same functionality in the future. It could work the same way as we switch from a block class to a global class to edit it. When a global class is selected, the quick block could show the styles applied to it.

Another thing that I’m really missing is the ability to add custom CSS for global classes, similar custom css editor as block has under Advanced tab . As I mentioned, I mostly work with global classes and there are times when I need to add custom CSS because it’s not available under design panel. For example, the “aspect-ratio” property or any other property that’s missing. So I have no choice but to add this custom CSS to the global stylesheet. It works fine when added to the global stylesheet, but as code is splited between global class design panel and global stylesheet then there might be situations where I forget that I added something to the global stylesheet and wonder where a particular style is coming from for a particular global class. I might check all the settings and nothing seems to be causing the style, and only after some frustration I do realize that I added it to the global stylesheet. This has happened to me more than once before.

So to improve workflow, it would be great if global classes also had a custom CSS editor. This way, every style would be attached to a particular global class, either under the design tab or in the custom CSS editor and no wondering around where styling is coming from.

To summarize all this, I wish that global classes had the same functionality as block itself regarding quick code functionality and the custom CSS editor.
So what you think guys?

6 Likes

Hi @krievinshj,

Great post :slight_smile:
I think it summarises what’s already planned in the coming months.

We released the Quick Code for blocks only to make sure everything runs smoothly, and to also get your feedback before we deploy it to:

  • Global Classes (primary tab and global class editor)
  • Relative Styles (primary tab and Relative Styles list + editor)

Also, the Quick Code functionality doesn’t yet support block specifics (from the primary tab). These are also planned, but do necessitate an extra level of logic which has to be accommodated so that code and visual settings can continue to communicate together.

As for Custom CSS for Global Classes, it’s definitely something that has to be included quite soon!

Thanks for taking the time to write your thoughts and feedback, really appreciate it!

7 Likes

Really looking forward to using this feature as well once it’s available for global classes :slight_smile:

1 Like

I have also experienced this many times especially when your design becomes large.

Good suggestion and a nice feature to have.

1 Like

@Louis , great to hear that all these features for global classes coming soon.
Can’t wait!
Once again amazing work by Cwicly team!

1 Like

Thanks @krievinshj and @Louis!
Can’t wait for global custom CSS, this is so frustrating right now :wink:

@Louis,

I believe this is already available as global classes have a custom SCSS tab and can be edited in quick code.

So if there are no other considerations, this can be marked as done.

1 Like

Thanks, @StrangeTech.

Moving to done.