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
addToEditorScript(array $data, bool $merge = false)	Envoie des données PHP supplémentaires vers editor.jsx

Envoyer des variables PHP à editor.jsx

Depuis la version 26.0.8.7, vous pouvez transmettre des données calculées côté PHP à votre script d'éditeur.

$colors = $this->customize()->getPanel('theme_colors')->palette;

$this->addToEditorScript([
    'colors' => $colors,
]);

Dans editor.jsx, ces données sont disponibles dans l'objet localisé du bloc (ex: colorizedcolor.colors).

Clés réservées

Les clés attributes, slug, name, keywords et description sont réservées par le système. Ne les utilisez pas dans addToEditorScript().

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