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
2 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.

3 Likes