Refactor blocks architecture to modular approach

- Restore "1/2, 1/2" layout for flexible column combinations
- Simplify beforeafter block: remove toggle and text field, keep only image comparison
- Create new video block with URL support (YouTube/Vimeo/direct files)
- Create horizontal-gallery block for scrollable image galleries
- Add H4 heading level support
- All blocks now modular: combine with text blocks in 2-column layouts

Blocks available:
- Text, Heading (h2-h4), Image, Video
- Before/After comparison (no text)
- Horizontal gallery (with text below)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

site/plugins/horizontal-gallery/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+*.log

site/plugins/horizontal-gallery/blueprints/blocks/horizontalgallery.yml

@@ -0,0 +1,22 @@
+name: Galerie horizontale
+icon: images
+preview: horizontalgallery
+fields:
+  images:
+    label: Images
+    type: files
+    multiple: true
+    layout: cards
+    query: page.images
+    help: Pensez à ajouter une légende à chaque image via son blueprint (champ Caption)
+  text:
+    label: Texte accompagnant
+    type: writer
+    marks:
+      - bold
+      - italic
+      - link
+    nodes:
+      - bulletList
+      - orderedList
+      - paragraph

site/plugins/horizontal-gallery/index.css

@@ -0,0 +1 @@
+.hgallery-preview[data-v-9cf511cf]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background);border:1px solid var(--color-gray-300)}.hgallery-preview__container[data-v-9cf511cf]{display:flex;flex-direction:column;gap:1rem;padding:1rem}.hgallery-preview__gallery[data-v-9cf511cf]{width:100%}.hgallery-preview__scroll[data-v-9cf511cf]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-behavior:smooth}.hgallery-preview__scroll[data-v-9cf511cf]::-webkit-scrollbar{height:6px}.hgallery-preview__scroll[data-v-9cf511cf]::-webkit-scrollbar-track{background:var(--color-gray-200);border-radius:3px}.hgallery-preview__scroll[data-v-9cf511cf]::-webkit-scrollbar-thumb{background:var(--color-gray-400);border-radius:3px}.hgallery-preview__scroll[data-v-9cf511cf]::-webkit-scrollbar-thumb:hover{background:var(--color-gray-500)}.hgallery-preview__slide[data-v-9cf511cf]{flex-shrink:0;width:250px;display:flex;flex-direction:column;gap:.5rem}.hgallery-preview__slide img[data-v-9cf511cf]{width:100%;height:180px;object-fit:cover;border-radius:var(--rounded-sm);background:var(--color-gray-200)}.hgallery-preview__caption[data-v-9cf511cf]{font-size:var(--text-xs);color:var(--color-gray-600);font-style:italic;margin:0;line-height:1.4}.hgallery-preview__empty[data-v-9cf511cf]{padding:3rem 1rem;text-align:center;color:var(--color-gray-500);font-size:var(--text-sm);background:var(--color-gray-100);border-radius:var(--rounded-sm)}.hgallery-preview__text[data-v-9cf511cf]{font-size:var(--text-sm);color:var(--color-gray-700);line-height:1.5;padding-top:.5rem;border-top:1px solid var(--color-gray-200)}.hgallery-preview[data-v-9cf511cf]:hover{border-color:var(--color-gray-400)}

site/plugins/horizontal-gallery/index.js

@@ -0,0 +1 @@
+(function(){"use strict";function r(l,e,t,a,n,s,v,d){var i=typeof l=="function"?l.options:l;return e&&(i.render=e,i.staticRenderFns=t,i._compiled=!0),i._scopeId="data-v-"+s,{exports:l,options:i}}const o={__name:"HorizontalGalleryBlock",props:{content:Object},setup(l){const e=l,t=Vue.computed(()=>{var a;return!((a=e.content)!=null&&a.images)||!e.content.images.length?[]:e.content.images.map(n=>({url:n.url,caption:n.text||n.caption||null}))});return{__sfc:!0,props:e,images:t}}};var c=function(){var e=this,t=e._self._c,a=e._self._setupProxy;return t("div",{staticClass:"hgallery-preview",on:{click:function(n){return e.$emit("open")}}},[t("div",{staticClass:"hgallery-preview__container"},[t("div",{staticClass:"hgallery-preview__gallery"},[a.images.length>0?t("div",{staticClass:"hgallery-preview__scroll"},e._l(a.images,function(n,s){return t("div",{key:s,staticClass:"hgallery-preview__slide"},[t("img",{attrs:{src:n.url,alt:n.caption||"Image"}}),n.caption?t("p",{staticClass:"hgallery-preview__caption"},[e._v(" "+e._s(n.caption)+" ")]):e._e()])}),0):t("div",{staticClass:"hgallery-preview__empty"},[e._v(" Aucune image sélectionnée ")])]),e.content.text?t("div",{staticClass:"hgallery-preview__text"},[t("div",{domProps:{innerHTML:e._s(e.content.text)}})]):e._e()])])},_=[],p=r(o,c,_,!1,null,"9cf511cf");const u=p.exports;window.panel.plugin("index/horizontal-gallery",{blocks:{horizontalgallery:u}})})();

site/plugins/horizontal-gallery/index.php

@@ -0,0 +1,10 @@
+<?php
+
+Kirby::plugin('index/horizontal-gallery', [
+    'blueprints' => [
+        'blocks/horizontalgallery' => __DIR__ . '/blueprints/blocks/horizontalgallery.yml'
+    ],
+    'snippets' => [
+        'blocks/horizontalgallery' => __DIR__ . '/snippets/blocks/horizontalgallery.php'
+    ]
+]);

site/plugins/horizontal-gallery/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "horizontal-gallery-block",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "npx -y kirbyup src/index.js --watch",
+    "build": "npx -y kirbyup src/index.js"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.1.7"
+  }
+}

site/plugins/horizontal-gallery/snippets/blocks/horizontalgallery.php

@@ -0,0 +1,38 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+$images = $block->images()->toFiles();
+$text = $block->text()->value();
+?>
+
+<div class="subsection-w-hscroll">
+
+    <div class="horizontal-scroll-spacer"></div>
+
+    <div class="horizontal-scroll">
+        <div class="horizontal-scroll-wrapper">
+            <?php foreach ($images as $image): ?>
+            <div class="horizontal-scroll-slide">
+                <div class="horizontal-scroll-slide__inner">
+                    <figure>
+                        <img src="<?= $image->url() ?>" alt="<?= $image->alt()->esc() ?>" />
+                    </figure>
+                    <?php if ($image->caption()->isNotEmpty()): ?>
+                    <p class="caption"><?= $image->caption()->html() ?></p>
+                    <?php endif ?>
+                </div>
+            </div>
+            <?php endforeach ?>
+        </div>
+
+        <div class="horizontal-scroll-button-prev"></div>
+        <div class="horizontal-scroll-button-next"></div>
+        <div class="horizontal-scroll-pagination"></div>
+    </div>
+
+    <?php if ($text): ?>
+    <div class="subsection-txt">
+        <?= $text ?>
+    </div>
+    <?php endif ?>
+
+</div>

site/plugins/horizontal-gallery/src/components/HorizontalGalleryBlock.vue

@@ -0,0 +1,142 @@
+<template>
+  <div @click="$emit('open')" class="hgallery-preview">
+    <div class="hgallery-preview__container">
+      <!-- Zone galerie horizontale -->
+      <div class="hgallery-preview__gallery">
+        <div v-if="images.length > 0" class="hgallery-preview__scroll">
+          <div
+            v-for="(image, index) in images"
+            :key="index"
+            class="hgallery-preview__slide"
+          >
+            <img :src="image.url" :alt="image.caption || 'Image'" />
+            <p v-if="image.caption" class="hgallery-preview__caption">
+              {{ image.caption }}
+            </p>
+          </div>
+        </div>
+        <div v-else class="hgallery-preview__empty">
+          Aucune image sélectionnée
+        </div>
+      </div>
+
+      <!-- Zone texte -->
+      <div v-if="content.text" class="hgallery-preview__text">
+        <div v-html="content.text"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  content: Object
+});
+
+const images = computed(() => {
+  if (!props.content?.images || !props.content.images.length) {
+    return [];
+  }
+
+  return props.content.images.map(file => ({
+    url: file.url,
+    caption: file.text || file.caption || null
+  }));
+});
+</script>
+
+<style scoped>
+.hgallery-preview {
+  cursor: pointer;
+  border-radius: var(--rounded);
+  overflow: hidden;
+  background: var(--color-background);
+  border: 1px solid var(--color-gray-300);
+}
+
+.hgallery-preview__container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+/* Galerie horizontale scrollable */
+.hgallery-preview__gallery {
+  width: 100%;
+}
+
+.hgallery-preview__scroll {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+  scroll-behavior: smooth;
+}
+
+.hgallery-preview__scroll::-webkit-scrollbar {
+  height: 6px;
+}
+
+.hgallery-preview__scroll::-webkit-scrollbar-track {
+  background: var(--color-gray-200);
+  border-radius: 3px;
+}
+
+.hgallery-preview__scroll::-webkit-scrollbar-thumb {
+  background: var(--color-gray-400);
+  border-radius: 3px;
+}
+
+.hgallery-preview__scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
+}
+
+.hgallery-preview__slide {
+  flex-shrink: 0;
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hgallery-preview__slide img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: var(--rounded-sm);
+  background: var(--color-gray-200);
+}
+
+.hgallery-preview__caption {
+  font-size: var(--text-xs);
+  color: var(--color-gray-600);
+  font-style: italic;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.hgallery-preview__empty {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--color-gray-500);
+  font-size: var(--text-sm);
+  background: var(--color-gray-100);
+  border-radius: var(--rounded-sm);
+}
+
+/* Zone texte */
+.hgallery-preview__text {
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+  line-height: 1.5;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--color-gray-200);
+}
+
+.hgallery-preview:hover {
+  border-color: var(--color-gray-400);
+}
+</style>

site/plugins/horizontal-gallery/src/index.js

@@ -0,0 +1,7 @@
+import HorizontalGalleryBlock from "./components/HorizontalGalleryBlock.vue";
+
+window.panel.plugin("index/horizontal-gallery", {
+  blocks: {
+    horizontalgallery: HorizontalGalleryBlock
+  }
+});