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.
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.
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.
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.
É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 :
- cliquer sur les trois points verticaux en haut et à droite de la page d’édition,
- cliquer sur le nom de l’éditeur qu’on veut utiliser.
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.
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.
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.
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.
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.
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.
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…
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).
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.
- cliquer sur les trois points verticaux en haut et à droite de la page d’édition,
- cliquer sur l’option « Copier tout le contenu »
- Gutenberg confirme que la copie s’est bien déroulée.
Le contenu est copié dans le presse papier.
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é.
Recopier le code dans un nouvel article
- Créer un article,
- choisir l’éditeur de code,
- copier le code (CTRL + C)
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 :
