Rendu Twig

Le fichier Twig est responsable de la génération du HTML côté frontend pour votre bloc Gutenberg. Il est automatiquement chargé par Elementum lors du rendu du bloc dans le contenu.

important

Depuis 0.7.1, la méthode PHP PreRenderBlock() retourne correctement la valeur de renderBlock($attributes). Assurez-vous donc que votre implémentation de renderBlock() retourne bien une chaîne HTML (ou null si nécessaire).

Structure de base

Voici un exemple complet pour un bloc "Section Colorisée" :

views/blocks/colorized_section.html.twig

<section
    class="elementum-block-colorized_section"
    style="background-color: {{ attributes.color }};"
>
    {% if attributes.title %}
        <h2 class="colorized-section__title">
            {{ attributes.title }}
        </h2>
    {% endif %}

    <div class="colorized-section__content">
        {# Affichage des blocs imbriqués #}
        {{ attributes.innerBlocks }}
    </div>
</section>

Variables disponibles

Variable	Description
attributes	Tableau des attributs définis dans la classe PHP

Elementum injecte également attributes.innerBlocks côté rendu frontend pour afficher les blocs imbriqués.

Styles

Éditeur vs Frontend

Elementum génère automatiquement deux fichiers SCSS pour chaque bloc :

1. blocks/colorized_section/_index.scss - Styles de l'éditeur
2. assets/scss/blocks/_colorized_section.scss - Styles du frontend

Organisation des styles

assets/scss/blocks/_colorized_section.scss

// Bloc principal
.elementum-block-colorized_section {
    // Styles de base
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
}

Intégration

Assurez-vous d'importer le fichier SCSS dans votre fichier principal :

assets/scss/main.scss

// Blocs
@import "blocks/colorized_section";