L'éditeur de blocs Gutenberg (introduit dans WordPress 5.0) est devenu le moyen par défaut de construire du contenu dans WordPress. Bien qu'il existe des milliers de blocs pré-faits à partir de plugins et de thèmes, la création de votre propre bloc Gutenberg personnalisé vous donne un contrôle complet — parfait pour les éléments de marque, composants réutilisables, ou une fonctionnalité unique qu'aucun bloc existant n'offre. En 2026, avec l'édition de site complet et les thèmes de bloc maintenant standard, les blocs personnalisés sont plus importants que jamais pour les agences, les développeurs et les entreprises qui veulent un design cohérent à travers les pages.
Chez Cope Business, nous construisons des blocs Gutenberg personnalisés pour nos clients services techniques d'audit SEO améliorer la cohérence du contenu, la vitesse de la page et l'expérience utilisateur sans compter sur des plugins tiers lourds.
Ce guide débutant-intermédiaire vous montre deux façons pratiques de créer un bloc Gutenberg personnalisé en WordPress – en utilisant un plugin (facile) et à partir de zéro avec code (plus flexible).
Pourquoi créer un bloc Gutenberg personnalisé?
- Cohérence de la marque — Créer des éléments réutilisables qui correspondent à votre système de conception
- Fonctionnalité unique — Ajouter des fonctionnalités qu'aucun bloc existant n'a (par exemple, des tableaux de prix personnalisés, des témoignages avec des cotes)
- Résultats — Évitez les greffons gonflés; chargez seulement ce dont vous avez besoin
- Réutilisabilité — Utiliser le même bloc entre les messages, les pages et les modèles
- Travaux futurs — Les thèmes de bloc et l'édition de site complet rendent les blocs personnalisés plus puissants
Méthode 1 : Utilisation d'un plugin – Voie la plus facile (pas de code requis)
Si vous voulez créer des blocs sans écrire JavaScript/PHP, utilisez un plugin de constructeur de blocs.
Plugin recommandé: Block Lab ou Kadence Blocks (gratuit/pro)
Meilleure option gratuite: Blocs de kadence (free core + Pro)
Étapes
- Installer Blocs de kadence de Plugins > Ajouter un nouveau.
- Allez à Blocs de kadence > Block Library → Activer les blocs de démarrage que vous aimez.
- Pour les blocs vraiment personnalisés:
- Utilisation Kadence Blocks Pro (~79$/an) → Fonction Blocs personnalisés avancés
- Ou utiliser Laboratoire de blocage (gratuit) + Champs personnalisés avancés (FAC) (free/pro)
- Dans ACF → Créer un nouveau groupe de champs → Ajouter des champs (texte, image, répéteur, etc.)
- Dans Block Lab → Créer un nouveau bloc → Lien vers les champs ACF → Modèle de conception en PHP/HTML
- Enregistrer → Nouveau bloc apparaît dans l'insert Gutenberg.
Autre: Générateur de blocs Gutenberg (outil en ligne) → Génère le code → coller dans WPCode.
Pour: Non/faible code, configuration visuelle, rapide.
Points négatifs: Moins de flexibilité que le code pur; peut ajouter des ballonnements.
Méthode 2 : Création d'un bloc personnalisé à partir d'un scratch (méthode de code – la plus puissante)
Cette méthode donne un contrôle total et est à l'épreuve du futur pour les thèmes de blocs.
Préalables
- Site de localisation (WP local ou DevKinsta)
- Node.js & npm installés
- Connaissance de base de JavaScript & PHP
- Éditeur de code (code VS)
Étape par étape : Créer un bloc simple -Appel à l'action
- Créer un dossier de plugin
- /wp-content/plugins/cope-custom-blocks/Create: copy-custom-blocks.php
PHP<?php /** * Plugin Name: Cope Custom Gutenberg Blocks * Description: Custom blocks for Cope Business sites * Version: 1.0 * Author: Cope Business */ function cope_register_custom_blocks() { if ( ! function_exists( 'register_block_type' ) ) { return; } register_block_type( __DIR__ . '/blocks/call-to-action' ); } add_action( 'init', 'cope_register_custom_blocks' ); function cope_enqueue_block_assets() { wp_enqueue_script( 'cope-blocks-editor', plugins_url( '/blocks/call-to-action/index.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/index.js' ) ); wp_enqueue_style( 'cope-blocks-style', plugins_url( '/blocks/call-to-action/style.css', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/style.css' ) ); } add_action( 'enqueue_block_editor_assets', 'cope_enqueue_block_assets' );- Créer un dossier & fichiers de blocs
- Créer un dossier : /blocks/call-to-action/Ajouter des fichiers :
- c'est la première fois qu'un groupe de travail est créé
- Créer un dossier : /blocks/call-to-action/Ajouter des fichiers :
JSON{ "apiVersion": 3, "name": "cope/call-to-action", "title": "Call to Action", "category": "text", "icon": "megaphone", "description": "A custom call to action block", "supports": { "html": false }, "textdomain": "cope-blocks", "editorScript": "file:./index.js", "style": "file:./style.css", "editorStyle": "file:./editor.css", "attributes": { "title": { "type": "string", "default": "Ready to Get Started?" }, "content": { "type": "string", "default": "Contact us today for a free consultation." }, "buttonText": { "type": "string", "default": "Get in Touch" }, "buttonUrl": { "type": "string", "default": "" } } }- indice.j (editor & save logic)
JavaScriptimport { registerBlockType } from '@wordpress/blocks'; import { TextControl, URLInputButton } from '@wordpress/components'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'cope/call-to-action', { edit: ( { attributes, setAttributes } ) => { const blockProps = useBlockProps(); return ( <div { ...blockProps }> <TextControl label="Title" value={ attributes.title } onChange={ ( val ) => setAttributes( { title: val } ) } /> <TextControl label="Content" value={ attributes.content } onChange={ ( val ) => setAttributes( { content: val } ) } /> <URLInputButton label="Button URL" url={ attributes.buttonUrl } onChange={ ( url ) => setAttributes( { buttonUrl: url } ) } /> <TextControl label="Button Text" value={ attributes.buttonText } onChange={ ( val ) => setAttributes( { buttonText: val } ) } /> </div> ); }, save: ( { attributes } ) => { const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <h3>{ attributes.title }</h3> <p>{ attributes.content }</p> { attributes.buttonUrl && ( <a href={ attributes.buttonUrl } className="button"> { attributes.buttonText } </a> ) } </div> ); }, } );- style.css & éditeur.css — Ajouter le style de base.
- Activer le plugin → Aller à Greffons → Activer les blocs de Gutenberg personnalisés sur la corde.
- Essai: Ajouter un bloc dans l'éditeur → Cope / Appel à l'action.
Pour: Contrôle complet, réutilisable, aucun plugin supplémentaire. Points négatifs: Nécessite une connaissance JavaScript/PHP ; testez soigneusement.
Meilleures pratiques pour les blocs Gutenberg personnalisés
- Toujours utiliser un plugin ou un thème enfant — ne jamais modifier les fichiers de base.
- Utilisez @wordpress/scripts pour le développement de blocs modernes (npm start/build).
- Tester sur mobile, différents navigateurs et bloquer les thèmes.
- Gardez les blocs légers — évitez les fortes dépendances.
- Ajoutez des styles de blocs et des variations pour la flexibilité.
- Utilisez @wordpress/block-editor pour une meilleure compatibilité.
Les blocs personnalisés vous donnent des éléments de marque réutilisables, parfaits pour la cohérence.
Réflexions finales
Créer un bloc Gutenberg personnalisé dans WordPress vous permet d'ajouter exactement la fonctionnalité et de concevoir vos besoins de site. Commencez par un plugin comme Kadence Blocks ou Block Lab si vous voulez un code bas, ou construisez à partir de zéro pour un contrôle maximum.
Custom bloque votre site à l'épreuve du futur pour les thèmes de blocs et l'édition complète du site.
Besoin d'aide pour créer des blocs personnalisés, optimiser votre éditeur ou améliorer la performance globale du site? Contacter Cope Business pour une consultation SEO technique gratuite — nous allons construire des blocs et des solutions adaptés pour élever votre expérience WordPress.
