Le Fonctionnement des Gutenberg Blocks

1. Structure d’un bloc

Chaque bloc contient :

• – un type de contenu (ex. : paragraphe, image, liste, en-tête…)
• – des options de personnalisation (ex. : couleurs, alignements, typographies)
• – une interface glisser-déposer
• – des fonctions spécifiques selon le type de bloc

2. Exemples de blocs natifs dans WordPress :

Type de bloc	Utilité
Paragraphe	Ajouter du texte
Image	Intégrer une image avec options de taille et d’alignement
En-tête	Structurer le contenu avec des titres
Galerie	Afficher plusieurs images en grille
Bouton	Créer des appels à l’action (CTA)
HTML personnalisé	Insérer du code personnalisé

Créer et utiliser des Gutenberg Blocks

Ajouter un bloc :

1. 1) Ouvrez une page ou un article dans l’éditeur Gutenberg.
2. 2) Cliquez sur le bouton « + » pour afficher la bibliothèque de blocs.
3. 3) Sélectionnez un bloc (texte, image, vidéo, HTML, etc.)
4. 4) Personnalisez-le avec l’interface proposée (styles, alignement, couleurs…).

Blocs avancés :

Pour enrichir votre site, vous pouvez installer des extensions WordPress ou plugins Gutenberg comme :

• 
  – Stackable
• – Kadence Blocks
• – Ultimate Blocks
• – Spectra (ex-Astra Blocks)

Ces plugins ajoutent des blocs supplémentaires : grilles personnalisées, accordéons, tableaux de prix, formulaires, Google Maps, Instagram feeds, etc.

Développer ses propres blocs Gutenberg

Les développeurs peuvent créer un bloc Gutenberg personnalisé en utilisant JavaScript (React), PHP, et les API de WordPress. Cela permet de :

• 
  – Ajouter une fonctionnalité spécifique à un thème ou plugin
• – Contrôler l’apparence avec CSS
• – Intégrer une logique avancée via React.js

Exemple de structure de bloc personnalisé :

js

registerBlockType('nom/mon-bloc', {
title: 'Bloc personnalisé',
icon: 'smiley',
category: 'mise en page',
edit: () => <p>Contenu dans l'éditeur</p>,
save: () => <p>Contenu affiché sur le site</p>,
});

Pourquoi utiliser les Gutenberg Blocks ?

✅ Avantages

• 
  – Éditeur visuel simple et intuitif
• – Personnalisation sans code
• – Compatible avec Full Site Editing
• – Gain de productivité dans la création de contenu
• – Support natif dans WordPress (aucun constructeur externe requis)

❌ Inconvénients

• 
  – Moins de flexibilité que des constructeurs comme Elementor ou Divi pour certains cas avancés
• – Peut nécessiter des extensions pour répondre à tous les besoins

Bonnes pratiques

• 
  – Utilisez des blocs réutilisables pour gagner du temps
• – Groupez vos blocs avec la fonction « Groupe »
• – Testez votre design en mode aperçu
• – Nettoyez les blocs inutilisés pour garder un site performant
• – Explorez les options de style global pour uniformiser l’apparence

Ressources utiles

• – Plugins populaires : Kadence Blocks, Spectra, Stackable
  – Documentation officielle de WordPress sur Gutenberg
  – Tutoriels : YouTube, WPFormation, WPMarmite