From 5a86ff701e2e3dc394f03af6f909c1d5b85c3b43 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Thu, 7 May 2026 15:44:40 +0200
Subject: [PATCH] feat(blocks): data-block PascalCase identifier on every CMS
 block

Adds data-block="PascalName" alongside existing data-block-type
snake_case so blocks can be located via [data-block="Calendar"] etc.
in DevTools. Snake-case attribute kept for backward compat.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/components/blocks/FilesBlock.svelte               | 2 +-
 src/lib/components/blocks/HeadlineBlock.svelte            | 2 +-
 src/lib/components/blocks/HtmlBlock.svelte                | 2 +-
 src/lib/components/blocks/IframeBlock.svelte              | 2 +-
 src/lib/components/blocks/ImageBlock.svelte               | 2 +-
 src/lib/components/blocks/ImageGalleryBlock.svelte        | 2 +-
 src/lib/components/blocks/LinkListBlock.svelte            | 2 +-
 src/lib/components/blocks/MarkdownBlock.svelte            | 2 +-
 src/lib/components/blocks/OpnFormBlock.svelte             | 2 +-
 src/lib/components/blocks/OrganisationsBlock.svelte       | 2 +-
 src/lib/components/blocks/PostOverviewBlock.svelte        | 2 +-
 src/lib/components/blocks/QuoteBlock.svelte               | 2 +-
 src/lib/components/blocks/QuoteCarouselBlock.svelte       | 2 +-
 src/lib/components/blocks/SearchableTextBlock.svelte      | 2 +-
 src/lib/components/blocks/YoutubeVideoBlock.svelte        | 2 +-
 src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/blocks/FilesBlock.svelte b/src/lib/components/blocks/FilesBlock.svelte
index 9e58595..ce5c90d 100644
--- a/src/lib/components/blocks/FilesBlock.svelte
+++ b/src/lib/components/blocks/FilesBlock.svelte
@@ -106,7 +106,7 @@
   );
 </script>
 
-<div class="files-block {layoutClasses}" data-block-type="files" data-block-slug={block._slug}>
+<div class="files-block {layoutClasses}" data-block="Files" data-block-type="files" data-block-slug={block._slug}>
   {#if block.headline}
     <h3 class="mb-3 text-lg font-semibold">{block.headline}</h3>
   {/if}
diff --git a/src/lib/components/blocks/HeadlineBlock.svelte b/src/lib/components/blocks/HeadlineBlock.svelte
index 7f64a5b..913f7d3 100644
--- a/src/lib/components/blocks/HeadlineBlock.svelte
+++ b/src/lib/components/blocks/HeadlineBlock.svelte
@@ -15,7 +15,7 @@
   const Tag = $derived((block.tag || "h2") as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
 </script>
 
-<div class={layoutClasses} data-block-type="headline" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Headline" data-block-type="headline" data-block-slug={block._slug}>
   <svelte:element
     this={Tag}
     class={alignClass}
diff --git a/src/lib/components/blocks/HtmlBlock.svelte b/src/lib/components/blocks/HtmlBlock.svelte
index 4783e2f..61d8f41 100644
--- a/src/lib/components/blocks/HtmlBlock.svelte
+++ b/src/lib/components/blocks/HtmlBlock.svelte
@@ -9,7 +9,7 @@
 
 <div
   class="{layoutClasses} content-html"
-  data-block-type="html"
+  data-block="Html" data-block-type="html"
   data-block-slug={block._slug}
 >
   {@html block.html ?? ""}
diff --git a/src/lib/components/blocks/IframeBlock.svelte b/src/lib/components/blocks/IframeBlock.svelte
index 11fbe76..84dff48 100644
--- a/src/lib/components/blocks/IframeBlock.svelte
+++ b/src/lib/components/blocks/IframeBlock.svelte
@@ -32,7 +32,7 @@
   }
 </script>
 
-<div class={layoutClasses} data-block-type="iframe" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Iframe" data-block-type="iframe" data-block-slug={block._slug}>
   {#if src}
     <div class="relative aspect-video w-full overflow-hidden rounded-xs bg-stein-100">
       <iframe
diff --git a/src/lib/components/blocks/ImageBlock.svelte b/src/lib/components/blocks/ImageBlock.svelte
index 5328fd6..665147e 100644
--- a/src/lib/components/blocks/ImageBlock.svelte
+++ b/src/lib/components/blocks/ImageBlock.svelte
@@ -40,7 +40,7 @@
   );
 </script>
 
-<div class={layoutClasses} data-block-type="image" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Image" data-block-type="image" data-block-slug={block._slug}>
   {#if rawSrc}
     <figure class="max-w-[400px]">
       <RustyImage
diff --git a/src/lib/components/blocks/ImageGalleryBlock.svelte b/src/lib/components/blocks/ImageGalleryBlock.svelte
index a3f2cbd..2e69488 100644
--- a/src/lib/components/blocks/ImageGalleryBlock.svelte
+++ b/src/lib/components/blocks/ImageGalleryBlock.svelte
@@ -155,7 +155,7 @@
 
 <svelte:window onkeydown={onModalKey} />
 
-<div class={layoutClasses} data-block-type="image_gallery" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="ImageGallery" data-block-type="image_gallery" data-block-slug={block._slug}>
   {#if descriptionHtml}
     <div class="markdown max-w-none prose prose-zinc mb-4">
       {@html descriptionHtml}
diff --git a/src/lib/components/blocks/LinkListBlock.svelte b/src/lib/components/blocks/LinkListBlock.svelte
index 80f0c6e..c83f476 100644
--- a/src/lib/components/blocks/LinkListBlock.svelte
+++ b/src/lib/components/blocks/LinkListBlock.svelte
@@ -28,7 +28,7 @@
   );
 </script>
 
-<div class="link-list {layoutClasses}" data-block-type="link_list" data-block-slug={block._slug}>
+<div class="link-list {layoutClasses}" data-block="LinkList" data-block-type="link_list" data-block-slug={block._slug}>
   {#if block.headline}
     <h3 class="mb-3 text-sm font-semibold tracking-wide uppercase">{block.headline}</h3>
   {/if}
diff --git a/src/lib/components/blocks/MarkdownBlock.svelte b/src/lib/components/blocks/MarkdownBlock.svelte
index 8a9bbf1..2980fc0 100644
--- a/src/lib/components/blocks/MarkdownBlock.svelte
+++ b/src/lib/components/blocks/MarkdownBlock.svelte
@@ -24,7 +24,7 @@
 
 <div
   class={layoutClasses}
-  data-block-type="markdown"
+  data-block="Markdown" data-block-type="markdown"
   data-markdown-id={block.name}
   data-block-slug={block._slug}
 >
diff --git a/src/lib/components/blocks/OpnFormBlock.svelte b/src/lib/components/blocks/OpnFormBlock.svelte
index 43c44d0..215e91b 100644
--- a/src/lib/components/blocks/OpnFormBlock.svelte
+++ b/src/lib/components/blocks/OpnFormBlock.svelte
@@ -82,7 +82,7 @@
 
 <div
   class="{layoutClasses} content-opnform w-[calc(100%+2rem)] max-w-none -mx-4 min-w-0 overflow-visible border border-stein-200 lg:rounded-lg px-0 py-3 md:w-[calc(100%+3rem)] md:-mx-6 md:px-4 md:py-4"
-  data-block-type="opnform"
+  data-block="OpnForm" data-block-type="opnform"
   data-block-slug={block._slug}
 >
   {#if iframeSrc}
diff --git a/src/lib/components/blocks/OrganisationsBlock.svelte b/src/lib/components/blocks/OrganisationsBlock.svelte
index 6e8a9ab..ae3c5fc 100644
--- a/src/lib/components/blocks/OrganisationsBlock.svelte
+++ b/src/lib/components/blocks/OrganisationsBlock.svelte
@@ -129,7 +129,7 @@
   </Card>
 {/snippet}
 
-<div class={layoutClasses} data-block-type="organisations" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="Organisations" data-block-type="organisations" data-block-slug={block._slug}>
   {#if block.headline}
     <h3
       class={compact ? "mb-2 text-lg font-semibold text-stein-900" : "mb-4"}
diff --git a/src/lib/components/blocks/PostOverviewBlock.svelte b/src/lib/components/blocks/PostOverviewBlock.svelte
index ff4e3d0..3456de2 100644
--- a/src/lib/components/blocks/PostOverviewBlock.svelte
+++ b/src/lib/components/blocks/PostOverviewBlock.svelte
@@ -40,7 +40,7 @@
 {#if hasContent}
 <div
   class="post-overview mb-4 {layoutClasses} {className}"
-  data-block-type="post_overview"
+  data-block="PostOverview" data-block-type="post_overview"
   data-block-slug={block._slug}
 >
   {#if block.headline}
diff --git a/src/lib/components/blocks/QuoteBlock.svelte b/src/lib/components/blocks/QuoteBlock.svelte
index e69f17b..e8b2104 100644
--- a/src/lib/components/blocks/QuoteBlock.svelte
+++ b/src/lib/components/blocks/QuoteBlock.svelte
@@ -39,7 +39,7 @@
 {:else}
     <div
         class={layoutClasses}
-        data-block-type="quote"
+        data-block="Quote" data-block-type="quote"
         data-block-slug={block._slug}
     >
         {@render quoteMarkup()}
diff --git a/src/lib/components/blocks/QuoteCarouselBlock.svelte b/src/lib/components/blocks/QuoteCarouselBlock.svelte
index 9512fb4..f792f43 100644
--- a/src/lib/components/blocks/QuoteCarouselBlock.svelte
+++ b/src/lib/components/blocks/QuoteCarouselBlock.svelte
@@ -68,7 +68,7 @@
 
 <div
   class="quote-carousel {layoutClasses}"
-  data-block-type="quote_carousel"
+  data-block="QuoteCarousel" data-block-type="quote_carousel"
   data-block-slug={block._slug}
   onmouseenter={() => (paused = true)}
   onmouseleave={() => (paused = false)}
diff --git a/src/lib/components/blocks/SearchableTextBlock.svelte b/src/lib/components/blocks/SearchableTextBlock.svelte
index 912f256..2543fd0 100644
--- a/src/lib/components/blocks/SearchableTextBlock.svelte
+++ b/src/lib/components/blocks/SearchableTextBlock.svelte
@@ -160,7 +160,7 @@
 
 <div
   class="searchable-text flex flex-col gap-0 border border-stein-200 bg-stein-50 {layoutClasses} {className}"
-  data-block-type="searchable_text"
+  data-block="SearchableText" data-block-type="searchable_text"
   data-block-slug={block._slug}
 >
   <div class="p-4 md:p-6">
diff --git a/src/lib/components/blocks/YoutubeVideoBlock.svelte b/src/lib/components/blocks/YoutubeVideoBlock.svelte
index 7155699..8acec43 100644
--- a/src/lib/components/blocks/YoutubeVideoBlock.svelte
+++ b/src/lib/components/blocks/YoutubeVideoBlock.svelte
@@ -84,7 +84,7 @@
   const hasEmbed = $derived(embedUrl != null);
 </script>
 
-<div class={layoutClasses} data-block-type="youtube_video" data-block-slug={block._slug}>
+<div class={layoutClasses} data-block="YoutubeVideo" data-block-type="youtube_video" data-block-slug={block._slug}>
   {#if hasEmbed}
     <div class="aspect-video w-full overflow-hidden rounded-xs bg-stein-100">
       <iframe
diff --git a/src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte b/src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte
index 30c9f17..8777e05 100644
--- a/src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte
+++ b/src/lib/components/blocks/YoutubeVideoGalleryBlock.svelte
@@ -145,7 +145,7 @@
 
 <div
   class={layoutClasses}
-  data-block-type="youtube_video_gallery"
+  data-block="YoutubeVideoGallery" data-block-type="youtube_video_gallery"
   data-block-slug={block._slug}
 >
   {#if block.title}