User-friendly global style names and sanitisation

Feature Requests
#1

I’m not 100% on this one, but wanted to open the discussion and see if others have an opinion.

Would it be better to show a user-friendly name in the dropdown when selecting a global style? E.g. “Extra Large Gap” instead of “extra-large-gap” or “xl-gap” if you’re trying to keep classes short.

My thinking:

  • You only see the full class name when creating the global style.
  • An editor user doesn’t need to know it’s a class if they’re just activating it.
  • Aside from the “Additional CSS class(es)” field, all other block options are capitalised labels/options.

    [BUG] Allowing spaces in the name currently generates CSS that doesn’t work. For example “XL Gap” can be used as the name and generates the CSS “.gb-grid-wrapper-XL Gap{}”. This would only work as “.gb-grid-wrapper-XL.Gap{}” or sanitised to “.gb-grid-wrapper-xl-gap{}”

    Related to: [Feature Enhancement] Retain global stlye association after renaming
3 Likes
#2

Agreed - having a name that can be re-named while keeping the class name static is a good idea. I’ll be implementing this in the next version.

Thanks for the heads up about the spacing as well - will get that fixed.

4 Likes
#3

Was the user-friendly naming ever implemented?

I’m trying to figure out how to make my global styles more usable for my content editors, but I can’t figure out where to do so. I’m on the latest RC versions.

Thanks!

#4

They don’t have labels, yet. It’s something we’re still playing with in order to get it right. Look for it in 1.2.0 :slight_smile:

#5

Thanks for the reply, Tom. I know you’re pretty focused on 1.1 right now. I just wanted to make sure I wasn’t missing a setting somewhere. :slight_smile: