fix: Allow dynamic styles using Data Key

(cherry picked from commit 587fd04)

builder/builder/doctype/builder_page/builder_page.py

@@ -136,7 +136,7 @@ def get_context(self, context):
 		content, style, fonts = get_block_html(blocks)
 		context.fonts = fonts
 		context.content = content
-		context.style = style
+		context.style = render_template(style, page_data)
 		builder_path = frappe.conf.builder_path or "builder"
 		context.editor_link = f"/{builder_path}/page/{self.name}"
 		context.base_url = frappe.utils.get_url(".")
@@ -145,6 +145,7 @@ def get_context(self, context):
 		context.update(page_data)
 		self.set_meta_tags(context=context, page_data=page_data)
 		self.set_favicon(context)
+
 		try:
 			context["content"] = render_template(context.content, context)
 		except TemplateSyntaxError:

frontend/src/components/BuilderBlock.vue

@@ -30,7 +30,7 @@
 			:breakpoint="breakpoint"
 			:editable="isEditable"
 			:isSelected="isSelected"
-			:target="(target as HTMLElement)" />
+			:target="target as HTMLElement" />
 	</teleport>
 </template>
 <script setup lang="ts">
@@ -137,7 +137,23 @@ const target = computed(() => {
 });
 
 const styles = computed(() => {
-	return { ...props.block.getStyles(props.breakpoint), ...props.block.getEditorStyles() } as BlockStyleMap;
+	let dynamicStyles = {};
+	if (props.data) {
+		if (props.block.getDataKey("type") === "style") {
+			dynamicStyles = {
+				[props.block.getDataKey("property") as string]: getDataForKey(
+					props.data,
+					props.block.getDataKey("key"),
+				),
+			};
+		}
+	}
+
+	return {
+		...props.block.getStyles(props.breakpoint),
+		...props.block.getEditorStyles(),
+		...dynamicStyles,
+	} as BlockStyleMap;
 });
 
 const loadEditor = computed(() => {
@@ -165,7 +181,7 @@ onMounted(async () => {
 		useDraggableBlock(
 			props.block,
 			component.value as HTMLElement,
-			reactive({ ghostScale: canvasProps?.scale || 1 })
+			reactive({ ghostScale: canvasProps?.scale || 1 }),
 		);
 	}
 });
@@ -264,7 +280,7 @@ if (!props.preview) {
 			} else if (oldValue === props.block.blockId) {
 				isHovered.value = false;
 			}
-		}
+		},
 	);
 	watch(
 		() => store.activeCanvas?.selectedBlockIds,
@@ -278,7 +294,7 @@ if (!props.preview) {
 		{
 			deep: true,
 			immediate: true,
-		}
+		},
 	);
 }
 </script>

frontend/src/utils/block.ts

@@ -6,9 +6,11 @@ import { addPxToNumber, getBlockCopy, getNumberFromPx, getTextContent, kebabToCa
 
 export type styleProperty = keyof CSSProperties;
 
+type BlockDataKeyType = "key" | "attribute" | "style";
+
 export interface BlockDataKey {
 	key?: string;
-	type?: string;
+	type?: BlockDataKeyType;
 	property?: string;
 }
 
@@ -528,7 +530,7 @@ class Block implements BlockOptions {
 		}
 		return dataKey;
 	}
-	setDataKey(key: keyof BlockDataKey, value: string) {
+	setDataKey(key: keyof BlockDataKey, value: BlockDataKeyType) {
 		if (!this.dataKey) {
 			this.dataKey = {
 				key: "",