Création d'un nouveau bloc

Structure d'un bloc

Chaque bloc Gutenberg est composé des fichiers suivants :

Fichier	Description	Emplacement
Classe PHP	Définit la structure et les attributs du bloc	app/Blocks/{ClassName}.php
Composant React	Interface d'édition du bloc	blocks/{slug}/editor.jsx
Styles éditeur	Styles spécifiques à l'éditeur	blocks/{slug}/_index.scss
Template Twig	Rendu frontend du bloc	views/blocks/{slug}.html.twig
Styles frontend	Styles du bloc en frontend	assets/scss/blocks/{slug}.scss

Création d'un bloc

Utilisez la commande suivante pour générer un nouveau bloc :

php dobby make:block MonNouveauBloc

Options de la commande

La commande vous posera plusieurs questions :

1. Nom du bloc (obligatoire)
   Nom affiché dans l'éditeur (ex: "Section d'accueil")

2. Slug du bloc (optionnel)
   Identifiant unique en snake_case (ex: home_section)

   Si non spécifié, sera généré automatiquement à partir du nom du bloc

3. Préfixe (optionnel)
   Préfixe pour le nom du block (ex: "elementum" pour générer elementum/mon_nouveau_bloc)

Exemple complet

php dobby make:block HeroBanner

> Nom du bloc: Bannière d'accueil
> Slug du bloc (optionnel): hero_banner
> Préfixe (optionnel): elementum

Cette commande va générer :

• app/Blocks/HeroBanner.php
• blocks/hero-banner/editor.jsx
• blocks/hero-banner/_index.scss
• views/blocks/hero-banner.html.twig
• assets/scss/blocks/hero-banner.scss

Prochaines étapes

1. Définissez les attributs du bloc dans la classe PHP
2. Créez l'interface d'édition dans le composant React
3. Personnalisez le rendu dans le template Twig
4. Ajoutez vos styles dans les fichiers SCSS