Un bloc Group à fond dégradé : ce que supports.color.gradients autorise

Que se cache-t-il exactement derrière une seule ligne, "gradients": true, dans le bloc supports.color d’un fichier block.json ? Pour un développeur qui veut proposer un dégradé cohérent avec les réglages du thème, la réponse mérite d’être détaillée, car ce support ne se contente pas d’ajouter un champ : il branche le bloc sur tout le système de dégradés défini par le thème actif. Les balises details et summary, sans rapport avec ce sujet, ne sont pas traitées ici.

Ce guide part du bloc Groupe natif comme référence, puisqu’il illustre déjà ce comportement, avant d’expliquer comment reproduire exactement le même mécanisme dans un bloc personnalisé.

Activer le support dans block.json

La déclaration se fait dans la section supports.color du fichier de métadonnées du bloc :

{
  "apiVersion": 3,
  "name": "monplugin/bandeau-promo",
  "supports": {
    "color": {
      "gradients": true,
      "background": true
    }
  }
}

Avec cette déclaration, WordPress ajoute automatiquement, dans l’inspecteur du bloc, un panneau de couleur incluant un onglet dédié aux dégradés, sans qu’aucun code React supplémentaire ne soit nécessaire côté edit.

D’où viennent les dégradés proposés

Les dégradés affichés dans ce panneau ne sont pas définis dans le bloc lui-même : ils proviennent de la section settings.color.gradients du fichier theme.json du thème actif. Un thème qui définit trois dégradés de marque les rend ainsi disponibles pour tous les blocs qui déclarent ce support, garantissant une cohérence visuelle sur l’ensemble du site :

{
  "settings": {
    "color": {
      "gradients": [
        {
          "name": "Dégradé de marque",
          "slug": "degrade-marque",
          "gradient": "linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)"
        }
      ]
    }
  }
}

Ce que génère le choix d’un dégradé côté rendu

Une fois qu’un dégradé du thème est sélectionné dans l’éditeur, WordPress applique automatiquement une classe utilitaire au bloc, du type has-degrade-marque-gradient-background, en complément de la classe générique has-background. Ces classes évitent d’écrire un style inline directement dans le HTML enregistré, ce qui facilite une évolution ultérieure du dégradé depuis theme.json sans avoir à retoucher le contenu déjà publié.

Le cas du dégradé personnalisé

Par défaut, le panneau propose aussi un sélecteur de dégradé personnalisé, libre, en plus des dégradés définis par le thème. Ce comportement peut être désactivé explicitement si le projet impose de rester strictement dans la palette du thème :

{
  "settings": {
    "color": {
      "customGradient": false
    }
  }
}

Cette restriction, définie dans theme.json, s’applique globalement à tous les blocs du site, pas seulement au bloc personnalisé en cours de développement.

Restituer le dégradé côté render_callback

Pour un bloc dynamique dont le rendu passe par PHP, la fonction get_block_wrapper_attributes() intègre automatiquement les classes de couleur et de dégradé calculées à partir des attributs du bloc, à condition que le rendu utilise bien cette fonction plutôt qu’un balisage construit entièrement à la main :

function render_bandeau_promo( $attributes, $content ) {
	$wrapper_attributes = get_block_wrapper_attributes();
	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, wp_kses_post( $content ) );
}

• Vérifier que le thème définit bien des dégradés dans theme.json avant de tester le support sur un bloc personnalisé.
• Confirmer que la classe générée correspond au slug du dégradé choisi, pas à une valeur codée en dur.
• Tester le rendu front après changement de dégradé dans le thème, pour vérifier la bonne propagation sans republication du contenu.

En résumé

Le support supports.color.gradients ne se limite pas à afficher un champ de couleur supplémentaire : il connecte le bloc au système de dégradés centralisé dans theme.json, garantissant qu’une évolution de la palette de marque se répercute automatiquement sur tous les blocs concernés, sans reprise manuelle du contenu déjà publié.