Créer un bloc Gutenberg personnalisé avec Spectra

Par l’équipe UseStackPulse · Mis à jour le 26 août 2026 · 7 min de lecture

Plutôt que de partir de zéro avec @wordpress/create-block, Spectra fournit une base de conteneur extensible idéale pour créer rapidement un bloc sur mesure.

Structure de base du bloc

Chaque bloc Gutenberg nécessite un fichier block.json décrivant ses attributs et son point de montage.

{
  "apiVersion": 3,
  "name": "usp/highlight-card",
  "title": "USP Highlight Card",
  "category": "design",
  "attributes": {
    "title": { "type": "string" },
    "accentColor": { "type": "string", "default": "#D97706" }
  }
}

Le composant edit.js

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps();
  return (
    
       setAttributes({ title })}
      />
    
  );
}

Astuce : inspectez le code source de spectra/container via l’éditeur de code pour vous inspirer de leurs conventions de nommage d’attributs.

Questions fréquentes

Faut-il Node.js pour créer un bloc ?

Oui, @wordpress/scripts s’appuie sur webpack et nécessite Node.js pour compiler le JSX en JavaScript natif.

Le bloc fonctionne-t-il sans Spectra installé ?

Oui, un bloc personnalisé créé ainsi est totalement indépendant ; Spectra sert uniquement d’inspiration de structure.