Voici une nouvelle version du thème enfant de TwentySeventeen dont l’objectif initial était d’inclure un dispositif de personnalisation de la page de connexion de WordPress et des e-mails générés par votre site.
Nouvelle version, objectif additionnel ! La 1.2.0 vous propose d’apporter un peu plus de cohérence dans la présentation des blocs de contenu de l’éditeur moderne (projet Gutenberg) et dans l’affichage des différents gabarits de TwentySeventeen lorsque cet éditeur est actif sur votre site.
1 colonne et 0 barre latérale.
Lorsque j’ai conçu le thème de ce site, j’ai pensé que pour profiter au mieux des nouveaux alignements introduits par l’éditeur moderne pour certains de ses blocs (large et pleine page), il fallait :
renoncer à la barre latérale des « widgets » (la « sidebar »),
faire du contenu la colonne unique et centrale des gabarits du thème.
J’applique ces deux points à cette nouvelle version de Vingt DixSept. Si l’extension Gutenberg (extension qui abrite l’éditeur moderne en attendant son intégration au Core de WordPress) est active, alors :
le réglage du nombre de colonnes disponible dans la section des options du thème de l’outil de personnalisation (« customizer ») disparaît et un affichage sur une seule et unique colonne est forcé ;
la barre latérale « sidebar-1 » est neutralisée, reléguant les « widgets » aux autres emplacements prévus par TwentySeventeen (pied de page) ;
l’affichage des gabarits est optimisé pour cette colonne centrale grâce à des règles de style supplémentaires.
1 feuille de style complémentaire pour l’éditeur moderne.
Afin que l’affichage des blocs dans l’interface d’édition ressemble encore plus à celui de la partie frontale de votre site, une nouvelle feuille de style est chargée dans la page d’édition des types de publication.
Grâce à l’ajout d’une dépendance à la police de caractères spécifique de TwentySeventeen et à l’intégration de styles en ligne, elle s’occupe de présenter de manière homogène les titres et les boutons pour les schémas de couleur claire et personnalisé (si vous voulez ajouter le schéma de couleur sombre, contribuez en tirant une requête sur le dépôt GitHub du thème).
1 feuille de style pour l’affichage des blocs en frontal.
Ces nouvelles règles complétées par d’autres styles en ligne permettent de restaurer l’affichage des boutons prévu par TwentySeventeen et ce pour les mêmes schémas de couleur évoqués plus haut.
Elles intégrent également les styles nécessaires aux alignements large et pleine page, sans oublier les styles liés à la palette de couleurs de l’éditeur moderne pour les blocs supportant cette fonctionnalité.
D’autres adaptations PHP ou JavaScript permettent d’optimiser l’affichage des contenus imbriqués (ex: Tweet ou vidéo YouTube).
Si vous avez suivi le meetup WordPress parisien du 28 juin dernier, cette nouvelle version de ce thème enfant vous permettra de voir une application concrète de certains chapitres de ma présentation. En particulier, Vingt DixSept ajoute le support :
d’une palette de couleur cohérente vis à vis du schéma de couleur actif pour le thème (exception faite du schéma foncé) ;
des alignements étendus (large et pleine page) ;
des styles de bloc embarqués par Gutenberg.
Mettez à jour !
Si vous êtes un utilisateur de l’Entrepôt, il devrait vous prévenir de la disponibilité de cette mise à jour et vous permettre de l’appliquer d’un simple clic. Autrement il vous reste la possibilité d’une mise à jour manuelle !
Je suis très heureux de vous présenter ma dernière création en date : une extension de BuddyPress pour équiper vos publications WordPress d’un nouvel espace conversationnel. Cet espace peut compléter ou remplacer celui occupé par les commentaires classiques. Il peut aussi vous servir à créer des pages d’activités publiques ou à accès restreint (réservées aux utilisateurs ayant la capacité de lire des types de publication privée) en complément de celle des activités globales de votre site communautaire.
Configuration requise.
Activités de Publication requiert :
WordPress 4.9.8 ou une version ultérieure,
BuddyPress 3.1.0 ou une version ultérieure,
que le composant des activités de BuddyPress soit actif,
que la Rest API de WordPress soit disponible (ce qui est le cas par défaut).
Installation dans votre WordPress.
Téléchargez le fichier zip de l’extension et utilisez l’interface d’ajout d’extensions de votre WordPress pour la téléverser sur votre serveur. Une fois en place, il ne vous restera plus qu’à l’activer comme toute extension WordPress.
Mise en place de conversations pour une publication.
Par défaut les publications de type page ou article supportent les conversations. Si vous souhaitez ajouter ce support à d’autres types de publication, il s’agira de demander à votre développeur (qui peut être vous, bien entendu !) d’utiliser cet exemple de code une fois le type de publication initialisé :
Si vous vous rendez sur l’écran d’édition de la publication de votre choix, vous disposerez d’une nouvelle barre latérale pour lui intégrer des conversations, comme illustré ci-dessous :
Ah j’oubliais ! Certain·e·s d’entre vous n’utilisent peut-être pas encore l’éditeur moderne de WordPress (Gutenberg), dans ce cas, vous retrouverez une bonne vieille « meta-box » dans votre éditeur classique pour activer l’espace pour votre page ou votre article.
C’est tout ce que vous avez à faire pour profiter de ce nouvel espace conversationnel. L’extension s’adaptera à votre choix quant à l’utilisation des commentaires pour votre publication en ajoutant éventuellement une barre d’onglets pour pouvoir basculer des commentaires aux conversations et vice et versa.
Converser dans une publication.
La consultation et l’ajout de conversations nécessitent que l’utilisateur soit authentifié sur le site. Si ce n’est pas le cas, un message d’information comprenant un lien vers le formulaire de connexion de votre WordPress sera présenté à l’utilisateur.
Une fois connecté, l’utilisateur pourra participer à la conversation d’un article, d’une page ou de tout autre type de publication supportant les conversations.
Lorsque l’article ou la page sont publics, la conversation s’affichera à la fois dans l’espace conversationnel de l’article, dans la liste des activités globales de la communauté et dans le profil public de l’auteur du message. Lorsque la publication est privée, seuls les utilisateurs ayant la capacité d’y accéder pourront l’enrichir de leurs conversations. Par exemple, les administrateurs et les éditeurs pourront converser dans une page privée à l’abri des regards des autres utilisateurs. Leurs échanges ne seront pas repris dans les activités globales de la communauté et ils n’apparaîtrons que dans leur profil « privé » (c’est à dire le profil vu par eux-même ou par l’administrateur).
La modération des conversations
Pour rester cohérent avec la fonctionnalité des commentaires de WordPress, l’administrateur du site pourra facilement modérer les conversations grâce au lien « Modifier ». Cette modération se repose sur ce que prévoit BuddyPress quant aux activités publiées par les membres de la communauté, c’est à dire à posteriori.
En cliquant sur le lien en question soit depuis la publication (1), soit depuis la page des activités globales (2), l’administrateur sera dirigé vers l’écran d’administration d’une activité BuddyPress. Depuis cette zone, il pourra modifier le contenu, mettre la conversation dans les pourriels ou la supprimer complètement.
Adaptez la présentation des conversations à votre thème.
Toutes les captures d’écran intégrées à cet article ont été prises en ayant le thème Vingt-DixSept activé sur le site (mon thème enfant de TwentySeventeen). Il est probable qu’étant donné le nombre colossal de thèmes gratuits ou payants qui existent, l’affichage de l’espace conversationnel soit à améliorer pour votre site. Si tel est le cas, vous pourrez très simplement remplacer la feuille de style chargée par l’extension par une feuille de style issue de votre thème en la positionnant dans un sous répertoire particulier dont voici le chemin :
Pour les prochaines versions de l’extension, étant donné qu’elle intégrera l’Entrepôt : les mises à jour seront semi-automatiques pour ses fidèles. Pour les autres : il sera toujours possible de procéder à la mano
Débridez les Activités de Publication !
Cette extension est ma réponse à une demande effectuée depuis le formulaire de contact de ce site par l’un·e d’entre vous. Vous noterez que toutes les fonctionnalités liées aux activités de BuddyPress ne seront pas disponibles pour les activités de publication dans cette première version. Il s’agit pour moi de vérifier que ce besoin est partagé par une majorité avant d’envisager d’implémenter la mise en favoris, les réponses imbriquées, le chargement dynamique des nouvelles activités publiées, etc..
Il n’appartient qu’à vous de me donner envie de poursuivre le développement de cette extension en me payant une bière par exemple, ou en devenant un « Stargazer » de son répertoire GitHub ou encore en y contribuant directement à l’aide de « pull requests ».
De mon côté, si j’ai investi gracieusement de mon temps sur la création de cette extension c’était aussi pour :
tester la modularité et l’extensibilité du JavaScript utilisé par le nouvel ensemble de gabarits de BuddyPress (BP Nouveau a été introduit dans la version 3.0.0 de l’extension communautaire),
Le 2 août dernier la version 4.9.8 de WordPress a été publiée avec comme fonctionnalité phare l’ajout d’un message informatif au sujet de l’éditeur moderne du projet Gutenberg au sein du tableau de bord de l’administration. Sans surprise, ce message confirme que l’écran d’édition des publications utilisera par défaut l’éditeur moderne dés la prochaine version majeure de WordPress (5.0). Il est plus que temps de nous familiariser concrètement avec cette formidable innovation que vous ayez fait le choix du classicisme ou de la modernité.
Pour accompagner vos premiers pas, je vous propose de suivre l’étiquette TuttoGut (Tout Bon ) de ce site : elle rassemblera une série d’articles documentant l’utilisation de votre prochaine interface de rédaction dans WordPress. Mon premier TuttoGut à paraître ce dimanche (le 12/08) vous présentera en détails ce qui entoure la partie centrale et rédactionnelle. Pour chacun de ces articles, je réserverai un moment pour comparer interface moderne et classique.
L’autre raison de cette série d’articles
Fin 2017, à l’occasion de cet autre article, j’avais partagé avec vous tout l’intérêt que nous avons à contribuer aux projets Open Source et j’avais consacré toute une partie sur le projet Gutenberg en mettant notamment l’accent sur l’importance de l’implication communautaire. Sur ce point précis :
WP Paris a organisé deux rencontres dédiées à Gutenberg auxquelles 70 et 80 personnes ont successivement participé. Bien entendu, d’autres rencontres locales en dehors de Paris ont également traité le sujet.
Lors du WordCamp Paris 2018, qui a accueilli un peu plus de 270 personnes, Riad, un des membres de l’équipe de développement du projet Gutenberg, a présenté une conférence et animé un atelier sur l’éditeur moderne.
L’équipe du site fr.wordpress.org et celle de la traduction française font un formidable travail en traduisant de manière très réactive les itérations (20 entre fin 2017 et ce jour) de Gutenberg et sa page de présentation / démonstration.
Or s’agissant du contenu français disponible en ligne : si des articles de présentation ou de revue ont été publiés sur certains sites ou blogs spécialisés, je regrette que mon espoir de lire des tutoriels ou des astuces quant à l’utilisation concrète de l’éditeur moderne dans le widget du tableau de bord de l’administration WordPress ou plus globalement sur Internet n’ait pas été satisfait à ce jour.
Voilà pourquoi, je me lance dimanche ! Cela donnera peut-être envie à d’autres de proposer leurs magnifiques contenus dans ce domaine.
Comme annoncé dans mon article introductif de l’étiquette TuttoGut, étiquette qui regroupera des tutoriels sur l’utilisation de l’éditeur moderne du projet Gutenberg de WordPress, je vous propose, pour démarrer, de découvrir de manière approfondie le prochain écran d’édition (mise en place planifiée pour la version 5.0) de vos publications WordPress.
Dans ce premier tutoriel, j’écarte volontairement la zone de rédaction pour me concentrer sur tout ce qui l’entoure. C’est promis, nous parlerons dés notre tutoriel suivant des blocs : l’unité de contenu introduite par le projet Gutenberg sur laquelle se base la nouvelle expérience de rédaction proposée pour nos publications.
Notez bien que :
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 3.5.0 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
Voici les deux parties des écrans d’édition qui entourent les zones de rédaction telles qu’elles s’affichent par défaut dans votre administration WordPress. Notons déjà deux similitudes, tous deux proposent :
une zone pour définir le titre de votre publication,
une colonne latérale positionnée sur la droite pour définir d’autres attributs de la publication (N.B. : pour améliorer la visibilité des captures d’écran, j’ai minimisé les 4 dernières boîtes de métadonnées – metaboxes – de l’éditeur classique).
L’éditeur moderne se démarque en insérant une nouvelle barre de commandes au dessus de ces deux zones communes.
La barre de commandes supérieure.
Un de ses intérêts est de rester toujours visible quelque soit la longueur de notre publication : ce qui simplifie et accélère notre accès à ces commandes.
Par différence, l’éditeur classique en fonction de cette longueur peut nécessiter un scroll plus ou moins conséquent pour accéder aux commandes d’enregistrement, par exemple.
La partie alignée à gauche concerne les actions en relation avec les blocs de l’éditeur moderne.
Je reviendrai sur les commandes qu’actionnent les icônes présentant successivement un + entouré, des flèches arrondies et un i entouré dés le prochain TuttoGut.
La partie alignée à droite concerne les actions en relation avec :
l’enregistrement et la prévisualisation de votre publication (boutons désactivés) ;
l’affichage/le masquage de la colonne latérale évoquée plus haut (icône en forme d’écrou) ;
le type d’éditeur à utiliser, nos préférences quant à l’affichage de certains éléments de l’interface ainsi que les outils supplémentaires disponibles (icône en forme de 3 petits points verticaux).
S’agissant de ce 3ème point,
voici l’évolution de l’état de cette barre de commandes lorsqu’on clique sur les 3 petits points verticaux.
La première section de la fenêtre qui a surgit et qui s’intitule « Éditeur » permet d’alterner entre l’affichage riche et celui du code source de la zone de rédaction.
La deuxième section dont l’intitulé est « Réglages » vous permet de fixer la barre d’outils du bloc en cours d’édition dans la barre de commandes supérieure après l’icône présentant un i entouré (je reviendrai sur ce réglage lors du prochain TuttoGut). Si vous cliquez sur le lien pour afficher les astuces, vous découvrirez une succession de conseils pour vous assister dans votre prise en main de l’interface comme illustré ci-dessous.
La troisième partie, intitulée outils (qui n’en contient qu’un pour le moment) vous permet de copier le code source du contenu de la zone de rédaction.
S’agissant du point 2,
au delà de cet affichage/masquage qu’on peut utiliser pour se concentrer sur la zone de rédaction de l’éditeur, notez que certaines extensions peuvent créer d’autres colonnes latérales comme par exemple celle que j’ai dernièrement publiée. Dans ce cas, les boutons correspondants se positionnent à droite de celui de la colonne latérale principale.
Concernant le point 1,
à partir du moment où vous saisissez un titre ou activez le bloc par défaut de la zone de rédaction, l’état de cette partie de la barre de commandes supérieure évolue pour rendre disponible les boutons d’enregistrement et de prévisualisation.
Tout comme l’éditeur classique, l’éditeur moderne effectuera à intervalles réguliers des enregistrements automatiques de votre contenu jusqu’à sa publication finale. Aussi, l’état du bouton d’enregistrement en mode brouillon (et parfois des deux autres) reflétera cet automatisme comme illustré dans l’animation ci-dessous.
A chaque fois que vous cliquerez sur le bouton “Enregistrer le brouillon”, une révision sera créée pour votre type de publication (dans le cas actuel : un article), si toutefois ce type supporte les révisions.
En cliquant sur bouton de prévisualisation, une nouvelle fenêtre s’ouvrira pour vous permettre de consulter vos progrès dans la rédaction de votre article sur la partie frontale de votre site.
Le bouton « Publication… »
Lorsque votre article sera terminé, vous cliquerez sur le bouton « Publication… » et de nouveau l’état des boutons d’action d’enregistrement et de prévisualisation évoluera comme illustré dans l’animation ci-après.
La colonne latérale est alors remplacée par une colonne de confirmation de la visibilité et de la date de publication de votre article. Si tout vous convient, vous pouvez directement cliquer sur le bouton « Publier » : le bon résultat de l’opération vous sera indiqué par une note d’information sur fond vert logée sous la barre de commandes supérieure et s’accompagnera de boutons pour afficher l’article publié ou copier son URL dans la colonne latérale.
Autrement, vous pouvez ajuster la visibilité selon les trois niveaux disponibles dans WordPress : « Public », « Privé » ou « Protégé par mot de passe ».
Il s’agit pour cela d’alternativement cliquer sur le lien de la visibilité actuelle ou sur la pointe de flèche noire à droite de l’élément « Visibilité » du menu accordéon.
Vous pouvez aussi choisir de retarder la date de publication de votre article. En cliquant sur le lien attaché à la date ou sur la pointe de flèche noire de l’élément « Publier » de ce même menu accordéon.
Un calendrier et deux champs texte seront alors affichés pour vous permettre d’ajuster cette date selon vos préférences.
Ouch ! Vous avez été trop vite : votre article est publié or vous avez encore besoin de temps pour le terminer. Pas d’inquiétude vous pouvez, comme c’est le cas pour l’éditeur classique, revenir en mode brouillon en cliquant sur le bouton « Enregistrer en brouillon » comme démontré par l’animation suivante.
La zone de titre
En cliquant sur le texte « Ajout de titre » juste en dessous de la barre de commandes supérieure de l’éditeur moderne, vous activez le champ vous permettant de définir le titre de votre publication. Le titre identifie votre publication dans différentes zones de votre WordPress et est également utilisé lorsque le réglage de vos permaliens est différent de la valeur par défaut ( ?p=1 pour l’article ajouté au moment de l’installation de WordPress par exemple).
Lorsque votre article a été enregistré au moins une fois en brouillon par vos soins, l’activation du champ texte du titre fera apparaître juste au dessus le contrôle pour modifier ce permalien comme le montre l’animation ci-dessus.
Ainsi la seule différence par rapport à l’éditeur classique est la position de ce champ d’ajustement du permalien par rapport au titre et le fait qu’il soit masqué dans son état initial.
La colonne latérale
Avec la zone de titre, la colonne latérale de l’éditeur moderne est la deuxième partie de l’écran d’édition qui est similaire à celle de l’éditeur classique. Si on y regarde de plus prêt, on peut toutefois noté un certain nombre de différences.
D’abord la colonne latérale de l’éditeur moderne intègre une navigation avec deux onglets. Le premier intitulé « Document » permet de définir les attributs généraux de la publication alors que le second proposera des réglages additionnels ou avancés pour le bloc de la zone de rédaction en cours d’édition (nous reparlerons de l’onglet « Bloc » dans notre prochain TuttoGut).
Ensuite, s’agissant de la définition des attributs généraux, on voit que, par défaut, l’éditeur moderne liste tous les attributs qu’il est possible d’éditer dans un contrôle accordéon alors que l’éditeur classique masque certaines de ses boîtes de métadonnées pour ne garder que celles qui permettent de définir un format et d’attacher des catégories et/ou des étiquettes ainsi que celle qui vous permet de définir l’image mise en avant si votre type de publication et votre thème le supportent.
Dans l’éditeur classique, il est possible de personnaliser l’interface d’édition. D’abord, depuis l’onglet des « Options de l’écran » vous pouvez choisir les boîtes de métadonnées à afficher à l’écran. Ensuite, vous pouvez indiquer votre préférence quant à « l’arrangement » de l’écran (1 ou 2 colonnes). Vous pouvez également réordonner le positionnement des boîtes de métadonnées en les glissant-déposant et ce sur l’une ou l’autre des colonnes. Je peux par exemple déplacer la boîte des « Catégories » au dessus de celle qui contient le bouton « Publier ».
PS: J’ai alerté l’équipe de traduction française que le terme « Blocs » qui est utilisé pour décrire la liste des boîtes de métadonnées dans la zone des « Options de l’écran » pouvait prêter à confusion par rapport aux blocs de l’éditeur moderne.
Dans le contrôle accordéon de l’éditeur moderne, le rédacteur ne peut pas réordonner les compartiments ni même les masquer. Personnellement, pour devoir régulièrement rappeler aux rédacteurs de sites l’existence de cet onglet des « Options de l’écran » pour faire apparaître les réglages des commentaires ou de l’extrait de la publication par exemple, j’ai le sentiment que le choix d’afficher tous les attributs généraux de la publication et ce au même endroit pour tout utilisateur évite des confusions (et me fera gagner du temps !).
Les compartiments de la colonne latérale du document.
Maintenant que j’ai introduit la colonne latérale, je vous propose de passer en revue chacun des compartiments de son onglet « Document ». Nous verrons notamment que pour certains attributs le réglage s’effectue dans un ensemble qui diffère de celui de l’éditeur classique.
État et visibilité
Nous avons déjà vu plus tôt les réglages des deux premiers attributs. En effet visibilité et date de publication sont repris dans la colonne de confirmation de la publication qui remplace celle-ci lorsque le bouton « Publication » est cliqué. Les deux contrôles fonctionnent identiquement à ce que j’ai décrit alors : une fenêtre surgit pour choisir entre une visibilité publique, privée ou protégée par mot de passe et un calendrier permet de spécifier la date de publication voire de l’antidater ou de la planifier.
Ensuite, lorsque vous rédigerez des articles, vous disposerez de deux contrôles supplémentaires par rapport aux pages. La présence du premier dépendra aussi du support de votre thème pour les formats d’article. Les différences par rapport à ce que propose l’éditeur classique pour ces deux attributs sont notables :
là où l’éditeur classique traite les formats d’article dans une boîte de métadonnées dédiée et ce de manière relativement imposante, l’éditeur moderne opte lui pour une liste déroulante qui occupe beaucoup moins d’espace ;
l’éditeur moderne montre clairement qu’un article peut être positionné et maintenu en haut de la « pile d’articles » de la première page de cette pile grâce à la case à cocher « Épingler à la page d’accueil ». Ce réglage est beaucoup moins visible dans l’éditeur classique puisqu’il s’agit de modifier la visibilité de l’article pour découvrir cette même case à cocher en option de la visibilité publique.
Au sujet de la case à cocher « En attente de relecture », lorsqu’active, elle indique que l’article a été soumis par un contributeur (le rôle) ou permet de solliciter une relecture par un des validateurs (rôles éditeur et administrateur). Pour maintenir une contribution dans cet état après une modification du texte ou pour demander une relecture, il s’agit de cliquer sur le bouton « Enregistrer le brouillon ». En effet, si un validateur clique sur le bouton de publication, comme son nom l’indique, ça publie l’article.
Enfin, de la même manière que l’éditeur classique propose un lien pour mettre l’article à la corbeille, l’éditeur moderne intègre dans ce compartiment le lien en question.
N.B. : Ce compartiment est le seul qui est par défaut déplié. Pour déplier un ou plusieurs autres compartiments, il s’agit de cliquer sur leur libellé.
Révisions
Ce compartiment est simplement un lien vers l’éditeur de révisions de WordPress qui comporte une indication quant aux nombres de révisions effectuées. Il peut vous permettre de revenir à une version précédente de votre article.
À la différence de l’éditeur classique, L’éditeur moderne n’ajoute pas d’informations plus détaillées au sujet de ces révisions (auteurs et dates).
Catégories
La sélection et l’ajout des catégories de l’article s’effectue sensiblement de manière identique par rapport à l’éditeur classique. La première opération s’effectue en activant les cases à cocher désirée. Pour la seconde, le clic sur le lien « Ajouter une nouvelle catégorie » révèlera un mini formulaire pour créer la catégorie et éventuellement la rattacher à une catégorie parente. Les catégories, tout comme les étiquettes sont des attributs spécifiques aux articles : les pages ne les intègrent pas.
Étiquettes
Le contrôle pour définir les étiquettes de l’article se présente comme un champ texte classique. Lorsque nous commençons à taper notre étiquette, au bout de deux caractères l’éditeur moderne vous proposera des choix dynamiquement par rapport aux étiquettes existantes. Vous pouvez sélectionner parmi ces choix ou poursuivre la rédaction de votre nouvelle étiquette avant d’ajouter une virgule pour démarrer la rédaction d’une autre.
A la différence de l’éditeur classique, il n’est pas prévu d’afficher la liste des étiquettes les plus utilisées du site.
Image mise en avant
Cette image se règle quasiment de la même manière dans l’éditeur moderne que dans l’éditeur classique : en cliquant sur « Définir l’image mise en avant », la fenêtre de l’éditeur de media de WordPress s’affiche pour vous permettre de sélectionner une image existante ou en téléverser une nouvelle. Une fois l’image choisie, une version miniaturisée est insérée dans le compartiment. Vous pouvez modifier ou supprimer cette image grâce au bouton ou aux liens affichés sous l’image et dans l’image elle-même.
Extrait
Le compartiment pour l’extrait n’occupe pas la même largeur que dans l’éditeur classique puisqu’il est situé dans la colonne latérale. Dans l’éditeur classique, il est situé dans une boîte de métadonnées sous la zone de rédaction.
Discussion
Le compartiment regroupe à la fois les réglages quant aux trackbacks et aux commentaires. Par différence, dans l’éditeur classique ces deux réglages ont leurs propres boîtes de métadonnées dédiées.
Attributs de page
Enfin, pour le cas plus spécifique des pages, un dernier compartiment ferme la marche. Il vous servira à définir le modèle de gabarit à utiliser, si la page est à rattacher à une autre page (alors parente) et à préciser son ordre dans les listes de pages.
Attributs additionnels
Les champs personnalisés.
Comme vous le savez sûrement, l’éditeur classique comporte une boîte de métadonnées pour ajouter des métadonnées de manière libre. L’éditeur moderne du projet Gutenberg ne supporte pas cette fonctionnalité nativement, en revanche il existe déjà une extension qui vous propose de maintenir cette fonctionnalité dans cet éditeur : il s’agit de Custom Fields Gutenberg, elle est disponible sur le répertoire officiel des extensions WordPress.
Les boîtes de métadonnées d’extension.
Dans le même registre, mais de manière beaucoup plus encadrée, certaines extensions ajoutent des boîtes de métadonnées spécifiques à l’éditeur classique. Aussi afin de fournir à ces extensions une compatibilité arrière, le projet Gutenberg intègre un mécanisme pour les injecter dans son éditeur moderne. Vous devriez donc retrouver tous vos réglages dans cet éditeur.
Par exemple, la boîte de métadonnées qui s’intitule « Détails du camp » pour cette extension est bien injectée sous la zone de rédaction de l’éditeur moderne.
Adaptations de l’interface aux rôles
Comme je l’indiquais en introduction, toutes les captures d’écran ont été réalisées en étant connecté en tant qu’Administrateur. Or tout comme l’éditeur classique, l’éditeur moderne s’adapte au rôle de la personne connectée.
Lorsqu’un Contributeur cliquera sur le bouton de publication de la barre de commandes supérieur, la colonne de confirmation lui indiquera que son article sera en attente de relecture par un validateur.
Par ailleurs, le lien pour ajouter des catégories d’article ne sera pas affiché pour ce contributeur mais aussi pour l’utilisateur ayant un rôle d’Auteur.
Voici qui termine le premier numéro de la série TuttoGut ! Je vous donne rendez-vous dans le courant de la semaine prochaine pour tout vous dire sur la manipulation des blocs dans l’éditeur du projet Gutenberg de WordPress en prenant l’exemple du bloc par défaut (le paragraphe). Cela nous permettra de passer en revue tous les autres blocs au fur et à mesure en nous concentrant sur leurs spécificités.
Si vous avez des remarques ou des questions liées à l’utilisation du prochain écran d’édition des articles et des pages de WordPress, la zone de commentaires ci-dessous est à votre disposition.
Après avoir étudié ensemble le prochain écran d’administration moderne pour l’édition des publications en écartant sa zone de rédaction, ce deuxième TuttoGut se concentre précisément sur cette zone. Afin de bien appréhender les évolutions apportées par le projet Gutenberg quant à notre expérience de rédacteur de contenus dans WordPress, ce deuxième tutoriel disséquera majoritairement le bloc par défaut de l’éditeur moderne : le paragraphe.
Je vois trois bonnes raisons de s’intéresser d’abord au bloc du paragraphe :
c’est le bloc que vous utiliserez le plus,
c’est un bloc à partir duquel vous pouvez générer d’autre blocs,
c’est un bon exemple pour comprendre les manipulations possibles et les commandes communes à tous les blocs.
Notez bien que :
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 3.6 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
Voici les deux zones de rédaction telles qu’elles s’affichent par défaut dans votre administration WordPress.
Le contraste est saisissant et peut même s’avérer déstabilisant pour certain·e·s d’entre nous dans la mesure où nos nombreuses années passées à utiliser des logiciels de traitement de texte (Microsoft Word, Google Doc, Apple Pages, Apache OpenOffice writer…) nous ont conditionné à attendre d’un outil visuel de rédaction de contenus qu’il intègre nécessairement une barre d’outils pour appliquer des formats à un ou plusieurs caractères inséré/s dans une page blanche. L’éditeur classique est rassurant de ce point de vue.
Dans l’éditeur moderne, un premier bloc de type paragraphe est automatiquement ajouté à tout nouvel article et 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 : pour le projet Gutenberg, 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.
Pour illustrer encore plus la différence d’approche entre les deux éditeurs je vous propose d’ouvrir un contenu créé depuis l’éditeur classique dans l’éditeur moderne.
C’est ce que j’ai fait dans l’animation ci-dessus. On s’aperçoit alors que d’une rédaction monolithique dans l’éditeur classique, le projet Gutenberg nous fait passer à une rédaction beaucoup plus granulaire et organisée en blocs individualisés plus facilement manipulables.
Ensuite, nous pouvons être sereins sur un certain nombre de points :
les contenus créés dans l’éditeur classique ne seront pas altérés lorsqu’édités dans l’éditeur moderne. Ils deviennent tout naturellement des blocs de type « Classique » ;
il est tout à fait possible de continuer à modifier ces blocs classique depuis l’éditeur moderne.
grâce à la commande « Convertir en blocs » du contrôle d’option des blocs, il est très facile de convertir des textes non structurés en blocs structurés.
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.
Comme le montre l’animation ci-dessus, vous pouvez modifier ce positionnement et choisir qu’elle soit « épinglée » à la barre de commandes supérieure que nous avons découverte dans notre précédent TuttoGut. Pour cela, il suffit de cliquer sur l’icône présentant 3 petits points verticaux et de cliquer sur la section correspondante du menu « Réglages » de la fenêtre qui apparaît.
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.
Il nous reste un dernier bouton à voir : le tout premier de la barre d’outils ! En effet, au delà d’indiquer que nous éditons un paragraphe à l’aide d’une icône le représentant, ce bouton 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é, exergue ou couplet.
Beaucoup de blocs ont cette faculté de transformation et c’est bien pratique !
L’onglet « bloc » de la colonne latérale
Nous avions déjà évoqué la colonne latérale de l’écran d’édition moderne lors de notre précédent tutoriel à l’occasion de notre étude de son onglet « Document ». Cette fois-ci, nous allons nous intéressé à son deuxième onglet car 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 des boutons de taille (« S », « M », « L » ou « XL »), de la glissière de tailles (le « Range Control ») ou tout simplement du champ numérique ;
activant la lettrine.
C’est ce que j’ai accompli dans l’animation précédente. Nous pouvons également activer le compartiment des « Réglages de couleur » pour modifier celle du texte et du fond du paragraphe.
Dans l’illustration ci-dessus, je commence par changer la couleur d’arrière plan pour un « gris très foncé ». Le texte devient alors difficilement lisible et l’éditeur moderne m’en averti en ajoutant un message d’information sous la palette des couleurs du texte. Pour modifier cette couleur de texte, comme aucune de celles proposées par la palette ne me convient, je préfère utiliser le « Sélecteur de couleur personnalisée ». En choisissant le code hexadécimal du blanc (#FFFFFF), le message d’information disparaît, le contraste entre fond et texte étant désormais suffisamment marqué.
Je pense que vous aurez compris que les liens « Effacer » situés à proximité de chacune des palettes permettent de réinitialiser leurs personnalisations de couleur respectives.
N.B. : j’attire votre attention sur le fait que 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é (c’est notamment ce que fait ce thème enfant de TwentySeventeen). Il est également possible que le « Sélecteur de couleur personnalisée » soit désactivé par le thème.
De plus, vous pouvez appliquer les règles de style que votre thème prévoit pour certaines de ses classes CSS en ajoutant un ou plusieurs noms d’entre elles dans le champ texte du compartiment « Avancé ».
Astuce : Si mes dernières modifications par rapport à la taille, les couleurs et la classe CSS additionnelle ne me conviennent plus et que je souhaite revenir à la présentation de mon paragraphe qui les précédait, les boutons présentant des flèches arrondies dans la partie alignée à gauche de la barre des commandes supérieure peuvent me faire gagner du temps.
En effet, au lieu de tenter de me rappeler quels étaient les précédents réglages, il me suffit de cliquer sur la première flèche qui me permet de défaire ma dernière action. Si j’ai cliqué dessus de trop nombreuses fois, en cliquant sur la deuxième flèche, je rétablis une action enlevée à tord.
Les commandes d’option du bloc
Si vous survolez le haut de la partie droite du cadre délimitant votre bloc, vous verrez apparaître un bouton dont l’icône affiche 3 petits points verticaux.
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. Je reparle de ces deux commandes dans le prochain chapitre.
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 (qui requiert d’afficher l’intégralité du code source de l’article et de rechercher le paragraphe qui nécessite la modification à effectuer) dans la mesure où il est possible d’afficher et d’éditer le code source de chaque bloc individuellement. Dans l’exemple ci-après, pour styler le terme « programmation » de mon texte en code, vu que je ne parviens jamais à faire des « backticks » depuis un PC équipé de Microsoft Windows, j’utilise cette possibilité.
Une fois mon balisage code ajouté à la source du bloc, il ne me reste plus qu’à utiliser la commande d’option « Modifier visuellement » pour retrouver l’éditeur visuel du bloc.
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 le message de la capture d’écran insérée ci-dessous en cas d’erreur pour vous permettre de retomber sur vos pieds.
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. C’est ce que je fais ci-dessous.
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 (Nous verrons très rapidement comment ajouter des blocs). 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, comme illustré ci-dessus, il ne sera plus disponible pour ses instances au sein des autres publications.
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 ».
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.
Grâce à l’exemple du bloc paragraphe et du bloc réutilisable que nous avons créé plus tôt, nous serons en mesure de passer en revue toutes les manipulations qui sont communes à tous les blocs.
Ajouter de nouveaux blocs.
Démarrons la rédaction d’un nouvel article qui s’intitule « À propos des blocs ». Une fois le titre renseigné, je peux directement utiliser le bloc par défaut pour ajouter mon premier paragraphe. À l’issue de cette rédaction, tout comme c’est le cas pour l’éditeur classique, 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.
J’enregistre en brouillon cet article et j’y reviens quelques minutes plus tard. Cette fois-ci, je n’ai pas d’ajout automatique du bloc par défaut sous mes trois paragraphes et donc, si je souhaite poursuivre ma rédaction, je peux :
soit me positionner à la fin du texte d’un des blocs paragraphe pour déclencher l’ajout d’un nouveau bloc à l’aide de la touche « Entrée » du clavier,
soit utiliser le Sélecteur de types de bloc.
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.
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 « Insérer un bloc » qui apparaît au survol du centre de la délimitation supérieure d’un bloc existant, comme le montre l’animation ci-dessous.
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 d’un bloc existant.
Comme nous l’avons vu dans le chapitre précédent et le montre l’animation ci-dessus, deux options spécifiques permettent de l’injecter au dessus ou en dessous du bloc actif.
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.
Nous retrouverons le paragraphe dans la catégorie des blocs communs. Dans la poursuite de notre exemple, je vais insérer un autre type de bloc : le réutilisable que nous avons créé plus tôt. Je vous laisse deviner dans quelle catégorie il se trouve (Indice : c’est la seule qui est précédée d’une icône).
Rassemblons toutes les pièces du puzzle !
Je commence mon survol du premier paragraphe de mon article car je souhaite insérer juste au dessus mon bloc réutilisable. Le bouton d’insertion d’un bloc apparaît lorsque j’atteins le centre de sa délimitation supérieure, je clique dessus pour insérer un bloc défaut (pour rappel, il s’agit d’un bloc paragraphe). Je redécolle pour survoler la partie gauche du bloc inséré et faire apparaître le bouton « Ajouter un bloc », nouveau clic : la fenêtre du sélecteur de types de bloc surgit. J’active le compartiment « Réutilisable » et je retrouve celui que j’ai baptisé avec beaucoup d’inspiration : « paragrapheRéutilisable ». Son icône m’informe qu’il se base sur un paragraphe et si je me lance dans un survol de son bouton, une nouvelle fenêtre s’affichera sur la droite pour me proposer un aperçu de mon bloc réutilisable. C’est bien lui, il n’y a plus de doute possible ! Je clique alors sur son bouton pour l’ajouter au dessus du premier paragraphe de mon article. Ci-dessous : la même chose en images !
Les raccourcis de bloc et la commande d’autocomplétion.
Voici deux derniers outils pour nous permettre d’accélérer l’insertion de blocs au fil de notre rédaction.
Le premier se matérialise par 3 boutons positionnés sur la droite du bloc par défaut et dont les icônes reprennent les 3 derniers types de bloc insérés à l’article. Il suffit de cliquer sur l’un d’entre eux pour remplacer le bloc par défaut par le type de bloc correspondant. Ci-dessous, voici un exemple d’utilisation avec le bloc réutilisable que nous venons juste d’insérer.
Pour le deuxième outil, il suffira de taper le caractère / suivi des premières lettres de votre type de bloc pour lancer l’autocomplétion, comme illustré ci-après.
Réordonner les blocs.
Lors de votre rédaction, vous pouvez avoir besoin de modifier l’enchaînement de vos blocs. Dans l’éditeur classique cela peut se révéler fastidieux car il s’agit de réaliser une sélection de ce que vous voulez déplacer, de la couper et de la coller à l’endroit désiré. Un des avantages de la granularité du contenu de l’éditeur moderne est qu’il est beaucoup plus rapide et précis d’y déplacer des portions de contenu.
En effet, en survolant la partie gauche de l’un des blocs existants de votre article que vous souhaitez déplacer, vous découvrirez deux nouveaux boutons pour repositionner votre bloc au-dessus ou en dessous du bloc le précédant ou le suivant. La preuve en images !
Si vous avez plusieurs blocs mitoyens à réordonner, c’est également possible ! Il suffit pour cela de survoler la partie gauche du premier bloc jusqu’à ce que le curseur se transforme en main. Cliquez alors une seule fois, puis en maintenant pressée la touche « Shift » de votre clavier, utilisez la flèche haut ou bas du pavé directionnel pour sélectionner vos autres blocs. Une fois votre sélection effectuée, il suffit d’utiliser les boutons de déplacement sur la partie gauche du premier bloc. L’animation ci-après peut en attester !
Enfin il est également possible d’utiliser le glisser-déposer pour déplacer un bloc. Pour cela, survolez la partie gauche du bloc à déplacer jusqu’à ce que le curseur se transforme en main. Cliquez et maintenez cliqué avant d’opérer votre déplacement jusqu’à l’endroit désiré.
Comme le montre l’animation ci-dessus, une barre verticale bleue vous informera de la position à laquelle s’intercalera votre bloc.
A l’issue de ce deuxième tutoriel de la sérieTuttoGut, nous avons vu comment ajouter, personnaliser, dupliquer, réutiliser, retirer ou réordonner des blocs à l’aide de l’exemple du type de bloc paragraphe. Toutes ces actions sont disponibles pour les autres types de bloc, les possibilités de personnalisation s’adaptant, bien entendu, à chacun d’entre eux.
Lors de nos prochains tutoriels, nous allons passer en revue les autres types de bloc à raison d’une catégorie de de types de bloc par tutoriel. On a déjà commencé celle des Blocs communs avec cette étude du type paragraphe, nous la terminerons à l’occasion de notre numéro trois de la série TuttoGut.
Le deuxième tutoriel de notre série TuttoGut est une étape importante que je vous conseille de franchir avant de vous plonger dans ce troisième TuttoGut.
En effet, si l’objectif de ce nouveau numéro est de passer en revue la quasi-totalité des blocs de la catégorie des « Blocs communs » de l’éditeur moderne, je vais partir du postulat que vous avez intégré un certain nombre d’éléments d’interface comme la barre d’outils d’un bloc ou encore de commandes de bloc comme par exemple la manière d’afficher le sélecteur de types de bloc. Par ailleurs, j’ai écris « quasi-totalité » car nous avons déjà étudié le bloc du Paragraphe en détail dans ce même (précédent) TuttoGut.
Notez bien que :
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 3.6 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
La catégorie des « Blocs communs » est disponible depuis le deuxième compartiment du Sélecteur de types de bloc. Elle est un peu comparable à une trousse contenant les types de bloc que nous utilisons le plus couramment pour rédiger. C’est d’autant plus vrai lorsqu’on consulte sa première rangée : Paragraphe, Titre (1) et Image (3).
Personnellement, le bloc des listes (2) serait en terme de régularité d’utilisation mon quatrième bloc plutôt que la galerie d’Images contrairement à ce qu’on peut interpréter de sa position au sein de la deuxième rangée de notre trousse.
Tous les blocs d’insertion de media riches (3 à 8) font partie de cette trousse et les deux derniers vous permettent de mettre en exergue un sous-titre (9) ou de faire ressortir une citation (10) que vous avez empruntée à son auteur.
PS: les chiffres entre parenthèses informent sur l’ordre de passage des blocs dans cette revue.
(1) Le bloc du Titre.
Pour rappel, dans l’éditeur classique, on met en forme une sélection de texte en titre à l’aide de la liste déroulante qui précède les boutons de commande de sa barre d’outils.
Les différentes manières d’ajouter un bloc de Titre.
Dans l’éditeur moderne, vous pouvez d’abord et alternativement utiliser le bouton dont l’icône affiche deux « T » et ce depuis les raccourcis du bloc par défaut de sa partie droite (si le bloc titre est un des derniers blocs récemment utilisés) ou depuis la catégorie des « Blocs communs » du sélecteur de types de bloc. Vous pouvez également utiliser la commande d’autocomplétion / ou encore choisir de transformer un bloc de Paragraphe existant en bloc de Titre depuis la commande de transformation de sa barre d’outils. L’animation ci-après vous permet de visualiser ces premières possibilités liées à l’utilisation de l’interface de l’éditeur.
Ensuite, vous disposez également d’une possibilité liée à l’utilisation du presse-papier de votre ordinateur. Concrètement il s’agit de copier un ou plusieurs titres depuis une ressource Web ou bureautique pour le ou les coller dans un bloc par défaut. J’insiste sur le bloc par défaut, puisque vous transformerez en fait un bloc de Paragraphe en bloc de Titre grâce à cette manipulation. Ci-dessous, je vous montre un premier exemple d’un « copier/coller » classique depuis Microsoft Word.
Ensuite, il faut savoir que l’éditeur moderne, à la différence de l’éditeur classique, a la faculté de comprendre le langage « MarkDown » que certain·e·s d’entre nous, habitué·e·s des services de GitHub.com, aiment à manipuler.
Comme vous pouvez le constater ci-dessus, le collage dans un bloc par défaut, j’insiste une nouvelle fois sur le bloc par défaut, est un peu plus élaboré puisqu’il s’agit ici de le faire en texte brut pour obtenir la transformation du bloc de Paragraphe en bloc de Titre.
La personnalisation du titre.
Lorsqu’on ajoute un nouveau bloc de titre depuis l’interface de l’éditeur moderne, vous remarquerez que le niveau de titre réglé par défaut est le deuxième. Vous noterez également que le premier niveau n’est pas disponible depuis la barre d’outils du bloc. L’éditeur moderne considère en effet que le titre général de votre publication est le titre de niveau 1 et que tous ceux du contenu de votre publication auront un niveau inférieur. Si toutefois, votre thème n’utilise pas cette convention (mettre en forme le titre général de votre publication en titre de niveau 1), rassurez-vous : vous pourrez retrouver et utiliser le titre de niveau 1 depuis l’onglet « Bloc » de la colonne latérale.
Comme l’illustre la capture d’écran qui précède, le bloc de titre propose une barre d’outils grâce à laquelle vous pouvez le mettre en forme ou le lier à une ancre au sein de votre document ou à une page Web sur Internet.
Ce bloc propose également des réglages dans l’onglet « bloc » de la colonne latérale si vous avez besoin d’accéder à de plus nombreux niveaux de titre ou de modifier son alignement. Vous pouvez aussi profiter du compartiment « Avancé » de ce bloc pour définir une ancre HTML ou une classe CSS additionnelle disponible dans votre thème.
Intérêt de l’ancre HTML du compartiment « Avancé » des réglages.
Comme vous l’avez certainement constaté depuis que vous avez commencé la lecture de ce tutoriel, un certain nombre de liens vous renvoient sur le précédent numéro de la série TuttoGut. Dans la mesure du possible, j’essaye de vous rapprocher le plus de la notion en rapport avec le texte lié grâce à cet ancrage HTML. Voilà tout l’intérêt d’utiliser ce réglage avancé qui vous est détaillé dans la capture d’écran ci-dessous.
C’est selon moi un vrai gain de temps et d’intuitivité par rapport à ce que vous devez faire dans l’éditeur classique pour arriver au même résultat. En effet, il vous faut activer la vue source de l’éditeur classique pour indiquer manuellement l’ancre HTML à l’aide de l’attribut id de la balise h1 du titre comme montré dans l’exemple ci-dessous : ce qui vous oblige donc à avoir quelques notions en matière de balisage HTML.
Transformations disponibles.
Tout comme nous l’avions vu pour le bloc de Paragraphe et le montre la capture d’écran ci-dessus, en cliquant sur le premier bouton (dont l’icône est représentée par deux « T ») de la barre d’outils du bloc de Titre, vous faites apparaître la fenêtre affichant les possibilités de transformation de ce bloc. Nous connaissons déjà le bloc de Paragraphe, les blocs de « Citation » et d’« Image de couverture » seront passés en revue dans la suite de ce tutoriel.
Optimiser la hiérarchie des titres.
Dans l’éditeur classique, voici une opération qui est très fastidieuse et qui demande beaucoup d’attention. Une hiérarchie correcte de vos titres est un atout important pour la compréhension de vos visiteurs et en particulier lorsqu’il s’agit du robot d’un moteur de recherche.
La capture d’écran qui précède vous montre que cette optimisation est grandement simplifiée dans l’éditeur moderne. Il suffit de cliquer sur le bouton dont l’icône affiche un « i » entouré au sein de la barre des commandes supérieure de l’éditeur pour laisser apparaître une fenêtre vous donnant des informations liées aux statistiques de votre publication et surtout liées à la structure hiérarchique des titres de votre document. Si toutefois la hiérarchie des titres est erronée, l’éditeur vous en informera. Dans notre exemple, je peux très facilement la corriger en cliquant sur le h4 sur fond orangé pour modifier son niveau.
(2) Le bloc des Listes.
La première différence que nous constatons pour la gestion des listes dans l’éditeur moderne par rapport à l’éditeur classique, c’est qu’un seul bouton de bloc donne accès aux deux types de liste : à puces ou numérotée. Rappelons nous que la barre d’outils de l’éditeur classique intègre une commande spécifique à chacun des types.
Les différentes manières d’ajouter un bloc de Listes.
Dans l’éditeur moderne, vous retrouvez les quatre manières liées à son interface d’ajouter un bloc de Listes. Elles sont illustrées ci-après. La seule différence par rapport au bloc de Titre (vu précédemment), c’est que le visuel de l’icône du premier bouton de la barre d’outils a changé (trois points verticaux suivis de 3 lignes horizontales).
N.B. : étant donné que la zone des raccourcis du bloc par défaut ne contient que trois éléments et qu’ils varient en fonction des derniers blocs utilisés, il est possible que le raccourci pour générer un bloc de Listes ne soit pas disponible. Ce comportement est à prendre en compte pour tous les blocs qui suivront dans la revue.
Pour ce bloc aussi, vous pouvez utiliser le collage depuis un ficher bureautique ou depuis une page sur Internet. J’insiste une nouvelle fois sur le fait que ce collage s’effectue dans un bloc par défaut. Pour les fichiers ou les pages utilisant le « MarkDown », pensez bien à coller en texte brut.
La personnalisation des listes.
Si dans l’éditeur moderne, comme on l’a déjà évoqué plus tôt, un seul bloc est prévu pour les listes : c’est parce que le type de liste est une des manières de personnaliser le bloc. Ci-dessous, vous pouvez constater que les deuxième et troisième boutons de la barre d’outils proposent successivement de choisir entre puces et numéros.
Immédiatement après les boutons de type de liste, vous trouvez les deux boutons pour diminuer et augmenter le retrait des éléments listés.
Pour vos sélections de texte, une mise en forme sommaire ainsi que la possibilité d’ajouter un lien vers une page internet ou une ancre dans le document est aussi proposée par le bloc.
S’agissant des réglages disponibles dans l’onglet « Bloc » de la colonne latérale, seule la définition d’une classe CSS additionnelle depuis le compartiment « Avancé » est proposée.
Transformations disponibles.
Ce bloc propose lui aussi des transformations : en cliquant sur le premier bouton de sa barre d’outils, la fenêtre affichée vous permettra de basculer votre texte en bloc de Paragraphe ou en bloc de Citation.
Les blocs d’insertion de media riches.
Un autre éditeur fait son entrée en scène : l’éditeur de media de WordPress ! En effet, tout comme l’éditeur classique, l’éditeur moderne fait appel à ce dernier pour l’insertion de media dans son contenu. L’utilisation qui en est faite par les deux diffère cependant lorsqu’on y regarde de plus prêt.
L’éditeur classique, comme le montre l’animation ci-dessus, se repose totalement sur l’éditeur de media. En cliquant sur le bouton « Ajouter un média » de l’écran d’édition classique d’une publication vous ouvrez l’éditeur de media dans sa version complète, il est alors possible :
de téléverser des images, des sons, des vidéos ou plus généralement des fichiers ;
de créer des galeries d’images ou des playlists audio ou vidéo ;
ou encore plus simplement d’intégrer l’URL d’une image (d’un son, d’une vidéo ou d’un fichier) distante.
Dans l’éditeur moderne, il existe un bloc pour quasiment chacune de ces possibilités et la version de l’éditeur de media utilisée correspond strictement au besoin du bloc.
Seules les playlists de sons ou de vidéos n’ont pas encore leur bloc attitré (mais c’est dans les tuyaux, en attendant il s’agit d’utiliser le bloc du « Code court » de la catégorie de types de bloc « Widgets » pour reconstituer des playlists).
(3) Le bloc d’Image.
Son ajout peut s’effectuer pareillement (à l’exception de la transformation depuis un bloc de Paragraphe existant) à ce que nous avons vu pour les précédents blocs : à l’aide de l’interface ou du collage. Pour cette deuxième possibilité exclusive à l’éditeur moderne, j’attire à nouveau votre attention sur le fait qu’il s’agit de coller l’image (ou de coller en texte brut le code « MarkDown » de l’image) dans le bloc par défaut. L’animation ci-dessous vous démontre toutes ces possibilités.
Une dernière possibilité existe, tout comme dans l’éditeur classique : vous pouvez utiliser la fonctionnalité de glisser/déposer d’un fichier image pour directement l’intégrer au contenu de l’éditeur moderne.
Comme le montre la capture d’écran ci-dessus, la ligne bleue vous permet de visualiser l’endroit où s’intercalera votre bloc d’Image.
Insertion d’une image depuis son bloc.
Lorsque vous ajoutez un bloc d’Image depuis l’interface, son état est dans un premier temps en attente d’insertion d’une image. Cet état se matérialise par l’affichage d’un formulaire sur fond gris vous proposant :
de glisser-déposer votre fichier d’image,
ou de téléverser votre fichier d’image,
ou encore d’ouvrir la bibliothèque d’images du site pour y sélectionner une image précédemment téléversée.
L’animation ci-dessus illustre ces trois possibilités. Une quatrième devrait faire prochainement son apparition dans ce formulaire : l’intégration de l’URL distante d’une image.
Astuce : en attendant, si vous avez besoin d’insérer une URL distante, je vous invite à utiliser le collage en texte brut de sa transcription en « MarkDown » dans un bloc par défaut. Voici un masque de cette transcription pour vous faire gagner du temps : 
La personnalisation de l’image.
Comme le montre la capture d’écran à suivre, la barre d’outils du bloc d’Image vous propose de définir son alignement ainsi que de faire appel à l’éditeur de media grâce à son bouton dont l’icône représente un crayon pour éventuellement la modifier.
S’agissant des alignements, vous pourrez toujours aligner votre image à gauche, au centre ou à droite. Sachez toutefois que certains thèmes ajoutent un support pour les alignements étendus fournis par l’éditeur moderne pour certains de ces blocs. Par exemple, j’utilise un thème sur ce site qui les supporte et si vous prêtez attention aux images et animations insérées dans mes tutoriels vous remarquerez que certaines dépassent la largeur de la zone de texte ou occupent toute la largeur de la page. Autre exemple, le thème enfant de twentyseventeen que j’ai conçu supporte également ces alignements étendus.
Dans ce cas la barre d’outils des blocs pour lesquels ces alignements sont permis (comme celui de l’image) s’enrichira de deux nouveaux boutons comme illustré ci-après.
Une autre barre d’outils sera affichée juste au dessus de la légende dés que vous commencerez à la modifier vous permettant de la mettre en forme simplement, comme le montre la capture d’écran qui suit (texte surligné en bleu).
En ce qui concerne les réglages disponibles dans l’onglet « Bloc » de la colonne latérale, vous pouvez définir le texte alternatif de votre image, la taille du fichier de base à utiliser pour votre image ainsi que les dimensions à appliquer à votre image.
L’animation ci-dessus vous montre les différents contrôles que vous pouvez actionner pour définir de nouvelles dimensions à votre image :
en modifiant les champs numériques de la « Largeur » et de la « Hauteur »;
en pressant l’un des boutons de taille exprimée en pourcentage ;
ou en étirant directement l’image grâce aux boules bleues positionnées sous et de chaque côté de cette dernière.
Vous pouvez également régler le lien à attacher à l’image ou encore ajouter une classe CSS additionnelle grâce respectivement aux compartiments « Réglage de lien » et « Avancé » de l’onglet « Bloc » de la colonne latérale.
L’exemple suivant vous montre l’ajout d’un lien vers une URL personnalisée et la définition d’une classe CSS additionnelle.
Transformations disponibles.
Il est possible de transformer un bloc d’image en bloc de Fichier lorsque vous préférez que vos visiteurs téléchargent cette dernière, nous reverrons ce bloc dans quelques lignes. Transition idéale avec notre prochain chapitre : vous pouvez vous servir d’un bloc d’image pour initialiser un nouveau bloc de Galerie d’images.
(4) Le bloc de Galerie d’images.
En complément du paragraphe précédent, vous initialisez un nouveau bloc de ce type grâce aux commandes de l’interface (c’est à dire depuis un des raccourcis ou le sélecteur de types de bloc ou encore la commande d’autocomplétion du bloc par défaut) et à la fonctionnalité de glisser/déposer du moment que la sélection à glisser contient plus d’une image. Tout comme c’était le cas pour le bloc d’Image, la ligne bleue vous renseigne sur l’endroit où sera insérée votre galerie.
L’animation qui suit ajoute des images à la précédente explication.
Insertion d’images depuis le bloc de la Galerie.
Lorsque vous avez ajouté un nouveau bloc de Galerie depuis l’interface dans votre document, tout comme c’était le cas pour le bloc d’Image, un formulaire sur fond gris est affiché dans le bloc pour vous permettre de sélectionner et d’ajouter les premières images à votre galerie.
D’une manière équivalente à celle observée pour le bloc d’Image, l’animation ci-dessus montre que vous avez le choix pour remplir votre galerie, vous pouvez :
glisser-déposer votre (vos) fichier(s) d’image,
téléverser votre (vos) fichier(s) d’image,
ou encore ouvrir la bibliothèque d’images du site pour y sélectionner une ou plusieurs images précédemment téléversées.
Si toutefois vous avez omis une ou plusieurs images dans votre sélection, vous pourrez toujours ajouter des éléments à votre galerie grâce au bouton dont l’icône affiche un « + » entouré et qui occupe toute la largeur du bloc.
Cette fois-ci, en observant l’animation qui précède, vous remarquerez que seules les actions de glisser/déposer et de téléversement sont prises en charge par ce bouton pour ajouter vos nouveaux éléments.
La personnalisation de la Galerie.
Si vous souhaitez rajouter des images déjà téléversées dans votre bibliothèque une fois la galerie créée, il s’agira d’utiliser le dernier bouton de la barre d’outils du bloc : celui dont l’icône affiche un crayon. Depuis cette même barre vous pouvez modifier l’alignement de votre galerie. Sachant que ce bloc, tout comme celui de l’Image, permet les alignements étendus, ainsi, si votre thème les supporte, vous disposerez de deux boutons supplémentaires pour les appliquer.
En plus d’afficher cette barre d’outils, l’animation ci-dessus vous montre que vous pouvez modifier chacune des légendes directement depuis l’interface du bloc. Une nouvelle barre d’outils surplombera celle qui est en cours de modification pour vous permettre de mettre en forme cette légende simplement et de la lier à une ancre du document ou à une page Web.
Cette animation présente également les réglages disponibles depuis l’onglet « Bloc » de la colonne latérale. Vous pouvez notamment :
ajuster le nombre de colonnes à utiliser pour afficher les images de la galerie ;
choisir d’homogénéiser (ou non) le recadrage des images ;
définir le type de lien qu’ouvriront les images (sachant que les URL personnalisées ne sont pas disponibles).
Le compartiment « Avancé » de cet onglet de la colonne latérale intègre, comme on en a pris l’habitude, le contrôle pour ajouter des classes CSS additionnelles.
Transformations disponibles.
Grâce au premier bouton de la barre d’outils du bloc, vous pouvez à tout moment faire apparaître la fenêtre de transformation du bloc de galerie d’images pour le diviser en blocs d’Image. Le nombre de blocs d’Image créés correspondra au nombre d’images que la galerie affichait.
Les blocs (5) d’audio et de (6) vidéo.
A la différence des précédents blocs de media, seules les commandes de l’interface permettent d’initier l’ajout d’un fichier audio ou vidéo. Vous remarquerez dans les deux animations qui suivent que le processus d’ajout de bloc est très similaire pour ces deux types de media, raison pour laquelle, j’ai décidé de traiter ces deux blocs dans une seule et même partie.
Insertion d’un son ou d’une vidéo depuis le bloc correspondant.
Une fois que le bloc a été ajouté au document, vous retrouverez un formulaire sur fond gris pour vous permettre d’insérer le son ou le film.
Les animations ci-dessous ne démontrent pas l’utilisation du champ d’insertion d’une URL locale ou distante pour le medium mais, à la différence de l’image, cette possibilité est déjà implémentée. En plus de cette première manière de procéder, vous avez à votre disposition le glisser/déposer, le téléversement d’un nouveau medium ou la sélection depuis la bibliothèque du type de media concerné.
N.B. : pour faire écho à ce que je disais en introduction des blocs de media, on se rend d’autant plus compte avec les blocs de Son et de Vidéo que seuls les types de fichiers qui correspondent au medium en cours d’édition sont listés dans la bibliothèque ou dans les dossiers parcourus de votre ordinateur.
La personnalisation des blocs d’audio et de vidéo.
En dehors des réglages de lecture du medium inséré qui varient en fonction du format et que vous retrouvez dans l’onglet « Bloc » de la colonne latérale, les deux blocs proposent les mêmes types de personnalisation de leur apparence.
Comme le montrent les captures d’écran ci-dessus, la barre d’outils des blocs disposent de :
boutons d’alignement (classique et étendu en fonction du support de votre thème) ;
bouton de modification (icône affichant un crayon) du media ;
N.B. : le bouton de modification n’ouvrira pas directement l’éditeur de media de WordPress mais vous fera revenir à l’état initial du bloc : celui du formulaire à fond gris. En effet, il est nécessaire de vous laisser la possibilité de définir une URL locale ou distante !
Et comme toujours, si vous modifiez la légende de votre medium, une nouvelle barre d’outils vous permettra de la mettre en forme.
Transformations disponibles.
Son et Vidéo, tout comme l’image, sont des blocs transformables en bloc de Fichier si toutefois vous préférez disposer d’un affichage plus sobre et ne diffusant pas le flux médiatique dans la partie frontale de votre site. Et justement, si on s’occupait de ce bloc ?
(7) Le bloc de Fichier.
Ce que nous connaissons de l’éditeur classique quant à la manière d’afficher les fichiers attachés à une publication vous laisse sans doute penser que le bloc de Fichier sera tout aussi basique.
Un simple lien ! Voilà l’apparence fournie par l’éditeur classique comme illustré ci-dessus.
Alors découvrons ce que nous réserve ce bloc de Fichier en commençant par visualiser à l’aide de l’animation qui suit les manières de l’insérer dans le document depuis l’interface (c’est à dire depuisun des raccourcis ou le sélecteur de types de bloc ou encore la commande d’autocomplétion du bloc par défaut) ou grâce à la fonctionnalité de glisser/déposer.
La dernière image de cette animation révèle l’apparence du bloc sur la partie frontale de votre site : le même lien vers le fichier attaché s’accompagne d’un bouton de téléchargement dans l’éditeur moderne.
Insertion de fichier depuis le bloc de Fichier.
Lorsque vous ajoutez un bloc de fichier depuis les commandes de l’interface, comme les autres blocs de media : pour vous permettre d’ajouter votre fichier, un formulaire sur fond gris est affiché et vous propose d’utiliser le glisser/déposer, le téléversement ou d’ouvrir votre bibliothèque de media pour sélectionner un fichier déjà téléversé.
L’animation précédente vous permet de mieux visualiser l’utilisation du formulaire d’insertion de fichier.
La personnalisation du bloc de Fichier.
Les possibilités fournies par le bloc sont beaucoup plus riches que ce que propose l’éditeur classique.
En effet, comme l’illustre la capture d’écran ci-dessus, vous disposez de l’habituelle barre d’outils de bloc qui comme c’était le cas pour les précédents types de media vous aide à aligner le bloc à gauche, au centre ou à droite.Vous retrouvez également le bouton de modification qui vous facilite le changement de fichier à attacher à votre article : possibilité qui n’est pas disponible dans l’éditeur classique.
Ensuite, vous pouvez modifier le texte du lien qui sera initialement le nom du fichier téléversé en vous positionnant dessus. Si vous avez besoin de récupérer l’URL du fichier, le bouton « Copier l’URL » vous rendra ce service.
De plus, comme tout bloc, vous remarquerez que vous pouvez personnaliser d’autres réglages : ceux qui sont présentés dans l’onglet « Bloc » de la colonne latérale. Vous pouvez choisir d’ouvrir le lien du fichier dans une nouvelle fenêtre, définir la destination de ce lien en préférant, par exemple, lui faire ouvrir la page du medium sur la partie frontale de votre site permettant ainsi aux visiteurs de l’enrichir de leurs commentaires. Par ailleurs, si le bouton de téléchargement ne vous convient pas, il est possible de le neutraliser. Et, bien sûr, le compartiment « Avancé » de cet onglet de la colonne latérale est toujours à votre disposition pour définir des classes CSS additionnelles.
Transformations disponibles.
Elles dépendent du type de fichier attaché. Pour les fichiers bureautiques : aucune transformation ne sera proposée. D’ailleurs, dans la capture qui présentait les possibilités de personnalisation, vous avez sans doute noté que le bouton reprenant l’icône du bloc et ouvrant la fenêtre de choix des transformations n’était pas présent dans la barre d’outil du bloc.
En revanche, s’il s’agit d’un fichier audio comme c’est le cas de l’exemple ci-dessus, vous pourrez le transformer en bloc de Son. Il en va de même pour les fichiers/blocs de Vidéo ou d’Image, bien entendu.
(8) Le bloc d’Image de couverture.
C’est le dernier bloc commun utilisant l’éditeur de media de WordPress, il n’existe pas d’équivalence dans l’éditeur classique : il s’agit donc d’une portion de contenu innovante qu’introduit l’éditeur moderne.
Comme illustré ci-dessus, pour ajouter ce bloc à votre document, seules les commandes de l’interface sont disponibles :
un des raccourcis du bloc par défaut (si le bloc d’Image de couverture a récemment été utilisé) ;
sélecteur de type de bloc ;
commande d’autocomplétion ;
et transformation depuis un bloc de titre existant.
Insertion de l’image nécessaire au bloc d’Image de couverture.
Une fois le bloc ajouté au document vous disposez d’un formulaire sur fond gris pour procéder à l’insertion d’une image. Il fonctionne de la même façon que celui du bloc d’Image, constatez le ci-dessous par vous-même :
Pour cette insertion, vous disposez donc de la possibilité :
de glisser-déposer votre fichier d’image,
ou de téléverser votre fichier d’image,
ou encore d’ouvrir la bibliothèque d’images du site pour y sélectionner une image précédemment téléversée.
La personnalisation du bloc d’Image de couverture.
Une fois l’image en place, le formulaire sur fond gris du bloc est remplacé par une prévisualisation modifiable de votre image de couverture, comme le montre la capture d’écran suivante.
Vous disposez alors de la barre d’outils du bloc de l’Image de couverture pour définir :
les alignements du bloc : les trois premiers boutons qui suivent celui de la transformation (le tout premier bouton, celui dont l’icône affiche le visuel du bloc) ;
les alignements du texte de votre image de couverture : les trois derniers boutons qui précédent celui de la modification (le tout dernier bouton, celui dont l’icône présente un crayon) ;
N.B. : ce bloc permet également les alignements étendus. Ainsi, si votre thème les supporte, vous disposerez de deux boutons supplémentaires pour aligner le bloc.
Si vous souhaitez changer l’image du bloc, vous pouvez à tout moment utiliser le bouton de modification pour déclencher l’ouverture de la fenêtre de l’éditeur de media de WordPress.
Pour mettre en gras/italique/texte barré le texte de l’image de couverture ou le lier à une ancre ou une page Web, la barre d’outils qui le surplombe est à votre disposition.
Depuis l’onglet « Bloc » de la colonne latérale, vous disposez d’autres réglages pour :
appliquer à l’image un effet de défilement parallax en fixant sa position ;
modifier l’opacité de l’arrière plan grâce au contrôle en forme de glissière ;
ajouter une classe CSS additionnelle grâce au compartiment « Avancé » des réglages.
Transformations disponibles.
S’il est possible, comme on l’a vu de générer un bloc d’image de couverture en transformant un titre, la réciproque est bien entendu tout à fait envisageable.
(9) Le bloc d’Exergue.
Tout comme c’était le cas pour l’Image de couverture, l’éditeur classique ne vous propose pas de commande pour mettre en forme ce type de portion de texte. L’Exergue est en effet une nouveauté introduite par l’éditeur moderne pour vous permettre de compléter le titre de votre article.
Notez qu’à la différence des blocs que nous avons passés en revue jusqu’à présent, il n’est utilisable qu’une seule fois par document. En effet, si vous avez déjà inséré un bloc de ce type, il sera alors désactivé du sélecteur de types de bloc comme l’illustre la capture d’écran suivante.
Les différentes manières d’ajouter un bloc d’Exergue.
Pour insérer un (et un seul !) bloc d’Exergue dans votre document, vous pouvez utiliser les commandes d’interface du bloc par défaut de l’éditeur :
un des raccourcis (si vous avez utilisé ce bloc dans un autre article récemment) ;
le sélecteur de types de bloc ;
la commande d’autocomplétion.
Comme le montre l’animation ci-dessus, il est également possible de transformer un bloc de Paragraphe en bloc d’Exergue.
La personnalisation de l’Exergue.
Une fois que vous aurez saisi le texte de votre sous-titre dans le cadre délimitant le bloc, vous pourrez utiliser la barre d’outils du bloc pour comme dans l’exemple suivant aligner et mettre en forme ce dernier.
Vous pouvez également lier une ou plusieurs sélections de texte à des ancres dans le document ou à des pages Web.
Seul le compartiment « Avancé » de l’onglet « Bloc » de la colonne latérale vous propose de personnaliser le réglage que vous commencez à connaître par coeur : le nom d’une ou plusieurs classes CSS additionnelles mises à disposition par votre thème.
Transformations disponibles.
Sans surprise, vous pouvez bien entendu transformer un bloc d’Exergue en bloc de Paragraphe, étant donné que la réciproque est une des façons de générer le bloc d’Exergue d’un article.
(10) Le bloc de Citation.
L’éditeur classique vous permet de mettre en forme une sélection de texte en citation grâce à un des boutons (celui dont l’icône affiche un guillemet) de sa barre d’outils.
Les différentes manières d’ajouter un bloc de Citation.
La répétition étant un des leviers de la formation, comme pour l’intégralité des blocs de l’éditeur moderne, vous ajoutez un bloc de Citation à l’aide de l’une de ses commandes d’interface :
un des raccourcis du bloc par défaut, si toutefois vous avez récemment utilisé la citation ;
le sélecteur de type de bloc (bouton à gauche du bloc par défaut ou premier bouton de la barre des commandes supérieure) ;
la commande d’autocomplétion du bloc par défaut.
De plus, vous pouvez également basculer un bloc de Paragraphe existant en bloc de Citation grâce à ses possibilités de transformation.
La personnalisation de la Citation.
Lorsque le bloc de Citation est ajouté à votre article, vous disposer de deux espaces réservés pour la rédiger : le premier accueillera le contenu de votre citation et celui du dessous son auteur.
Comme illustré ci-dessus, vous pouvez utiliser la barre d’outils du bloc pour aligner le bloc de Citation ou mettre en forme une sélection de texte dans l’un des deux espaces la constituant. Par exemple, vous pouvez lier l’auteur à son site Internet.
Si vous avez besoin d’utiliser une classe CSS fournie par votre thème, le réglage « Classe CSS additionnelle » du compartiment « Avancé » de l’onglet « Bloc » de la colonne latérale est à votre disposition.
Comme le montre l’animation qui précède : en cliquant sur le premier bouton (celui dont l’icône affiche un guillemet) de la barre d’outils du bloc, la première section de la fenêtre qui s’ouvre vous permet de sélectionner le style de votre préférence pour l’affichage de votre citation. Pour avoir un aperçu de chacun des styles, il suffit de survoler leurs boutons d’action.
Transformations disponibles.
La deuxième section de la fenêtre vous donne la possibilité de transformer le bloc de Citation en bloc de Listes, de Paragraphe ou de Titre.
Pfiou ! Nous sommes arrivés au terme de cette revue des blocs communs de l’éditeur moderne. Seuls ceux embarqués nativement par le projet Gutenberg ont été traités : si d’autres blocs sont présents dans votre trousse, c’est probablement que vous avez activé une extension qui utilise l’API des blocs.
Grâce à ces trois premiers tutoriels, vous disposez désormais des connaissances pour écrire vos prochaines publications dans l’éditeur moderne, preuve en est : ce tutoriel n’utilise que des blocs communs !
Voici une respiration dans mon marathon #TuttoGut qui vise à vous proposer au plus vite une série de tutoriels pour vous aider à vous préparer à l’arrivée de l’éditeur moderne dans la version 5.0 de WordPress (la prochaine). Pour respirer je vous propose cette course de rapidité entre les deux éditeurs de WordPress en mode « contre la montre » !
Un peu de contexte, pourquoi ce « contre la montre » ?
J’ai lu ici ou là et en particulier sur Twitter des critiques sur l’éditeur moderne du projet Gutenberg : moins intuitif que l’éditeur classique, pas adapté à la manière de rédiger des utilisa·teur·trice·s, etc.. Ces analyses ou devrais-je dire ces impressions interviennent le plus souvent après que la personne experte ait testé l’éditeur moderne de Gutenberg pendant 15 à 20 minutes (voire moins pour les moins endurants !).
Déjà, au sein de notre communauté, qui se base sur la contribution et la bienveillance, si je peux comprendre l’inquiétude vis à vis du changement, j’ai toujours énormément de mal avec la véhémence ou parfois l’ironie de certains propos et j’ai souvent envie de dire : vas-y, propose mieux et ouvre une pull request sur le répertoire GitHub en mettant en oeuvre concrètement ce que tu proposes ! Gutenberg est un projet Open Source gratuit de WordPress : tout le monde peut contribuer.
Depuis la période estivale, j’ai décidé de rester zen, car cela génère des discussions à n’en plus finir dans lesquelles les « modernes » et les « classiques » s’opposent à peu près toujours les mêmes arguments. Allons de l’avant et aidons les utilisa·teur·trice·s qui ont des inquiétudes en agissant (raison des TuttoGuts, par exemple).
Bref, leur conclusion est que Gutenberg va complètement déboussoler les utilisa·teur·trice·s et que surtout il faudra beaucoup plus de temps pour écrire une publication dans WordPress.
J’aime les faits. Alors, j’ai décidé de mesurer cette supposée durée supplémentaire de rédaction qu’introduirait l’éditeur moderne. Mon Macbook Pro (mi-2010) prenant de l’age, je vous prie d’excuser certains ralentissements : les deux éditeurs ont été testés dans des conditions identiques.
Premier « contre la montre » : copier/coller depuis Word.
J’ai cru comprendre que beaucoup d’entre nous écrivaient d’abord leurs articles depuis un outil permettant la collaboration (commentaires en ligne / révisions). Alors, même si je ne dispose pas de licence du plus célèbre traitement de texte, j’ai utilisé sa version « online » qui elle est gratuite.
L’objectif de la course est de reproduire un texte classique, qui comprend des titres, des listes, des images et des paragraphes, le plus vite possible. Vous pouvez consulter ce texte sur le site de Microsoft.
Premiers résultats
Éditeur Classique
Éditeur Moderne
Désolé de contredire les impressions de certain·e·s, mais l’éditeur moderne est plus rapide que l’éditeur classique puisqu’il le distance d’un peu moins de 30 secondes !
Éditeur Moderne (Gutenberg) : 5 minutes et 36 secondes.
Éditeur Classique : 6 minutes.
En dehors du fait, que les deux éditeurs nécessitent une reprise du texte après l’opération de copier/coller, le projet Gutenberg a amélioré l’efficacité de son collage du presse-papier de l’ordinateur en automatisant le téléversement des images. Autre point fort, l’organisation en blocs du contenu permet de plus rapidement sélectionner le texte d’un bloc avec la combinaison des touches « Ctrl » + « A ». Lorsque vous utilisez cette même combinaison dans l’éditeur classique, vous embarquez l’intégralité du contenu.
Deuxième « contre la montre » : copier/coller depuis un fichier MarkDown.
Certain·e·s rédac·teur·trice·s (beaucoup moins nombreux) utilisent les services de GitHub pour écrire de manière encore plus collaborative. Le type de fichier utilisé dans ces cas là est le MarkDown : un fichier texte avec un balisage simple.
L’exercice est donc le même, c’est la source de la copie qui diffère. Le texte est sensiblement identique et vous pouvez le consulter sur le site de GitHub.
Deuxièmes résultats
Éditeur Classique
Éditeur Moderne
Cette fois-ci, il n’y a pas photo ! L’éditeur moderne laisse sur place l’éditeur classique en faisant gagner à l’utilisa·teur·trice plus de 8 minutes pour la rédaction d’un même texte. Je me suis même permis de taper le titre de l’article à la main !
Éditeur Moderne (Gutenberg) : 1 minute et 52 secondes.
Éditeur Classique : 10 minutes.
Comme je l’ai expliqué dans un de mes tutoriels, le projet Gutenberg a cherché à s’améliorer par rapport aux différentes manières dont les utilisa·teur·trice·s rédigent, notamment en prenant en charge l’interprétation de la syntaxe MarkDown. Le texte est prêt à être publié suite au collage dans l’éditeur moderne. Pour le classique, il s’agit de refaire toute la mise en forme et l’insertion des images.
En conclusion, les faits montrent que l’éditeur moderne de Gutenberg, contrairement aux impressions, vous fera gagner du temps dans la rédaction de vos contenus.
Je vous propose de poursuivre la revue des blocs de l’éditeur moderne que nous avons initiée lors du précédent numéro de la série de tutoriels dédiés à l’éditeur moderne du projet Gutenberg. Pour ce nouveau numéro, je vais me limiter aux éléments de la catégorie des types de bloc réservée à la « Mise en forme » de vos textes.
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 3.8 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
Cette fois-ci, je compare ces blocs à des moules que nous remplissons de contenu pour construire certaines parties de notre document, un peu comme l’enfant utiliserait sa pelle et son sceau pour bâtir les tours de son magnifique château de sable.
Ces moules sont regroupés dans le troisième compartiment du Sélecteur de types de bloc : il s’intitule, sans surprise, « Mise en forme ».
Parmi les sept blocs entreposés, quatre d’entre eux ne disposent pas d’équivalence dans l’éditeur classique : le Tableau (1), le Classique (2), la Citation en exergue (3) et l’HTML personnalisé (4). Les blocs de Code (5), Pré-formaté (6) et de Couplet (7) se basent tous sur la balise HTML <pre> et sont en quelque sorte des améliorations de l’option de mise en forme « Préformaté » de la liste déroulante qui précède la barre d’outils de l’éditeur classique. Cette option est illustrée ci-après.
PS: les chiffres entre parenthèses informent, comme c’était le cas de notre précédente revue, sur l’ordre de passage des blocs dans cette revue.
(1) Le bloc de Tableau
Pour mémoire : il n’est pas possible de créer ou d’éditer visuellement un tableau depuis l’éditeur classique qui est proposé nativement par WordPress. Pour y parvenir, vous aurez besoin d’activer une extension particulière comme par exemple TinyMCE Advanced.
Les différentes manières d’ajouter un bloc de Tableau.
Dans l’éditeur moderne, pas besoin d’extension : c’est natif (tout comme la compréhension du balisage MarkDown).
L’animation ci-dessus vous démontre les possibilités d’ajout du bloc de Tableau à l’aide des commandes de l’interface (Raccourcis du bloc par défaut, Sélecteur de types de bloc ou commande d’autocomplétion / ).
Lorsque vous utilisez les commandes de l’interface de l’éditeur moderne, le bloc de Tableau s’initialise avec un formulaire pour vous permettre de définir le nombre de colonnes et de rangs dont votre tableau a besoin. Dans l’exemple ci-dessous, je crée un tableau de 3 colonnes pour 2 rangs.
Vous pouvez également utiliser les commandes de copie d’un tableau d’une ressource externe et de collage dans le bloc par défaut de l’éditeur moderne. Dans l’animation ci-après, vous vous apercevrez que le collage pour un tableau balisé en MarkDown s’effectue en texte brut (ou en adaptant le style pour macOs).
La personnalisation du bloc de Tableau.
D’abord, vous pouvez bien entendu remplir chacune des cellules de votre tableau par vos textes !
Ensuite comme le montre la capture d’écran ci-dessous, vous disposez de la première moitié des boutons de la barre d’outils du bloc pour gérer l’apparence du tableau et de la deuxième moitié pour appliquer des mises en forme simples à chacun des textes insérés.
Juste après les 3 ou 5* boutons d’alignement, vous trouverez le bouton d’édition de la structure de votre tableau. La capture d’écran affiche son état développé et vous pouvez utiliser les commandes proposées pour ajouter une ligne ou une colonne avant ou après la cellule active. Il est également possible de supprimer la colonne ou la ligne dont fait partie cette cellule active.
Depuis l’onglet « Bloc » de la colonne latérale, vous pouvez choisir d’homogénéiser la largeur des cellules en activant le réglage « Cellules de tableau à largeur fixe ». Comme nous l’avons vu pour tous les blocs jusqu’à présent : le compartiment « Avancé » vous permet de définir le nom d’une classe CSS particulière pour appliquer des styles complémentaires à votre tableau.
Transformations disponibles.
L’absence du bouton affichant l’icône du bloc de Tableau en première position de sa barre d’outils indique qu’il n’existe pas de transformations proposées pour ce bloc.
(2) Le bloc Classique
Si vous êtes nostalgiques de l’édition classique, vous pourrez toujours utiliser l’éditeur classique dans l’éditeur moderne en tant que bloc. Le principal avantage de ce bloc est de pouvoir afficher les contenus que vous aviez créés avant l’introduction de l’éditeur moderne dans votre WordPress pour éventuellement les convertir en blocs.
Les différentes manières d’ajouter un bloc Classique.
Seules les commandes de l’interface de l’éditeur moderne vous permettent d’ajouter un bloc Classique à votre document.
La personnalisation du bloc Classique.
Ce bloc ne dispose ni d’une barre d’outils de bloc (en ce sens qu’en choisissant le réglage « barre d’outils unifiée », la barre d’outils du bloc classique restera en place) ni de réglages au sein de l’onglet « Bloc » de la colonne latérale. Par ailleurs, je pense que je n’ai pas besoin de vous préciser comment personnaliser vos textes dans ce bloc ! Notez toutefois que vous ne pourrez pas insérer de media au sein de ce bloc (mais rien ne vous empêche de créer des combinaisons de blocs d’image et classique par exemple).
Transformations disponibles.
Tout comme le bloc de Tableau, aucune transformation n’est proposée pour ce bloc.
En revanche comme je vous l’avais montré dans l’épisode de la série #TuttoGut dédiée à l’écriture en bloc : en cliquant sur l’icône en forme de 3 points verticaux à l’extrémité droite du bloc, vous pouvez convertir le contenu de ce bloc en différents types de bloc cohérents.
Les différentes manières d’ajouter un bloc de Citation en exergue.
Tout comme c’était le cas du bloc Classique : seules les commandes de l’interface de l’éditeur moderne (raccourcis du bloc par défaut, sélecteur de types de bloc et commande d’autocomplétion / du bloc par défaut) sont proposées par l’éditeur moderne pour ajouter ce type de bloc, comme illustré ci dessous.
La personnalisation du bloc de Citation en exergue.
À l’intérieur du bloc, pareillement au bloc de Citation de la catégorie des blocs communs, vous pourrez rédigez le propos emprunté à l’auteur cité ainsi qu’indiquer son nom comme le montre la capture d’écran ci-après.
Grâce à la barre d’outils du bloc, il est possible de personnaliser son alignement grâce aux 3 ou 5* boutons prévus à cet effet et mettre en forme le texte en ajoutant par exemple un lien vers le site de l’auteur du texte. Seul le réglage de définition d’une classe CSS additionnelle est proposé dans le compartiment « Avancé » de l’onglet « Bloc » de la colonne latérale
Transformations disponibles.
Tout comme les deux précédents blocs, aucune transformation n’est proposée pour ce bloc.
(4) Le bloc d’HTML personnalisé
Ce bloc vous propose de disposer directement d’un éditeur de code HTML et vous procure plus de liberté quant au balisage HTML du texte.
Les différentes manières d’ajouter un bloc d’HTML personnalisé.
L’insertion de ce type de bloc s’effectue grâce aux commandes d’interface de l’éditeur moderne. Nous retrouvons, comme le montre l’animation ci-dessous les trois commandes communes à tous les blocs.
À savoir :
les raccourcis du bloc par défaut,
le sélecteur de types de bloc,
la commande d’autocomplétion /
Comme nous le verrons lorsque nous évoquerons les transformations disponibles de ce bloc, il est également possible de créer ce type de bloc en cliquant sur le bouton « Conserver en HTML » d’un message d’erreur généré par l’éditeur moderne.
La personnalisation du bloc d’HTML personnalisé.
La barre d’outils de ce bloc est majoritairement constitué de 2 boutons, le premier permet d’activer la vue HTML (code source) et le second de prévisualiser le rendu du code. Dans l’exemple ci-après je code un texte défilant avant de cliquer sur le bouton « Aperçu » pour vérifier ce défilement.
Vous remarquez que ce bloc ne dispose pas de réglages au sein de l’onglet « Bloc » de la colonne latérale. Si vous avez des classes additionnelles à ajouter, il suffira de les coder en appliquant un attribut class à la balise de votre choix (pour notre exemple <marquee class="ma-classe-additionnelle"> ).
Transformations disponibles.
Ce bloc ne propose pas de transformation particulière, mais tout comme le bloc classique il intègre une option de conversion en blocs cohérents avec le balisage de son contenu. Cette option est disponible depuis le dernier bouton de la barre d’outils : celui dont l’icône affiche 3 points verticaux.
Dans l’animation ci-dessus, je me lance dans cette aventure avec un bloc de paragraphe. Je commence par modifier sa source en ajoutant une balise <strong> avant le terme « gras » du texte du paragraphe. Toutefois j’oublie de fermer cette balise et re-bascule en édition visuelle du bloc. L’éditeur moderne m’informe alors qu’une erreur est survenue et me propose deux possibilités de conversion. Je choisis celle qui transformera le paragraphe en bloc d’HTML personnalisé (bouton bleu). Étant donné que ce bloc utilise l’éditeur de code source CodeMirror (disponible dans WordPress depuis sa version 4.9) il m’informe qu’une erreur est présente à la première ligne. Je respecte alors consciencieusement la recommandation de l’éditeur de code HTML en fermant la balise </strong> juste après le terme « gras ». Il ne me reste plus qu’à utiliser l’option de conversion du bloc d’HTML personnalisé pour magiquement retomber sur mon paragraphe initial et cette fois-ci sans erreur.
(5) Le bloc de Code
Si vous avez besoin de partager des morceaux de code source avec vos lecteurs, vous pouvez utiliser ce bloc, sachant qu’il n’embarque pas de coloration syntaxique.
Les différentes manières d’ajouter un bloc de Code.
Une fois encore, l’insertion de ce bloc ne repose que sur les commandes d’interface de l’éditeur moderne.
Je ne l’ai pas rappelé jusqu’à présent pour les blocs précédents, mais la présence de l’icône du bloc de Code dans les raccourcis du bloc par défaut dépend de sa régularité d’utilisation. Quoiqu’il arrive, vous pourrez bien entendu utiliser le sélecteur de types de bloc ou la commande d’autocomplétion / du bloc par défaut pour ajouter le bloc de code à votre document.
La personnalisation du bloc de Code.
Comme le montre l’animation ci-dessous la barre d’outils de ce bloc ne contient pas de commandes de personnalisation. L’objectif ici est de coller votre code source en « brut » dans la zone d’insertion de contenu du bloc.
Si votre thème propose une classe particulière pour mettre en forme ce type de bloc, vous pouvez la lui appliquer depuis les réglages avancés de l’onglet « Bloc » de la colonne latérale.
Transformations disponibles.
En cliquant sur l’icône du bloc de Code dans sa barre d’outils, vous faites apparaître la fenêtre de la transformation disponible qui est celle du bloc Pré-formaté que nous voyons juste après.
(6) Le bloc Pré-formaté
Besoin de partager du texte brut qui ne sera pas altéré par le navigateur ? Ce bloc est à votre service.
Les différentes manières d’ajouter un bloc Pré-formaté.
L’ajout de ce bloc s’obtient en utilisant les commandes d’interface de l’éditeur, ou par transformation d’un autre bloc (ex: le type Code comme nous l’avons vu précédemment).
La personnalisation du bloc Pré-formaté.
Un type de contenu pour lequel ce type de bloc est adapté est l’art ASCII ! Ci-dessous la capture d’écran montre le logo de l’extension BuddyPress.
À la différence du bloc de Code, l’éditeur vous laisse la possibilité, depuis la barre d’outils du bloc, d’appliquer une mise en forme simple ou d’attacher des liens à votre contenu.
Bien entendu, le compartiment « Avancé » de l’onglet « Bloc » de la colonne latérale reste à votre service pour définir d’éventuelles classes additionnelles pour votre œuvre d’art !
Transformations disponibles.
Vous pouvez transformer du Pré-formaté en Paragraphe comme le démontre la capture d’écran ci-dessus.
(7) Le bloc de Couplet
Vous écrivez des poèmes ou des chansons ? Le bloc de Couplet peut vous aider à présenter des strophes ou le refrain de votre œuvre.
Les différentes manières d’ajouter un bloc de Couplet.
Je pense que la plupart d’entre vous connaissent le refrain de la chanson j’ajoute un bloc dont le clip est repris ci-dessous !
Si je l’ai utilisé régulièrement je prends le raccourci du bloc par défaut, Autrement ou si je préfère, le sélecteur de types de bloc est à ma dispo, Je peux encore utiliser la commande d’autocomplétion de ce bloc par défaut.
La personnalisation du bloc de Couplet.
A l’aide de la barre d’outils du bloc, vous pouvez modifier son alignement ou mettre en forme simplement vos vers. Ci-dessous j’illustre ces possibilités à l’aide de l’extrait d’un poème de Pierre de Ronsard que vous connaissez certainement.
Par ailleurs, le compartiment « Avancé » de l’onglet « Bloc » de la colonne latérale vous propose son réglage afin de définir une classe additionnelle pour votre ode.
Transformations disponibles.
Similairement au bloc Pré-formaté, le Couplet peut se muer en Paragraphe, comme le montre la capture d’écran ci-dessous.
* Tout comme le bloc d’Image, les blocs de Tableau et de Citation en exergue permettent les alignements étendus. Si toutefois, votre thème supporte ces alignements : au lieu de 3 boutons d’alignement, vous aurez le choix parmi 5 boutons. L’image ci-dessous vous montre l’évolution de la barre d’outils de ces deux blocs dans ce cas.
Merci d’avoir parcouru ce tutoriel sur les blocs de mise en forme de l’éditeur moderne. Notre prochain numéro s’intéressera à la catégorie « Mise en forme » du sélecteur de types de bloc dont la star incontestée est le bloc de Colonnes qui a la particularité de pouvoir contenir d’autres blocs pour les présenter horizontalement.
Continuons notre revue des blocs de l’éditeur du projet Gutenberg en découvrant ensemble la catégorie des types de bloc prévus pour nous aider à mettre en page nos publications.
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 3.9 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
Comme le montre la capture du sélecteur de types de bloc ci-contre, la catégorie « Mise en page » est constituée de six blocs.
La star très prometteuse (fonctionnalité marquée comme « beta ») de cette catégorie est le bloc de « Colonnes » (6). Sa particularité est de nous permettre d’ajouter dans chacune de ses colonnes tout bloc pour les présenter horizontalement. Comme les stars se font généralement attendre, nous terminerons ce tutoriel par ce bloc.
Deux des blocs de cette catégorie vous permettent de faire une coupure dans la lecture de votre publication : il s’agit des types « Lire la suite » (2) et « Saut de page » (3).
Deux autres vous permettent d’accentuer la fin d’une partie de votre publication : ce sont l’« Espacement » (4) et le « Séparateur » (5).
Le tout premier, le « Bouton » (1), vous propose, comme son nom l’indique, d’utiliser un visuel de bouton d’action pour atteindre une ancre de votre document ou une autre page de votre site ou d’un site distant.
Les plus assidu·e·s de cette série de tutoriels dédiée à l’éditeur moderne remarquerons que contrairement à nos précédentes revues, chaque partie réservée aux types de bloc de cette catégorie ne contient pas la sous-partie décrivant leurs possibilités de transformation : c’est tout simplement parce qu’aucun d’entre eux n’est transformable !
PS: les chiffres entre parenthèses informent, comme c’était le cas de nos précédentes revues, sur l’ordre de passage des blocs dans ce tutoriel.
(1) Le bloc de Bouton.
Il n’existe pas d’équivalence éditable visuellement de ce bloc dans l’éditeur classique. C’est donc une innovation de l’éditeur moderne qui facilite grandement l’ajout de boutons d’action aux publications pour les rédacteurs.
Les différentes manières d’ajouter un bloc de Bouton.
Comme le montre l’animation ci-après, pour ajouter ce type de bloc, vous avez le choix d’utiliser l’une des commandes d’interface de l’éditeur moderne suivantes :
Notez bien que la présence de l’icône du bloc de Bouton dans les raccourcis du bloc par défaut dépend de sa régularité d’utilisation. Ce comportement s’applique à tous les blocs de l’éditeur moderne.
La personnalisation du bloc de Bouton.
Une fois que vous avez ajouté un tel bloc, vous pouvez d’abord personnaliser son texte et la cible de votre action depuis son contenu. La plupart du temps cette action sera un lien vers une autre page de votre site ou celle d’un site externe, mais vous pouvez tout à fait utiliser une des ancres HTML de votre document (s’il en contient!).
Comme le montre l’animation ci-dessus, la barre d’outils du bloc vous donne la possibilité d’ajuster l’alignement horizontal de votre bouton d’action dans le document. En fonction de votre préférence vous utiliserez l’un des boutons qui se situent entre la deuxième et la quatrième position de cette barre d’outils pour respectivement aligner à gauche, centrer ou aligner à droite.
Vous pouvez aussi mettre le texte du bouton d’action en gras, en italique ou en texte barré grâce aux trois boutons suivants.
Le tout premier bouton de la barre d’outils, celui dont l’icône reprend le visuel du bloc de Bouton, vous offre un choix de style supplémentaire pour personnaliser l’apparence de votre bouton d’action. Dans l’animation, je choisis par exemple un style rectangulaire sans arrondi.
Pour régler la couleur du texte ou celle de l’arrière plan de votre bouton, il s’agit d’utiliser la section de réglages correspondante au sein de l’onglet « Bloc » de la colonne latérale. A l’aide de sa section « Avancé », vous pouvez éventuellement affecter une classe additionnelle à votre bouton d’action.
(2) Le bloc « Lire la suite ».
Ce procédé de coupure d’une publication existe déjà dans l’éditeur classique comme le montre la capture d’écran ci-dessous.
En insérant une balise « lire la suite » dans notre article, les pages listant une série d’articles (ex: page d’archive, de catégorie ou d’étiquette, …) n’afficheront que la partie du contenu de la publication qui précède cette balise. Sous cette introduction de l’article et dans ces pages de liste, un lien invitant le lecteur à poursuivre sa lecture est, par ailleurs, ajouté pour atteindre la page individuelle de l’article qui, elle, l’affiche dans sa globalité.
Les différentes manières d’ajouter un bloc « Lire la suite ».
Tout comme le bloc de Bouton que nous venons de voir, les commandes de l’interface de l’éditeur moderne illustrée ci-dessous sont disponibles pour générer ce bloc.
Il est également possible que l’éditeur moderne génère ce type de bloc lorsque vous convertissez un bloc classique en blocs. Par exemple : ce type de conversion peut être nécessaire lorsque vous souhaitez éditer une publication ayant été rédigée avant votre installation de l’éditeur moderne.
Si nous avons déjà vu comment réaliser cette opération dans notre deuxième tutoriel, un peu de révision n’est jamais de trop ! L’animation ci-dessus vous rappelle comment procéder en se focalisant sur la conversion de la balise « Lire la suite » de l’éditeur classique en bloc « Lire la suite » de l’éditeur moderne.
NB : caractéristique spécifique à ce bloc : son utilisation est unique.
En effet, à partir du moment où un bloc « Lire la suite » est inséré dans votre document, il ne sera plus possible d’en ajouter d’autres de ce type comme le montre la capture d’écran qui suit.
Dans les choix proposés par la commande d’autocomplétion (ou par le sélecteur de types de bloc), ce type de bloc apparaîtra avec une opacité moins prononcée pour signifier cette caractéristique. De mon point de vue, c’est très cohérent par rapport à la fonctionnalité puisque la délimitation de l’introduction s’effectuera dés la première occurrence du bloc ou de la balise « Lire la suite » sans se préoccuper des suivantes.
L’éditeur classique est, à tort, beaucoup moins strict sur le sujet comme le montre la capture d’écran ci-dessus, ce qui peut prêter à confusion.
La personnalisation du bloc « Lire la suite ».
La seule personnalisation disponible pour ce bloc est fournie dans l’onglet « Bloc » de la colonne latérale.
L’animation ci-dessus vous montre l’action du bloc sur la partie frontale de votre site quelque soit la valeur du réglage « Masquer l’accroche avant l’étiquette lire la suite ». Nous retrouvons bien tout ce qui précède le bloc affiché dans la page listant les articles ainsi que le lien « Continuer la lecture » permettant de lire l’article dans sa globalité.
Si ce réglage est actif, alors la partie au dessus du bloc « Lire la suite » (en d’autres termes l’accroche) ne sera affichée que dans les pages listant des articles et donc sera masquée dans la page individuelle de l’article. Ce réglage lorsqu’actif permet donc de reproduire le comportement de l’extrait d’un article en disposant de beaucoup plus d’espace d’édition que ce qui est proposé par la section correspondante de l’onglet « Document » de la colonne latérale.
(3) Le bloc « Saut de page ».
Ce type de bloc vous permet de diviser votre publication en pages et de générer la pagination nécessaire à « feuilleter » chacune de ces pages.
Il n’existe pas d’équivalence dans l’éditeur classique natif de WordPress. Pour reproduire ce comportement dans cet éditeur, vous aurez besoin d’installer une extension complémentaire comme par exemple TinyMCE Advanced.
Les différentes manières d’ajouter un bloc « Saut de page ».
Tout comme les blocs vus précédemment, les commandes de l’interface de l’éditeur moderne démontrées dans l’animation ci-après vous permettent d’ajouter ce bloc et donc de diviser votre publication en autant de pages.
La personnalisation du bloc « Saut de page ».
La barre d’outils de ce bloc ne contient que les commandes d’option du bloc et l’onglet « Bloc » de la colonne latérale ne vous propose pas de réglage particulier, comme en témoigne la capture d’écran qui précède.
(4) Le bloc d’Espacement.
Voici un bloc qui se révèle fort pratique lorsque vous souhaitez accentuer le passage à une autre partie de votre publication. Par exemple, je précède toutes les conclusions des tutoriels de cette série par ce bloc. Une fois encore, c’est une innovation de l’éditeur moderne par rapport à ce qui existe dans l’éditeur classique (même si vous pouvez imiter l’espacement en enchaînant des paragraphes vides).
Les différentes manières d’ajouter un bloc d’Espacement.
Au risque de me répéter, vous pouvez ajouter le bloc d’Espacement en utilisant les commandes d’interface de l’éditeur moderne :
le raccourci du bloc par défaut (si vous avez dernièrement utilisé le bloc d’Espacement),
L’animation ci-dessus illustre ces trois possibilités (rappelons le : communes à tous les blocs).
La personnalisation du bloc d’Espacement.
Vous pouvez définir la hauteur de l’espacement inséré grâce au réglage correspondant dans l’onglet « Bloc » de la colonne latérale.
Dans la capture d’écran ci-dessus, vous pouvez voir que cette hauteur est fixée à 100 pixels par défaut. Comme beaucoup d’autres blocs, vous pouvez aussi ajouter des classes CSS additionnelles grâce à la section « Avancé » de ce même onglet.
(5) Le bloc du Séparateur.
En activant la barre d’outils avancée de l’éditeur classique, vous pouvez intégrer une ligne horizontale dans votre contenu comme le montre la capture d’écran ci-dessous.
C’est ce que nous pouvons comparer à ce bloc de mise en page de l’éditeur moderne. Tout comme le bloc d’Espacement, ce bloc peut nous aider à bien marquer la séparation entre deux parties d’un contenu.
Les différentes manières d’ajouter un bloc du Séparateur.
Vous disposez, une fois n’est pas coutume, des trois commandes d’interface pour insérer un tel bloc dans votre publication. La réserve quant à la présence de l’icône du bloc du Séparateur dans les raccourcis du bloc par défaut s’applique comme pour tous les autres blocs.
L’animation ci-dessus vous permet de visualiser ces trois commandes en action pour ajouter un nouveau bloc du Séparateur.
La personnalisation du bloc du Séparateur.
Cette fois-ci, la barre d’outils du bloc est un peu plus fournie et contient notamment un premier bouton reprenant le visuel du bloc du Séparateur. En cliquant dessus, vous faites apparaître une nouvelle fenêtre vous offrant trois possibilités d’apparence pour votre séparation :
une ligne courte,
une ligne large,
ou encore une série de points.
Ces trois styles sont illustrés ci-dessus ainsi que la disponibilité du réglage vous permettant d’ajouter des classes CSS additionnelles depuis l’onglet « Bloc » de la colonne latérale.
(6) Le bloc de Colonnes.
Le bloc de Colonnes de l’éditeur moderne du projet Gutenberg est une formidable avancée dans la personnalisation de la mise en page de vos publications. Il s’agit d’un bloc pouvant en contenir d’autres et qui offre la particularité de vous permettre d’empiler ces blocs enfants horizontalement. Il n’existe pas d’équivalence éditable visuellement à cette innovation dans l’éditeur classique.
Les différentes manières d’ajouter un bloc de Colonnes.
Pour ajouter ce bloc, on ne change pas une recette qui a fait ses preuves ! Vous pouvez naturellement compter sur les trois commandes d’interface de l’éditeur moderne qui sont illustrées tour à tour dans l’animation qui suit.
La personnalisation du bloc de Colonnes.
Une fois votre bloc de Colonnes inséré, il affichera par défaut deux colonnes chacune remplit par un bloc par défaut pour vous permettre de rédiger ou insérer vos blocs enfants quasiment comme vous le feriez dans la zone de rédaction principale de l’éditeur moderne. C’est ce que montre la capture d’écran ci-après.
Ajouter des blocs enfants
La seule différence par rapport à la zone de rédaction principale est que seules deux commandes d’interface seront disponibles pour ajouter vos blocs. L’icône en forme de + entouré à droite de la première colonne vous informe que le sélecteur de types de bloc sera bien utilisable.
D’ailleurs, je le prouve ci-dessus en cliquant sur ce plus entouré !
NB : notez que si vous déclenchez le sélecteur de types de bloc depuis la barre de commandes supérieure de l’éditeur moderne, le type sélectionné s’insérera sous et dans la même colonne que le bloc actif.
La deuxième commande disponible est celle de l’autocomplétion : ce sont donc les raccourcis du bloc par défaut qui ne sont pas repris (probablement en raison de l’économie d’espace générée par cette absence).
Grâce à l’onglet « Bloc » de la colonne latérale, vous pouvez augmenter le nombre de colonnes du bloc de Colonnes grâce à la glissière ou au champ numérique de sa première section. Dans l’exemple ci-dessous, j’ai ajouté une troisième colonne dans laquelle j’ai inséré un bloc de Bouton.
Personnaliser l’ensemble des colonnes
Toujours dans cet onglet, à partir de la section « Avancé » vous pouvez spécifier une ou plusieurs classes CSS additionnelles si votre thème propose des règles de style particulières pour ce type de bloc.
Personnaliser UNE des colonnes
Sachez également, que vous pouvez personnaliser ce même réglage pour chacune des colonnes du bloc. Dans l’exemple ci-dessus, j’ai activé la première colonne, en la survolant jusqu’à faire apparaître un encadré bleu indiquant « Colonnes (beta) → Colonne » dans son coin gauche, avant de cliquer dessus. Ensuite, grâce au bouton de commandes d’option du bloc de la barre d’outils de la colonne, j’ai pu « Afficher les réglages du bloc » en cliquant sur le menu correspondant. Enfin, j’ai inséré mon nom de classe additionnelle dans le réglage de la section « Avancé » du bloc colonne.
Grâce à cette possibilité d’ajout d’une classe à une colonne spécifique, j’ai pu sur la partie frontale du site définir un alignement vertical particulier pour cette colonne de sorte que le paragraphe et le bouton se positionne en son milieu.
Réorganiser les blocs enfants des colonnes.
Vous pouvez d’abord réordonner la liste des blocs enfants d’une colonne en utilisant les contrôles en forme de chevrons qui s’affichent à gauche de ces blocs lorsque vous les survoler.
Comme le montre la capture d’écran ci-dessus, je m’apprête par exemple à déplacer le dernier paragraphe de la première colonne au dessus du bouton. Vous pouvez également utiliser le glisser déposer pour arriver au même résultat en cliquant sur le « grip » qui se situe entre les deux chevrons et en maintenant cliqué avant de commencer votre déplacement.
Ce déplacement, comme le montre la capture d’écran ci-dessus peut se faire vers une autre colonne. La ligne bleue qui apparaît informe sur le futur positionnement du bloc déplacé.
Merci d’avoir suivi cette avant dernière revue des catégories de types de bloc de l’éditeur moderne. Le prochain et dernier tutoriel de cette série dédié à l’éditeur du projet Gutenberg s’intéressera aux deux catégories qu’il nous reste à étudier :
les widgets,
les contenus embarqués.
En attendant, je vous invite une nouvelle fois à manipuler le prochain éditeur de votre WordPress grâce à l’outil de démonstration fourni par WordPress.org car mon petit doigt me dit que la publication de la version 5.0 de WordPress (version dans laquelle l’éditeur moderne sera introduit et activé par défaut) n’est plus qu’une question de mois !
La version 1.3.0 de la bibliothèque des media centrée sur les utilisateurs de votre WordPress améliore sa disponibilité sur la partie frontale de votre site. Les utilisateurs peuvent désormais encore plus facilement ajouter des éléments de leur MediaThèque personnelle dans les publications que certaines extensions autorisent depuis cette partie de votre site. En d’autres termes, ces mêmes extensions peuvent complètement se reposer sur MediaThèque pour prendre en charge leurs besoins en matière de gestion des téléversements.
Rappel des super-pouvoirs de MediaThèque.
Une bibliothèque complémentaire et indépendante de celle proposée par WordPress en natif.
Une gestion individualisée par utilisateur leur permettant :
de ranger leurs media selon l’arborescence de répertoires de leur choix, de la même manière qu’ils peuvent le faire depuis le dossier « Mes images » de leur ordinateur personnel.
Deux niveaux de visibilité : public et réservé aux utilisateurs authentifiés sur votre site.
Une meilleure intégration avec l’éditeur classique en frontal.
Généralement, lorsqu’il est question de publier un contenu depuis la partie frontale des sites, les extensions ont recours à une version personnalisée (bien souvent simplifiée) de l’éditeur classique de WordPress. Dans ce cas, MediaThèque s’intégrera « automagiquement » à cet éditeur.
Exemple des forums bbPress
bbPress c’est l’extension qui équipe votre WordPress d’un forum de discussions. Elle utilise, par défaut, le mode « Quicktags » de l’éditeur classique. Juste au dessus de sa barre d’outils, vous retrouverez le bouton « Ajouter un media » généré automatiquement par MediaThèque.
La capture d’écran ci-dessus montre le résultat de l’insertion du logo bbPress à partir de la fenêtre modale de la MediaThèque de l’utilisateur qui surgit lorsque le bouton « Ajouter un media » est cliqué. Dans ce mode particulier de l’éditeur classique, une URL permettant d’imbriquer l’image directement dans le sujet de forum est insérée dans la zone de rédaction. Une fois le sujet publié, cette URL est remplacée par le fichier image du logo bbPress, comme illustré ci-dessous.
C’est le comportement par défaut pour bbPress, mais vous pouvez aussi profiter du mode visuel de l’éditeur classique dans vos forums en créant par exemple un fichier \wp-content\mu-plugins\bbp-custom.php et en y incluant un « hook » spécifique comme celui-ci :
L’avantage du mode visuel de l’éditeur est qu’il vous sera alors possible de visualiser l’image du logo bbPress directement dans sa zone de rédaction et de modifier sa présentation.
Pour cela comme le montre la capture d’écran précédente, il suffit de cliquer sur l’image pour faire apparaître les liens d’édition et de suppression positionnés juste au dessus de l’image. En cliquant sur le bouton Modifier (icône présentant un crayon), la fenêtre modale des préférences d’affichage de la MediaThèque apparaît. Il est alors possible de modifier l’alignement, la taille et le lien de l’image insérée comme le montre la capture d’écran suivante.
Cette fenêtre modale présentera, bien entendu, des préférences d’affichage en cohérence avec le type de fichier inséré dans l’éditeur.
Exemple des conversations privées de BuddyPress
Ce que je viens de décrire pour bbPress est transposable à toute extension utilisant l’éditeur classique (que ce soit dans l’administration ou dans la partie frontale de votre site). Pour preuve, si nous nous intéressons aux formulaires des conversations privées de BuddyPress, et ce lorsque son ensemble de gabarit « BP Nouveau » est activé, vous retrouverez également le même bouton d’ajout de media au dessus de la barre d’outils de leurs éditeurs.
Dans la capture d’écran ci-dessus, le logo BuddyPress a été inséré dans la zone de rédaction. Dans le cas des conversations privées de BuddyPress, c’est le mode visuel de l’éditeur classique qui est actif, ce qui permet de visualiser l’image insérée et comme nous l’avons vu précédemment de personnaliser sa présentation en cliquant sur le bouton « Modifier ». Lorsque cette conversation est publiée, l’image insérée sera bien affichée dans l’interface de BuddyPress comme le montre l’illustration qui suit.
Faire appel à la MediaThèque depuis une extension.
Les extensions de WordPress peuvent aussi avoir besoin de gérer les téléversements des utilisateurs sans pour autant utiliser d’éditeur de contenu. C’est le cas par exemple de BuddyPress pour le formulaire de publication de son composant des activités de site. Ce formulaire utilise un champ multiligne classique dont l’attribut HTML id est whats-new. C’est un détail technique qui a son importance dans la mesure où cet identifiant est requis pour effectuer la liaison entre l’interface d’insertion de la MediaThèque de l’utilisateur et le champ. Cette fois-ci, il n’y a pas d’automatisme, l’extension ou le bricoleur aura besoin de faire appel à la fonction mediatheque_button() afin de rendre utilisable la MediaThèque avec son formulaire de publication. Pour celui des activités de BuddyPress, ça nécessitera, par exemple, l’ajout des lignes de code suivantes au fichier \wp-content\plugins\bp-custom.php (BuddyPress s’occupant lorsqu’il est activé de charger ce fichier spécifique).
Comme vous pouvez le constater, il suffit de passer l’identifiant du champ multiligne du formulaire de publication d’une activité dans le tableau des arguments de la fonction mediatheque_button() pour assurer la liaison évoquée plus tôt.
Voici, ci-dessus, le résultat du morceau de code précédent. Vous retrouvez bien le bouton d’ajout de media juste au dessus de celui relatif à la publication de l’activité (ou « note »). Tout comme c’était le cas du mode « Quicktags » de l’éditeur classique, lorsque vous insérez un media, c’est son URL d’imbrication qui est utilisée. Une fois l’activité publiée, cette URL est remplacée par le media correspondant, comme le montre la capture d’écran suivante.
Mettre à jour/Installer MediaThèque
L’extension MediaThèque est hébergée sur GitHub et est enregistrée sur l’Entrepôt. Si vous utilisez l’Entrepôt vous pourrez effectuer l’installation ou la mise à jour d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.
Cette nouvelle version de ma collection personnelle de blocs destinés à une utilisation dans l’éditeur moderne de WordPress (il arrive dans sa prochaine version majeure) se concentre sur l’amélioration du bloc d’imbrication de codes sources hébergés sur GitHubGist.
Copier, coller : c’est embarqué.
La principale évolution du bloc d’insertion de Gist réside dans sa nouvelle capacité à s’auto-générer lorsqu’une URL qui commence par https://gist.github.com est collée dans le bloc par défaut de l’éditeur moderne.
Tada !
Conversion des Gists contenus dans l’éditeur classique
Si d’autres extensions (ex: JetPack) proposent d’intégrer des GitHub Gists dans l’éditeur classique, le bloc d’insertion de Gist de GutenBlocks se chargera d’assurer leurs conversions dans l’éditeur moderne.
re Tada !
Pour information, c’est d’ailleurs ce besoin qui est à l’origine de l’évolution du bloc d’insertion de Gist de GutenBlocks. En effet, c’est mon ami Grégoire Noyelle qui m’en a fait part sur le dépôt GitHub de l’extension.
Télécharger / Mettre à jour GutenBlocks
L’extension GutenBlocks est hébergée sur GitHub et est enregistrée sur l’Entrepôt. Si vous utilisez l’Entrepôt vous pourrez effectuer l’installation ou la mise à jour d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.
Voici le dernier numéro de ma série de tutoriels dédiés à l’utilisation de l’éditeur du projet Gutenberg dans vos sites WordPress. J’atteins aujourd’hui l’objectif que je m’étais fixé : vous livrer un guide de prise en main de l’éditeur moderne avant son intégration au cœur de WordPress.
seule l’utilisation de l’éditeur moderne sera traitée dans ces tutoriels. Si vous avez besoin d’informations concernant la création d’extensions ou l’adaptation des thèmes de ou pour l’éditeur moderne, je vous invite à consulter le manuel officiel ;
les captures d’écran ont été réalisée en étant connecté en tant qu’Administrateur sur la configuration suivante : WordPress 4.9.8, Gutenberg 4.0 et TwentySeventeen.
lorsque ça sera pertinent, j’ajouterai des éléments de comparaison entre l’éditeur moderne et son prédécesseur le classique ;
le type de publication utilisé pour ce tutoriel est majoritairement l’article, j’indiquerai les spécificités liées au type des pages lorsque ce sera nécessaire ;
Je termine par la revue des catégories de types de bloc portant sur l’insertion de widgets et d’URL d’imbrication dans vos publications. Nous aurons ainsi vu ensemble la quasi-totalité des blocs proposés par le sélecteur de types de bloc. « Quasi » car j’ai fait l’impasse sur la catégorie des « Éléments en ligne » qui contient un unique bloc permettant d’insérer un media dans un bloc de type Paragraphe et parce que je n’ai abordé que la liste des blocs qui sont inclus nativement dans l’éditeur moderne. Sachez que, d’ores et déjà, vous pouvez enrichir cette liste en parcourant GitHub ou le répertoire officiel des extensions de WordPress pour en découvrir et en installer de nouveaux.
La catégorie des widgets, exception faite du type du « Code court » (1), regroupe des blocs dynamiques : c’est à dire ceux dont le contenu est susceptible d’évoluer dans le temps. 4 de ces blocs vous rappelleront logiquement certains des widgets disponibles pour personnaliser la barre latérale de la partie frontale de votre site. C’est normal, ils en sont inspirés. Il s’agit des bloc des « Archives » (2), des « Catégories » (3), des « Derniers commentaires » (4) et des « Derniers contenus » (5).
Le bloc de Code court, quant à lui, vous permet de poursuivre votre utilisation des « Shortcodes », qui pouvait être plus ou moins fréquente dans l’éditeur classique, au sein de l’éditeur moderne.
La catégorie des types de bloc de « Contenus embarqués » est celle qui contient le plus d’éléments : 34 ! Ils défilent par lots de 7 à 9 dans l’animation ci-contre. Il s’agit de contenus distants que vous pouvez intégrer à votre publication par la simple utilisation d’une URL emboîtable (plus connue sous le terme « code embed »). Rassurez-vous, nous ne passerons pas en revue les 34 blocs, mais simplement celui du « Contenu embarqué » (6) dans la mesure où ces différents blocs font tous sensiblement la même chose.
PS : les chiffres entre parenthèses informent sur l’ordre de passage des blocs dans cette revue.
NB : tout comme c’était le cas pour notre précédent tutoriel, le sous-chapitre abordant les transformations disponibles des blocs, que nous avions pris l’habitude de décrire dans nos 4 premières revues, est absent dans la mesure où aucun des blocs étudiés n’en propose.
(1) Le bloc de Code court
A l’issue de mon introduction sur les blocs d’insertion de media riches, je vous ai indiqué que pour l’instant les blocs des « playlists » audio et vidéo étaient toujours en travaux et qu’en attendant leur arrivée dans l’éditeur moderne, on pouvait se reposer sur le code court utilisé par l’éditeur classique. Aussi, pour illustrer ce bloc spécifique, j’ai pensé que ce serait une bonne idée de précisément utiliser le shortcode [playlist].
Les différentes manières d’ajouter un bloc de Code court
Même si je ne le montre pas dans l’animation ci-dessous : sachez que si vous copiez un code court et que vous le coller dans la zone de rédaction d’un bloc par défaut (celui du Paragraphe), le bloc de Code court sera automatiquement généré.
En revanche, l’animation précédente reprend bien les possibilités offertes par les commandes de l’interface de l’éditeur pour insérer ce type de bloc dans votre document :
vous pouvez utiliser l’un des trois raccourcis sur la droite du bloc par défaut, si vous avez dernièrement ajouté un bloc de Code court,
ou vous pouvez faire appel au sélecteur de types de bloc en cliquant, par exemple, sur le bouton dont l’icône présente un plus entouré et qui est positionné à gauche du bloc par défaut,
ou vous pouvez aussi avoir recours à la commande d’autocomplétion : dans la zone de rédaction du bloc par défaut, en saisissant / suivi des premières lettres de votre type de bloc vous faîtes apparaître une liste de choix qui vous permettra de sélectionner celui à insérer.
Par ailleurs, comme nous l’avons vu précédemment ici et là, un bloc de Code court peut également être généré lorsque vous convertissez un contenu précédemment rédigé à l’aide de l’éditeur classique.
Comme le montre l’animation ci-dessus, vous pouvez convertir un bloc classique en blocs cohérents par rapport aux différents éléments de son contenu grâce à la commande d’option du bloc « Convertir en blocs ». Dans ce cas précis, le fait que le contenu contienne une playlist audio est une transition idéale vers notre prochain chapitre !
La personnalisation du Code court.
La dernière image de cette animation présente, en particulier, le code court d’une « playlist » audio :
[playlist ids="80,41"]
Le paramètre ids contient la liste des identifiants numériques des media sonores séparés par des virgules. Dans le cas d’une « playlist » vidéo, un paramètre type définit à video est à rajouter.
Comme le montre la capture d’écran qui précède, cette rédaction du Code court est la seule personnalisation disponible du bloc. Voici son résultat dans la partie frontale du site.
(2 à 5) Les autres blocs du type Widget
Cette possibilité d’inclure des widgets dans le contenu de la publication est une innovation de l’éditeur moderne qui ne trouve pas d’équivalence visuelle dans l’éditeur classique.
Pour prévenir toute confusion, ces blocs prennent en compte tous les articles de votre site et pas seulement celui qui est en cours d’édition.
Étant donné que le procédé d’insertion dans le document est identique pour chacun des autres blocs du type widget, je vous propose d’aborder le chapitre suivant en prenant l’exemple du bloc des Archives.
(2 à 5) Les différentes manières d’ajouter les autres blocs du type Widget
Comme le montre l’animation ci-après, seules les commandes d’interface de l’éditeur moderne sont disponibles pour ajouter ces types de bloc à savoir, pour rappel : un des raccourcis positionnés à droite, le sélecteur de types de bloc positionné à gauche, ou la commande d’autocomplétion, du bloc par défaut de l’éditeur moderne.
(2) La personnalisation du bloc des Archives
Après insertion, le contenu du bloc est dynamiquement peuplé selon les mois et années de publication de vos articles. Vous disposez de la barre d’outils du bloc et de l’onglet « Bloc » de la colonne latérale pour spécifier vos préférences d’affichage de ces archives comme en atteste la capture d’écran qui suit.
Vous pouvez d’abord, grâce aux boutons d’alignement de la barre d’outils du bloc, centrer ou aligner à gauche ou à droite la liste affichée dynamiquement.
Vous pouvez également profiter de la section des réglages des archives de l’onglet « Bloc » de la colonne latérale pour choisir un affichage sous forme de liste déroulante et/ou indiquer entre parenthèses le nombre d’articles publiés à droite de chaque mois d’archive.
La section « Avancé » vous permet d’affecter une ou plusieurs classes CSS additionnelles pour votre bloc des Archives.
(3) La personnalisation du bloc des Catégories
Cette fois-ci ce sont les catégories d’article qui peuplent dynamiquement le contenu du bloc.
Comme montré ci-dessus, la barre d’outils du bloc vous aide à ajuster l’alignement du bloc et d’autres réglages sont disponibles depuis l’onglet « Bloc » de la colonne latérale pour :
utiliser une liste déroulante en lieu et place de la liste classique,
rendre compte visuellement de la hiérarchie des catégories,
indiquer, entre parenthèses, le nombre d’articles après chaque nom de catégorie.
Vous pouvez également spécifier des noms de classe CSS additionnelles depuis le réglage correspondant de la section « Avancé » de cet onglet.
Pour information : si votre thème, comme c’est le cas de celui de mon site, supporte les alignements étendus, vous trouverez un bouton supplémentaire dans la barre d’outils du bloc pour faire occuper la totalité de la largeur de la page à votre bloc de catégories comme le montre la capture d’écran ci-après.
(4) La personnalisation du bloc des Derniers commentaires
Si vous avez besoin de présenter les derniers commentaires postés sur les articles de votre site dans une page, il peut être intéressant d’avoir recours à ce bloc. Pour un article, si les commentaires sont activés, prenez garde à ne pas introduire une confusion entre ces commentaires « globaux » et les commentaires de l’article en cours de lecture.
La capture d’écran ci-dessus démontre que la barre d’outils de ce bloc vous permet d’aligner son contenu.
Elle montre également que vous pouvez personnaliser les éléments affichés (avatar, date et extrait) pour chaque commentaire ainsi que le nombre de commentaires à présenter aux lecteurs.
Par ailleurs, si votre thème supporte les alignements étendus, deux nouveaux boutons dans la barre d’outils du bloc vous permettront d’élargir son étendue sur la page comme le montre la capture d’écran ci-dessus.
(5) La personnalisation du bloc des Derniers contenus
Le bloc des Derniers contenus devrait selon moi s’intituler « Derniers articles » dans la mesure où c’est le seul type de publication qui sera pris en compte lors du rendu de son contenu.
Comme l’illustre la capture d’écran précédente, la barre d’outils de ce bloc vous propose de centrer son contenu et de choisir parmi deux dispositions :
en lignes,
ou en colonnes.
Pour cet exemple, j’ai choisi la deuxième, laquelle me paraît particulièrement intéressante pour présenter à la lectrice ou au lecteur, et en fin d’article, d’autres contenus du site qui pourrait l’intéresser. C’est d’autant plus pertinent si depuis l’onglet « Bloc » de la colonne latérale vous décidez de filtrer cette liste selon la même catégorie que votre article en cours d’édition.
Toujours depuis cet onglet, vous pouvez régler l’ordre d’affichage, le nombre d’articles à afficher et si leurs dates de publication doivent être intégrées.
Si vous avez choisis la disposition en colonnes, une glissière sera insérée juste avant la section « Avancé » de cet onglet pour vous permettre d’ajuster le nombre de colonnes à utiliser pour votre bloc.
(6) Le bloc de Contenu embarqué
L’intérêt pour l’éditeur moderne de lister les 34 blocs qui composent la catégorie des contenus embarqués est de nous informer des sources de contenu distant supportées.
Ainsi vous pouvez embarquer des tweets, des vidéos, des sons, des présentations, etc, qui sont hébergés sur des plateformes spécialisées comme YouTube pour la plus connue d’entre elles. Allez, pour éviter de faire des jaloux, voici la liste des 32 autres sources disponibles : Twitter, Facebook, Instagram, WordPress *, SoundCloud, Spotify, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Kickstarter, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Speaker Deck, TED, Tumblr, VideoPress et WordPress.tv.
* Votre site WordPress est également une source d’URL d’imbrication si vous utilisez une version de WordPress >= 4.4.
Comme annoncé plus tôt, l’étude du bloc générique du Contenu embarqué vous permettra de comprendre l’utilisation de tous les autres blocs de cette catégorie : nous nous concentrons donc sur ce dernier dans la suite de cette partie.
Les différentes manières d’ajouter un bloc de Contenu embarqué
Si les commandes d’interface de l’éditeur moderne (raccourcis, sélecteur de type de bloc et commande d’autocomplétion du bloc par défaut) sont également à votre disposition pour insérer un bloc de ce type, très vite vous utiliserez la capacité du bloc par défaut à se transformer en bloc de contenu embarqué lorsque vous collez une URL emboîtable dans sa zone de rédaction.
C’est ce que montrent les trois dernières images de l’animation ci-dessus en prenant l’exemple de l’intégration d’un tweet.
La personnalisation du bloc de Contenu embarqué
Si vous avez préféré utiliser une des commandes d’interface, vous passerez par une étape préliminaire du bloc pour définir l’URL à embarquer comme le montre la capture d’écran ci-dessous.
Dans ce formulaire, il s’agit d’utiliser le champ de texte pour indiquer l’URL avant de cliquer sur le bouton « Contenu embarqué » lequel lancera la requête d’intégration.
Une fois cette requête complétée, vous serez en mesure de prévisualiser le contenu et d’ajuster sa présentation.
C’est ce qui est illustré ci-dessus. Dés lors, vous serez en mesure d’utiliser la barre d’outils du bloc pour définir l’alignement de votre contenu embarqué. L’avant dernier bouton de cette barre d’outils : celui qui présente une icône en forme de crayon vous permettra de revenir à l’état préliminaire du bloc pour éventuellement modifier l’URL à embarquer.
Vous pouvez également ajouter une légende à votre bloc en la rédigeant depuis l’espace réservé à cet effet sous le contenu embarqué. Dans ce cas une nouvelle barre d’outils vous permettra de mettre en forme cette légende et de lui attacher un lien.
Grâce à l’onglet « Bloc » de la colonne latérale, un réglage vous permet d’automatiquement ajuster l’espace occupé par le contenu embarqué par rapport à la largeur disponible sur la page de la publication. Et bien entendu, la section « Avancé » de cet onglet vous autorise toujours à attacher une classe CSS additionnelle à votre bloc.
La capture d’écran ci-dessus montre que si votre thème supporte les alignements étendus, vous pourrez les appliquer au bloc de Contenu embarqué.
Mission accomplie !
Je suis arrivé au bout de la série #TuttoGut, une série de six tutoriels pour tout savoir sur l’utilisation de l’éditeur du projet Gutenberg. Si vous souhaitez relire ou lire un précédent numéro, voici un rappel de nos six étapes pour bien démarrer avec l’éditeur de blocs qui sera intégré dans la version 5.0 de WordPress.
D’ici à la sortie officielle de cette prochaine version de WordPress, je suivrai avec attention les évolutions de cet éditeur et mettrai à jour chacun de ces tutoriels en cas de besoin.
Le 7 décembre prochain sera une date fondatrice pour la communauté WordPress de Lille et de ses environs. Le Nouveau Siècle accueillera le tout premier WordCamp de Lille et son alléchant programme de 14 interventions dédiées à WordPress et à ses projets open source.
Une célébration annuelle et officielle de WordPress pour la communauté locale de Lille.
C’est ce qu’est avant tout un WordCamp ! Avant même d’être une série de conférences ou d’ateliers destinés à évangéliser WordPress : c’est une rencontre locale exceptionnelle des passionné·e·s de WordPress des environs de Lille qui se rassemblent par ailleurs régulièrement grâce à l’animation de son groupe « Meetup ». Ce groupe, créé en janvier 2014, compte à ce jour 530 membres et 26 rencontres locales. Chère lectrice, cher lecteur, si vous êtes l’une de ces 530 personnes : vous devez absolument participer au WordCamp Lille !
En effet, c’est à mon avis votre premier devoir de contribution au développement de votre communauté locale. Il n’y a aucune, je dis bien aucune, raison valable pour que vous manquiez cette magnifique occasion de vous retrouver toutes et tous ensemble autour de WordPress pour construire le succès de votre WordCamp et démarrer une très belle histoire.
La principale « évolution » de cette nouvelle version de ma collection de blocs personnels est une disparition !
En effet, depuis que le bloc d’Image de Gutenberg donne la possibilité d’utiliser une URL pour ajouter une photo (fonctionnalité introduite dans la version 4.1), le bloc Photo de GutenBlocks se sentait de trop alors il s’est fait la malle !
Mise à niveau des publications intégrant ce bloc.
Si vous utilisiez ce bloc dans vos publications, une mise à niveau de ces dernières vous sera proposée comme l’illustre la vidéo ci-dessus. Si vous utilisez l’Entrepôt, cette mise à niveau sera plus rapide (2ème partie de la vidéo).
Mettez à jour !
D’autres améliorations moins visibles ont été ajoutées, comme l’intégration d’une description pour les blocs « GitHub Release » et « Doubleur » ou encore l’amélioration de l’affichage de la langue sélectionnée pour « Doubleur ».
L’extension GutenBlocks est hébergée sur GitHub et est enregistrée sur l’Entrepôt. Si vous utilisez l’Entrepôt vous pourrez effectuer l’installation ou la mise à jour d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.
Avez-vous remarqué qu’il n’existait pas, à la différence des thèmes et des extensions, de répertoire officiel sur WordPress.org pour les types de bloc de l’éditeur moderne ?
Aujourd’hui, le « canal de distribution » des blocs consiste à constituer des lots de types de bloc et à les encapsuler dans des extensions.
Et si au lieu de subir le téléchargement forcé d’un lot de types de bloc, alors qu’une seule des unités de ce lot vous intéresse, vous ne téléchargiez que ce que vous utiliserez effectivement ?
C’est ce que vous propose la version 1.5.0 de l’Entrepôt !
Alors, évidemment, lorsque vous vous rendrez pour la première fois sur l’écran d’administration des types de bloc de l’Entrepôt : vous n’en aurez aucun d’installé.
Pour découvrir les types de bloc qui sont disponibles dans l’Entrepôt, il suffit d’activer l’onglet « Disponibles ».
Une fois encore, le choix sera très limité les premiers temps ! C’est normal, cette possibilité de partager des types de bloc autonomes hébergés dans des dépôts publics sur GitHub.com vient juste d’être lancée. Mais vous pouvez compter sur moi pour en ajouter régulièrement à commencer par ceux que j’ai regroupés dans l’extension GutenBlocks.
J’espère, par ailleurs, que les développeurs qui regrettent que les répertoires officiels de WordPress ne se reposent toujours pas sur Git après quatorze ans d’existence et d’immobilisme comprendront qu’un bon moyen de faire bouger les choses est d’agir en découvrant de nouveaux horizons. l’Entrepôt a déjà prouvé qu’il était possible de se reposer sur Git pour les extensions et les thèmes, aujourd’hui c’est aussi possible pour les types de bloc. Rejoignez moi !
Le type de bloc formulaire de recherche ne représentera certainement pas un intérêt majeur pour les utilisateurs. En revanche, les auteurs de blocs désireux de rejoindre l’Entrepôt pourront s’en inspirer pour créer et inscrire leurs types de bloc sur ce tout nouveau canal de distribution. En passant, si vous êtes un auteur de blocs, je vous invite à prendre connaissance des pages suivantes de la documentation de l’extension :
PS : une simple « pull request » vous permet de rejoindre l’Entrepôt !
Gestion de l’installation, de la mise à jour, de l’activation, de la désactivation et de la suppression des types de bloc.
À l’instar de ce qu’intègre déjà l’Entrepôt pour les thèmes et extensions hébergés sur GitHub.com, lorsqu’un type de bloc est inscrit sur l’Entrepôt il bénéficie d’une installation et d’une mise à jour simplifiée.
D’ailleurs, lorsqu’une mise à jour est disponible, le menu « Types de bloc » de votre administration WordPress vous le signalera en ajoutant une pastille orange foncé contenant le nombre de types de bloc en attente de mise à jour. Vous pourrez alors consulter les notes de version et bien entendu mettre à jour les types de bloc concernés.
L’activation du type de bloc est nécessaire afin que vous puissiez le retrouver dans les blocs de l’éditeur moderne de WordPress. Pensez donc à cliquer sur le bouton « Activer » une fois que vous aurez installé votre type de bloc !
L’Entrepôt ce n’est pas qu’un canal de distribution de types de bloc !
Pour ceux qui découvrent l’entrepôt aujourd’hui, sachez qu’au delà de proposer des sources alternatives à WordPress.org pour vos thèmes, extensions et types de bloc, il contient d’autres fonctionnalités telles qu’un centre de notifications pour limiter l’impact des extensions et thèmes indésirables qui abusent de ces notifications ainsi que la possibilité de gérer les versions de vos extensions en cas de difficulté suite à une mise à jour délicate. Les auteurs d’extensions ou de thèmes peuvent également compter sur l’API de mise à niveau de l’Entrepôt.
Télécharger l’Entrepôt
Si vous utilisez déjà l’Entrepôt vous devriez pouvoir mettre à jour l’extension depuis l’administration WordPress de votre site très prochainement et d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.
Il y a un peu moins de deux semaines, j’annonçais le lancement du tout nouveau tout beau répertoire de blocs de l’Entrepôt. J’avais tout préparé pour que des créateurs de blocs rejoignent cette initiative sans trop y croire, je dois le reconnaître. La diffusion de son tweet d’annonce a d’ailleurs rapidement été très éclairante sur l’accueil par la communauté de cette dernière (2 « RT » pour 6 « likes » – en passant merci aux rares d’entre vous qui ont « retweetés » ou « likés »).
Alors je resterai vraisemblablement le seul à vous proposer de nouveaux blocs autonomes dans l’Entrepôt, dommage !
À ce propos en voici un nouveau : le bloc de Section. C’est pour répondre à la demande de mon ami Grégoire Noyelle que je l’ai conçu hier après-midi.
Son besoin est de pouvoir regrouper des blocs dans une section. J’imagine qu’il s’agit de pouvoir plus facilement organiser ses publications, de manipuler des lots de blocs ou encore de profiter du compartiment avancé de l’onglet « bloc » de la barre latérale pour affecter des classes de style personnalisées à la section et mieux contrôler l’affichage en frontal de ce qu’elle contient.
Installer le bloc de Section ?
Si vous n’avez pas encore installer l’Entrepôt, il faudra le faire car ce bloc y est exclusivement disponible !
Une fois que c’est fait, vous retrouverez le bloc de Section dans l’onglet « Disponibles » de l’écran d’administration des types de blocs de votre WordPress. Il s’agit tout simplement de cliquer sur le bouton « Installer » pour lancer son téléchargement.
Une fois que l’installation sera complétée, il suffira de cliquer sur le bouton « Activer le bloc » pour le retrouver dans l’éditeur de vos contenus, comme l’illustre la toute première capture d’écran de cet article.
Voilà ! L’Entrepôt contient désormais 2 blocs 3 autres le rejoindront très prochainement car je vais éclater l’extension Gutenblocks en 3 blocs autonomes distincts. L’avantage pour les éventuels utilisateurs de GutenBlocks sera qu’ils ne subiront plus l’installation de tous les blocs si par exemple ils n’utilisaient que celui pour embarquer des Gists de GitHub.com.
Le 1er mai 2018, je vous faisais part de mon inquiétude vis à vis de la version mineure 4.9.6 de WordPress. Elle s’est finalement confirmée puisque cette version a introduit ce qui selon moi était une régression dans l’expérience des utilisateur·rice·s qui décidaient de ne pas autoriser l’utilisation de cookies pour garder une trace de leurs données personnelles.
Pour résumer l’anomalie : lorsqu’un commentaire était posté sur votre site par un·e utilisateur·rice n’ayant pas activé la case à cocher autorisant cet usage de cookies, il·elle ne disposait d’aucune information quant à la prise en compte de son commentaire.
Moi qui suis très attaché à cette fonctionnalité de WordPress (les commentaires), j’avais alerté l’équipe de développement et proposé un correctif. Pour mémoire, la 4.9.6, c’était la version de WordPress dédiée à la mise en place des premiers mécanismes de mise en conformité par rapport au règlement général de protection des données. Aussi lorsque j’ai compris que la correction de cette anomalie serait remise à plus tard, j’ai transformé le correctif en extension « rustine » puis je l’ai partagée sur GitHub.com.
L’anomalie est corrigée !
Aujourd’hui je suis très heureux de vous annoncer que vous n’aurez plus besoin de cette extension « rustine » dés que vous aurez mis à jour WordPress pour sa version 5.1.0, version dont la sortie est planifiée pour les tous prochains jours (vers le 21/02).
En effet comme le montre la capture d’écran du « commit » de Gary ci-dessus et la capture d’écran ci-dessous, l’expérience d’utilisation est désormais identique pour tou·te·s les commentateur·rice·s : un message les informe bien que leur commentaire est en attente de modération.
Un exemple de commentaire en attente de modération retrouvé dans la version 5.1.0.
Aussi, si vous utilisez toujours cette extension, je vous recommande de vérifier que vous l’avez bien mis à jour pour sa version 1.1.0. La particularité de cette version est de neutraliser l’action de l’extension si toutefois la version de WordPress est supérieure ou égale à la version 5.1.0. Une fois que vous aurez mis à jour WordPress, vous pourrez sereinement désactiver puis supprimer cette extension.
La version 5.0 de WordPress et surtout son éditeur de blocs ont été discutés et continue de l’être. Beaucoup d’entre nous partagent leur mécontentement en regrettant que tel ou tel détail ait été mal pensé ou mal conçu. Aussi, je crois qu’il est important de saisir l’opportunité offerte par Josepha pour lui faire part des points forts et des points d’effort qui caractérisent cette version si controversée.
Pour vous inspirer, vous trouverez ci-dessous mes réponses à l’enquête qui servira à l’élaboration de ce bilan. J’ai volontairement fermé les commentaires de cet article, car le plus important n’est pas de me dire ce que vous avez pensé de ce cycle de développement, mais de le faire directement auprès de WordPress !
Ne tardez pas trop, vous avez jusqu’au 15 mars pour participer à ce bilan.
Q1. Quels aspects du cycle de développement de la version 5.0 devraient être maintenus lors des prochains cycles ?
J’ai beaucoup apprécié contribuer à l’extension Gutenberg depuis GitHub. Je ne sais pas si c’est le cas, mais j’ai l’impression que l’utilisation de GitHub a permis à des personnes avec un bagage ou des expériences divers de se lancer dans la contribution à WordPress. Par ailleurs, gérer des PRs est beaucoup plus pratique que gérer des patches. Donc je pense que choisir GitHub pour le développement des nouvelles fonctionnalités est une excellente idée.
C’est aussi très bien de disposer de tout ce dont nous avons besoin au même endroit : le dépôt GitHub de Gutenberg intègre notamment des notes à l’attention des contributeurs et de la documentation de développement qui sont d’une aide très précieuse. Les gens du projet Gutenberg ont vraiment été super amicaux avec moi et j’ai énormément appris à propos de React en suivant leurs conseils.
Je pense que la partie réservée aux développeurs de la communication du projet s’est vraiment bien déroulée. Nous avons fréquemment été informés des progrès effectués et de l’évolution du planning. L’article traitant de la gouvernance de la version 5.0 et de la manière dont les équipes étaient organisées a été très important selon moi, alors merci beaucoup pour celui-ci.
Finalement, je crois que c’est génial que Matt ait sponsorisé cette fonctionnalité. Il est important que le chef du projet impulse une dynamique pour transformer les idées de rupture en réalités opérationnelles.
Q2. Y-a-t-il des choses que nous devrions commencer à faire ?
Beaucoup de ce que j’ai entendu au sujet des possibles améliorations à apporter concernait l’adoption par les utilisateurs ou la gestion du changement au sein des entreprises.
Le cycle de développement 5.0 est particulier car il a introduit une innovation majeure quant à la manière de rédiger des contenus dans WordPress suite à plus de dix années d’utilisation de l’éditeur classique. Je pense, malheureusement, que les utilisateurs ou les entreprises ne lisent pas si souvent que cela les publications issues du « Make ». Je pense aussi que la manière dont nous échangeons sur ce « Make » ne parle pas beaucoup aux utilisateurs ou aux entreprises et je doute qu’un utilisateur ou un représentant d’une entreprise réagirait à une des publications.
C’est pourquoi je crois qu’un article de lancement sur w.org/news expliquant comment cette innovation de rupture pourrait impacter leur utilisation, comment le cycle pourrait être cadencé, …, le tout accompagné d’une invitation à partager leurs préoccupations à son propos dés cette étape avancée aiderait à éviter des controverses ou des malentendus. Un point à mi-parcours serait également intéressant pour échanger sur les progrès accomplis.
Une documentation pour les utilisateurs et des tutoriels mis à disposition plus tôt : je reconnais que ce n’était pas facile étant donné que l’interface de l’éditeur de blocs évoluait très rapidement. Toutefois, à la différence de l’éditeur classique, une telle documentation est nécessaire pour commencer à utiliser l’éditeur de blocs. J’ai moi-même écrit six tutoriels sur mon blogue personnel et des utilisateurs m’ont remercié par exemple parce qu’ils ne comprenaient pas comment ajouter un lien dans le bloc du paragraphe. Ainsi des choses qui peuvent nous paraître évidente ne le sont peut-être pas pour tous les utilisateurs.
Q3. Des choses que nous devrions cesser de faire ?
À mon humble avis, une nouvelle fonctionnalité, quelque soit son importance ou ses grandes attentes, ne devrait jamais avoir un impact sur le rythme des cycles de développement. Suite à la publication de la version majeure 4.9.0, certaines versions mineures faisaient plus que simplement résoudre des anomalies ou des problèmes de sécurité. Par exemple la version 4.9.6 a introduit le composant de la vie privée. Elle aurait déjà dû être étiquetée 5.0.0.
Je pense que la décision d’attendre que le projet Gutenberg dispose d’un éditeur prêt à l’emploi était trop risquée. Une forte pression s’est abattue sur les membres de l’équipe de ce projet, et des personnes d’autres équipes de contribution ont dû être assez démotivées que toute l’attention se soit portée sur une seule fonctionnalité.
Après coup, je pense que l’intégration de l’éditeur de blocs dans WordPress aurait pu se faire de manière plus harmonieuse durant un cycle de développement ultérieur (ex: 5.1 ou 5.2). Cela nous aurait permis d’éviter de se balancer entre le tronc et la branche 5.0 lors de nos contributions à WordPress pendant un temps certain !
Presser un projet open source devrait vraiment être évité. Je me revois lire que des nécessités d’accessibilité n’étaient pas au rendez-vous et penser que peut-être nous devrions patienter pour ne pas risquer de générer une mauvaise opinion des membres de la communauté à propos de l’éditeur de blocs avant même d’avoir commencé à l’utiliser.
Je pense également qu’il est préférable d’ouvrir des discussions lorsqu’il reste encore quelque chose à discuter. Je me rappelle de ce compte-rendu de la réunion JavaScript du 23 avril 2017 au sujet du cadre JavaScript que WordPress devait choisir pour son avenir. Si vous relisez les commentaires aujourd’hui, vous vous apercevrez qu’une large majorité d’entre eux sont favorables à Vue.js, mais c’est React qui a été choisi. Et ce choix n’est certainement pas étranger au fait que les premières itérations de l’éditeur de blocs ont été développées dans ce cadre. Je pense que c’est mieux de directement annoncé : « nous avons choisi React pour ces raisons… »
Q4. D’autres retour d’information à propos du cycle de développement que vous aimeriez partager ?
Je ne sais pas si seule la France est concernée, mais j’ai le sentiment que le cycle de développement de la version 5.0 a égratigné la communauté française. Désormais il existe deux clans principaux :
celles et ceux qui sont frustrés parce qu’ils ont subit l’éditeur de blocs dans leur business. Elles et ils ont l’impression que la décision d’intégrer la fonctionnalité n’a pas été le résultat d’un consensus mais leur a été imposée par la force.
les supportrices et supporteurs de l’éditeur de blocs.
C’est maintenant très compliqué de se parler et toute nouvelle annonce relative aux fonctionnalités de WordPress est vécue comme une menace ou comme une décision qui ne satisfait pas l’intérêt général mais des intérêts particuliers.
Je suis très heureux que Josepha ait publié cette enquête car je pense qu’il est important que nous essayions en permanence d’améliorer le logiciel et la manière dont nous le construisons. J’espère vraiment que les personnes sceptiques partageront leurs préoccupations afin que nous trouvions une manière de nous réconcilier.
Nombreux remerciements à toutes les contributrices et à tous les contributeurs du cycle de développement de la version 5.0. Ça n’a pas été facile, c’est un cycle très controversé, mais félicitations pour l’excellent travail accompli.
Q5. Y a-t-il d’autres questions que nous aurions dû poser ?
En voici une : si vous n’avez pas contribué à ce cycle de développement, qu’est ce qui, selon vous, vous a manqué pour vous lancer ?
C’est pour moi la deuxième année que je m’embarque dans l’orientation d’un équipage communautaire cherchant à réunir les enthousiastes de la plateforme de publication en ligne WordPress à l’occasion de l’événement annuel qui célèbre ce projet open source à Paris : son WordCamp.
En 2019, nous nous sommes fixés pour challenge de concevoir un rassemblement de 3 jours dont chacune des journées cible prioritairement un public en particulier.
Le mercredi 24 avril 2019
Jusqu’à 80 contributrices et contributeurs travailleront de concert pour améliorer différents domaines et projets open source de WordPress.
Je serai l’un des animateurs des tables de contribution qui seront proposées. Durant cette journée, je revêtirai mon T-shirt BuddyPress et je guiderai vos premiers pas contributifs en vous montrant :
comment tester des correctifs ou en proposer.
comment la communication de notre équipe de développement s’organise grâce notamment à l’utilisation de notre chaîne Slack et de nos outils de gestion de nos codes sources (Trac, GitHub).
comment vous pouvez améliorer la traduction de BuddyPress.
comment nous pourrions créer ensemble une documentation française sur le site fr.BuddyPress.org.
Au cours de cette journée, nous bénéficierons également de l’appui de Boone et John, respectivement « Lead developer » et « Project Lead » de BuddyPress. On va se régaler !
Jusqu’à 450 participantes et participants assisteront à des conférences sur des sujets principalement orientés sur le développement (du code, personnel ou business) à partir de WordPress.
Si vous cherchez à approfondir votre expérience de la plateforme de publication sur Internet, cette journée comblera votre attente et vous permettra de rencontrer vos paires et d’enrichir vos compétences au contact des expertes et experts reconnu·e·s de la communauté française.
Le vendredi 26 avril 2019
Certain·e·s des participantes et des participants de la journée précédente seront rejoint·e·s par d’autres pour se regrouper jusqu’à une nouvelle fois 450 enthousiastes.
Au programme de ce deuxième jour de conférences : des thèmes accessibles à toutes et à tous avec un zoom particulier sur le e-commerce et une ouverture sur le futur de WordPress pour terminer ce WordCamp hors normes.
Pour plus d’information sur les conférences proposées, la liste est disponible depuis cette page :
Nous avons choisi un lieu à la hauteur de notre ambition : le campus Malesherbes. Je l’ai visité 3 fois et je suis toujours plus émerveillé par ses installations qui me paraissent être l’écrin rêvé pour notre rencontre communautaire.
Il ne reste plus qu’un ingrédient pour que la fête soit une belle réussite : la participation du plus grand nombre, alors n’hésitez pas à faire connaître le site du WordCamp Paris 2019 (et surtout la page de sa billetterie ). Merci d’avance.
PS : ne tardez pas trop car passé le 8 avril 2019, la billetterie fermera ses portes
Une des étapes importantes de la mise en place d’un site communautaire équipé de l’extension BuddyPress est l’affectation de pages WordPress aux principaux composants de cette extension.
À vrai dire il existe deux types de composants BuddyPress :
ceux qui nécessitent cette affectation comme les Activités, les Membres, les Groupes ou les Sites (si vous utilisez une configuration Multisite de WordPress) : je les qualifie de majeurs,
ceux qui « s’accrochent » aux précédents dont ils dépendent comme par exemple les Profils Étendus ou les Conversations Privées. En effet ils se rapportent tous les deux au composant des Membres.
Ainsi, vous retrouverez dans l’administration de vos pages WordPress une ou plusieurs entrées dans la liste affichée pour le (ou les) composant(s) majeur(s) de BuddyPress que vous aurez activé.
Si vous ouvrez l’une d’entre elles en mode d’édition, par exemple : celle des « Activités du site », vous vous rendrez vite compte de deux incohérences pouvant dérouter l’utilisateur débutant.
Peu importe les blocs de contenu que vous ajouterez dans votre zone de rédaction : ils n’apparaîtront jamais dans la page du composant.
Ajouter une image à la une est un vain effort puisqu’elle non plus ne sera jamais affichée.
Depuis cet écran d’édition, les deux seuls éléments que vous pouvez modifier sont le titre de la page et son lien permanent.
Ci-dessus est illustrée la page principale des Activités du site : comme évoqué à l’instant, ni le paragraphe ni l’image à la une n’apparaissent. On constate par ailleurs que la zone réservée au contenu généré par BuddyPress est assez restreinte en largeur lorsque le thème Twenty Nineteen est actif.
Or, selon moi, l’API des blocs de WordPress peut aider BuddyPress à rendre plus cohérente la gestion de ces pages spécifiques pour l’utilisateur.
Un bloc d’emplacement BuddyPress, ce n’est pas la peine possible d’en rajouter.
Depuis l’introduction de cette API, nous disposons d’un contrôle beaucoup plus précis sur le contenu de ces pages. En effet, Il est désormais possible pour tout type de publication :
de définir sa combinaison de blocs grâce à la propriété template (en savoir plus),
de cadenasser l’insertion de blocs grâce à la propriété template_lock (en savoir plus).
Profitons-en pour restreindre le contenu de ces pages à un emplacement BuddyPress dont le seul rôle sera d’indiquer que les activités, par exemple et comme le montre la capture d’écran plus haut, s’afficheront dans cette page.
Et tant que nous y sommes, donnons la possibilité à l’utilisateur de contrôler l’alignement du conteneur des activités grâce à la barre d’outils du bloc d’emplacement BuddyPress. L’avantage c’est qu’il pourra alors élargir ce conteneur pour les thèmes qui autorisent les alignements étendus comme Twenty Nineteen.
Prise en compte de l’image à la une pour les vues plurielles de BuddyPress.
Les composants majeurs de BuddyPress utilisent ces pages WordPress de deux manières :
pour afficher tous les éléments à l’aide d’une boucle : c’est la vue plurielle ;
pour détailler sur un élément en particulier : c’est la vue singulière.
Étant donné que la vue singulière d’un membre ou d’un groupe peut intégrer une image de couverture personnalisée pour l’élément affiché, la prise en compte de l’image à la une paraît superflue.
En revanche, dans les vues plurielles qui sont l’affichage par défaut de ces pages : l’intégration de l’image à la une me paraît un très bon moyen d’ajouter un visuel illustrant les informations qui y sont listées.
Un nouveau réglage dans l’outil de personnalisation pour incorporer des styles d’accompagnement dédiés aux contenus de BuddyPress.
Le pack de gabarits BuddyPress « Nouveau » ajoute une section intitulée « BuddyPress Nouveau » à l’outil de personnalisation de WordPress (autrement appelé le « Customizer ») afin de permettre à l’administrateur un paramétrage plus fin de l’apparence des contenus générés par BuddyPress.
À la différence du pack de gabarits BuddyPress « Legacy », « Nouveau » n’intègre pas de feuilles de style d’accompagnement pour chacun des thèmes par défaut de WordPress. Nous pourrions, bien entendu, porter cette fonctionnalité dans « Nouveau », j’ai préféré toutefois opter pour une manière beaucoup plus visuelle d’arriver au même résultat en choisissant d’ajouter un nouveau réglage à la section « BuddyPress Nouveau » de l’outil de personnalisation de WordPress. Il s’agit du réglage des « Styles d’accompagnement » comme le montre la capture d’écran ci-dessus.
Ce réglage utilise le même contrôle que celui utilisé par le réglage du CSS additionnel de WordPress et vous permet d’ajouter les règles de style nécessaires à l’adaptation de l’apparence des balises générées par BuddyPress à votre thème.
La particularité de ces styles en ligne est qu’ils sont uniquement chargés dans les zones « BuddyPress » du site. Grâce à l’image ci-dessus, j’illustre quelques améliorations de la présentation pour le thème Twenty Nineteen.
Distribution de ce renforcement de cohérence.
Avant d’envisager de proposer ces améliorations directement dans l’extension BuddyPress (ce qui pourrait potentiellement résoudre cette anomalie), j’ai pensé qu’une bonne manière de les tester et d’en mesurer la pertinence était de les regrouper dans une extension spécifique que j’ai appelé « Meilleur Copain ».
Cette extension est hébergée sur GitHub et est enregistrée sur l’Entrepôt. Si vous utilisez l’Entrepôt vous pourrez effectuer l’installation ou la mise à jour d’un simple clic. Autrement, il s’agira d’utiliser l’interface de téléversement d’une nouvelle extension de votre administration WordPress pour y déposer le fichier zip téléchargeable ci-dessous.
Vingt DixSept
Activités de Publication
Bon 
) de ce site : elle rassemblera une série d’articles documentant l’utilisation de votre prochaine interface de rédaction dans WordPress. Mon premier TuttoGut à paraître ce dimanche (le 12/08) vous présentera en détails ce qui entoure la partie centrale et rédactionnelle. Pour chacun de ces articles, je réserverai un moment pour comparer interface moderne et classique.
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.
MediaThèque
GutenBlocks
Entrepôt
3 autres le rejoindront très prochainement car je vais éclater l’extension 
). Merci d’avance.
Meilleur Copain
