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>
This commit is contained in:
isUnknown 2026-02-09 18:59:08 +01:00
parent 6251d8f09f
commit 561932724b
23 changed files with 539 additions and 252 deletions

View file

@ -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>

View file

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