Construire un en-tête d'enseignement supérieur : WP Tavern

On dirait que cela fait longtemps que la communauté WordPress n’a pas reçu d’appel pour tester les fonctionnalités d’édition de site complet (FSE). Le programme de sensibilisation FSE était sur une petite pause. Cependant, le lancement de WordPress 5.8 était également en cours le mois dernier.

Le programme est un appel ouvert pour tester divers composants de FSE. Jusqu’à présent, les bénévoles ont fourni avec succès des commentaires sur les fonctionnalités qui ont déjà atterri dans le cœur de WordPress, telles que les widgets basés sur des blocs et l’édition de modèles. Les testeurs se sont penchés sur d’autres qui n’ont pas encore été publiés. Chaque série de tests est ouverte à tous ceux qui peuvent ménager un peu de leur temps libre et partager leurs découvertes. L’objectif est de casser les choses et de signaler les zones problématiques de l’expérience utilisateur.

FSE Outreach # 9 est une suggestion menée par la communauté qui appelle à la création d’un en-tête de site d’enseignement supérieur. Les volontaires sont invités à suivre un processus en 26 étapes en utilisant la fonctionnalité bêta de l’éditeur de site dans la dernière version du plugin Gutenberg et le thème TT1 Blocks.

Je suis fan de cette approche des tests, et la responsable du programme, Anne McCarthy, semble préférer en faire davantage à l’avenir. « Si vous souhaitez suggérer une idée pour un appel à tests, sachez qu’elle est la bienvenue et que toutes les idées seront évaluées par rapport aux priorités actuelles du projet pour déterminer ce qui est le plus logique à poursuivre », a-t-elle écrit dans l’annonce.

Étant donné que le projet portait uniquement sur l’enseignement supérieur, j’ai décidé de rendre hommage à mon alma mater et d’utiliser les couleurs que je portais fièrement sur le campus pendant cinq ans – et ce, encore aujourd’hui. La capture d’écran suivante est le résultat final  :

Avant d’aller de l’avant, je dois admettre que j’ai triché pour obtenir ce look final. L’appel à tests nous a demandé de construire à partir du thème TT1 Blocks. J’ai pu me rapprocher de ce résultat, mais j’ai dû passer à un thème personnalisé sur lequel j’ai travaillé pour surmonter quelques obstacles.

J’ai parcouru chaque étape des tests avec les blocs TT1 et je couvrirai les problèmes que j’ai rencontrés.

Construire un en-tête pour l’enseignement supérieur

À peine sorti du sol, je suis tombé sur mon premier problème, qui s’est avéré être un non-problème. Les dieux d’Internet ont décidé de me jouer un tour en m’interdisant de modifier à la fois les blocs Titre du site et Description du site. Je voulais vraiment que mon université fictive soit « l’Université Gutenberg », mais je ne pouvais pas le faire sans enregistrer mes progrès et actualiser l’onglet du navigateur. Je n’ai pas pu reproduire le problème, j’espère donc que c’était simplement un coup de chance.

L’utilisation du bloc de navigation semble toujours être le domaine le plus problématique de l’édition de site. Je sais combien de travail l’équipe de développement a consacré à l’expérience utilisateur pour cette fonctionnalité, mais je ne peux m’empêcher de me demander s’il existe un moment où les utilisateurs peuvent choisir de gérer son contenu (les liens) via l’écran traditionnel des menus de navigation dans WordPress. L’éditeur de site fonctionne bien pour l’aspect design, mais je ne me sens pas encore à l’aise de l’utiliser pour gérer les liens.

Cette étape de test nécessite l’ajout de plusieurs liens de page en tant qu’éléments de niveau supérieur et de sous-menu. Lorsque je clique sur le bouton + pour ajouter un lien, mon premier réflexe est de rechercher la page elle-même. Cependant, le champ disponible est une recherche de bloc plutôt qu’une recherche de page.

Recherche accidentelle de lien dans le champ de recherche de bloc.

Pour ajouter un lien réel, les utilisateurs doivent d’abord ajouter le bloc Lien de page. Ensuite, ils peuvent rechercher une page spécifique. Ce processus en deux étapes me touche à chaque fois.

J’ai rencontré le problème des menus de navigation mentionnés dans l’appel pour les tests où il n’y a pas d’espace entre les éléments lorsqu’ils sont utilisés dans un bloc de colonnes. Cela fait mal au puriste en moi de l’admettre, mais j’ai dû utiliser le bloc Spacer entre chaque élément pour résoudre ce problème. Je n’ai pas eu besoin de le faire avec mon thème personnalisé car, je suppose, j’ai abordé ce problème quelque part en cours de route.

L’option « espace entre les éléments » n’a pas non plus fonctionné avec le bloc de navigation, ruinant l’une des premières idées de conception que j’avais. J’ai décidé d’aller dans une autre direction.

L’utilisation de l’alignement à droite avec le bloc de recherche ne fonctionnait pas. Par conséquent, j’ai utilisé l’option de largeur 100% pour l’aligner avec mon menu de navigation aligné à droite.

Maintes et maintes fois, j’ai eu besoin de m’appuyer sur le bloc Spacer pour faire des ajustements. Cela s’explique en partie par le fait que les marges et les remplissages par défaut sont incohérents entre les différents blocs. Les contrôles de marge encore manquants sur presque tous les blocs ont également joué un rôle dans cela. Ce n’est pas particulièrement remarquable. L’équipe de développement est consciente et travaille sur l’extension des contrôles d’espacement – ils ne peuvent tout simplement pas arriver ici assez rapidement pour certains d’entre nous.

Un problème d’espacement m’a amené à abandonner les blocs TT1 et à passer à un thème personnalisé. La capture d’écran suivante est mon travail final avec le premier. Vous remarquerez peut-être le fond vert béant entre le groupe de menus de navigation et l’image d’en-tête en dessous.

Version du thème TT1 Blocks avec un espace dans l’en-tête.

Aucune quantité de trucs ou de réarrangement de blocs ne semblait supprimer cet espace, et je ne pouvais tout simplement pas vivre avec cela. J’avais déjà résolu environ 90% des problèmes d’espacement de Gutenberg avec mon propre thème et je n’avais pas envie d’écrire un nouveau CSS pour résoudre ce problème. Faire le changement signifiait également que je pouvais me débarrasser de plusieurs blocs d’espacement que j’avais en place.

En plus de déposer une image d’en-tête, une autre modification que j’ai apportée consistait à ignorer l’ajout d’un bloc Button pour la dernière « mise à jour de Covid ». Je ne pouvais pas supporter de regarder la surutilisation du rembourrage par TT1 Blocks. Au lieu de cela, j’ai imbriqué un paragraphe avec un lien dans une colonne à côté d’un bloc de navigation.

Comme toujours, j’ai apprécié le processus. Cet article est censé critiquer des domaines spécifiques dans l’espoir qu’il aide à construire un meilleur WordPress. Malgré tous ses défauts, de nombreuses autres pièces offrent une solide expérience utilisateur. Dans l’ensemble, l’équipe de développement de Gutenberg continue d’impressionner.

Comme ça :

J’aime le chargement.