WordPress: comment utiliser l’éditeur web 2.0 de WordPress

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Gutenberg : comment utiliser l'éditeur web 2.0 de WordPress

[Gutenberg] Avec les versions 5.8 et la future version 5.9 du CMS, ce n’est plus seulement les pages web qui sont éditables via le système de « blocs », mais l’entièreté du site web, du header au footer.

À son lancement en décembre 2018, Gutenberg a provoqué beaucoup de débats. Nombreux étaient les défenseurs de « l’éditeur classique » de à pourfendre l’idée même de transformer le CMS en un « vulgaire » environnement de développement de pages web no-code (ou WYSIWYG). Leur argument ? Gutenberg allait nuire à la philosophie première de et à tous ceux qui aimaient mettre la main dans le code HTML. Mais pouvaient-ils avoir conscience que Gutenberg annonçait une révolution profonde de  ?

Si les débuts de Gutenberg ont été un peu chaotiques, il faut bien avouer qu’au fil des mises à jour, l’éditeur s’est nettement amélioré. L’outil de base est devenu particulièrement intuitif et efficace. En parallèle, les développeurs de plugins s’en sont emparé pour y apporter les fonctionnalités supplémentaires qui lui faisaient défaut.

Présentation de l’éditeur Gutenberg

« Avec Gutenberg, l’expérience d’édition de contenu a été totalement repensée pour les pages et articles. Les blocs apportent une grande flexibilité, que vous soyez un débutant dans la construction de sites web ou un développeur chevronné », expliquent les contributeurs de . « Avec les blocs vous pouvez insérer, organiser et mettre en forme du contenu avec un minimum de connaissances techniques. Gutenberg est plus qu’un éditeur. Ce sont aussi des fondations qui ont pour objectif de révolutionner la construction et la personnalisation de sites avec  ». Le ton est donnée.

Une expérience utilisateur réussie

Là où Gutenberg marque des points vis-à-vis d’autres éditeurs comme WP Bakery ou Elementor, c’est dans sa simplicité d’utilisation. Le fait qu’il ait été développé lentement, par l’ajout de fonctionnalités successives, a permis d’arriver à une version encore perfectible, mais suffisamment agréable à utiliser pour convaincre les plus sceptiques. Il permet d’insérer un bloc en visualisant immédiatement le rendu graphique, puis de le modifier ou le déplacer par glisser-déposer si besoin. Simple et pratique.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Des blocs inclus nativement

La liste des blocs inclus nativement dans l’éditeur Gutenberg est limitée, mais progresse lentement de mise à jour en mise à jour. Si ces blocs suffisent à la plupart des besoins de mise en page, des plugins permettent d’étendre leurs fonctionnalités. Les blocs natifs de l’éditeur Gutenbergs se divisent depuis la sortie de  5.8 en six catégories :

Texte : blocs pour créer du contenu écrit. Dans cette catégorie, des blocs permettent créer des titres, des paragraphes et des listes.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Média : blocs pour insérer tout type de média (image, vidéo, son).

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Design : blocs pour ajouter des objets graphiques à la mise en page (bouton, colonne, séparateur, etc). Ils intègrent de nouveaux blocs en prévision du futur full site editing.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Widgets : blocs correspondant aux widgets historiques de qui permettent d’intégrer des applications et animations dans la page.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Thème : blocs inaugurés avec  5.8 qui, là encore, préfigure le full site editing. Il s’agit pour le moment de blocs pour personnaliser l’affichage des derniers articles publiés.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Contenus embarqués : blocs conçue pour intégrer toute une série de contenus externes à votre site (Twitter, Youtube, Soundcloud, etc.).

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Créer un bloc Gutenberg

Avec l’éditeur Gutenberg, il existe quatre façons d’ajouter un bloc à une page web. Comme on l’a vu, il existe une grande variété de blocs différents pour mettre en page votre contenu. Deux possibilités s’offrent à vous pour trouver le bloc qui vous convient et l’ajouter à votre page :

1. Utiliser le bouton « + ». Situé dans la barre supérieure de l’éditeur, ou à droite de chaque ligne vide, ou encore entre chaque bloc déjà existant, le bouton + permet d’ajouter un bloc.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Le bouton plus ouvre un menu proposant un champ de recherche, les derniers blocs les plus utilisés ou la possibilité de parcourir l’ensemble des blocs disponibles.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

2. Uiliser le raccourci « / ». Une fonctionnalité bien pratique consiste à utiliser le raccourci « / » pour choisir le bloc à insérer dans la page. Pour cela, il suffit de positionner son curseur de souris sur une ligne vide et de commencer à écrire le nom du bloc recherché en le précédant du signe « / ».

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Configurer un bloc Gutenberg

Il existe deux menus qui apparaissent lorsque l’on clique sur les blocs : une barre supérieure et une barre latérale. En général, la première donne accès à des réglages très généraux et basiques, et la seconde à des options de personnalisation plus avancées.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Les blocs imbriqués

Il est possible d’imbriquer des blocs dans d’autres. Un bloc de type colonne intégrera par exemple un bloc de contenu texte aux côtés d’un bloc avec une image. Pour naviguer entre ces différents niveaux de blocs, il suffit de cliquer sur le bouton symbolisant chaque bloc situé totalement à gauche de la barre supérieure.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Lorsqu’on clique sur une colonne, on pourra accéder aux réglages du bloc texte qu’elle contient. Si on clique sur le bouton de gauche, on accèdera cette fois aux réglages du bloc supérieur (ou parent), à savoir ici le bloc »colonnes ».

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Fonctionnalités générales de Gutenberg

Barre supérieure : On y retrouve plusieurs informations clés sur la page en cours d’édition : nombre de caractères, nombre de mots, nombre de titres, de paragraphes et de blocs, structure hiérarchique des titres de la page.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Vue en « Liste » : Niché dans la barre supérieure, ce bouton donne accès à la structure de la page via une liste hiérarchique de tous les blocs utilisés.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Colonne « Réglages » : Accessible sur la droite de l’éditeur en cliquant sur le bouton « Réglages » en forme d’engrenage, on y retrouve tous les paramètres traditionnels de  : état et visibilité, permalien, catégorie et étiquettes, image mise en avant, extrait, réglages de commentaires.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Options : A côté du bouton « réglages », on trouve trois petits points verticaux pour accéder aux options : Vue (pour configurer l’environnement), Éditeur (pour passer du mode visuel au mode HTML, et inversement), Outils (pour activer ou désactiver des blocs, gérer les blocs réutilisables, connaitre les raccourcis clavier, copier le contenu de la page).

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Enfin au sein des options, les Préférences permettent de personnaliser Gutenberg en fonction de ses besoins.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Prémices du full site editing

Si Gutenberg est un éditeur de pages web, le full site editing étendra sa logique à l’échelle du thème, c’est-à-dire de l’ensemble de la structure d’un site web. Pour faire simple, il devrait permettre de créer un site de zéro par simples ajouts de blocs personnalisables. Une perspective qui pourrait signer la mort des thèmes Premium, en tous cas tel qu’on les connait aujourd’hui dans .

La  5.8 introduit les prémices du full site editing avec l’arrivée dans Gutenberg d’une série de blocs baptisés « Theme ». Parmi eux figure par exemple un bloc « Boucle de requête » qui permet d’afficher les derniers articles publiés sous forme de liste ou de grille personnalisable. Chaque groupe d’élément (image, titre, extrait, date) pouvant ensuite être déplacés et personnalisés (voir capture ci-dessous).

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Gutenberg dans les widgets

Avec WorddPress 5.8, on découvre une autre nouveauté orientée full site editing : la possibilité de construire des widgets à partir de blocs Gutenberg. La fonctionnalité accessible via les menus Tableau de bord >Apparence > Widgets permet personnaliser les zones de widget (entête, barre latérale, pied de page).

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

Après avoir tapé un grand coup dans la fourmilière des plugins historiques de orientés édition, le CMS risque de bousculer dans les années à venir l’écosystème des thèmes premium qui devront s’adapter aux nouvelles exigences imposées par sa nouvelle stratégie de full site editing.

All the CMS Templates You Could Ask For.

WordPress: comment utiliser l'éditeur web 2.0 de WordPress

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



WordPress: comment utiliser l'éditeur web 2.0 de WordPress

#comment #utiliser #léditeur #web20de #