Adding global class to global styles

[Araminta]

From old feedback: Adding global class to global styles | Cwicly

I’m not sure why all the settings are not available in the “Global Styles”, but it’s not tragic either. But then it would be very useful to have the freedom to store a globally defined class there.
Actual example: I want to apply a gradient with “background-clip: text” to all my h2 classes without always having to explicitly assign a class. At the same time I would like to have a general tool class for “background-clip: text” as well.

[StrangeTech]

@Louis, per the latest beta releases - as far as I can see this can also be considered done.

[Louis]

Hello @StrangeTech,

Thanks for bringing this up.

Yes, I think this can be marked as done.

Adding to this, as it is something that we initially wanted to add, what about providing a dropdown in some place on the block inspector to quickly select and apply classes that have been added through additional classes in global styles? Is this something that you would find useful?

[Marius]

@Louis

quickly select and apply classes that have been added through additional classes in global styles

Are you talking about individual classes or entire Global Elements?

If you mean the latter, the user-defined custom name could optionally also be included.
I believe that this feature was requested by many users, also because they thought that Global Elements worked that exact way in the previous version (there were many discussions and frustration about it).

One-click styling by selecting an item from a dropdown without remembering and writing classes would be huge.

But I might miss the point here.
If so, is this something you consider as useful / worth implementing?
Could be a missed opportunity, as it cries out for it in a builder, especially with the Global Elements overhaul (as the next logical step).

It’s worth reading this thread (from the point where I have linked to):

Applying global element styles

IMO, a new “Button Style” dropdown on the button blocks could be a good fit to differentiate classes from the styles set in the global theming, like so: [image]

[StrangeTech]

@Louis

Yes, I think this can be marked as done.

@Louis

Adding to this, as it is something that we initially wanted to add, what about providing a dropdown in some place on the block inspector to quickly select and apply classes that have been added through additional classes in global styles? Is this something that you would find useful?

It took me a few seconds to get what you meant @Louis, and as soon as it clicked I realised what a great idea this is.

This gets a huge thumbs up from me - it actually elegantly solves the “Provide a curated set of classes that can be applied to a specific block” feature request that I made a long time ago!

@StrangeTech

We would like to present a curated selection of classes to our clients using a whitelist in one form or another.

The current feature to specify styles that only apply to certain tags that have specific classes applied to them is great.

We use this to for example style secondary or alternate buttons by adding a virtual class to buttons (e.g. secondary) and adding overrides or additional properties to that. We then specify this as a class for the Global style in addition to the cc-btn class. This works really well.

With your proposal, it will then be extremely easy for clients and editors to select and apply these additional classes.

Another example where this will work amazingly well is styling alternate heading or paragraph styles.

Block Typography preset in a global class or relative style does not get applied

There are very simple considerations from our side. We need to be able to translate the font styles from the designs to the website in a clean easily repeatable way. Our clients (including non-technical ones) need to be able to choose the font in a way that is easy and consistent We therefore want to re-use the same methodology for both the site editing and the page/post editing (i.e. no duplication of code / effort) Font presets provide the perfect container for the font styles in a way tha…

Effectively this becomes a more unified and consistent version of the typography presets, because it works the same for developers and editors.

The only possible enhancement I can see is to add the ability within components to be able to dynamically toggle these additional classes for specific blocks from different component styles / style variations.

[StrangeTech]

@Marius

One-click styling by selecting an item from a dropdown without remembering and writing classes would be huge.

@avunu

IMO, a new “Button Style” dropdown on the button blocks could be a good fit to differentiate classes from the styles set in the global theming, like so:

Yes, I see it as having the power of this, but being applied to all tags/blocks.

In my ideal vision of this:

1. When you create a block specific global style with an additional class, the dropdown for any instance of that block will show the additional class as one of the options.
2. When you create a tag specific global style with an additional class, the dropdown for any instance of a block that has that tag selected will show the additional class as one of the options.

@Marius

the user-defined custom name could optionally also be included

I was thinking about this also. When it comes to class selection for editors, user friendly names would obviously be preferable.

A backwards compatible and flexible way to do this for global classes / additional classes is to take the class name and make each word start with a capital and replace dashes with spaces anywhere class selection occurs.

This will remove the need for an additional custom name and would encourage consistent naming for classes.

[Marius]

@StrangeTech

In my ideal vision of this:

1. When you create a block specific global style with an additional class, the dropdown for any instance of that block will show the additional class as one of the options.
2. When you create a tag specific global style with an additional class, the dropdown for any instance of a block that has that tag selected will show the additional class as one of the options.

Exactly.
I didn’t add this, as it’s a requirement to make it work and easily comprehensible.

The user must not have the option of selecting inapplicable global elements.
So depending on the block and/or the HTML tag, the selection must be filtered in real time.

Edit:
After re-reading, this may not be what you actually meant

[StrangeTech]

@Marius

So depending on the block and/or the HTML tag, the selection must be filtered in real time.

Edit:
After re-reading, this may not be what you actually meant

This is exactly what I meant

[StrangeTech]

@Louis

Adding to this, as it is something that we initially wanted to add, what about providing a dropdown in some place on the block inspector to quickly select and apply classes that have been added through additional classes in global styles? Is this something that you would find useful?

I keep thinking about how great this will be @Louis, I think it will be one of those features that after it has been included, we all wonder how we ever lived without it.

Just wondering whether we can get a rough idea of your timeline for including this, as there are some sites that it will be a tremendous enhancement for clients.