Builder

Le système de blocs permet de créer des composants réutilisables dans l'éditeur Gutenberg. Chaque bloc est défini par une classe PHP dans le dossier app/Blocks.

Structure de base

app/Blocks/ColorizedSection.php

class ColorizedSection extends GutenbergBlock
{
    public function __construct()
    {
        // Configuration du bloc
        $this
            ->setBlockFile(__FILE__) // Obligatoire pour le fonctionnement interne
            ->setName("Section colorisée") // Nom affiché dans l'éditeur
            ->setSlug('colorized_section') // Identifiant unique du bloc
            ->setKeywords(['colorized_section', 'elementum']); // Mots-clés pour la recherche

        // Définition des attributs du bloc
        $this
            ->addAttribute('title') // Attribut simple
            ->addAttribute('color', 'string', "#FCDCB6"); // Avec type et valeur par défaut

        parent::__construct(); // Initialisation du contrôleur parent
    }

    /**
     * Méthode de rendu du bloc
     * @param array $attributes Attributs du bloc
     * @return string
     */
    public function renderBlock($attributes)
    {
        return $this->render('blocks/colorized_section.html.twig', compact('attributes'));
    }
}

Méthodes de configuration

Configuration du bloc

Méthode	Description
setBlockFile(string $file)	Définit le fichier du bloc (toujours __FILE__)
setName(string $name)	Nom affiché dans l'éditeur Gutenberg
setSlug(string $slug)	Identifiant unique du bloc (en snake_case)
setKeywords(array $keywords)	Mots-clés pour la recherche dans l'éditeur

Définition des attributs

// Attribut simple (type mixte)
$this->addAttribute('titre');

// Avec type et valeur par défaut
$this->addAttribute('couleur', 'string', '#FFFFFF');

// Types supportés : string, number, boolean, array, object, null

Template Twig

Dans le fichier templates/blocks/colorized_section.html.twig :

<div class="colorized-section" style="background-color: {{ attributes.color }};">
    <h2>{{ attributes.title }}</h2>
    {{ content|raw }}
</div>

Bonnes pratiques

• Utilisez des slugs uniques et descriptifs
• Utilisez des valeurs par défaut pertinentes