Créer un portfolio dans le prochain mode d'édition de modèles : WordPress Tavern

La rétroaction pour la ronde n ° 7 du programme de sensibilisation FSE a débuté aujourd’hui. À l’instar de la ronde n ° 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 du 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 :

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 sur 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… vous l’avez deviné… encore plus de frustration.

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 contenant. 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.

Section d’en-tête du modèle utilisant le bloc de couverture.

L’ajout d’un logo de site et 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.

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.

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.

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. Il s’agit d’un problème connu et noté lors de l’appel à des tests. Je n’insisterai donc pas dessus.

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 assez 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.

Comme ça :

J’aime chargement..