Block figure: make back configurable

getkirby · May 11, 2024 · b976d8c · b976d8c
1 parent cc59c0e
commit b976d8c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/panel/lab/components/block/3_figure/index.vue b/panel/lab/components/block/3_figure/index.vue
@@ -33,6 +33,14 @@
 				/>
 			</k-block-figure>
 		</k-lab-example>
+		<k-lab-example label="Back">
+			<k-block-figure caption="This is a nice caption" back="pattern-light">
+				<k-image-frame
+					ratio="16/9"
+					src="https://fakeimg.pl/1200x600/ff0000,0/333333,255/?text=Pattern"
+				/>
+			</k-block-figure>
+		</k-lab-example>
 		<k-lab-example label="Video">
 			<k-block-figure caption="This is a nice caption">
 				<k-frame :cover="true" ratio="16/9">

diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -1,5 +1,5 @@
 <template>
-	<figure class="k-block-figure">
+	<figure :style="{ '--block-img-back': backValue }" class="k-block-figure">
 		<k-button
 			v-if="isEmpty"
 			:disabled="disabled"
@@ -32,6 +32,7 @@
 export default {
 	inheritAttrs: false,
 	props: {
+		back: String,
 		caption: String,
 		captionMarks: {
 			default: true,
@@ -42,7 +43,16 @@ export default {
 		emptyIcon: String,
 		emptyText: String
 	},
-	emits: ["open", "update"]
+	emits: ["open", "update"],
+	computed: {
+		backValue() {
+			if (this.back?.startsWith("pattern")) {
+				return `var(--${this.back})`;
+			}
+
+			return `var(--color-${this.back}, ${this.back})`;
+		}
+	}
 };
 </script>
 
@@ -51,7 +61,7 @@ export default {
 	cursor: pointer;
 }
 .k-block-figure-container img {
-	background: var(--pattern-light);
+	background: var(--block-img-back);
 }
 .k-block-figure iframe {
 	border: 0;

diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -1,5 +1,5 @@
 <template>
-	<figure>
+	<figure :style="{ '--block-img-back': back }">
 		<ul @dblclick="open">
 			<template v-if="!content.images?.length">
 				<li
@@ -43,6 +43,15 @@ import Block from "./Default.vue";
 export default {
 	extends: Block,
 	computed: {
+		back() {
+			const back = this.field("back");
+
+			if (back?.startsWith("pattern")) {
+				return `var(--${back})`;
+			}
+
+			return `var(--color-${back}, ${back})`;
+		},
 		captionMarks() {
 			return this.field("caption", { marks: true }).marks;
 		},
@@ -75,7 +84,7 @@ export default {
 	background: var(--color-background);
 }
 .k-block-type-gallery img {
-	background: var(--pattern-light);
+	background: var(--block-img-back);
 }
 .k-block-type-gallery figcaption {
 	padding-top: 0.5rem;

diff --git a/panel/src/components/Forms/Blocks/Types/Image.vue b/panel/src/components/Forms/Blocks/Types/Image.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-block-figure
+		:back="field('back')"
 		:caption="content.caption"
 		:caption-marks="captionMarks"
 		:empty-text="$t('field.blocks.image.placeholder') + ' …'"