Global style Utility Classes

[eric7186]

Instance of a block provides Advanced: add class that can be used with Simple CSS to add a utility class but that only affects the front-end not the site editor.

Utility classes have become very important to efficiently create professional websites. But they are created with CSS which only affects the front-end. If we could add custom Utility Classes as Global Styles (theme.json) and associate them to instances of a block, then they would show up in the site editor as well, preserving the same styling on front/back-end.

What is your proposed solution?

In the block settings, under Advanced, just below Add Custom Class, add another field to Add Custom Style. The code would have to be added to the theme.json file with the same name, to associate the style with any block instance that has the matching Style name added.

[eric7186]

Is it possible to define a custom preset to be triggered by a matching block Additional Class? As an experiment, I have added a class of "warn" to a paragraph block. In the theme.json I have defined a custom preset like this:{
    "version": 2,
    "settings": {
        "warn": {
            "color":"purple!important"
        }
But when I inspect the page in Chrome there is no style applied to the paragraph. Of course, I can always put the CSS into style.css but that only shows up on the front-end; not the site editor.

[eric7186]

I found some work already being done in this area: #7362
mtias commented on Jun 21, 2018

[eric7186]

1. I got it working in theme.json, insert:
   },
   "color": {
   "palette": [
   {
   "slug": "primary",
   "color": "#9B51ff",
   "name": "Primary"
   },
   {
   "slug": "secondary",
   "color": "#FFFF11",
   "name": "Secondary"
   }
   ],
2. The new palette shows up in the Site Editor as THEME. Now on the block just add the Additional CSS class: has-primary-color has-text-color.
   Now, I need to lock-down user permissions so that clients can't choose another default which could ruin the design

.