Résoudre les bizarreries de l’éditeur de blocs WordPress: le guide complet

Vous avez construit une magnifique page. Tout est aligné. Les espacements sont parfaits. Puis vous enregistrez, rechargez la page… et c’est le chaos. Les marges ont disparu. Les colonnes s’empilent là où elles devraient être côte à côte. Un bloc flotte quelque part où il n’a rien à faire.

Si cela vous semble familier, vous n’êtes pas seul. L’éditeur de blocs WordPress (Gutenberg) est puissant, mais il a sa part de « bizarreries », surtout en matière d’espacement, d’intégrité des mises en page et de rendu inattendu.

La bonne nouvelle ? La plupart de ces problèmes sont résolubles. Certains sont des erreurs utilisateur. D’autres viennent de conflits avec le thème. D’autres encore sont Gutenberg lui-même qui fait… Gutenberg.

Cet article couvre les bugs de mise en page les plus courants de l’éditeur de blocs, pourquoi ils surviennent et surtout comment les corriger et récupérer votre travail.

Table des matières

  1. Le classique : les marges et espacements qui disparaissent
  2. Casse des colonnes et des rangées
  3. Le « piège du bloc Groupe »
  4. Les bizarreries de l’aperçu en iframe (6.3+)
  5. Les erreurs de validation des blocs
  6. Le mode de récupération, sauveur de vies
  7. Prévention : construire des mises en page qui survivent aux mises à jour
  8. Quand tout le reste échoue : stratégies de retour en arrière

1. Le classique : les marges et espacements qui disparaissent

Vous ajoutez un bloc Groupe, vous définissez un espacement de 2rem, et tout est parfait dans l’éditeur. Sur le front-end ? Le contenu est collé au bord de l’écran.

Pourquoi cela arrive :
Le CSS du thème annule ou ignore les styles en ligne du bloc. De nombreux thèmes réinitialisent les marges sur les éléments imbriqués (h1, p, .wp-block-group). De plus, certains thèmes plus anciens ne supportent pas pleinement theme.json.

Comment corriger :

  • Solution rapide : Inspectez l’élément (clic droit → Inspecter). Cherchez margin: 0 ou padding: 0 venant du CSS de votre thème. Remplacez-le avec du CSS personnalisé :
    .wp-block-group { padding: 2rem !important; /* à utiliser avec parcimonie */ }
  • Meilleure solution : Ajoutez un espacement approprié dans votre theme.json :
    {
    "settings": {
    "spacing": {
    "padding": true, "margin": true, "units": ["px", "em", "rem", "%"]
    }
    },
    "styles": {
    "blocks": {
    "core/group": {
    "spacing": {
    "padding": {
    "top": "2rem", "bottom": "2rem"
    }
    }
    }
    }
    }
    }
  • Solution développeur : Assurez-vous que votre thème déclare le support de appearanceTools :
    add_theme_support( 'appearanceTools' );

2. Casse des colonnes et des rangées

Les colonnes s’empilent soudainement verticalement. Les rangées passent à la ligne alors qu’elles ne le devraient pas. Une mise en page à trois colonnes devient une seule colonne de désespoir.

Pourquoi cela arrive :
Les causes les plus courantes : absence de paramètres layout dans theme.json, conflits CSS avec des extensions tierces, ou l’éditeur et le front-end qui utilisent des fichiers CSS différents.

Comment corriger :

Vérifiez les paramètres par défaut de layout dans theme.json :

{
    "settings": {
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

Forcez les colonnes à rester horizontales (CSS rapide) :

.wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
}
.wp-block-column {
    flex: 1;
}
@media (max-width: 782px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap;
    }
}

Vérifiez les conflits d’extensions : Désactivez temporairement toutes les extensions sauf Gutenberg (si installé) et retestez. Réactivez une par une pour trouver le coupable.

3. Le « piège du bloc Groupe »

Vous enveloppez plusieurs blocs dans un Groupe. Vous ajoutez une couleur de fond. Tout semble correct. Puis vous essayez d’ajouter de l’espacement à l’intérieur du groupe, et rien ne se passe, ou pire, la mise en page s’effondre.

Pourquoi cela arrive :
Les blocs Groupe ont un conteneur interne (.wp-block-group__inner-container) qui peut interférer avec les espacements et marges. Certains thèmes ciblent cet élément de manière incorrecte.

Comment corriger :

Inspectez le conteneur interne :

/* Si votre thème casse le conteneur interne */
.wp-block-group__inner-container {
    width: 100%;
    max-width: 100%;
    padding: inherit;
}

Mieux encore, utilisez les contrôles d’espacement natifs du bloc Groupe (disponibles dans les versions récentes). Ouvrez les paramètres du bloc → Dimensions → ajoutez l’espacement là, pas sur les enfants individuels.

Conseil de pro : Si un bloc Groupe continue de mal se comporter, remplacez-le par un bloc Couverture (avec opacité à 0) ou un bloc HTML personnalisé avec une <div>. Mais c’est une solution de dernier recours.

4. Les bizarreries de l’aperçu en iframe (WordPress 6.3+)

Depuis WordPress 6.3, l’éditeur de blocs utilise une iframe pour prévisualiser le front-end. C’est excellent pour un style précis, mais cela a introduit de nouveaux bugs : des styles qui fonctionnent dans l’éditeur mais pas dans l’iframe, ou vice-versa.

Pourquoi cela arrive :
L’iframe isole le CSS. Les styles de votre thème peuvent ne pas être correctement chargés dans l’iframe, ou il y a une erreur JavaScript qui casse l’aperçu.

Comment corriger :

  • Vérifiez la console du navigateur (F12) pour les erreurs spécifiques à l’iframe.
  • Forcez les styles de votre thème dans l’iframe de l’éditeur :phpfunction add_editor_iframe_styles() { add_theme_support( ‘editor-styles’ ); add_editor_style( ‘style.css’ ); } add_action( ‘after_setup_theme’, ‘add_editor_iframe_styles’ );
  • Désactivez l’iframe (solution temporaire) : Ajoutez à functions.php :phpadd_filter( ‘use_block_editor_for_post’, ‘__return_false’ );(À faire uniquement pour déboguer, cela désactive complètement l’éditeur de blocs.)
  • Mettez tout à jour : De nombreux bugs d’iframe ont été corrigés dans WordPress 6.4, 6.5 et 6.6. Assurez-vous que votre cœur, vos thèmes et vos extensions sont à jour.

5. Les erreurs de validation des blocs

Le fameux contour rouge avec le message : « Ce bloc contient un contenu inattendu ou invalide. » Deux choix vous sont proposés : Tenter la récupération ou Résoudre.

Pourquoi cela arrive :
Le HTML enregistré dans la base de données ne correspond pas à ce que le bloc attend. Causes courantes : modifications HTML manuelles, conflits d’extensions, copier-coller depuis d’autres sites, ou changement de thème.

Comment corriger :

Option 1 : Tenter la récupération
Cliquez sur « Tenter la récupération ». Gutenberg essaiera de reconstruire le bloc. Cela fonctionne environ 60 % du temps.

Option 2 : Convertir en HTML
Cliquez sur les trois points du bloc → « Modifier en HTML ». Corrigez le balisage manuellement. Puis reconvertissez.

Option 3 : Supprimer et recréer
Si le bloc est petit, supprimez-le et recréez-le. C’est plus rapide que de déboguer.

Option 4 : Nettoyage de la base de données
Si les erreurs de validation persistent sur plusieurs articles, vous pourriez avoir des données corrompues. Utilisez une extension comme « Advanced Database Cleaner » pour supprimer les métadonnées orphelines, mais faites d’abord une sauvegarde.

Prévention : Ne modifiez jamais le HTML d’un bloc directement sauf si vous savez exactement ce que vous faites. Utilisez l’« Éditeur de code » (vue HTML complète) uniquement pour les cas extrêmes.

6. Le mode de récupération, sauveur de vies

Vous êtes en train d’éditer. Vous ajoutez un bloc. Soudain, l’éditeur se fige complètement, ou vous obtenez un écran blanc. Votre travail semble perdu.

Pas de panique. WordPress dispose d’un mode de récupération intégré.

Comment l’utiliser :

  1. Rafraîchissez la page. Si l’éditeur se charge mais affiche une erreur, cherchez le lien « Mode de récupération » en bas du message d’erreur.
  2. Cliquez sur « Mode de récupération ». Cela désactive toutes les extensions et bascule vers un thème par défaut uniquement pour vous (les autres visiteurs voient le site normal).
  3. Allez dans votre tableau de bord → Extensions. Réactivez les extensions une par une pour trouver le coupable.
  4. Une fois corrigé, quittez le mode de récupération depuis la barre d’administration.

Conseil de pro : Si vous ne voyez pas le lien de récupération, ajoutez ?wp_recovery_mode=1 à votre URL d’administration.

Pas de mode de récupération ? Accédez à votre site via FTP ou le gestionnaire de fichiers de votre hébergeur. Renommez le dossier /plugins en /plugins_old. Cela désactive toutes les extensions. Puis renommez-le et réactivez lentement.

7. Prévention : construire des mises en page qui survivent aux mises à jour

La plupart des bizarreries de l’éditeur de blocs sont évitables. Suivez ces règles :

Règle 1 : Utilisez correctement theme.json
Ne comptez pas sur du CSS personnalisé pour l’espacement et la mise en page. Définissez tout dans theme.json ou utilisez les contrôles natifs des blocs.

Règle 2 : Évitez les groupes imbriqués sur plus de 3 niveaux
L’imbrication profonde augmente les risques de conflits CSS et de lenteur de l’éditeur.

Règle 3 : Testez tôt sur le front-end
Ne construisez pas toute une page avant de prévisualiser. Vérifiez après chaque bloc.

Règle 4 : Conservez un « modèle de blocs propres »
Créez une page privée avec chaque type de bloc et vos mises en page courantes. Quand quelque chose casse, testez d’abord sur cette page.

Règle 5 : Utilisez la vue en liste
La vue en liste (icône en haut à gauche de l’éditeur) montre toute votre structure de blocs. Si quelque chose cloche dans la hiérarchie, vous pouvez le repérer avant que ça casse.

Règle 6 : Mettez à jour par étapes
Avant de mettre à jour le cœur de WordPress ou votre thème, clonez votre site dans un environnement de staging. Testez vos mises en page là-bas d’abord.

8. Quand tout le reste échoue : stratégies de retour en arrière

Parfois, une mise en page est tellement cassée que la corriger manuellement prendrait des heures. Voici comment revenir en arrière :

Si vous avez une sauvegarde récente :
Restaurez à partir de la sauvegarde (votre hébergeur propose probablement des sauvegardes quotidiennes). C’est l’option nucléaire mais la plus fiable.

Si les révisions sont activées :
Dans l’éditeur, ouvrez le panneau des paramètres → État et visibilité → Révisions. Revenez à une version qui fonctionne. Cliquez sur « Restaurer cette révision ».

Si vous n’avez que la page cassée :

  • Passez à l’éditeur de code (les trois points → Éditeur de code).
  • Copiez tout le balisage des blocs.
  • Créez une nouvelle page.
  • Collez le balisage.
  • Supprimez la page cassée.

Si l’éditeur de blocs est complètement inaccessible :
Ajoutez ceci à votre wp-config.php pour désactiver temporairement l’éditeur de blocs globalement :

define( 'GUTENBERG_DEACTIVATION', true );

Ou utilisez l’extension Classic Editor pour revenir temporairement.

Dernières réflexions

L’éditeur de blocs WordPress n’est pas exempt de bugs. Mais la plupart des « bizarreries » ont une explication logique et une solution. La clé est de comprendre si le problème vient :

  • De votre thème (theme.json incomplet ou conflits CSS)
  • D’une extension (surtout les extensions d’optimisation ou de CSS personnalisé)
  • De Gutenberg lui-même (généralement corrigé par une mise à jour)
  • D’une erreur utilisateur (imbrication profonde, modifications HTML manuelles)

En cas de doute : inspectez avec les outils de développement du navigateur, vérifiez la console pour les erreurs, et testez avec toutes les extensions désactivées et un thème par défaut (Twenty Twenty-Four ou Twenty Twenty-Five).

Et rappelez-vous : le lien du mode de récupération est votre meilleur ami. Ne construisez rien d’important sans savoir où il se trouve.

Ce billet vous a été utile?
Offrez-nous un café!
Tags: