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>
2026-05-07 15:44:40 +02:00
parent b633ed2d2b
commit 5a86ff701e
16 changed files with 16 additions and 16 deletions
@@ -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}
@@ -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}
@@ -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 ?? ""}
@@ -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
@@ -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
@@ -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}
@@ -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}
@@ -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}
 >
@@ -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}
@@ -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"}
@@ -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}
@@ -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()}
@@ -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)}
@@ -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">
@@ -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
@@ -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}