Commentaires pour ronde # 7 du programme de sensibilisation FSE ouvert aujourd’hui. Comme tour # 6, l’accent est à nouveau mis sur le mode d’édition de modèles, une fonctionnalité qui devrait être livrée avec WordPress 5.8. Toutes les mains doivent être sur le pont pour avoir une chance d’atterrir avec succès.

J’avais hâte de participer à cette série de tests. Anne McCarthy, responsable de la sensibilisation de FSE, a demandé aux volontaires de suivre un plan en 16 étapes pour créer un modèle de portfolio. Contrairement aux six tests précédents, celui-ci donne aux utilisateurs plus de marge de manœuvre et la possibilité d’explorer l’édition de modèles.

Comme d’habitude, l’ensemble d’outils de base est la dernière version du Plugin Gutenberg et le Thème TT1 Blocks.

Pour mon portfolio, j’ai décidé de l’aborder comme un photographe hypothétique qui voulait attirer de nouveaux clients et montrer ses derniers travaux. La capture d’écran suivante est le résultat final:

Exemple de page de portfolio avec un en-tête de couverture, une section de projets, des témoignages et un pied de page.

Tout le monde est invité à saisir le code de bloc HTML de ce modèle. Je l’ai enregistré en tant que GitHub Gist. Les URL d’image sont vers ma machine locale, vous devrez donc les mettre à jour si vous décidez de lui donner un tour.

Je me suis beaucoup amusé avec ça. Et la frustration. Un peu plus amusant. Et…tu l’as deviné… Encore plus de frustration.

Le rédacteur et moi avons eu des débuts difficiles. Après avoir ajouté mon bloc Cover, je voulais ajouter un bloc Columns à l’intérieur. Erreur. Le redoutable message de blocage invalide. Je suis passé à la vue du code pour voir s’il y avait quelque chose d’étrange. C’était vide. Après être revenu au visuel, le bloc Colonnes semblait fonctionner. J’ai pu reproduire ce problème de manière incohérente en mode d’édition de modèle.

J’ai utilisé un bloc Columns car c’est la seule façon de savoir comment créer un conteneur aligné à gauche couvrant 50% de son élément conteneur. C’est un peu un hack, mais vous pouvez définir le bloc sur une colonne et ajuster sa largeur à la taille dont vous avez besoin. Idéalement, les utilisateurs pourraient le faire avec le bloc Groupe.

C’était le fondement de ma zone d’en-tête de modèle. Je suis allé avec l’intro traditionnelle de héros / couverture qui couvrait la largeur de la page.

Ajout d'un bloc Cover dans l'éditeur de modèles WordPress avec des colonnes internes.
Section d’en-tête du modèle utilisant le bloc de couverture.

L’ajout d’un logo de site et de la navigation est l’endroit où j’ai frappé mon deuxième hic. La navigation a bien fonctionné, la plupart du temps. Sur mobile, la superposition de menu responsive est partiellement couverte par la barre d’outils WordPress sur le front-end. Cependant, je le savais déjà. Les menus de navigation réactifs sont un travail en cours.

Je n’ai pas pu utiliser le bloc Logo du site. Chaque fois que j’essayais de l’ajouter, il y avait une icône de rotation continue qui ne disparaissait jamais. J’ai donc opté pour un bloc Image – vous vous contentez des outils dont vous disposez ou de ceux qui fonctionnent.

Bloc de logo de site en rotation avec une image réelle en dessous.
Deuxième test d’ajout d’un logo de site dans une section différente.

La section suivante du test de modèle consistait à ajouter un modèle de requête et à le personnaliser. J’ai une relation d’amour / haine avec des requêtes à Gutenberg en ce moment. Le bloc de requête lui-même fonctionne bien. Il a un équilibre solide entre l’utilisation avancée et la simplicité pour la plupart. Je suis étonné de ce que l’équipe de développement a fait pendant des mois et des mois d’itération.

L’inconvénient est que le bloc Query est simplement un wrapper. Il est aussi bon que son sous-bloc le plus faible. La plupart de ses blocs imbriqués sont destinés aux données post-liées, et le plus faible d’entre eux est Post Featured Image. Cela limite tout ce qui peut être vraiment amusant dans la création de requêtes. Il ne couvre même pas un sous-ensemble de base des options Image, Couverture et Média et texte.

C’est frustrant car les utilisateurs et les auteurs de thèmes ne peuvent pas développer leurs visions. Je sais qu’il y arrivera un jour. Aujourd’hui, nous sommes limités aux bases sans aucun thème offrant des modèles de requête hautement personnalisés.

Il est difficile de se tromper avec une simple grille, c’est donc ce que j’ai fait.

Une grille à trois colonnes d'images, de titres et de dates de projets de portfolio.
Disposition du portefeuille de style grille (la première image est hors ligne dans l’éditeur)

J’ai suivi cette section avec deux blocs Columns imbriqués dans un autre bloc Columns pour un groupe de témoignages. Ensuite, je l’ai emballé avec un pied de page de base, rencontrant le même problème avec le téléchargement d’un logo de site. Les problèmes les plus courants dans ces sections étaient l’espacement irrégulier.

Certaines des limitations de ces tests ne proviennent pas de l’éditeur de modèles de Gutenberg. Au lieu de cela, ils proviennent du thème des blocs TT1. Cependant, je suppose que cela dépend de votre philosophie sur ce que devrait être l’avenir du développement de thèmes. Si la plupart des styles frontaux doivent provenir de WordPress / Gutenberg, ce n’est pas un problème de thème.

L’alignement vertical est incohérent dans le meilleur des cas. L’utilisation libérale du bloc Spacer n’est pas idéale dans les projets du monde réel pour aligner les blocs. Il peut être un outil pratique en cas de besoin, mais il ne doit pas être une béquille pour corriger les problèmes fondamentaux. Le système de bloc ajoute quelques nids-de-poule sur la route, mais un thème bien équilibré et testé peut atténuer la plupart de ces problèmes. Et, TT1 Blocks ne fait tout simplement pas cela. Il s’appuie presque exclusivement sur les styles de bloc de base sans dévier à gauche ou à droite quand il le faut.

Les contrôles de remplissage actuels pour quelques blocs comme Group aident à cela. Cependant, la plupart des utilisateurs ne vont pas microgérer chaque pixel de chaque page de leurs sites. Il en va de même pour les contrôles de marge lorsqu’ils deviennent disponibles. Encore une fois, les deux sont des outils utiles et nécessaires, mais les utilisateurs ne doivent pas trop s’appuyer sur eux pour corriger les problèmes de conception. À long terme, cela créera plus de problèmes à mesure que les propriétaires de sites échangeront éventuellement des thèmes.

Une sortie incompatible dans l’éditeur par rapport au frontal peut parfois devenir un casse-tête. C’est un problème connu et noté dans l’appel à tests, donc je ne vais pas m’y attarder.

J’ai apprécié le processus – oui, je me délecte à la fois du plaisir et de la frustration. Mis à part tout ce que je pense est cassé, le système global est joli dang doux. Il y a beaucoup plus de choses que l’équipe de développement a clouées qu’il n’y en a qui semblent janky. Cependant, les appels à des tests consistent uniquement à trouver les problèmes. J’encourage tous les lecteurs de Tavern à se joindre à nous et à faire part de vos commentaires.


Source link