Add custom css class to page blocks

client/web/compose/src/components/PageBlocks/Configurator.vue

@@ -113,6 +113,37 @@
           </b-form-group>
         </b-col>
 
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.customCSSClass.label')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              id="customCSSClass"
+              v-model="block.meta.customCSSClass"
+              :state="customCSSClassState"
+              :placeholder="$t('general.customCSSClass.placeholder')"
+            />
+
+            <b-form-invalid-feedback
+              v-if="customCSSClassState === false"
+              :state="customCSSClassState"
+            >
+              {{ $t('general.customCSSClass.invalid-state') }}
+            </b-form-invalid-feedback>
+
+            <b-form-text
+              v-else
+              class="text-muted"
+            >
+              {{ $t('general.customCSSClass.description') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+
         <b-col
           cols="12"
           lg="6"
@@ -126,6 +157,7 @@
               v-model="block.style.variants.headerText"
               :options="textVariants"
               :reduce="o => o.value"
+              :clearable="false"
               :placeholder="$t('general.label.none')"
               label="text"
               class="mb-1"
@@ -279,6 +311,10 @@ export default {
       return handle.handleState(this.block.meta.customID)
     },
 
+    customCSSClassState () {
+      return handle.classState(this.block.meta.customCSSClass)
+    },
+
     activeTab () {
       return this.isNew ? 0 : 1
     },

client/web/compose/src/components/PageBlocks/Wrap/Card.vue

@@ -4,7 +4,7 @@
       :id="blockID"
       no-body
       class="d-flex flex-column h-100 shadow-sm overflow-hidden position-static"
-      :class="[blockClass, cardClass]"
+      :class="[blockClass, cardClass, customCSSClass]"
     >
       <b-card-header
         v-if="showHeader"

client/web/compose/src/components/PageBlocks/Wrap/Plain.vue

@@ -3,7 +3,7 @@
     <div
       :id="blockID"
       class="d-flex flex-column card bg-transparent h-100 overflow-hidden position-static"
-      :class="[blockClass, cardClass]"
+      :class="[blockClass, cardClass, customCSSClass]"
     >
       <div
         v-if="showHeader"

client/web/compose/src/components/PageBlocks/Wrap/base.vue

@@ -50,6 +50,11 @@ export default {
       return meta.customID || blockID
     },
 
+    customCSSClass () {
+      const { meta } = this.block || {}
+      return meta.customCSSClass
+    },
+
     blockClass () {
       return [
         'block',

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -544,7 +544,9 @@ export default {
 
       if (!block) return true
 
-      return [handle.handleState(block.meta.customID)].includes(false)
+      const { customCSSClass, customID } = block.meta
+
+      return [handle.handleState(customID), handle.classState(customCSSClass)].includes(false)
     },
   },
 

lib/js/src/compose/types/page-block/base.ts

@@ -25,6 +25,7 @@ interface PageBlockMeta {
   hidden?: boolean;
   tempID?: string;
   customID?: string;
+  customCSSClass?: string;
 }
 
 export type PageBlockInput = PageBlock | Partial<PageBlock>
@@ -47,6 +48,7 @@ export class PageBlock {
     hidden: false,
     tempID: undefined,
     customID: undefined,
+    customCSSClass: undefined,
   }
 
   public style: PageBlockStyle = {

lib/vue/src/libs/handle.ts

@@ -8,3 +8,11 @@ export function handleState (h: string) {
     return isValid(h) ? null : false
   }
 }
+
+export const classNamePattern = /^([a-zA-Z_][a-zA-Z0-9_-]*\s?)+$/
+
+export function classState (str: string) {
+  if (str) {
+    return classNamePattern.test(str) ? null : false
+  }
+}

locale/en/corteza-webapp-compose/block.yaml

@@ -135,9 +135,14 @@ general:
   magnifyLabel: Block Magnification
   customID:
     label: Custom ID
-    placeholder: CustomID
-    description: Can be used to reference the block in Custom CSS
+    placeholder: customID
+    description: Used to reference the block in Custom CSS (#customID). Must be unique on the page.
     invalid-state: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dashes. Must end with letter or number
+  customCSSClass:
+    label: Custom CSS Class
+    placeholder: custom-class-1   custom-class-2
+    description: Used to reference the block in Custom CSS (.custom-class)
+    invalid-state: Can contain only letters, numbers, underscores and dashes. Must end with letter or number. Use spaces to separate multiple classes
   magnifyOptions:
     disabled: Disabled
     modal: Modal