Fermer

novembre 7, 2019

Explorer de nouvelles façons de gérer le contenu dans WordPress


À propos de l'auteur

Leonardo Losoviz est un développeur et écrivain indépendant, dont la mission est d'intégrer des paradigmes innovants (PHP sans serveur, composants côté serveur, GraphQL)…
Plus d'informations sur
Leonardo

Gutenberg réinvente l'expérience de la création de contenu dans WordPress en lui accordant de nouveaux pouvoirs pour créer, modifier et gérer notre contenu. Voyons quels sont ces nouveaux pouvoirs.

La combinaison de la polyvalence de WordPress pour la gestion des données (son modèle de base de données prenant en charge la création de différents modèles de contenu, facilement extensibles à l'aide de méta-attributs) et de la richesse de Gutenberg les interactions entre utilisateurs fournissent un mécanisme puissant pour créer, éditer et gérer le contenu.

Dans cet article, je souhaite mettre en lumière ces fonctionnalités mises à niveau, explorer les nouveaux outils à notre disposition et en présenter plusieurs nouveaux qui seront publiés ultérieurement.

Fonctionnalités existantes

Les fonctionnalités suivantes font déjà partie de WordPress optimisé par Gutenberg.

Créez une fois, publiez-le partout

Comme je l'ai décrit dans mon récent article «Créez une fois, publiez-le partout» ”Avec WordPress la nature par bloc de Gutenberg lui permet d’améliorer la manière dont le contenu est organisé / structuré sur la base de données, en le rendant disponible sur une base granulaire (bloc par bloc) toute application fonctionnant sur n'importe quel support ou plate-forme (Web, messagerie électronique, applications iOS / Android, VR / AR, assistants domestiques, etc.). Le contenu géré par Gutenberg peut alors devenir la source unique de vérité pour toutes nos applications, ce qui nous permet de réduire les coûts associés au reformatage du contenu afin de l'adapter à chaque plate-forme requise.

Copier / coller depuis Google Docs avec ( format presque parfait

Chaque fois que nous devons collaborer avec d’autres personnes pour créer du contenu, nous allons probablement utiliser des outils en ligne tels que Google Docs Dropbox Paper Coda ou autres. Ces outils permettent à différentes personnes de modifier simultanément le contenu d'un document et de fournir et incorporer des commentaires. Si nous allons choisir un système de gestion de contenu pour stocker notre contenu, nous devons nous assurer qu'il fonctionne correctement avec ces outils.

Gutenberg fait assez bien le travail: copier le contenu à partir d'un document Google et le coller ensuite. Dans un article de blog Gutenberg, la mise en forme est préservée, les listes à puces sont correctement transformées en bloc de liste et les images sont insérées à l'endroit souhaité. Il peut y avoir quelques incohérences (par exemple, espacement différent entre les blocs et dans le document original), cependant, le processus est généralement utilisable.

 Copier / coller de GDoc vers Gutenberg
Copier / coller de GDoc conserve le format du document. ( Image agrandie )

Direction artistique

Plusieurs blocs de Gutenberg permettent de créer des mises en page distinctives et attrayantes et d’aider la direction artistique du site, afin de lui donner plus de personnalité et de la souligner. son identité. Ainsi, même si nous basons le site sur un thème WordPress standard et d’apparence simple, nous pouvons personnaliser l’apparence du contenu pour le faire ressortir de la mer de similitude qui existe sur le Web. Voyons quelques-uns de ces blocs.

Le bloc Shape divider permet d’insérer des séparateurs entre deux blocs. Nous pouvons en choisir une parmi plusieurs formes de base et en personnaliser la largeur, les proportions et les couleurs, puis, avec un peu d'ingéniosité, en créer d'autres motifs intrinsèques. Par exemple, le séparateur ci-dessous a été créé en créant et en personnalisant d'abord un séparateur, puis en le retournant verticalement et horizontalement pour se reproduire, puis en regroupant ces 2 moitiés afin que nous puissions l'utiliser comme une seule unité (la fonctionnalité de regroupement sera disponible dans le noyau via la version de WordPress 5.3 la semaine prochaine, et est actuellement disponible via le plugin Gutenberg ), et en enregistrant enfin le bloc groupé sous forme de bloc réutilisable afin de pouvoir être utilisé partout dans l'ensemble site:

 Bloc diviseur de forme
Le bloc diviseur de forme relie ou sépare des composants. ( Grand aperçu )

Les blocs Colonnes avancées et Les blocs de disposition des lignes permettent de créer des dispositions basées sur des lignes, à l'intérieur desquelles nous pouvons placer des blocs imbriqués (c'est-à-dire tout autre bloc de Gutenberg). Ils sont hautement configurables: ils permettent de définir le nombre de colonnes que la ligne doit avoir, avec le rembourrage, la marge et la proportion de largeur pour chaque colonne, la définition d’une image ou d’une couleur personnalisée à l’arrière-plan, ainsi que de plusieurs autres attributs.

 block
Le bloc de disposition des lignes permet de configurer facilement la proportion de largeur entre les colonnes. ( Grand aperçu )

Nous pouvons également créer des présentations à base de grille avec un contenu prédéfini. Par exemple, grâce aux blocs Post grid, Post carrousel et Post maonry nous pouvons afficher une liste de publications de différentes manières, en définissant les attributs à afficher de chaque publication (titre, date, extrait, auteur, etc.). sur), et par le bloc Galerie avancée nous pouvons créer de belles galeries d’images.

 Bloc galerie avancé
Galerie de maçonnerie créée avec un bloc galerie avancée. ( Grand aperçu )

D'autres blocs, tels que Grille de fonctions permettent de créer des présentations de grille avec des modèles prédéfinis contenant du contenu personnalisé.

 Bloc de grille de fonctions
Le bloc de grille de fonctions permet d’ajouter du contenu personnalisé à l’intérieur d’une grille. ( Grand aperçu )

Ce ne sont là que quelques exemples de ces blocs qui peuvent nous aider à remplir le contenu avec des mises en page attrayantes et à définir la direction artistique de nos sites. Pour continuer à explorer les possibilités, nous pouvons aller dans le répertoire de plugins proposant des blocs et les consulter.

Assistance de l'utilisateur lors de l'édition de contenu

Gutenberg assiste l'utilisateur lors de la création de contenu à l'aide des fonctionnalités suivantes:

Aperçu en temps réel

L'éditeur de Gutenberg donne un aperçu relativement précis de l'apparence du contenu sur le site Web

Avertissement d'erreur

Gutenberg informe le créateur du contenu des problèmes d'accessibilité. Par exemple, si notre structure de contenu passe d'un en-tête

à un en-tête

sans ajouter de balise

Gutenberg envoie un message d'avertissement concernant cette erreur potentielle. De même, lors de la configuration de la couleur d'un texte par rapport à sa couleur d'arrière-plan, si le contraste entre les deux couleurs n'est pas assez clair, Gutenberg envoie un message d'avertissement et aide à résoudre le problème.

Suggestions / exécutions d'amélioration

Les blocs peuvent connectez-vous à des services tiers pour analyser et améliorer le contenu. Par exemple, un service pourrait suggérer comment améliorer la grammaire du contenu, fournir des titres et des balises alternatifs pour un meilleur référencement, et même traduire automatiquement le contenu dans une autre langue, comme le fait ce plugin qui traduit automatiquement de l'anglais vers l'hindi selon le type d'utilisateur.

Nouvelles fonctionnalités en cours d'implémentation

Nous espérons que les fonctionnalités suivantes seront bientôt disponibles dans Gutenberg:

Alignement sur la grille lors du redimensionnement des images

Les contributeurs travaillent déjà. sur l'ajout d'un système de grille à Gutenberg qui permettra, entre autres, de redimensionner les images de manière assistée en l'accrochant à la grille:

 Installer un bloc à partir de Gutenberg
Acquérir une image to grid (image tirée du numéro de GitHub). ( Grand aperçu )

Installation en ligne de blocs

Parfois, pendant la rédaction d’un article de blog, nous découvrons que nous avons besoin de fonctionnalités que nous n’avons pas encore installées. Par conséquent, nous devons passer à l'écran Plugins, rechercher et installer le plugin correspondant, puis revenir à l'article du blog. Ce processus ajoute des frictions à notre processus d’écriture de contenu.

Ne serait-il pas plus agréable d’installer les fonctionnalités requises directement à partir de l’éditeur lui-même, chaque fois que nous en avons besoin? Eh bien, cette proposition est déjà mise en œuvre par cette demande d’alimentation (d’abord, il faut que les blocs soient installés par eux-mêmes c’est-à-dire sans être livrés via un plugin). Une fois fusionné, notre flux de travail d’écriture de contenu ne sera plus altéré, comme le montre la maquette ci-dessous.

 Installation d’un bloc à partir de Gutenberg
Installation d’un bloc à partir de Gutenberg (image extraite de la demande d'extraction GitHub). ( Grand aperçu )

L'installation de blocs directement à partir de l'éditeur pourrait entraîner un gonflement involontaire, rendant l'installation de blocs trop facile pour l'utilisateur. Pour résoudre ce problème, après l’avoir installé et utilisé, le bloc pourrait être supprimé! Cela n’était pas possible avant Gutenberg, car si le plugin fournissant un shortcode (ce qui était le moyen de restituer le contenu dynamique à l’intérieur de la publication de blog avant Gutenberg) était désactivé, l’invocation du shortcode serait alors restituée dans la publication de blog (au lieu du shortcode), gâchant notre contenu. Cependant, Gutenberg fonctionne différemment: les blocs n’enregistrent que le contenu HTML à l’intérieur de la publication de blog (y compris les commentaires HTML pour stocker les attributs de configuration); ainsi, si le bloc est désactivé, la sortie HTML prévue fait toujours partie du contenu de la publication de blog. (Même s'il peut y avoir des problèmes si le bloc doit charger des actifs CSS qui ne sont plus chargés une fois le bloc désactivé, je ne sais pas comment ce problème sera traité.)

Constructeur de pages / sites

Actuellement de Gutenberg ne peut être utilisé que pour la création de contenu dans un article de blog ou une page, mais il sera bientôt compatible avec la création de tout élément du site Web: Les zones de bloc de contenu peuvent définir l'en-tête, les barres latérales, le pied de page ou toute section nécessaire pour nos mises en page. Automattic (la société derrière WordPress.com ) travaille déjà sur un plug-in pour ajouter des fonctionnalités complètes d'édition du site à son produit WordPress.com, qui devrait éventuellement être extensible au logiciel open source WordPress

 Création d'une nouvelle page avec la modification de site complet activée
La création d'une nouvelle page avec la modification de site complète permet de sélectionner un modèle de page. ( Grand aperçu )

Collaboration en temps réel

Google Docs est extrêmement utile pour les équipes car il permet à leurs membres de travailler sur le même document au même moment. À l'avenir, Gutenberg intégrera également un mécanisme pour la collaboration en temps réel permettant à différentes personnes de travailler simultanément sur le même article de blog. Ce mécanisme consistera (au moins initialement) à donner des verrous d'édition aux utilisateurs, bloc par bloc, comme indiqué dans l'image ci-dessous.

 Collaboration en temps réel via Gutenberg
Collaboration en temps réel à travers Gutenberg (image du numéro de GitHub). ( Image agrandie )

Cette fonctionnalité sera particulièrement utile pour les magazines en ligne (tels que le New York Times et autres), car ils ont peut-être déjà des équipes qui collaborent sur un article (par exemple, des designers images, journalistes, correcteurs et rédacteurs traitant du contenu, etc.). Les outils de collaboration en temps réel permettront à ces magazines d’accélérer leurs processus de création de contenu et de publier leurs articles plus rapidement.

Traduction

WordPress n’a jamais ajouté le support nécessaire à la traduction de contenu (il ne prend en charge que la traduction de chaînes dans le noyau). , plugin et theme), mais a laissé cette responsabilité aux plugins. WordPress va enfin ajouter un support natif pour cette fonctionnalité via Gutenberg.

La traduction n’est pas encore prioritaire, elle a donc été ciblée pour la phase 4 de Gutenberg, prévue pour l’année 2020+. Comme il est très éloigné, il n’ya pas encore de considérations techniques sur sa mise en œuvre ni de modèles de son expérience utilisateur. Nous ne pouvons donc que deviner comment cela se passera. Comme il sera implémenté après la fonctionnalité de collaboration en temps réel (décrite ci-dessus), je pense que cela permettra à différentes personnes de traduire le même message de blog dans plusieurs langues simultanément, bloc par bloc.

Édition de médias en ligne [3] 19659009] Par le biais de la médiathèque, WordPress offre déjà des fonctionnalités d’édition d’images: redimensionnement, recadrage, rotation et retournement. Ces fonctionnalités sont très basiques et elles sont appliquées à l'image sur un écran différent, ce qui crée des frictions lors du processus d'adaptation de l'image à la publication sur le blog.

Grâce à Gutenberg, l'expérience de l'édition multimédia pourrait être grandement améliorée. : D’un côté, il pourrait prendre en charge l’édition de l’image de manière plus évoluée, comme appliquer des effets ou des filtres, modifier le contraste, remplacer les couleurs, ajouter du texte en tant que filigrane, ajouter des régions transparentes, la convertir en différents formats, etc. , Cloudinary fournit une API permettant d'appliquer de nombreuses transformations à une image à laquelle un bloc pourrait facilement accéder. De l’autre côté, l’édition pourrait se faire en ligne, là où l’image est placée dans la publication. Ensuite, par exemple, si l'image a été ajoutée en superposition sur un arrière-plan et que nous ajoutons des régions transparentes à l'image, nous pouvons visualiser en temps réel l'aspect du résultat composite.

(Je n'ai trouvé aucune image. proposition de résoudre ce problème dans le GitHub repo de Gutenberg, mais j'ai appris l'existence de cette idée en parlant à quelques contributeurs clés, qui espéraient pouvoir y travailler à l'avenir.)

Conclusion [19659002] Etant déjà le système de gestion de contenu le plus populaire (près de 35% du Web ), WordPress a également la possibilité d’offrir les outils les plus intéressants pour manipuler du contenu. En effet, Gutenberg offre un mécanisme attrayant pour créer, éditer et gérer du contenu: une interface unique, simple à utiliser, assez puissante et polyvalente. Avec ses nouvelles capacités de gestion de contenu, WordPress peut devenir la source unique de vérité de tout notre contenu, pour alimenter toutes nos applications (sites Web, newsletters, applications, etc.) via des API. Bravo à cela!

 Éditorial éclatant (yk, il)




Source link