From cf3239e7dd8cce2e4a13094debe064cda43447de Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 18 Sep 2024 11:41:15 +0200
Subject: [PATCH 1/7] Created and added Details Block

---
 src/blocks/Blocks.astro                       |  2 +
 src/blocks/Blocks.d.ts                        |  4 +-
 src/blocks/DetailsBlock/DetailsBlock.astro    | 39 +++++++++++++++++++
 .../DetailsBlock.fragment.graphql             |  4 ++
 src/blocks/DetailsBlock/index.ts              |  1 +
 .../[locale]/[...path]/_index.query.graphql   |  4 ++
 src/pages/[locale]/_404.query.graphql         |  4 ++
 src/pages/[locale]/_index.query.graphql       |  4 ++
 8 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/blocks/DetailsBlock/DetailsBlock.astro
 create mode 100644 src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
 create mode 100644 src/blocks/DetailsBlock/index.ts

diff --git a/src/blocks/Blocks.astro b/src/blocks/Blocks.astro
index 720afa47..2ed65f07 100644
--- a/src/blocks/Blocks.astro
+++ b/src/blocks/Blocks.astro
@@ -1,5 +1,6 @@
 ---
 import type { AnyBlock } from './Blocks';
+import DetailsBlock from './DetailsBlock/DetailsBlock.astro';
 import EmbedBlock from './EmbedBlock/EmbedBlock.astro';
 import ImageBlock from './ImageBlock/ImageBlock.astro';
 import PagePartialBlock from './PagePartialBlock/PagePartialBlock.astro';
@@ -10,6 +11,7 @@ import VideoBlock from './VideoBlock/VideoBlock.astro';
 import VideoEmbedBlock from './VideoEmbedBlock/VideoEmbedBlock.astro';
 
 const blocksByTypename = {
+  DetailsBlockRecord: DetailsBlock,
   EmbedBlockRecord: EmbedBlock,
   ImageBlockRecord: ImageBlock,
   PagePartialBlockRecord: PagePartialBlock,
diff --git a/src/blocks/Blocks.d.ts b/src/blocks/Blocks.d.ts
index 7f058861..ed966006 100644
--- a/src/blocks/Blocks.d.ts
+++ b/src/blocks/Blocks.d.ts
@@ -1,4 +1,5 @@
-import { 
+import {
+  DetailsBlockFragment,
   EmbedBlockFragment,
   ImageBlockFragment,
   PagePartialBlockFragment,
@@ -10,6 +11,7 @@ import {
 } from '@lib/types/datocms';
 
 export type AnyBlock =
+  | DetailsBlockFragment
   | EmbedBlockFragment
   | ImageBlockFragment
   | PagePartialBlockFragment
diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
new file mode 100644
index 00000000..48c00dc3
--- /dev/null
+++ b/src/blocks/DetailsBlock/DetailsBlock.astro
@@ -0,0 +1,39 @@
+---
+const { block } = Astro.props;
+const splitChar = '|';
+const hasMultipleValues = (value: string) => value.includes(splitChar);
+const splitValues = (value: string) => value.split(splitChar);
+---
+
+<dl class:list={['details-block', `details-block--${block.display}`]}>
+  {
+    Object.keys(block.json).map((key) => (
+      <>
+        <dt>{key}</dt>
+        {hasMultipleValues(block.json[key]) ? (
+          <div>
+            {splitValues(block.json[key]).map((value) => (
+              <dd>{value}</dd>
+            ))}
+          </div>
+        ) : (
+          <dd>{block.json[key]}</dd>
+        )}
+      </>
+    ))
+  }
+</dl>
+
+<style>
+    .details-block {
+        display: grid;
+    }
+
+    .details-block--vertical {
+        grid-template-columns: 1fr;
+    }
+
+    .details-block--horizontal {
+        grid-template-columns: max-content 1fr;
+    }
+</style>
diff --git a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
new file mode 100644
index 00000000..a9a69605
--- /dev/null
+++ b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
@@ -0,0 +1,4 @@
+fragment DetailsBlock on DetailsBlockRecord {
+  json
+  display
+}
diff --git a/src/blocks/DetailsBlock/index.ts b/src/blocks/DetailsBlock/index.ts
new file mode 100644
index 00000000..68f0ff2f
--- /dev/null
+++ b/src/blocks/DetailsBlock/index.ts
@@ -0,0 +1 @@
+export { default as DetailsBlock } from './DetailsBlock.astro';
diff --git a/src/pages/[locale]/[...path]/_index.query.graphql b/src/pages/[locale]/[...path]/_index.query.graphql
index 0029dbea..9686fed6 100644
--- a/src/pages/[locale]/[...path]/_index.query.graphql
+++ b/src/pages/[locale]/[...path]/_index.query.graphql
@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/InternalLink/ParentPage.fragment.graphql'
@@ -24,6 +25,9 @@ query Page($locale: SiteLocale!, $slug: String!) {
     ...ParentPage
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }
diff --git a/src/pages/[locale]/_404.query.graphql b/src/pages/[locale]/_404.query.graphql
index 50bb4fc0..869ecaf2 100644
--- a/src/pages/[locale]/_404.query.graphql
+++ b/src/pages/[locale]/_404.query.graphql
@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -12,6 +13,9 @@ query NotFoundPage($locale: SiteLocale!) {
     title
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }
diff --git a/src/pages/[locale]/_index.query.graphql b/src/pages/[locale]/_index.query.graphql
index e03687b3..c8177bf3 100644
--- a/src/pages/[locale]/_index.query.graphql
+++ b/src/pages/[locale]/_index.query.graphql
@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -17,6 +18,9 @@ query HomePage($locale: SiteLocale!) {
     }
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }

From 2f182d276489c8512c244f0236e57478ac98bc42 Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 18 Sep 2024 11:59:09 +0200
Subject: [PATCH 2/7] Renamed json to details

---
 src/blocks/DetailsBlock/DetailsBlock.astro            | 8 ++++----
 src/blocks/DetailsBlock/DetailsBlock.fragment.graphql | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
index 48c00dc3..28116ef4 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.astro
+++ b/src/blocks/DetailsBlock/DetailsBlock.astro
@@ -7,17 +7,17 @@ const splitValues = (value: string) => value.split(splitChar);
 
 <dl class:list={['details-block', `details-block--${block.display}`]}>
   {
-    Object.keys(block.json).map((key) => (
+    Object.keys(block.details).map((key) => (
       <>
         <dt>{key}</dt>
-        {hasMultipleValues(block.json[key]) ? (
+        {hasMultipleValues(block.details[key]) ? (
           <div>
-            {splitValues(block.json[key]).map((value) => (
+            {splitValues(block.details[key]).map((value) => (
               <dd>{value}</dd>
             ))}
           </div>
         ) : (
-          <dd>{block.json[key]}</dd>
+          <dd>{block.details[key]}</dd>
         )}
       </>
     ))
diff --git a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
index a9a69605..138f918b 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
+++ b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
@@ -1,4 +1,4 @@
 fragment DetailsBlock on DetailsBlockRecord {
-  json
+  details
   display
 }

From 6948a0c892a07d3216f3388307bae699d6873fa4 Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 18 Sep 2024 12:00:47 +0200
Subject: [PATCH 3/7] Added types

---
 src/blocks/DetailsBlock/DetailsBlock.astro | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
index 28116ef4..8351073a 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.astro
+++ b/src/blocks/DetailsBlock/DetailsBlock.astro
@@ -1,4 +1,9 @@
 ---
+import type { DetailsBlockFragment } from '@lib/types/datocms';
+
+interface Props {
+  block: DetailsBlockFragment
+}
 const { block } = Astro.props;
 const splitChar = '|';
 const hasMultipleValues = (value: string) => value.includes(splitChar);

From 84b91d92d7ec820f450f0b0234f66807bdcf4116 Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 18 Sep 2024 12:04:30 +0200
Subject: [PATCH 4/7] Very small refactor

---
 src/blocks/DetailsBlock/DetailsBlock.astro | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
index 8351073a..b6aecfb4 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.astro
+++ b/src/blocks/DetailsBlock/DetailsBlock.astro
@@ -4,6 +4,7 @@ import type { DetailsBlockFragment } from '@lib/types/datocms';
 interface Props {
   block: DetailsBlockFragment
 }
+
 const { block } = Astro.props;
 const splitChar = '|';
 const hasMultipleValues = (value: string) => value.includes(splitChar);

From a51985f74e45e435f5b77f7b2935e8aaa8c59990 Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 18 Sep 2024 15:45:53 +0200
Subject: [PATCH 5/7] Resolved comments

---
 src/blocks/DetailsBlock/DetailsBlock.astro    | 33 +++++++------------
 .../DetailsBlock.fragment.graphql             |  2 +-
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
index b6aecfb4..5d4f757d 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.astro
+++ b/src/blocks/DetailsBlock/DetailsBlock.astro
@@ -2,44 +2,33 @@
 import type { DetailsBlockFragment } from '@lib/types/datocms';
 
 interface Props {
-  block: DetailsBlockFragment
+    block: DetailsBlockFragment;
 }
 
 const { block } = Astro.props;
-const splitChar = '|';
-const hasMultipleValues = (value: string) => value.includes(splitChar);
-const splitValues = (value: string) => value.split(splitChar);
+const splitCharacter = '|';
 ---
 
-<dl class:list={['details-block', `details-block--${block.display}`]}>
+<dl data-layout={block.layout}>
   {
-    Object.keys(block.details).map((key) => (
+    Object.entries(block.details).map(([key, value]) => (
       <>
         <dt>{key}</dt>
-        {hasMultipleValues(block.details[key]) ? (
-          <div>
-            {splitValues(block.details[key]).map((value) => (
-              <dd>{value}</dd>
-            ))}
-          </div>
-        ) : (
-          <dd>{block.details[key]}</dd>
-        )}
+        {(value as string).split(splitCharacter).map((splitValue) => (
+          <dd>{splitValue}</dd>
+        ))}
       </>
     ))
   }
 </dl>
 
 <style>
-    .details-block {
+    dl[data-layout="horizontal"] {
         display: grid;
+        grid-template-columns: max-content 1fr;
     }
 
-    .details-block--vertical {
-        grid-template-columns: 1fr;
-    }
-
-    .details-block--horizontal {
-        grid-template-columns: max-content 1fr;
+    dl[data-layout="horizontal"] dd {
+        grid-column: 2;
     }
 </style>
diff --git a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
index 138f918b..1bb02d33 100644
--- a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
+++ b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
@@ -1,4 +1,4 @@
 fragment DetailsBlock on DetailsBlockRecord {
   details
-  display
+  layout
 }

From 1e2b2386b91314b7a46f7dd3aa3b159a34656eba Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 2 Oct 2024 14:38:36 +0200
Subject: [PATCH 6/7] Merged detials block with page partial block

---
 src/blocks/Blocks.astro                       |  2 -
 src/blocks/Blocks.d.ts                        |  2 -
 src/blocks/DetailsBlock/DetailsBlock.astro    | 34 --------------
 .../DetailsBlock.fragment.graphql             |  4 --
 src/blocks/DetailsBlock/index.ts              |  1 -
 .../PagePartialBlock/PagePartialBlock.astro   | 44 ++++++++++++++++++-
 .../[locale]/[...path]/_index.query.graphql   |  4 --
 src/pages/[locale]/_404.query.graphql         |  4 --
 src/pages/[locale]/_index.query.graphql       |  4 --
 9 files changed, 43 insertions(+), 56 deletions(-)
 delete mode 100644 src/blocks/DetailsBlock/DetailsBlock.astro
 delete mode 100644 src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
 delete mode 100644 src/blocks/DetailsBlock/index.ts

diff --git a/src/blocks/Blocks.astro b/src/blocks/Blocks.astro
index 2ed65f07..720afa47 100644
--- a/src/blocks/Blocks.astro
+++ b/src/blocks/Blocks.astro
@@ -1,6 +1,5 @@
 ---
 import type { AnyBlock } from './Blocks';
-import DetailsBlock from './DetailsBlock/DetailsBlock.astro';
 import EmbedBlock from './EmbedBlock/EmbedBlock.astro';
 import ImageBlock from './ImageBlock/ImageBlock.astro';
 import PagePartialBlock from './PagePartialBlock/PagePartialBlock.astro';
@@ -11,7 +10,6 @@ import VideoBlock from './VideoBlock/VideoBlock.astro';
 import VideoEmbedBlock from './VideoEmbedBlock/VideoEmbedBlock.astro';
 
 const blocksByTypename = {
-  DetailsBlockRecord: DetailsBlock,
   EmbedBlockRecord: EmbedBlock,
   ImageBlockRecord: ImageBlock,
   PagePartialBlockRecord: PagePartialBlock,
diff --git a/src/blocks/Blocks.d.ts b/src/blocks/Blocks.d.ts
index ed966006..462ceba7 100644
--- a/src/blocks/Blocks.d.ts
+++ b/src/blocks/Blocks.d.ts
@@ -1,5 +1,4 @@
 import {
-  DetailsBlockFragment,
   EmbedBlockFragment,
   ImageBlockFragment,
   PagePartialBlockFragment,
@@ -11,7 +10,6 @@ import {
 } from '@lib/types/datocms';
 
 export type AnyBlock =
-  | DetailsBlockFragment
   | EmbedBlockFragment
   | ImageBlockFragment
   | PagePartialBlockFragment
diff --git a/src/blocks/DetailsBlock/DetailsBlock.astro b/src/blocks/DetailsBlock/DetailsBlock.astro
deleted file mode 100644
index 5d4f757d..00000000
--- a/src/blocks/DetailsBlock/DetailsBlock.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import type { DetailsBlockFragment } from '@lib/types/datocms';
-
-interface Props {
-    block: DetailsBlockFragment;
-}
-
-const { block } = Astro.props;
-const splitCharacter = '|';
----
-
-<dl data-layout={block.layout}>
-  {
-    Object.entries(block.details).map(([key, value]) => (
-      <>
-        <dt>{key}</dt>
-        {(value as string).split(splitCharacter).map((splitValue) => (
-          <dd>{splitValue}</dd>
-        ))}
-      </>
-    ))
-  }
-</dl>
-
-<style>
-    dl[data-layout="horizontal"] {
-        display: grid;
-        grid-template-columns: max-content 1fr;
-    }
-
-    dl[data-layout="horizontal"] dd {
-        grid-column: 2;
-    }
-</style>
diff --git a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql b/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
deleted file mode 100644
index 1bb02d33..00000000
--- a/src/blocks/DetailsBlock/DetailsBlock.fragment.graphql
+++ /dev/null
@@ -1,4 +0,0 @@
-fragment DetailsBlock on DetailsBlockRecord {
-  details
-  layout
-}
diff --git a/src/blocks/DetailsBlock/index.ts b/src/blocks/DetailsBlock/index.ts
deleted file mode 100644
index 68f0ff2f..00000000
--- a/src/blocks/DetailsBlock/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DetailsBlock } from './DetailsBlock.astro';
diff --git a/src/blocks/PagePartialBlock/PagePartialBlock.astro b/src/blocks/PagePartialBlock/PagePartialBlock.astro
index fa5360bd..f6063e17 100644
--- a/src/blocks/PagePartialBlock/PagePartialBlock.astro
+++ b/src/blocks/PagePartialBlock/PagePartialBlock.astro
@@ -35,7 +35,7 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
 { (isLayout('accordion-open') || isLayout('accordion-closed')) && (
   <Accordion>
     { items.map(item => (
-      <AccordionItem 
+      <AccordionItem
         name={ `block-${block.id}` }
         open={ isLayout('accordion-open') }
       >
@@ -58,3 +58,45 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
     </>))}
   </Tabs>
 )}
+
+{ isLayout('details-vertical') && (
+  <dl>
+    { items.map((item) => (
+      <>
+        <dt>{ item.title }</dt>
+        {item.blocks.map((block) => (
+          <dd>
+            <Blocks blocks={ [block] }/>
+          </dd>
+        ))}
+      </>
+    )) }
+  </dl>
+)}
+
+{ isLayout('details-horizontal') && (
+  <dl class="details--horizontal">
+    { items.map((item) => (
+      <>
+        <dt>{ item.title }</dt>
+        {item.blocks.map((block) => (
+          <dd>
+            <Blocks blocks={ [block] }/>
+          </dd>
+        ))}
+
+      </>
+    )) }
+  </dl>
+)}
+
+<style>
+    dl.details--horizontal {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+    }
+
+    dl.details--horizontal dd {
+        grid-column: 2;
+    }
+</style>
diff --git a/src/pages/[locale]/[...path]/_index.query.graphql b/src/pages/[locale]/[...path]/_index.query.graphql
index 9686fed6..0029dbea 100644
--- a/src/pages/[locale]/[...path]/_index.query.graphql
+++ b/src/pages/[locale]/[...path]/_index.query.graphql
@@ -1,4 +1,3 @@
-#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/InternalLink/ParentPage.fragment.graphql'
@@ -25,9 +24,6 @@ query Page($locale: SiteLocale!, $slug: String!) {
     ...ParentPage
     bodyBlocks {
       __typename
-      ... on DetailsBlockRecord {
-        ...DetailsBlock
-      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }
diff --git a/src/pages/[locale]/_404.query.graphql b/src/pages/[locale]/_404.query.graphql
index 869ecaf2..50bb4fc0 100644
--- a/src/pages/[locale]/_404.query.graphql
+++ b/src/pages/[locale]/_404.query.graphql
@@ -1,4 +1,3 @@
-#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -13,9 +12,6 @@ query NotFoundPage($locale: SiteLocale!) {
     title
     bodyBlocks {
       __typename
-      ... on DetailsBlockRecord {
-        ...DetailsBlock
-      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }
diff --git a/src/pages/[locale]/_index.query.graphql b/src/pages/[locale]/_index.query.graphql
index c8177bf3..e03687b3 100644
--- a/src/pages/[locale]/_index.query.graphql
+++ b/src/pages/[locale]/_index.query.graphql
@@ -1,4 +1,3 @@
-#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -18,9 +17,6 @@ query HomePage($locale: SiteLocale!) {
     }
     bodyBlocks {
       __typename
-      ... on DetailsBlockRecord {
-        ...DetailsBlock
-      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }

From 68fc8bf1760cc9e1632d2d83a9efd41c9a8fc199 Mon Sep 17 00:00:00 2001
From: Luuk <me@luuk.network>
Date: Wed, 2 Oct 2024 14:50:32 +0200
Subject: [PATCH 7/7] Added a "less conventional" way of styling. I think so at
 least

---
 src/blocks/PagePartialBlock/PagePartialBlock.astro | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/blocks/PagePartialBlock/PagePartialBlock.astro b/src/blocks/PagePartialBlock/PagePartialBlock.astro
index 83a55541..3f889185 100644
--- a/src/blocks/PagePartialBlock/PagePartialBlock.astro
+++ b/src/blocks/PagePartialBlock/PagePartialBlock.astro
@@ -60,7 +60,7 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
 )}
 
 { isLayout('details-vertical') && (
-  <dl>
+  <dl data-layout="vertical">
     { items.map((item) => (
       <>
         <dt>{ item.title }</dt>
@@ -75,7 +75,7 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
 )}
 
 { isLayout('details-horizontal') && (
-  <dl class="details--horizontal">
+  <dl data-layout="horizontal">
     { items.map((item) => (
       <>
         <dt>{ item.title }</dt>
@@ -91,12 +91,12 @@ const isLayout = (layout: PagePartialBlockFragment['layout']) => block.layout ==
 )}
 
 <style>
-    dl.details--horizontal {
+    dl[data-layout="horizontal"] {
         display: grid;
         grid-template-columns: max-content 1fr;
     }
 
-    dl.details--horizontal dd {
+    dl[data-layout="horizontal"] dd {
         grid-column: 2;
     }
 </style>