From 02fb5f3865c9ebb453a5889cd0c459139b98140a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 4 Sep 2023 08:14:31 +0100
Subject: [PATCH 01/12] Add prototype of form block field layout

---
 packages/client/manifest.json                 | 364 ++++++++++++++++++
 .../app/blocks/form/InnerFormBlock.svelte     |  35 +-
 .../app/forms/AttachmentField.svelte          |   2 +
 .../components/app/forms/DateTimeField.svelte |   2 +
 .../src/components/app/forms/Field.svelte     |  79 ++--
 .../app/forms/MultiFieldSelect.svelte         |   2 +
 .../components/app/forms/OptionsField.svelte  |   2 +
 .../components/app/forms/StringField.svelte   |   2 +
 8 files changed, 448 insertions(+), 40 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 8d0a4e456f..faf279194f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2597,6 +2597,34 @@
             "barTitle": "Justify text"
           }
         ]
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -2654,6 +2682,34 @@
         "type": "validation/number",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -2706,6 +2762,34 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -2763,6 +2847,34 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -2931,6 +3043,34 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3093,6 +3233,34 @@
         "type": "validation/array",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3173,6 +3341,34 @@
         "type": "validation/boolean",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3252,6 +3448,34 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3333,6 +3557,34 @@
         "type": "validation/datetime",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3434,6 +3686,34 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3610,6 +3890,34 @@
         "type": "validation/attachment",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3678,6 +3986,34 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
@@ -3730,6 +4066,34 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   },
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index ec5daa21b1..8e6984b182 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -2,6 +2,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import Placeholder from "components/app/Placeholder.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
+  import { getContext } from "svelte"
 
   export let dataSource
   export let actionUrl
@@ -32,6 +33,7 @@
     barcodeqr: "codescanner",
     bb_reference: "bbreferencefield",
   }
+  const context = getContext("context")
 
   let formId
 
@@ -213,16 +215,18 @@
         </BlockComponent>
       {/if}
       {#key fields}
-        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-          {#each fields as field, idx}
-            {#if getComponentForField(field) && field.active}
-              <BlockComponent
-                type={getComponentForField(field)}
-                props={getPropsForField(field)}
-                order={idx}
-              />
-            {/if}
-          {/each}
+        <BlockComponent type="container">
+          <div class="fields" class:mobile={$context.device.mobile}>
+            {#each fields as field, idx}
+              {#if getComponentForField(field) && field.active}
+                <BlockComponent
+                  type={getComponentForField(field)}
+                  props={getPropsForField(field)}
+                  order={idx}
+                />
+              {/if}
+            {/each}
+          </div>
         </BlockComponent>
       {/key}
     </BlockComponent>
@@ -232,3 +236,14 @@
     text="Choose your table and add some fields to your form to get started"
   />
 {/if}
+
+<style>
+  .fields {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px 16px;
+  }
+  .fields.mobile :global(.spectrum-Form-item) {
+    grid-column: span 6 !important;
+  }
+</style>
diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index e24115ebc0..bc788a726d 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -11,6 +11,7 @@
   export let extensions
   export let onChange
   export let maximum = undefined
+  export let span
 
   let fieldState
   let fieldApi
@@ -72,6 +73,7 @@
   {field}
   {disabled}
   {validation}
+  {span}
   type="attachment"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 6bcd20d250..661c0c2fad 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -13,6 +13,7 @@
   export let validation
   export let defaultValue
   export let onChange
+  export let span
 
   let fieldState
   let fieldApi
@@ -31,6 +32,7 @@
   {disabled}
   {validation}
   {defaultValue}
+  {span}
   type="datetime"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 5d4da5afef..d8b2c7a327 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -12,6 +12,7 @@
   export let type
   export let disabled = false
   export let validation
+  export let span = 6
 
   // Get contexts
   const formContext = getContext("form")
@@ -62,40 +63,58 @@
   })
 </script>
 
-<FieldGroupFallback>
-  <div class="spectrum-Form-item" use:styleable={$component.styles}>
-    {#key $component.editing}
-      <label
-        bind:this={labelNode}
-        contenteditable={$component.editing}
-        on:blur={$component.editing ? updateLabel : null}
-        class:hidden={!label}
-        for={fieldState?.fieldId}
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
-      >
-        {label || " "}
-      </label>
-    {/key}
-    <div class="spectrum-Form-itemField">
-      {#if !formContext}
-        <Placeholder text="Form components need to be wrapped in a form" />
-      {:else if !fieldState}
-        <Placeholder />
-      {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
-        <Placeholder
-          text="This Field setting is the wrong data type for this component"
-        />
-      {:else}
-        <slot />
-        {#if fieldState.error}
-          <div class="error">{fieldState.error}</div>
-        {/if}
+<div
+  class="spectrum-Form-item"
+  class:span-2={span === 2}
+  class:span-3={span === 3}
+  class:span-6={span === 6 || !span}
+  use:styleable={$component.styles}
+  class:above={labelPos === "above"}
+>
+  {#key $component.editing}
+    <label
+      bind:this={labelNode}
+      contenteditable={$component.editing}
+      on:blur={$component.editing ? updateLabel : null}
+      class:hidden={!label}
+      for={fieldState?.fieldId}
+      class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
+    >
+      {label || " "}
+    </label>
+  {/key}
+  <div class="spectrum-Form-itemField">
+    {#if !formContext}
+      <Placeholder text="Form components need to be wrapped in a form" />
+    {:else if !fieldState}
+      <Placeholder />
+    {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
+      <Placeholder
+        text="This Field setting is the wrong data type for this component"
+      />
+    {:else}
+      <slot />
+      {#if fieldState.error}
+        <div class="error">{fieldState.error}</div>
       {/if}
-    </div>
+    {/if}
   </div>
-</FieldGroupFallback>
+</div>
 
 <style>
+  .spectrum-Form-item.span-2 {
+    grid-column: span 2;
+  }
+  .spectrum-Form-item.span-3 {
+    grid-column: span 3;
+  }
+  .spectrum-Form-item.span-6 {
+    grid-column: span 6;
+  }
+  .spectrum-Form-item.above {
+    display: flex;
+    flex-direction: column;
+  }
   label {
     white-space: nowrap;
   }
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 88e1ec5a8e..f3983a2284 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -17,6 +17,7 @@
   export let onChange
   export let optionsType = "select"
   export let direction = "vertical"
+  export let span
 
   let fieldState
   let fieldApi
@@ -56,6 +57,7 @@
   {label}
   {disabled}
   {validation}
+  {span}
   defaultValue={expandedDefaultValue}
   type="array"
   bind:fieldState
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 3c229c0509..bd8dc862ca 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -18,6 +18,7 @@
   export let direction = "vertical"
   export let onChange
   export let sort = true
+  export let span
 
   let fieldState
   let fieldApi
@@ -47,6 +48,7 @@
   {disabled}
   {validation}
   {defaultValue}
+  {span}
   type="options"
   bind:fieldState
   bind:fieldApi
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index 26136b5d8d..073353d500 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -11,6 +11,7 @@
   export let defaultValue = ""
   export let align
   export let onChange
+  export let span
 
   let fieldState
   let fieldApi
@@ -29,6 +30,7 @@
   {disabled}
   {validation}
   {defaultValue}
+  {span}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi

From 291ecd45fe993dafa2198d78b35b4d895e6ddd7a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Sep 2023 11:01:01 +0100
Subject: [PATCH 02/12] Allow form block fields to be clicked from within the
 preview

---
 .../builder/src/builderStore/previewEvents.js  | 13 +++++++++++++
 .../FieldConfiguration/EditFieldPopover.svelte | 18 +++++++++++++++++-
 .../[screenId]/_components/AppPreview.svelte   |  6 ++++++
 .../src/components/BlockComponent.svelte       |  7 ++++---
 .../client/src/components/Component.svelte     |  8 +++++++-
 .../app/blocks/form/InnerFormBlock.svelte      |  6 ++++++
 packages/client/src/index.js                   |  2 ++
 packages/client/src/stores/builder.js          |  4 ++++
 packages/client/src/utils/styleable.js         | 10 +++++++++-
 .../controllers/static/templates/preview.hbs   |  2 ++
 10 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 packages/builder/src/builderStore/previewEvents.js

diff --git a/packages/builder/src/builderStore/previewEvents.js b/packages/builder/src/builderStore/previewEvents.js
new file mode 100644
index 0000000000..dfee80391f
--- /dev/null
+++ b/packages/builder/src/builderStore/previewEvents.js
@@ -0,0 +1,13 @@
+let subscribers = []
+
+export const onPreviewEvent = cb => {
+  subscribers.push(cb)
+
+  return () => {
+    subscribers = subscribers.filter(callback => callback !== cb)
+  }
+}
+
+export const emitPreviewEvent = event => {
+  subscribers.forEach(cb => cb(event))
+}
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 7d2eaae478..29c1d21841 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -2,9 +2,10 @@
   import { Icon, Popover, Layout } from "@budibase/bbui"
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onDestroy, onMount } from "svelte"
   import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
   import { getContext } from "svelte"
+  import { onPreviewEvent } from "builderStore/previewEvents"
 
   export let anchor
   export let field
@@ -61,6 +62,21 @@
 
     dispatch("change", update)
   }
+
+  const handlePreviewEvent = event => {
+    const { type, data } = event?.data || {}
+    if (type === "click-form-block-field") {
+      if (data.field === field.field) {
+        popover.show()
+        open = true
+      } else {
+        popover.hide()
+        open = false
+      }
+    }
+  }
+
+  onMount(() => onPreviewEvent(handlePreviewEvent))
 </script>
 
 <Icon
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 45fe005ceb..4934116104 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -14,6 +14,7 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
+  import { emitPreviewEvent } from "builderStore/previewEvents"
 
   let iframe
   let layout
@@ -36,12 +37,14 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
+  $: selectedBlockComponentId = $store.selectedBlockComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
+    selectedBlockComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -93,6 +96,7 @@
     // Await the event handler
     try {
       await handleBudibaseEvent(message)
+      emitPreviewEvent(message)
     } catch (error) {
       notifications.error(error || "Error handling event from app preview")
     }
@@ -181,6 +185,8 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await store.actions.components.addParent(componentId, parentType)
+    } else if (type === "click-form-block-field") {
+      // Swallow and let this be handled by form block settings
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index c9516b0d71..b3b6a486c8 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -11,6 +11,7 @@
   export let name
   export let order = 0
   export let containsSlot = false
+  export let onClick = null
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
@@ -26,15 +27,15 @@
   $: parentId = $component?.id
   $: inBuilder = $builderStore.inBuilder
   $: instance = {
+    ...props,
     _component: getComponent(type),
     _id: id,
     _instanceName: getInstanceName(name, type),
+    _containsSlot: containsSlot,
     _styles: {
       ...styles,
       normal: styles?.normal || {},
     },
-    _containsSlot: containsSlot,
-    ...props,
   }
 
   // Register this block component if we're inside the builder so it can be
@@ -76,6 +77,6 @@
   })
 </script>
 
-<Component {instance} isBlock>
+<Component {instance} isBlock {onClick}>
   <slot />
 </Component>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 03aab21d38..67fb06261f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -35,6 +35,7 @@
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
+  export let onClick = null
 
   // Get parent contexts
   const context = getContext("context")
@@ -131,7 +132,10 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
+    $builderStore.inBuilder &&
+    insideScreenslot &&
+    (!isBlock || onClick) &&
+    !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
@@ -194,6 +198,8 @@
       interactive,
       draggable,
       editable,
+      isBlock,
+      onClick,
     },
     empty: emptyState,
     selected,
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 8e6984b182..b8abec874a 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -34,6 +34,7 @@
     bb_reference: "bbreferencefield",
   }
   const context = getContext("context")
+  const { builderStore } = getContext("sdk")
 
   let formId
 
@@ -223,6 +224,11 @@
                   type={getComponentForField(field)}
                   props={getPropsForField(field)}
                   order={idx}
+                  interactive
+                  name={field?.field}
+                  onClick={() => {
+                    builderStore.actions.clickFormBlockField(field?.field)
+                  }}
                 />
               {/if}
             {/each}
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 1550ba4d7b..0cf6800560 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -31,6 +31,8 @@ const loadBudibase = async () => {
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
+    selectedBlockComponentId:
+      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 036558e8b2..c1865d608f 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -8,6 +8,7 @@ const createBuilderStore = () => {
     inBuilder: false,
     screen: null,
     selectedComponentId: null,
+    selectedBlockComponentId: null,
     editMode: false,
     previewId: null,
     theme: null,
@@ -35,6 +36,9 @@ const createBuilderStore = () => {
       devToolsStore.actions.setAllowSelection(false)
       eventStore.actions.dispatchEvent("select-component", { id })
     },
+    clickFormBlockField: field => {
+      eventStore.actions.dispatchEvent("click-form-block-field", { field })
+    },
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index f48eece89b..31c35c4483 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -40,6 +40,7 @@ export const styleable = (node, styles = {}) => {
 
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
+    const { isBlock, onClick } = newStyles
     const normalStyles = { ...baseStyles, ...newStyles.normal }
     const hoverStyles = {
       ...normalStyles,
@@ -67,7 +68,11 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      builderStore.actions.selectComponent(componentId)
+      if (isBlock && onClick) {
+        onClick()
+      } else {
+        builderStore.actions.selectComponent(componentId, isBlock)
+      }
       event.preventDefault()
       event.stopPropagation()
       return false
@@ -76,6 +81,9 @@ export const styleable = (node, styles = {}) => {
     // Handler to start editing a component (if applicable) when double
     // clicking in the builder preview
     editComponent = event => {
+      if (isBlock) {
+        return
+      }
       if (newStyles.interactive && newStyles.editable) {
         builderStore.actions.setEditMode(true)
       }
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index 31bf0762e0..f28469ca22 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -63,6 +63,7 @@
       // Extract data from message
       const {
         selectedComponentId,
+        selectedBlockComponentId,
         layout,
         screen,
         appId,
@@ -81,6 +82,7 @@
       window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
       window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
       window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
+      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"] = selectedBlockComponentId
       window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
       window["##BUDIBASE_PREVIEW_THEME##"] = theme
       window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme

From 43663c6fbfc69fb6b09c5f5fa5a20de5ee91b099 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Sep 2023 11:02:10 +0100
Subject: [PATCH 03/12] Prevent dragging interactive block components

---
 packages/client/src/components/Component.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 67fb06261f..467fee0468 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -144,6 +144,7 @@
     interactive &&
     !isLayout &&
     !isRoot &&
+    !isBlock &&
     definition?.draggable !== false
   $: droppable = interactive
   $: builderHidden =

From bffa8b1f0fbc9851bd8e194b28892eadf9856809 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 5 Sep 2023 11:11:43 +0100
Subject: [PATCH 04/12] Ensure only the selected block supports clicking on
 inner interactive components

---
 packages/client/src/components/BlockComponent.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index b3b6a486c8..8af3a8b75e 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -26,6 +26,7 @@
   $: id = `${block.id}-${context ?? rand}`
   $: parentId = $component?.id
   $: inBuilder = $builderStore.inBuilder
+  $: blockSelected = $builderStore.selectedComponentId === block.id
   $: instance = {
     ...props,
     _component: getComponent(type),
@@ -77,6 +78,6 @@
   })
 </script>
 
-<Component {instance} isBlock {onClick}>
+<Component {instance} isBlock onClick={blockSelected ? onClick : null}>
   <slot />
 </Component>

From 0e1cffa65657fc291078c4e9257473be404b778c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 23 Oct 2023 09:20:05 +0100
Subject: [PATCH 05/12] Add span setting to relationship fielsd

---
 .../client/src/components/app/forms/RelationshipField.svelte    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 544a1a8434..cd97790e3f 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -18,6 +18,7 @@
   export let filter
   export let datasourceType = "table"
   export let primaryDisplay
+  export let span
 
   let fieldState
   let fieldApi
@@ -186,6 +187,7 @@
   {validation}
   defaultValue={expandedDefaultValue}
   {type}
+  {span}
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema

From 2bf78db0a026dd7565e6ecdbba99011c6ca71d78 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 08:11:09 +0100
Subject: [PATCH 06/12] Add field layout setting to BB reference field

---
 packages/client/manifest.json | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1fc25c5184..798e33f58d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -6104,6 +6104,34 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Layout",
+        "key": "span",
+        "defaultValue": 6,
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [
+          {
+            "label": "1 column",
+            "value": 6,
+            "barIcon": "Stop",
+            "barTitle": "1 column"
+          },
+          {
+            "label": "2 columns",
+            "value": 3,
+            "barIcon": "ColumnTwoA",
+            "barTitle": "2 columns"
+          },
+          {
+            "label": "3 columns",
+            "value": 2,
+            "barIcon": "ViewColumn",
+            "barTitle": "3 columns"
+          }
+        ]
       }
     ]
   }

From 77cd7233152c6b84c6910c38045c1be5a89029d6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 08:14:55 +0100
Subject: [PATCH 07/12] Remove label alignment option from form block to
 support custom field layouts

---
 packages/client/manifest.json                    | 16 ----------------
 .../components/app/blocks/form/FormBlock.svelte  |  2 --
 .../app/blocks/form/InnerFormBlock.svelte        |  1 -
 3 files changed, 19 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 798e33f58d..48f3f19203 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5755,22 +5755,6 @@
         "section": true,
         "name": "Fields",
         "settings": [
-          {
-            "type": "select",
-            "label": "Align labels",
-            "key": "labelPosition",
-            "defaultValue": "left",
-            "options": [
-              {
-                "label": "Left",
-                "value": "left"
-              },
-              {
-                "label": "Above",
-                "value": "above"
-              }
-            ]
-          },
           {
             "type": "select",
             "label": "Size",
diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte
index f905227af9..e4d3b55eff 100644
--- a/packages/client/src/components/app/blocks/form/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte
@@ -10,7 +10,6 @@
   export let size
   export let disabled
   export let fields
-  export let labelPosition
   export let title
   export let description
   export let showDeleteButton
@@ -97,7 +96,6 @@
     size,
     disabled,
     fields: fieldsOrDefault,
-    labelPosition,
     title,
     description,
     saveButtonLabel: saveLabel,
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index eb93279397..60a3522216 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -10,7 +10,6 @@
   export let size
   export let disabled
   export let fields
-  export let labelPosition
   export let title
   export let description
   export let saveButtonLabel

From e2c2f5e2a6363a67c597e909c8e350e51b0a00cb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 08:50:26 +0100
Subject: [PATCH 08/12] Fix some issues with dropzone height and ensure field
 alignment settings are ignored unless used inside a form block

---
 packages/bbui/src/Form/Core/Dropzone.svelte   | 13 ++++---
 .../app/blocks/form/InnerFormBlock.svelte     |  2 +-
 .../app/forms/AttachmentField.svelte          | 38 ++++++++-----------
 .../src/components/app/forms/Field.svelte     |  6 +--
 4 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index e9ee75bd8b..e2e25b4a04 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -384,7 +384,7 @@
   }
   .compact .placeholder,
   .compact img {
-    margin: 10px 16px;
+    margin: 8px 16px;
   }
   .compact img {
     height: 90px;
@@ -454,6 +454,12 @@
     color: var(--red);
   }
 
+  .spectrum-Dropzone {
+    height: 220px;
+  }
+  .compact .spectrum-Dropzone {
+    height: 40px;
+  }
   .spectrum-Dropzone.disabled {
     pointer-events: none;
     background-color: var(--spectrum-global-color-gray-200);
@@ -461,10 +467,6 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
-  .compact .spectrum-Dropzone {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
   .compact .spectrum-IllustratedMessage-description {
     margin: 0;
   }
@@ -475,7 +477,6 @@
     flex-wrap: wrap;
     justify-content: center;
   }
-
   .tag {
     margin-top: 8px;
   }
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 60a3522216..502b3e0569 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -233,7 +233,7 @@
       {/if}
       {#key fields}
         <BlockComponent type="container">
-          <div class="fields" class:mobile={$context.device.mobile}>
+          <div class="form-block fields" class:mobile={$context.device.mobile}>
             {#each fields as field, idx}
               {#if getComponentForField(field) && field.active}
                 <BlockComponent
diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index bc788a726d..f28d4801d4 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -79,27 +79,19 @@
   bind:fieldApi
   defaultValue={[]}
 >
-  <div class="minHeightWrapper">
-    {#if fieldState}
-      <CoreDropzone
-        value={fieldState.value}
-        disabled={fieldState.disabled}
-        error={fieldState.error}
-        on:change={handleChange}
-        {processFiles}
-        {deleteAttachments}
-        {handleFileTooLarge}
-        {handleTooManyFiles}
-        {maximum}
-        {extensions}
-        {compact}
-      />
-    {/if}
-  </div>
+  {#if fieldState}
+    <CoreDropzone
+      value={fieldState.value}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      on:change={handleChange}
+      {processFiles}
+      {deleteAttachments}
+      {handleFileTooLarge}
+      {handleTooManyFiles}
+      {maximum}
+      {extensions}
+      {compact}
+    />
+  {/if}
 </Field>
-
-<style>
-  .minHeightWrapper {
-    min-height: 80px;
-  }
-</style>
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index d8b2c7a327..83db76b473 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -102,13 +102,13 @@
 </div>
 
 <style>
-  .spectrum-Form-item.span-2 {
+  :global(.form-block .spectrum-Form-item.span-2) {
     grid-column: span 2;
   }
-  .spectrum-Form-item.span-3 {
+  :global(.form-block .spectrum-Form-item.span-3) {
     grid-column: span 3;
   }
-  .spectrum-Form-item.span-6 {
+  :global(.form-block .spectrum-Form-item.span-6) {
     grid-column: span 6;
   }
   .spectrum-Form-item.above {

From b1f233784916f4b089c9af3a708a5379a90205ac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 11:42:01 +0100
Subject: [PATCH 09/12] Hide field layout settings for normal field components,
 and only show them when editing from within a form block

---
 .../EditFieldPopover.svelte                   |  1 +
 .../Component/ComponentSettingsSection.svelte | 25 +++++++++++++++----
 packages/client/manifest.json                 | 14 +++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
index 29c1d21841..e6fb82bedd 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -134,6 +134,7 @@
         <span>{field.field}</span>
       </div>
       <ComponentSettingsSection
+        includeHidden
         componentInstance={pseudoComponentInstance}
         componentDefinition={parsedComponentDef}
         isScreen={false}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index f833464d8c..f78aeaa192 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -16,10 +16,16 @@
   export let isScreen = false
   export let onUpdateSetting
   export let showSectionTitle = true
+  export let includeHidden = false
 
-  $: sections = getSections(componentInstance, componentDefinition, isScreen)
+  $: sections = getSections(
+    componentInstance,
+    componentDefinition,
+    isScreen,
+    includeHidden
+  )
 
-  const getSections = (instance, definition, isScreen) => {
+  const getSections = (instance, definition, isScreen, includeHidden) => {
     const settings = definition?.settings ?? []
     const generalSettings = settings.filter(setting => !setting.section)
     const customSections = settings.filter(setting => setting.section)
@@ -38,7 +44,12 @@
         return
       }
       section.settings.forEach(setting => {
-        setting.visible = canRenderControl(instance, setting, isScreen)
+        setting.visible = canRenderControl(
+          instance,
+          setting,
+          isScreen,
+          includeHidden
+        )
       })
       section.visible =
         section.name === "General" ||
@@ -108,16 +119,20 @@
     })
   }
 
-  const canRenderControl = (instance, setting, isScreen) => {
+  const canRenderControl = (instance, setting, isScreen, includeHidden) => {
     // Prevent rendering on click setting for screens
     if (setting?.type === "event" && isScreen) {
       return false
     }
+    // Check we have a component to render for this setting
     const control = getComponentForSetting(setting)
     if (!control) {
       return false
     }
-
+    // Check if setting is hidden
+    if (setting.hidden && !includeHidden) {
+      return false
+    }
     return shouldDisplay(instance, setting)
   }
 </script>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 48f3f19203..c74ec7dea8 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2603,6 +2603,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -2688,6 +2689,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -2768,6 +2770,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -2853,6 +2856,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3049,6 +3053,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3239,6 +3244,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3347,6 +3353,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3454,6 +3461,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3563,6 +3571,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3692,6 +3701,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3896,6 +3906,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -3992,6 +4003,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -4072,6 +4084,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [
@@ -6094,6 +6107,7 @@
         "label": "Layout",
         "key": "span",
         "defaultValue": 6,
+        "hidden": true,
         "showInBar": true,
         "barStyle": "buttons",
         "options": [

From 77fa373a9077da9bbbcf41451ac78387ade4dd70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 15:09:17 +0100
Subject: [PATCH 10/12] Remove ability to select fields in preview because it
 is not compatible with field configuration changes

---
 .../builder/src/builderStore/previewEvents.js | 13 ----------
 .../controls/EditComponentPopover.svelte      | 25 +++----------------
 .../[screenId]/_components/AppPreview.svelte  |  6 -----
 .../src/components/BlockComponent.svelte      |  4 +--
 .../client/src/components/Component.svelte    |  7 +-----
 packages/client/src/index.js                  |  2 --
 packages/client/src/stores/builder.js         |  4 ---
 packages/client/src/utils/styleable.js        |  8 ++----
 .../controllers/static/templates/preview.hbs  |  2 --
 9 files changed, 8 insertions(+), 63 deletions(-)
 delete mode 100644 packages/builder/src/builderStore/previewEvents.js

diff --git a/packages/builder/src/builderStore/previewEvents.js b/packages/builder/src/builderStore/previewEvents.js
deleted file mode 100644
index dfee80391f..0000000000
--- a/packages/builder/src/builderStore/previewEvents.js
+++ /dev/null
@@ -1,13 +0,0 @@
-let subscribers = []
-
-export const onPreviewEvent = cb => {
-  subscribers.push(cb)
-
-  return () => {
-    subscribers = subscribers.filter(callback => callback !== cb)
-  }
-}
-
-export const emitPreviewEvent = event => {
-  subscribers.forEach(cb => cb(event))
-}
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index d963ad04ed..26c1ced502 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -2,10 +2,9 @@
   import { Icon, Popover, Layout } from "@budibase/bbui"
   import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
   import { getContext } from "svelte"
-  import { onPreviewEvent } from "builderStore/previewEvents"
 
   export let anchor
   export let componentInstance
@@ -21,7 +20,7 @@
   let open = false
 
   // Auto hide the component when another item is selected
-  $: if (open && $draggable.selected != componentInstance._id) {
+  $: if (open && $draggable.selected !== componentInstance._id) {
     popover.hide()
   }
 
@@ -79,22 +78,6 @@
 
     return { ...cfg, left, top }
   }
-
-  const handlePreviewEvent = event => {
-    const { type, data } = event?.data || {}
-    if (type === "click-form-block-field") {
-      console.log(data.field)
-      if (data.field === "asdasd") {
-        popover.show()
-        open = true
-      } else {
-        popover.hide()
-        open = false
-      }
-    }
-  }
-
-  onMount(() => onPreviewEvent(handlePreviewEvent))
 </script>
 
 <Icon
@@ -117,13 +100,13 @@
   }}
   on:close={() => {
     open = false
-    if ($draggable.selected == componentInstance._id) {
+    if ($draggable.selected === componentInstance._id) {
       $draggable.actions.select()
     }
   }}
   {anchor}
   align="left-outside"
-  showPopover={drawers.length == 0}
+  showPopover={drawers.length === 0}
   clickOutsideOverride={drawers.length > 0}
   maxHeight={600}
   handlePostionUpdate={customPositionHandler}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 4934116104..45fe005ceb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -14,7 +14,6 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
-  import { emitPreviewEvent } from "builderStore/previewEvents"
 
   let iframe
   let layout
@@ -37,14 +36,12 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
-  $: selectedBlockComponentId = $store.selectedBlockComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
-    selectedBlockComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -96,7 +93,6 @@
     // Await the event handler
     try {
       await handleBudibaseEvent(message)
-      emitPreviewEvent(message)
     } catch (error) {
       notifications.error(error || "Error handling event from app preview")
     }
@@ -185,8 +181,6 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await store.actions.components.addParent(componentId, parentType)
-    } else if (type === "click-form-block-field") {
-      // Swallow and let this be handled by form block settings
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 8af3a8b75e..12555a7fb5 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -11,7 +11,6 @@
   export let name
   export let order = 0
   export let containsSlot = false
-  export let onClick = null
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
@@ -26,7 +25,6 @@
   $: id = `${block.id}-${context ?? rand}`
   $: parentId = $component?.id
   $: inBuilder = $builderStore.inBuilder
-  $: blockSelected = $builderStore.selectedComponentId === block.id
   $: instance = {
     ...props,
     _component: getComponent(type),
@@ -78,6 +76,6 @@
   })
 </script>
 
-<Component {instance} isBlock onClick={blockSelected ? onClick : null}>
+<Component {instance} isBlock>
   <slot />
 </Component>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 467fee0468..63ce8dc152 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -35,7 +35,6 @@
   export let isLayout = false
   export let isRoot = false
   export let isBlock = false
-  export let onClick = null
 
   // Get parent contexts
   const context = getContext("context")
@@ -132,10 +131,7 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder &&
-    insideScreenslot &&
-    (!isBlock || onClick) &&
-    !instance.static
+    $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = !isRoot && (builderInteractive || devToolsInteractive)
   $: editing = editable && selected && $builderStore.editMode
@@ -200,7 +196,6 @@
       draggable,
       editable,
       isBlock,
-      onClick,
     },
     empty: emptyState,
     selected,
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 0cf6800560..1550ba4d7b 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -31,8 +31,6 @@ const loadBudibase = async () => {
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
-    selectedBlockComponentId:
-      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index c1865d608f..036558e8b2 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -8,7 +8,6 @@ const createBuilderStore = () => {
     inBuilder: false,
     screen: null,
     selectedComponentId: null,
-    selectedBlockComponentId: null,
     editMode: false,
     previewId: null,
     theme: null,
@@ -36,9 +35,6 @@ const createBuilderStore = () => {
       devToolsStore.actions.setAllowSelection(false)
       eventStore.actions.dispatchEvent("select-component", { id })
     },
-    clickFormBlockField: field => {
-      eventStore.actions.dispatchEvent("click-form-block-field", { field })
-    },
     updateProp: (prop, value) => {
       eventStore.actions.dispatchEvent("update-prop", { prop, value })
     },
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 31c35c4483..3fccae0be5 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -40,7 +40,7 @@ export const styleable = (node, styles = {}) => {
 
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
-    const { isBlock, onClick } = newStyles
+    const { isBlock } = newStyles
     const normalStyles = { ...baseStyles, ...newStyles.normal }
     const hoverStyles = {
       ...normalStyles,
@@ -68,11 +68,7 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      if (isBlock && onClick) {
-        onClick()
-      } else {
-        builderStore.actions.selectComponent(componentId, isBlock)
-      }
+      builderStore.actions.selectComponent(componentId)
       event.preventDefault()
       event.stopPropagation()
       return false
diff --git a/packages/server/src/api/controllers/static/templates/preview.hbs b/packages/server/src/api/controllers/static/templates/preview.hbs
index f28469ca22..31bf0762e0 100644
--- a/packages/server/src/api/controllers/static/templates/preview.hbs
+++ b/packages/server/src/api/controllers/static/templates/preview.hbs
@@ -63,7 +63,6 @@
       // Extract data from message
       const {
         selectedComponentId,
-        selectedBlockComponentId,
         layout,
         screen,
         appId,
@@ -82,7 +81,6 @@
       window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
       window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
       window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
-      window["##BUDIBASE_SELECTED_BLOCK_COMPONENT_ID##"] = selectedBlockComponentId
       window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
       window["##BUDIBASE_PREVIEW_THEME##"] = theme
       window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme

From 4fd1c26bbde7b53347bb49e9acce9fe65edec946 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 15:13:49 +0100
Subject: [PATCH 11/12] Clean up

---
 .../src/components/app/blocks/form/InnerFormBlock.svelte      | 4 ----
 packages/client/src/components/app/forms/Field.svelte         | 1 -
 2 files changed, 5 deletions(-)

diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 502b3e0569..f5e0d236a3 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -34,7 +34,6 @@
     bb_reference: "bbreferencefield",
   }
   const context = getContext("context")
-  const { builderStore } = getContext("sdk")
 
   let formId
 
@@ -242,9 +241,6 @@
                   order={idx}
                   interactive
                   name={field?.field}
-                  onClick={() => {
-                    builderStore.actions.clickFormBlockField(field?.field)
-                  }}
                 />
               {/if}
             {/each}
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 83db76b473..f6fbe37681 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -1,6 +1,5 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
-  import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext, onDestroy } from "svelte"
 
   export let label

From de55445168785ae2a64abebda435bdcd5b9c57a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 27 Oct 2023 16:06:06 +0100
Subject: [PATCH 12/12] Update pro

---
 packages/pro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pro b/packages/pro
index d24c0dc3a3..5ed0ee2aca 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit d24c0dc3a30014cbe61860252aa48104cad36376
+Subproject commit 5ed0ee2aca9d754d80cd46bae412b24621afa47e