Allow block ejection to properly apply all styles from blocks

packages/client/src/components/Block.svelte

@@ -4,6 +4,7 @@
   import { blockStore } from "stores/blocks.js"
 
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
   let structureLookupMap = {}
 
@@ -18,8 +19,21 @@
   }
 
   const eject = () => {
-    // Start the new structure with the first top level component
+    // Start the new structure with the root component
     let definition = structureLookupMap[$component.id][0]
+
+    // Copy styles from block to root component
+    definition._styles = {
+      ...definition._styles,
+      normal: {
+        ...definition._styles?.normal,
+        ...$component.styles?.normal,
+      },
+      custom:
+        definition._styles?.custom || "" + $component.styles?.custom || "",
+    }
+
+    // Create component tree
     attachChildren(definition, structureLookupMap)
     builderStore.actions.ejectBlock($component.id, definition)
   }
@@ -73,4 +87,6 @@
   })
 </script>
 
-<slot />
+<div use:styleable={$component.styles}>
+  <slot />
+</div>

packages/client/src/components/BlockComponent.svelte

@@ -7,7 +7,6 @@
   export let type
   export let props
   export let styles
-  export let css
   export let context
   export let order = 0
   export let containsSlot = false
@@ -27,12 +26,7 @@
     _component: `@budibase/standard-components/${type}`,
     _id: id,
     _instanceName: type[0].toUpperCase() + type.slice(1),
-    _styles: {
+    _styles: styles,
-      normal: {
-        ...styles,
-      },
-      custom: css,
-    },
     _containsSlot: containsSlot,
     ...props,
   }

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
-  import { Heading } from "@budibase/bbui"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
 
@@ -31,9 +30,7 @@
   export let cardButtonOnClick
   export let linkColumn
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
+  const { fetchDatasourceSchema } = getContext("sdk")
-  const context = getContext("context")
-  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -84,7 +81,6 @@
 
 {#if schemaLoaded}
   <Block>
-    <div use:styleable={$component.styles}>
     <BlockComponent
       type="form"
       bind:id={formId}
@@ -101,7 +97,9 @@
             wrap: true,
           }}
           styles={{
+            normal: {
               "margin-bottom": "20px",
+            },
           }}
           order={0}
         >
@@ -135,7 +133,9 @@
                   }}
                   order={idx}
                   styles={{
+                    normal: {
                       width: "192px",
+                    },
                   }}
                 />
               {/each}
@@ -179,7 +179,9 @@
             gap: "M",
             noRowsMessage: "No rows found",
           }}
-            css={`display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`}
+          styles={{
+            custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
+          }}
           order={0}
         >
           <BlockComponent
@@ -197,13 +199,14 @@
               linkPeek: cardPeek,
             }}
             styles={{
+              normal: {
                 width: "auto",
+              },
             }}
             order={0}
           />
         </BlockComponent>
       </BlockComponent>
     </BlockComponent>
-    </div>
   </Block>
 {/if}

packages/client/src/components/app/blocks/RepeaterBlock.svelte

@@ -17,14 +17,12 @@
   export let vAlign
   export let gap
 
-  let providerId
-
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+
+  let providerId
 </script>
 
 <Block>
-  <div use:styleable={$component.styles}>
   <BlockComponent
     type="dataprovider"
     context="provider"
@@ -58,5 +56,4 @@
       </BlockComponent>
     {/if}
   </BlockComponent>
-  </div>
 </Block>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -28,8 +28,7 @@
   export let titleButtonURL
   export let titleButtonPeek
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
+  const { fetchDatasourceSchema } = getContext("sdk")
-  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -62,11 +61,15 @@
 
 {#if schemaLoaded}
   <Block>
-    <div class={size} use:styleable={$component.styles}>
     <BlockComponent
       type="form"
       bind:id={formId}
-        props={{ dataSource, disableValidation: true, editAutoColumns: true }}
+      props={{
+        dataSource,
+        disableValidation: true,
+        editAutoColumns: true,
+        size,
+      }}
     >
       {#if title || enrichedSearchColumns?.length || showTitleButton}
         <BlockComponent
@@ -79,7 +82,9 @@
             wrap: true,
           }}
           styles={{
+            normal: {
               "margin-bottom": "20px",
+            },
           }}
           order={0}
         >
@@ -112,7 +117,9 @@
                     autoWidth: true,
                   }}
                   styles={{
+                    normal: {
                       width: "192px",
+                    },
                   }}
                   order={idx}
                 />
@@ -165,6 +172,5 @@
         />
       </BlockComponent>
     </BlockComponent>
-    </div>
   </Block>
 {/if}