Add block custom ids for css

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

@@ -1,12 +1,12 @@
 <template>
   <b-tabs
+    :value="activeTab"
     data-test-id="page-block-configurator"
     card
     lazy
   >
     <b-tab
       data-test-id="general-tab"
-      active
       :title="$t('general.label.general')"
       title-item-class="order-first"
     >
@@ -82,6 +82,37 @@
           </b-form-group>
         </b-col>
 
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.customID.label')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              id="customID"
+              v-model="block.meta.customID"
+              :state="customIDState"
+              :placeholder="$t('general.customID.placeholder')"
+            />
+
+            <b-form-invalid-feedback
+              v-if="customIDState === false"
+              :state="customIDState"
+            >
+              {{ $t('general.customID.invalid-state') }}
+            </b-form-invalid-feedback>
+
+            <b-form-text
+              v-else
+              class="text-muted"
+            >
+              {{ $t('general.customID.description') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+
         <b-col
           cols="12"
           lg="6"
@@ -118,6 +149,22 @@
           </b-form-group>
         </b-col>
 
+        <b-col
+          v-if="block.options.magnifyOption !== undefined"
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.magnifyLabel')"
+            label-class="text-primary"
+          >
+            <b-form-select
+              v-model="block.options.magnifyOption"
+              :options="magnifyOptions"
+            />
+          </b-form-group>
+        </b-col>
+
         <b-col
           v-if="block.options.showRefresh !== undefined"
           cols="12"
@@ -149,23 +196,6 @@
             </b-form-checkbox>
           </b-form-group>
         </b-col>
-
-        <b-col
-          v-if="block.options.magnifyOption !== undefined"
-          cols="12"
-          lg="6"
-          :offset-lg="block.options.showRefresh !== undefined ? 6 : 0"
-        >
-          <b-form-group
-            :label="$t('general.magnifyLabel')"
-            label-class="text-primary"
-          >
-            <b-form-select
-              v-model="block.options.magnifyOption"
-              :options="magnifyOptions"
-            />
-          </b-form-group>
-        </b-col>
       </b-row>
     </b-tab>
 
@@ -189,6 +219,7 @@
 </template>
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
+import { handle } from '@cortezaproject/corteza-vue'
 import PageTranslator from 'corteza-webapp-compose/src/components/Admin/Page/PageTranslator'
 import PageBlock from './index'
 
@@ -243,6 +274,14 @@ export default {
         { value: 'fullscreen', text: this.$t('general.magnifyOptions.fullscreen') },
       ]
     },
+
+    customIDState () {
+      return handle.handleState(this.block.meta.customID)
+    },
+
+    activeTab () {
+      return this.isNew ? 0 : 1
+    },
   },
 
   methods: {

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

@@ -1,6 +1,7 @@
 <template>
   <div class="h-100">
     <b-card
+      :id="blockID"
       no-body
       class="d-flex flex-column h-100 shadow-sm overflow-hidden position-static"
       :class="[blockClass, cardClass]"

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

@@ -1,6 +1,7 @@
 <template>
   <div class="h-100">
     <div
+      :id="blockID"
       class="d-flex flex-column card bg-transparent h-100 overflow-hidden position-static"
       :class="[blockClass, cardClass]"
     >

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

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

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

@@ -186,6 +186,7 @@
     <b-modal
       :ok-title="$t('build.addBlock')"
       ok-variant="primary"
+      :ok-disabled="blockEditorOkDisabled"
       cancel-variant="link"
       :cancel-title="$t('block.general.label.cancel')"
       size="xl"
@@ -275,6 +276,7 @@
           <b-button
             variant="primary"
             :title="$t('label.saveAndClose')"
+            :disabled="blockEditorOkDisabled"
             @click="updateBlocks()"
           >
             {{ $t('label.saveAndClose') }}
@@ -356,6 +358,7 @@ import Configurator from 'corteza-webapp-compose/src/components/PageBlocks/Confi
 import RecordModal from 'corteza-webapp-compose/src/components/Public/Record/Modal'
 import MagnificationModal from 'corteza-webapp-compose/src/components/Public/Page/Block/Modal'
 import { fetchID } from 'corteza-webapp-compose/src/lib/block'
+import { handle } from '@cortezaproject/corteza-vue'
 
 export default {
   i18nOptions: {
@@ -533,6 +536,16 @@ export default {
 
       return this.otherLayoutBlockIDs.has(this.editor.block.blockID)
     },
+
+    blockEditorOkDisabled () {
+      if (!this.editor) return true
+
+      const { block } = this.editor
+
+      if (!block) return true
+
+      return [handle.handleState(block.meta.customID)].includes(false)
+    },
   },
 
   watch: {

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

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

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

@@ -133,6 +133,11 @@ general:
   descriptionPlaceholder: Block description
   headerStyle: Block header style (color)
   magnifyLabel: Block Magnification
+  customID:
+    label: Custom ID
+    placeholder: CustomID
+    description: Can be used to reference the block in Custom CSS
+    invalid-state: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dashes. Must end with letter or number
   magnifyOptions:
     disabled: Disabled
     modal: Modal