Fermer

août 15, 2019

La (à venir) WordPress Renaissance


À propos de l'auteur

Leonardo Losoviz est le créateur de PoP un framework pour la construction de sites Web modulaires basés sur PHP et les guidons, et optimisé par WordPress. Il habite à Kuala…
Plus d'informations sur
Leonardo
Leonardo

Depuis sa sortie il y a 8 mois, Gutenberg s'est considérablement amélioré pour offrir une expérience utilisateur bien plus riche que tout ce qui était possible dans WordPress. Jetons un coup d’œil à ses derniers développements et à son avenir.

Cela fait 8 mois que Gutenberg a été lancé comme éditeur de contenu par défaut dans WordPress. En fonction de vos questions, vous entendrez peut-être que Gutenberg est la pire chose ou la meilleure chose qui soit arrivée à WordPress (ou quelque chose entre les deux). Mais la plupart des gens semblent d’accord avec l’idée que Gutenberg s’améliore constamment. Au rythme actuel du développement, il ne reste plus qu'une question de temps avant que ses problèmes les plus importants soient résolus et que l'expérience utilisateur devienne vraiment agréable.

Gutenberg est un travail en cours. En l'utilisant, j'éprouve des nuisances exaspérantes, telles que des options flottantes sur lesquelles je ne peux pas cliquer car le bloc placé en dessous est sélectionné, un regroupement non intuitif de blocs, des colonnes avec tellement d'écart qui les rendent inutiles et l'élément «+» appelant mon attention sur toute la page. Cependant, les problèmes que je rencontre sont encore relativement gérables (ce qui constitue une amélioration par rapport aux versions précédentes) et, de plus, Gutenberg a commencé à en exploiter les avantages potentiels: un grand nombre de ses problèmes les plus urgents ont été résolus, ses problèmes d'accessibilité sont résolus. résolus et de nouvelles fonctionnalités intéressantes sont continuellement mises à disposition. Ce que nous avons jusqu’à présent est plutôt décent, et cela ne fera que s’améliorer.

Passons en revue les nouveaux développements survenus depuis le lancement de Gutenberg, et les prochaines évolutions.

Note: [19659008] Pour plus d'informations à ce sujet, je vous recommande de regarder la conférence du fondateur de WordPress Matt Mullenweg lors du récent WordCamp Europe 2019 .

Pourquoi Gutenberg était-il nécessaire

Gutenberg est arrivé juste en Il est temps de relancer le rajeunissement de WordPress, de tenter de le rendre attrayant une nouvelle fois (et d’inverser son statut actuel de la plate-forme la plus redoutée ). WordPress avait cessé de paraître attractif en raison de son objectif de ne pas supprimer la compatibilité ascendante, ce qui empêchait WordPress d’intégrer du code moderne, ce qui le rendait plus pâle que les nouveaux frameworks plus brillants.

De nombreuses personnes affirment que WordPress n’était pas en danger de mourir ( après tout, cela représente plus du tiers du Web), de sorte que Gutenberg n’était pas vraiment nécessaire, et ils ont peut-être raison. Cependant, même si WordPress ne courait aucun danger immédiat, en étant déconnecté des tendances du développement moderne, il devenait obsolète, peut-être pas à court terme, mais certainement à moyen et à long terme. Voyons comment Gutenberg améliore l'expérience des différentes parties prenantes de WordPress: développeurs, administrateurs de sites Web et utilisateurs de sites Web.

Les développeurs ont récemment adopté la construction de sites Web via les bibliothèques JavaScript Vue et React, entre autres raisons, du puissance et commodité des composants, ce qui se traduit par une expérience de développement satisfaisante. En prenant le train en marche et en adoptant cette technique, Gutenberg permet à WordPress d’attirer à nouveau les développeurs, leur permettant de coder de manière gratifiante.

Les administrateurs de sites Web peuvent gérer leur contenu plus facilement, améliorer leur la productivité, et réaliser des choses qui ne pouvaient pas être faites avant. Par exemple, placer une vidéo Youtube dans un bloc est plus facile que dans le TinyMCE Textarea, les blocs peuvent servir des images optimales (compressées, redimensionnées en fonction du périphérique, converties dans un format différent, etc.), ce qui vous évite de le faire manuellement. et le WYSIWYG ( W hat Yo u S ee I s W hat Y ou G et) les fonctionnalités sont suffisamment correctes pour fournir un aperçu en temps réel de la présentation du contenu sur le site Web.

En leur donnant accès à de puissantes fonctionnalités, les utilisateurs du site Web aura une plus grande satisfaction lors de la navigation sur nos sites, comme c'est le cas pour l'utilisation d'applications Web très dynamiques et conviviales telles que Facebook ou Twitter.

De plus, Gutenberg modernise lentement mais sûrement tout le processus de création du site Web. . Actuellement, il ne peut être utilisé que comme éditeur de contenu, mais il deviendra à l'avenir un constructeur de site à part entière, permettant de placer des composants (appelés blocs) n'importe où sur une page, y compris l'en-tête, le pied de page, la barre latérale, etc. (Automattic, la société derrière WordPress.com a déjà commencé à travailler sur un plug-in ajoutant des fonctionnalités d'édition complète du site pour son site commercial, à partir duquel il pourrait être adapté pour l'open source Logiciel WordPress.) Grâce à la fonctionnalité de création de site, les utilisateurs non avertis pourront ajouter très facilement des fonctionnalités très puissantes à leurs sites. WordPress continuera donc à accueillir la grande communauté de personnes travaillant sur le Web (et pas seulement les développeurs).

Rythme de développement rapide

L'une des raisons pour lesquelles Gutenberg a connu un rythme de développement aussi rapide tient au fait qu'il est hébergé sur GitHub ce qui simplifie la gestion du code, des problèmes et de la communication par rapport à Trac (qui [1 9459033] gère le noyau WordPress ), ce qui facilite la participation des contributeurs pour la première fois puisqu'ils ont déjà une expérience de travail avec Git.

Découplé du noyau WordPress, Gutenberg peut bénéficier d'une itération rapide. Même si une nouvelle version de WordPress est publiée tous les 3 mois environ, Gutenberg est également disponible en tant que plug-in autonome qui est publié tous les 15 jours (alors que la dernière version de WordPress contient la version 5.5 de Gutenberg, la dernière version du plugin est 6.2). Avoir accès à de nouvelles fonctionnalités puissantes pour nos sites toutes les deux semaines est vraiment très impressionnant et permet de débloquer de nouvelles fonctionnalités de l’écosystème plus large (par exemple, le plugin AMP nécessite Gutenberg 5.8+ pour plusieurs fonctionnalités).

WordPress sans tête pour alimenter plusieurs piles

L'un des effets secondaires de Gutenberg est que WordPress est devenu de plus en plus «sans tête», découplant davantage le rendu de l'application de la gestion du contenu. En effet, Gutenberg est un client frontal qui interagit avec le back-end WordPress via des API (l'API WP REST) ​​et le développement de Gutenberg a nécessité une expansion cohérente des API disponibles. Ces API ne sont pas limitées à Gutenberg; ils peuvent être utilisés avec n'importe quel framework côté client, pour rendre le site en utilisant n'importe quelle pile.

Un exemple de pile que nous pouvons utiliser pour notre application WordPress est le JAMstack qui défend une architecture basée sur sur des sites statiques augmentés par des services tiers (API) pour devenir dynamiques (Smashing Magazine est en fait un site de JAMstack!). De cette façon, nous pouvons héberger notre contenu dans WordPress (en l’utilisant comme système de gestion de contenu, ce à quoi il est vraiment doué), créer une application qui accède au contenu via des API, générer un site statique et le déployer sur un contenu. Réseau de distribution, permettant des coûts moindres et une vitesse d’accès accrue.

Nouvelle fonctionnalité

Jouons avec Gutenberg (le plugin, pas celui inclus dans le noyau de WordPress, disponible ici ici ). une fonctionnalité a été ajoutée au cours des derniers mois.

Gestionnaire de blocs

Grâce au gestionnaire de blocs, nous pouvons décider quels blocs seront disponibles dans l'éditeur de contenu; tous les autres seront désactivés. Supprimer l'accès à des blocs indésirables peut être utile dans plusieurs situations, telles que:

  • De nombreux plug-ins sont des ensembles de blocs; lors de l'installation d'un tel plugin, tous leurs blocs seront ajoutés à l'éditeur de contenu, même s'il ne faut qu'un seul
  • Pas moins de 40 fournisseurs intégrés sont implémentés dans le noyau de WordPress, mais il se peut que nous n'en ayons besoin que de quelques-uns pour l'application. , comme Vimeo et Youtube
  • Le fait de disposer d’un grand nombre de blocs peut nous submerger, nuire à notre flux de travail en ajoutant des couches supplémentaires que l’utilisateur doit parcourir, conduisant à une utilisation sous-optimale du temps; par conséquent, désactiver temporairement des blocs inutiles peut nous aider à être plus efficaces
  • De même, le fait de n'avoir que les blocs dont nous avons besoin évite les erreurs potentielles causées par l'utilisation des mauvais blocs; en particulier, il est possible de déterminer de haut en bas quels blocs sont nécessaires, l’administrateur du site analysant tous les blocs disponibles et décidant lesquels à utiliser, et imposant la décision aux gestionnaires de contenu, qui sont ensuite relevés de cette tâche et peuvent se concentrer sur leurs propres tâches.
 Gestionnaire de blocs
Activation / Désactivation de blocs via le gestionnaire ( Grand aperçu )

Bloc de recouvrement avec éléments de nidification

Le bloc de recouvrement (qui nous permet pour ajouter un titre sur une image d'arrière-plan, généralement utile pour créer des en-têtes de héros), définit désormais ses éléments internes (c.-à-d. l'en-tête et les boutons pouvant être ajoutés pour créer un appel à l'action) en tant qu'éléments imbriqués, ce qui nous permet de modifier ses propriétés dans un chemin uniforme entre les blocs (par exemple, on peut mettre le titre en gras et y ajouter un lien, placer un ou plusieurs boutons et changer la couleur de fond, etc.).

 Bloc de couverture
Le bloc de couverture accepte les fonctions imbriquées. éléments ( Image agrandie )

Regroupement et imbrication de blocs

Attention: ces fonctionnalités sont toujours boguées! Cependant, beaucoup de temps et d'énergie leur sont consacrés, nous pouvons donc nous attendre à ce qu'ils fonctionnent rapidement.

Le regroupement de blocs permet de regrouper plusieurs blocs. Ainsi, lorsque vous les déplacez vers le haut ou le bas de la page, ils bougent tous. ensemble. L’imbrication de blocs consiste à placer un bloc à l’intérieur d’un bloc. La profondeur d’imbrication n’est pas limitée. Vous pouvez donc avoir des blocs à l’intérieur de blocs à l’intérieur de blocs à l’intérieur de… (vous m’avez déjà eu). L'imbrication de blocs est particulièrement utile pour ajouter des colonnes à la présentation, par le biais d'un bloc de colonnes. Chaque colonne peut ensuite contenir tout type de bloc, tel que des images, du texte, des vidéos, etc.

 Regroupement et imbrication de blocs
Blocs peuvent être regroupés et imbriqués l'un dans l'autre ( Grand aperçu )

Migration de widgets préexistants

Alors qu'il existait auparavant plusieurs méthodes pour ajouter du contenu à la page (contenu TinyMCE, shortcodes, widgets, menus, etc.), les blocs tentent de les unifier tous en une seule méthode. Actuellement, le code hérité récemment considéré, tel que les widgets, est en cours de migration vers le format de bloc.

Récemment, le widget "Derniers articles" a été ré-implémenté sous forme de bloc, permettant la prévisualisation en temps réel de l'apparence de la présentation. lors de la configuration (modification du nombre de mots à afficher, affichage d'un extrait ou du message complet, affichage de la date ou non, etc.)

 Widget Derniers messages
Le widget "Derniers messages" comprend plusieurs options permettant de le personnaliser. apparence ( Grand aperçu )

Animation de mouvement

Le déplacement de blocs vers le haut ou le bas de la page entraînait une transition abrupte, rendant parfois difficile la compréhension de la réorganisation des blocs. Depuis Gutenberg 6.1, une nouvelle fonctionnalité de l'animation de mouvement résout ce problème en ajoutant un mouvement réaliste pour bloquer les modifications, par exemple lors de la création, de la suppression ou de la réorganisation d'un bloc, ce qui donne une indication visuelle considérablement améliorée des actions entreprises pour réordonner les blocs. En outre, le concept global d'animation de mouvement peut être appliqué dans tout Gutenberg pour exprimer le changement et ainsi améliorer l'expérience utilisateur et fournir un meilleur support d'accessibilité.

 Animation de mouvement
Les blocs ont un effet lisse lors de la réorganisation. ( Image agrandie )

Fonctionnalité (dans l’espoir) à venir

Selon le fondateur de WordPress, Matt Mullenweg, 10% seulement de la feuille de route complète de Gutenberg ont été mis en œuvre. en magasin pour nous. Le travail sur les nouvelles fonctionnalités répertoriées ci-dessous a déjà commencé ou leur équipe en expérimente actuellement.

  • Répertoire de blocs
    Un nouvel élément de niveau supérieur dans wp-admin qui fournira la découverte de blocs. De cette façon, les blocs peuvent être installés indépendamment, sans avoir à les expédier via un plugin.
  • Blocs de navigation
    Actuellement, les menus de navigation doivent être créés via leur propre interface. Cependant, nous pourrons bientôt les créer et les placer n'importe où sur la page.
  • Installation en ligne de blocs
    La possibilité de découvrir des blocs, la prochaine étape logique est de pouvoir installer un nouveau bloc à la volée, là où vous en avez le plus besoin: Sur l'éditeur de publication. Nous pourrons installer un bloc tout en écrivant une publication, utiliser le nouveau bloc pour générer son code HTML, enregistrer sa sortie sur la publication et supprimer le bloc, le tout sans jamais accéder à une page d'administration différente.
  • Accrochage sur la grille lors du redimensionnement des images
    Lorsque nous plaçons plusieurs images sur notre publication, leur redimensionnement à la même largeur ou hauteur peut s'avérer être un processus pénible d'essayer et d'échouer à plusieurs reprises jusqu'à ce qu'il soit correct, ce qui est loin d'être idéal. Bientôt, il sera possible d’aligner l’image sur un calque de grille virtuel qui apparaît à l’arrière-plan lors du redimensionnement de l’image.

WordPress redevient attractif (1965)

Plusieurs raisons plaident en faveur de l’idée que WordPress sera bientôt disponible. devenir une plate-forme attrayante pour le code, comme il était une fois. Voyons-en quelques-unes.

Modernisation de PHP

La modernisation de WordPress ne se limite pas à l’intégration de bibliothèques et d’outils JavaScript modernes (React, webpack, Babel): elle s’étend également au langage côté serveur: PHP. La version minimale de PHP par WordPress était récemment augmentée à 5.6 et devrait passer à la version 7.0 dès décembre 2019. PHP 7 offre des avantages remarquables par rapport à PHP 5, notamment plus que double son speed et les versions ultérieures de PHP (7.1, 7.2 et 7.3) sont désormais encore plus rapides.

Même s'il ne semble pas y avoir de plan officiel pour passer de PHP 7.0 à ses versions ultérieures, une fois que l'élan sera pris là, il est plus facile de continuer. Et PHP est lui-même amélioré sans relâche. La prochaine version de PHP 7.4, qui doit paraître en novembre 2019, comprendra de nombreuses améliorations notamment des fonctions de flèche et l’opérateur de propagation à l’intérieur des tableaux (utilisé pour le JavaScript moderne), ainsi qu’un mécanisme permettant de précharger les bibliothèques et des structures dans OPCache pour augmenter encore les performances, parmi plusieurs autres fonctionnalités intéressantes.

Réutilisation du code sur plusieurs plates-formes

Un excellent effet secondaire de Gutenberg découplé de WordPress est qu'il peut également être intégré à d'autres frameworks. Et c'est exactement ce qui s'est passé! Gutenberg est maintenant disponible pour Drupal et Laraberg (pour Laravel ) seront bientôt publiés (teste actuellement le candidat à la libération). La beauté de ce phénomène réside dans le fait que, grâce à Gutenberg, tous ces différents cadres peuvent maintenant partager / réutiliser du code!

Conclusion

Il n’ya jamais eu de meilleur moment pour devenir développeur Web. Le rythme de développement de tous les langages et technologies concernés (JavaScript, CSS, optimisation de l'image, polices variables, services cloud, etc.) est effarant. Jusqu'à récemment, WordPress examinait cette tendance de développement de l'extérieur et les développeurs avaient peut-être le sentiment qu'il leur manquait le train de la modernisation. Mais maintenant, via Gutenberg, WordPress monte aussi dans le train et suit son historique de gestion du Web dans une direction positive.

Gutenberg n'est peut-être pas encore totalement fonctionnel, car il a de nombreux problèmes à résoudre. Il reste peut-être un peu de temps avant qu’il tienne vraiment ses promesses. Cependant, jusqu’à présent, tout semble aller pour le mieux, et à chaque nouvelle version: Gutenberg apporte de nouvelles possibilités à WordPress. En tant que tel, c’est le moment idéal pour repenser à l’essai de Gutenberg (c’est-à-dire, si vous ne l’avez pas encore fait). Quiconque s’occupe en quelque sorte de WordPress (administrateurs de site Web, développeurs, gestionnaires de contenu, utilisateurs de site Web) peut bénéficier de cette nouvelle normalité. Je dirais que c’est quelque chose qui mérite d’être enthousiasmé, n'est-ce pas?

 Éditorial éclatant (dm, il)




Source link