L’édition des contenus avec les blocs

La zone de rédaction de votre publication a évolué. Auparavant elle était constituée d'un bloc unique "à tout faire".  Se mélangeaient du texte, des titres, des images, ou encore des codes courts…
Il s'agit désormais d'une partition pouvant accueillir différents blocs qui sont spécialisés selon le type de contenu à insérer ou selon la mise en forme à appliquer.

Dans l’éditeur moderne, un premier bloc de type paragraphe est automatiquement ajouté à tout nouvel article. Il nous invite à écrire une histoire sur une ligne dans laquelle des icônes se sont glissées de part et d’autre de l’invitation. Alors écrivons pour voir !

Dès que nous commençons à rédiger notre texte, l’interface évolue pour laisser apparaître les différentes commandes qui nous permettront de mettre en forme ce premier paragraphe.

On retrouve alors la tant attendue et rassurante barre d’outils au dessus du bloc ainsi qu’une innovation : l’onglet « Bloc » de la colonne latérale s’active et laisse apparaître des possibilités étendues de personnalisation de la présentation de notre rédaction.

Avant de poursuivre notre étude approfondie du paragraphe, je vous propose de vous livrer une définition du concept de « bloc », on y verra plus clair.

 

Qu’est-ce qu’un bloc ?

Pour faire court et ne pas trop entrer dans la technique : un bloc est une portion structurée, plus ou moins riche, de contenu qu’il est possible d’insérer, d’organiser et d’éditer indépendamment de l’ensemble : le contenu de votre publication. Dit autrement : dans le nouvel éditeur, le contenu d’une publication est constitué de blocs modifiables individuellement.

Le bloc, c’est cette nouvelle unité de contenu qui permet à WordPress de standardiser la manière de rédiger pour les utilisateurs, de présenter pour les thèmes et de coder pour les extensions qui intègrent le contenu de nos publications dans leur périmètre d’action.

 

La barre d’outils du bloc

Tout bloc a la possibilité de proposer une barre d’outils pour aider le rédacteur à le mettre en forme. Cette barre d’outils se positionne par défaut au dessus du bloc.

Un certain nombre de boutons de cette barre d’outils pourront concerner l’apparence globale du bloc comme les préférences d’alignement.

D’autres concerneront votre sélection d’éléments ou caractères comme par exemple une mise en italique ou en gras comme illustré ci-après.

Attardons nous un peu plus sur le bouton d’ajout d’un lien hypertexte qui est un peu plus élaboré que les précédents boutons.

Après avoir sélectionné le texte à lier au lien, nous cliquons sur l’icône en forme de chaîne. Apparaît alors, sous notre texte un champ de formulaire nous permettant de saisir ou coller notre lien ou une ancre de l’article en cours d’édition.

Une fois ce champ renseigné, il s’agit de cliquer sur le bouton immédiatement à droite qui reprend le visuel de la touche « Entrée » de notre clavier. Le lien est désormais affecté au texte et le bouton d’application s’est transformé en bouton de modification (icône en forme de crayon), lequel sur clic, rétablira le champ de formulaire en cas de besoin. Immédiatement à droite de ce bouton, nous pouvons cliquer sur celui en forme de 3 petits points verticaux si nous souhaitons spécifier que ce lien s’ouvrira dans une nouvelle fenêtre du navigateur.

Astuce : vous pouvez faire encore plus vite pour affecter un lien à du texte sélectionné grâce à votre clavier ou à votre souris et si vous avez déjà copier un lien dans votre presse-papier. Tapez simplement sur la combinaison de touches « ctrl + V » ou « cmd + V » de votre clavier (ce sont des raccourcis de la commande coller pour respectivement Microsoft Windows et Apple macOS) ou effectuez un clic droit afin d’afficher le menu contextuel du navigateur et choisissez sa commande « coller »  pour directement appliquer le lien à votre texte.

 

La commande de transformation

Le tout premier bouton de la barre d’outils, au delà d’indiquer que nous éditons un paragraphe à l’aide d’une icône le représentant, vous permet de transformer votre paragraphe en un autre bloc : l’un de ceux qui sont listés dans la fenêtre qui apparaît. Elle est illustrée ci-dessous et pour notre bloc actuel, nous disposons des possibilités de transformation en titre, liste à puces ou numérotée, citation, texte pré-formaté ou couplet.

Beaucoup de blocs ont cette faculté de transformation et c’est bien pratique !

Les commandes d’option du bloc

Le dernier bouton de la barre d’outils du bloc, celui dont l’icône affiche 3 petits points verticaux, vous permet d’afficher les commandes d’option qui sont disponibles pour le bloc en cours d’édition.

En cliquant dessus, vous découvrirez les options disponibles pour votre bloc ainsi que deux commandes pour insérer un nouveau bloc par défaut au dessus ou au dessous du bloc actif.

Pour le moment intéressons nous aux autres options, la première d’entre elles s’intitule « Afficher les réglages du bloc » ou « Masquer les réglages du bloc » selon que l’onglet « Bloc » de la colonne latérale est désactivé ou activé, comme le montre l’animation ci-dessus.

 

Éditer la source du bloc.

L’éditeur moderne est beaucoup plus pratique que l’éditeur classique dans la mesure où il est possible d’afficher et d’éditer le code source de chaque bloc individuellement.

N.B. : si vous ne vous sentez pas à l’aise avec le balisage HTML, je vous recommande d’éviter ce type de manipulation, même si l’éditeur moderne affichera un outil de résolution en cas d’erreur pour vous permettre de retomber sur vos pieds, comme le montre l’animation ci-dessus.Dupliquer le bloc.

Plutôt que de copier le contenu d’un bloc, de créer un nouveau bloc du même type pour y coller le contenu copié, si vous avez besoin de recopier un bloc, vous pouvez utiliser la commande d’option « Dupliquer », comme démontré ci-dessous.

Rendre un bloc réutilisable.

Alors que la duplication ne s’exécute que dans l’article en cours d’édition, la réutilisation peut vous faire gagner du temps si vous avez besoin d’utiliser un même contenu dans plusieurs publications de votre site. Pour éviter de réécrire ce contenu dans chacune des publications, vous pouvez utiliser la commande d’option « Ajouter aux blocs réutilisables » du bloc.

Pour le retrouver plus facilement dans mes autres publications, je lui donne un petit nom « paragrapheRéutilisable » bien à lui.
Dès lors, si je crée un nouvel article, ce petit nom me permettra de le retrouver très facilement pour l’y utiliser.

Notons que toute modification ultérieure apportée au bloc réutilisable se reportera automatiquement dans toutes ses instances au sein des autres publications.

Si dans l’une d’entre elles, j’ai besoin d’y intégrer une modification spécifique comme c’est le cas dans l’animation ci-dessus, j’ai la possibilité de la reconvertir en bloc normal. Les modifications seront alors sans impact sur le bloc réutilisable.

 

Si en revanche je décide de supprimer ce bloc réutilisable, il ne sera plus disponible pour ses instances au sein des autres publications.

 

Gérer les blocs réutilisables

Si vous avez besoin de gérer tous les blocs réutilisables, vous pouvez afficher la liste de ces blocs pour votre site WordPress pour éventuellement importer, exporter, supprimer un bloc ou en supprimer plusieurs à l’aide d’une action groupée.

Pour atteindre cette liste, il suffit de cliquer sur le lien « Gérer tous les blocs réutilisables » soit depuis :

• le compartiment « Réutilisables » du sélecteur de bloc,
• la section « Outils » du menu d’option de la barre de commandes supérieure.

Enlever le bloc.

Pour simplement retirer un bloc de l’article en cours d’édition, il suffit de cliquer sur la commande d’option « Retirer le bloc ».

L’onglet « bloc » de la colonne latérale

Il comprend d’autres possibilités de mise en forme pour notre paragraphe.

Dès que vous commencez à éditer un bloc, cet onglet dédié s’activera et listera les propositions de personnalisation du bloc en cours d’édition.

Pour notre paragraphe, nous pouvons par exemple choisir de le faire ressortir du lot en :

• augmentant la taille de sa police à l’aide de la liste déroulante des tailles (« Petit », « Normal », « Large » ou « Énorme ») ou du champ numérique positionné juste après ;
• activant la lettrine.

Nous pouvons également activer le compartiment des « Réglages de couleur » pour modifier celle du texte et du fond du paragraphe.

Ces « Réglages de couleur » et en particulier les palettes proposées sont personnalisables par les thèmes. Il est donc possible que cette palette présente des couleurs différentes et/ou selon un choix plus limité.

Manipuler les blocs

Maintenant que nous avons vu les différentes commandes disponibles pour personnaliser, dupliquer, réutiliser et retirer un bloc, il nous reste à voir comment ajouter de nouveaux blocs et comment organiser notre combinaison de blocs pour l’article.

Ajouter de nouveaux blocs.

Je peux créer un nouveau bloc paragraphe simplement en tapant sur la touche « Entrée » de mon clavier.
Il est également possible en utilisant la même manipulation (touche « Entrée » du clavier) de se positionner après le point terminant la première phrase du premier paragraphe pour le diviser en deux paragraphes.

Le Sélecteur de types de bloc.

L’affichage de cet outil se déclenche lorsque le bouton « Ajouter un bloc » (icône représentant un + entouré) est cliqué. Il est donc toujours possible d’ajouter un bloc depuis la barre des commandes supérieure, puisque c’est le premier bouton qu’elle affiche !

Le bloc sélectionné depuis cet emplacement sera immédiatement inséré après le dernier bloc actif de l’article ou de la page.

Par ailleurs, le bloc qui est inséré par défaut à l’initialisation de l’article ou qui est généré par l’éditeur moderne en fonction d’actions particulières (ex: la touche « Entrée » du clavier est pressée dans un bloc paragraphe) propose lui aussi de déclencher l’affichage du Sélecteur des types de bloc. Pour cela il suffit de survoler la partie gauche du bloc, comme le montre la capture d’écran suivante.

Une autre action particulière qui génère l’insertion du bloc par défaut est le clic sur le bouton « Ajouter un bloc » qui apparaît au survol du centre de la délimitation supérieure d’un bloc existant.

Dans ce cas, le bloc inséré se positionnera juste au dessus du bloc à partir duquel le bouton d’insertion a été cliqué.

L’insertion d’un nouveau bloc par défaut peut également être déclenchée par l’utilisation des commandes d’option de la barre d’outils d’un bloc existant.

Voici l’affichage de la fenêtre du Sélecteur de types de bloc.

Elle se constitue d’un champ de recherche pour filtrer les types de bloc en fonction du texte saisi et d’un menu accordéon dont les compartiments catégorisent les listes de types de bloc.

Le premier compartiment est particulier dans la mesure où il recense les blocs que vous utilisez fréquemment afin d’accélérer vos ajouts.