User-friendly global style names and sanitisation

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

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.


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.


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:

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:

+1 for this. It is quite hard to name global styles editor-user-friendly right at the beginning of the project (and in non-English language).

Global Styles have labels as of GBP 1.2.0 :slight_smile:

Yes, it is there! I haven’t noticed it. It works perfect, thank you, Tom. :star_struck: