From 34b5eb6f0295bba4dccfab833bb930bb0c5e26d9 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Fri, 6 Dec 2024 09:26:46 +0100
Subject: [PATCH] Gallery block: make CSS selector more specific

---
 .../components/Forms/Blocks/Types/Gallery.vue | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
index a3c6517f0a..2c0a61af6d 100644
--- a/panel/src/components/Forms/Blocks/Types/Gallery.vue
+++ b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -1,5 +1,9 @@
 <template>
-	<figure :data-empty="isEmpty" :style="{ '--block-back': back }">
+	<figure
+		:data-empty="isEmpty"
+		:style="{ '--block-back': back }"
+		class="k-block-type-gallery-figure"
+	>
 		<ul @dblclick="open">
 			<template v-if="isEmpty">
 				<li
@@ -7,7 +11,7 @@
 					:key="index"
 					class="k-block-type-gallery-placeholder"
 				>
-					<k-image-frame :ratio="ratio" />
+					<k-image-frame :ratio="ratio" class="k-block-type-gallery-frame" />
 				</li>
 			</template>
 			<template v-else>
@@ -18,6 +22,7 @@
 						:src="image.url"
 						:srcset="image.image.srcset"
 						:alt="image.alt"
+						class="k-block-type-gallery-frame"
 					/>
 				</li>
 
@@ -80,15 +85,15 @@ export default {
 .k-block-container.k-block-container-type-gallery {
 	padding: 0;
 }
-.k-block-type-gallery > figure {
+.k-block-type-gallery-figure {
 	padding: var(--spacing-3);
 	border-radius: var(--rounded);
 }
-.k-block-type-gallery > figure:not([data-empty="true"]) {
+.k-block-type-gallery-figure:not([data-empty="true"]) {
 	background: var(--block-back);
 }
 
-.k-block-type-gallery ul {
+.k-block-type-gallery-figure ul {
 	display: grid;
 	grid-gap: 0.75rem;
 	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
@@ -96,10 +101,12 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
-.k-block-type-gallery:not([data-disabled="true"]) ul {
+.k-block-type-gallery:not([data-disabled="true"])
+	.k-block-type-gallery-figure
+	ul {
 	cursor: pointer;
 }
-.k-block-type-gallery ul .k-image-frame {
+.k-block-type-gallery-frame {
 	border-radius: var(--rounded-sm);
 }