Gutenberg et le HTML

Le HTML est le langage interprété par les navigateurs web (Firefox, Chrome, Edge…) pour afficher un site web.

Comment Gutenberg fait-il pour réaliser la mise en page à partir de blocs alors que les blocs n’existent pas dans le HTML ? Comment modifier le code HTML généré par Gutenberg ? Comment ajouter du code HTML librement dans une page éditée avec Gutenberg ?

A savoir : vous pouvez agrandir les images de cet article en cliquant dessus.

Haut de page

De la page Gutenberg à la page web

Voici un article composé avec Gutenberg.

Il se compose d’un paragraphe avec des caractères gras et italiques, et d’une image avec sa légende.

Le contenu de la page composée avec Gutenberg

Voici le code de la page vu par l’éditeur de code de Gutenberg.

On remarque que le paragraphe est délimité par une balise de début de bloc Paragraphe (1) et une balise de fin de bloc paragraphe (2).
De même pour l’image délimitée par une balise de début de bloc Image (3) et une balise de fin de bloc Image (4).

Ces balises sont des commentaires HTML, c’est à dire que ce qui est contenu entre « <!- – » et « – -> » n’est pas affiché.
Ces balises sont des repères utilisés par Gutenberg pour permettre la manipulation des blocs.

Le code utilisé par Gutenberg

Voici maintenant le code envoyé au navigateur par WordPress quand un visiteur du site demande l’affichage de la page.

On retrouve le contenu des blocs, mais sans les balises de début et de fin de blocs.
Celles-ci ne servent donc que pour l’édition avec Gutenberg.

Haut de page

Éditeur visuel et éditeur de code

L’éditeur visuel de Gutenberg permet de visualiser la page telle qu’elle apparaîtra sur le site.
L’éditeur de code permet de visualiser le code décrivant le contenu de cette même page.

Pour choisir l’éditeur :

  1. cliquer sur les trois points verticaux en haut et à droite de la page d’édition,
  2. cliquer sur le nom de l’éditeur qu’on veut utiliser.
Choisir son éditeur

Il faut bien comprendre qu’il s’agit de deux visions d’une même page.
Si on déplace un bloc dans l’éditeur visuel, on pourra constater que le code du bloc est déplacé dans l’éditeur de code.

Depuis l’éditeur de code il est possible de revenir rapidement à l’éditeur visuel en cliquant sur l’option Sortir de l’éditeur de code située en haut et à droite de la zone de saisie.

Retour rapide à l’éditeur visuel

Utiliser l’éditeur de code

On peut introduire du code HTML dans l’éditeur de code, puis voir le résultat dans l’éditeur visuel.

Code HTML ajouté via l’éditeur de code
Le code HTML s’affiche dans l’éditeur visuel.

Cette technique peut être utilisée dans des cas où l’éditeur visuel ne permet pas d’obtenir ce qu’on veut.

Voici par exemple comment intégrer une image (pas un bloc image !) dans un bloc paragraphe.

HTML ajouté via l’éditeur de code
Intégration du saut de ligne et de l’image dans le bloc Paragraphe

Erreur dans le code HTML modifié

Si Gutenberg détecte une erreur dans le code HTML modifié, il propose d’accepter une correction ou de transformer le bloc en bloc HTML.

Détection d’une erreur dans le code introduit dans l’éditeur de code

Lorsqu’on demande de résoudre le problème, Gutenberg propose une modification du code (regarder ce qui est surligné).
On peut alors décider de passer en HTML (1) ou d’accepter la modification proposée (2).

Le bloc HTML permet de conserver le code modifié. Même s’il y a une erreur, le code sera transmis au navigateur tel quel.
Ici, l’erreur tient au fait qu’une balise d’ouverture (« <figure> ») a été ajoutée sans que la balise de fermeture correspondante ne soit ajoutée.

Intégration du code modifié dans la page
Correction proposée par Gutenberg

Le mode d’aperçu permet de voir ce que le navigateur « devrait » afficher.
Le conditionnel tient au fait que les navigateurs ne réagissent pas toujours de la même façon quand le HTML n’est pas correct.

Visualisation « comme dans un navigateur »
Haut de page

Le bloc HTML

Un bloc de type HTML permet d’insérer du code HTML dans la page.
Il ne faut pas confondre la visualisation de toute la page en HTML avec l’éditeur de code et l’insertion d’un bloc qui contient du HTML.


Il est possible d’éditer le code dans le bloc : saisie, copie…

Exemple de suppression de caractères dans un bloc HTML

L’option Aperçu permet de visualiser le code HTML tel qu’il s’affichera sur le site (avec la réserve au cas où le code ne respecte pas pleinement les standards).

Affichage du code HTML tel que le ferait un navigateur
Haut de page

Copier le code d’une publication

Il est possible de copier tout le code d’une publication ( article, page ou contenu personnalisé) dans le presse papier.

  1. cliquer sur les trois points verticaux en haut et à droite de la page d’édition,
  2. cliquer sur l’option « Copier tout le contenu »
  3. Gutenberg confirme que la copie s’est bien déroulée.

Le contenu est copié dans le presse papier.

Choisir l’option « Cliquer tout le contenu »
Confirmation de la copie

On peut voir ce qui a été copié en le collant dans un éditeur de texte type Notepad.
On constate alors que c’est le code de la page entière dans la version utilisée par Gutenberg pour gérer les blocs qui a été copié.

Le code copié affiché dans un éditeur de code

Recopier le code dans un nouvel article

  1. Créer un article,
  2. choisir l’éditeur de code,
  3. copier le code (CTRL + C)
Créer un article
Code est copié dans l’éditeur de code

Il est possible de copier directement dans l’éditeur visuel mais vous risquez d’obtenir des effets indésirables.
Par exemple, les images sont automatiquement transformée en blocs Image.
Dans notre exemple précédent, l’image insérée dans le bloc Paragraphe serait remplacée par un bloc Image séparé du bloc Paragraphe.


Articles présentant Gutenberg :

Haut de page