Gutenberg : blocs, motifs et modèles, prendre la main sur l'éditeur

L’éditeur de blocs a remplacé l’ancienne zone de texte unique, et beaucoup de rédacteurs le vivent encore comme une contrainte. Gutenberg WordPress fonctionne pourtant sur une idée simple : une page n’est plus un long document, c’est un empilement d’éléments autonomes que l’on déplace, duplique et réutilise. Ceux qui s’y perdent ont presque toujours sauté la compréhension de trois notions qui structurent tout le reste : le bloc, le motif et le modèle. Une fois ces trois mots posés à leur place, l’interface cesse d’être un obstacle et redevient un outil.

La logique du bloc, et pourquoi elle change tout

Chaque élément d’une page est un bloc : un paragraphe, un titre, une image, une liste, un bouton, un séparateur. Chacun possède ses propres réglages, accessibles dans la barre flottante qui l’accompagne et dans le panneau latéral. Le paragraphe règle sa taille et son alignement, l’image règle son cadrage et sa légende, le bouton règle sa couleur et sa forme.

Cette autonomie a une conséquence pratique majeure : on peut réorganiser une page sans toucher au texte. Déplacer un bloc, le dupliquer, le transformer en un autre type se fait en deux clics. Un paragraphe devient un titre, une liste devient une citation, sans passer par le presse-papiers.

Elle explique aussi une bizarrerie de l’interface qui déroute au début : les réglages changent selon ce qui est sélectionné. Le panneau latéral affiche tantôt les options du document entier, tantôt celles du bloc courant, et l’onglet actif détermine ce que l’on voit. Chercher un réglage introuvable revient presque toujours à vérifier deux choses : le bon bloc est-il sélectionné, et le bon onglet est-il ouvert ? La sélection courante commande tout le reste de l’interface.

Une dernière notion mérite d’être posée tôt : le contenu produit reste du texte balisé, lisible et portable. Un article rédigé avec les blocs natifs conserve sa structure si le thème change, parce que ces blocs appartiennent au logiciel et non à l’habillage. Cette portabilité disparaît dès qu’on passe par des blocs propriétaires fournis par un thème ou par un constructeur externe.

Le groupe de blocs constitue la deuxième notion à maîtriser tôt. Il enferme plusieurs blocs dans un conteneur unique auquel on applique un fond, une marge, une largeur. Sans groupes, une page se construit en empilant des éléments qui n’ont aucun lien entre eux ; avec des groupes, elle se construit en sections, ce qui correspond à la façon dont un lecteur perçoit réellement une page.

La vue en liste, l’outil que personne n’ouvre

Un panneau affiche l’arborescence complète des blocs de la page, groupes compris. Il permet de sélectionner un conteneur précis sans cliquer au hasard, de réordonner par glissement et de comprendre d’où vient un espacement anormal. Sur une page complexe, c’est la vue en liste qui fait gagner le plus de temps, loin devant tout le reste.

Gutenberg WordPress : les motifs, ou le copier-coller intelligent

Un motif est un assemblage de blocs préconstruit que l’on insère d’un coup. Une bannière, une grille de trois services, un bloc de témoignages, une section de questions fréquentes : le motif fournit la structure, il reste à remplacer les textes et les images.

Deux sources coexistent. Le thème actif propose ses propres motifs, cohérents avec sa charte. Une bibliothèque publique en propose beaucoup d’autres, insérables directement. Ces motifs restent des blocs ordinaires une fois posés : rien n’empêche de les modifier librement.

L’intérêt véritable arrive avec les motifs que l’on crée soi-même. Sélectionner un groupe de blocs, l’enregistrer comme motif, et il devient disponible sur toutes les pages. Deux modes existent, et la différence entre les deux mérite d’être comprise avant de se retrouver piégé.

Une précision épargne bien des recherches à qui consulte des documentations anciennes : ce que l’on appelait autrefois les blocs réutilisables n’a pas disparu, il a été absorbé par les motifs synchronisés, dont le comportement est identique. Il n’existe donc plus deux mécanismes concurrents, mais un seul, réglé par la synchronisation.

Le motif synchronisé rend service et se retourne parfois contre son utilisateur : modifier une occurrence en pensant l’adapter localement change toutes les autres. Le réflexe consiste à vérifier le mode avant d’éditer, et à détacher le motif si l’on veut le personnaliser pour une seule page.

Un usage concret montre l’intérêt de la distinction. Un encadré de mise en garde répété sur douze pages, avec un texte identique, gagne à être synchronisé : la mise à jour se fait une fois. Une section de présentation de service, en revanche, se décline différemment sur chaque page et doit rester non synchronisée, sous peine de rendre chaque adaptation impossible. Le choix se fait au moment de l’enregistrement, et il se corrige ensuite au prix d’un peu de travail.

Les motifs se gèrent depuis une section dédiée de l’administration, où on les renomme, les classe et les supprime. Une nomenclature simple, avec un préfixe par famille, évite qu’une bibliothèque de vingt motifs ne devienne aussi confuse qu’un dossier de fichiers non triés.

Les modèles : là où l’apparence se décide

Le troisième niveau concerne les gabarits d’affichage. Un modèle définit la structure d’une famille de pages : l’entête, le pied de page, la position du titre, la présence ou non d’une barre latérale. Les thèmes récents autorisent la modification de ces modèles directement dans l’éditeur, sans code.

Cette possibilité change la nature du travail. Ajuster l’entête de tout le site, retirer la date sous les titres d’articles, modifier l’affichage d’une liste de publications relèvent désormais de quelques clics. La contrepartie est réelle : une erreur sur un modèle affecte toutes les pages concernées, pas une seule. Une modification de modèle se teste donc sur une page témoin avant d’être validée.

Toutes les installations n’offrent pas cette souplesse. Elle dépend directement du thème employé, ce qui en fait un critère de sélection à part entière, développé dans notre analyse des points qui comptent dans le choix d’un thème.

Les styles globaux, avant les réglages manuels

Un panneau de styles centralise les couleurs, les typographies et les espacements de l’ensemble du site. Définir la palette et les tailles de titres à cet endroit, une fois pour toutes, produit un site cohérent et modifiable en bloc.

L’erreur classique consiste à ignorer ce panneau et à régler chaque bloc individuellement. Le résultat s’affiche correctement au premier jour, puis devient ingérable : changer la couleur principale suppose alors de rouvrir chaque page. La règle tient en une ligne : global d’abord, local en exception justifiée.

Écrire vite : les gestes qui font gagner du temps

L’éditeur devient rapide quand on cesse de cliquer dans les menus. Quelques gestes suffisent à couvrir l’essentiel de la rédaction quotidienne.

Taper une barre oblique en début de ligne vide ouvre la recherche de blocs : les premières lettres du nom du bloc suffisent à l’insérer. Coller une adresse sur un bloc vide crée automatiquement le bloc adapté. Coller un texte formaté depuis un traitement de texte crée directement les paragraphes et les titres correspondants, à condition de vérifier ensuite la hiérarchie obtenue, souvent approximative.

Le mode sans distraction masque les panneaux latéraux et laisse le texte seul à l’écran. L’aperçu en largeur réduite montre le rendu sur téléphone sans quitter l’éditeur. La duplication d’un bloc s’obtient depuis son menu contextuel et évite de reconstruire une structure identique.

Une habitude vaut mieux que tous les raccourcis : rédiger le texte en dehors de l’éditeur, dans un document simple, puis le coller et le mettre en forme. Écrire et mettre en page en même temps ralentit les deux opérations, et la mise en page terminée décourage souvent de retoucher le texte.

La hiérarchie des titres, un détail qui n’en est pas un

Le titre principal de la page est fourni par le champ de titre : le corps du texte commence donc au niveau immédiatement inférieur. Sauter des niveaux ou choisir un niveau pour sa taille visuelle dégrade la lisibilité pour les outils d’assistance et brouille la structure perçue par les moteurs de recherche. La taille se règle dans les styles, la hiérarchie se choisit selon le sens.

La vue en liste sert ici de contrôle final. Elle affiche les niveaux de titre dans l’ordre et rend visible d’un coup d’œil un enchaînement incohérent, du type deuxième niveau suivi d’un quatrième. La correction prend quelques secondes à ce stade, contre bien davantage une fois la page publiée et reprise ailleurs.

Médias, mise en page et bon sens

Les images s’insèrent depuis la médiathèque ou par glissement direct dans l’éditeur. Deux réglages méritent une attention systématique : le texte alternatif, qui décrit l’image pour ceux qui ne la voient pas, et la taille effectivement chargée, qui pèse sur le temps d’affichage. Ces deux points, ainsi que le traitement des formats et du poids, sont détaillés dans notre article sur les images et les médias.

Côté mise en page, la sobriété reste la meilleure alliée. Les colonnes s’empilent verticalement sur petit écran, ce qui transforme une grille de quatre éléments en une longue bande. Les blocs de couverture avec texte superposé demandent un contraste vérifié. Les espacements gagnent à venir des styles globaux plutôt que d’ajustements manuels bloc par bloc.

Gutenberg WordPress n’est ni un traitement de texte ni un constructeur visuel complet : c’est un assembleur de blocs, avec sa cohérence propre. Les rédacteurs qui l’apprivoisent le décrivent rarement comme séduisant, mais comme prévisible, ce qui vaut mieux sur la durée. Pour voir à quel moment cet outil intervient dans un projet mené du plan à la publication, notre parcours de création d’un site vitrine replace le montage à sa juste place : après l’écriture, jamais avant.