C’est un nouveau jour avec une autre poursuite pour ce plugin de bloc insaisissable qui apportera un peu de joie dans ma vie. L’expérience d’aujourd’hui est une gracieuseté du Plugin de boîte de fonctionnalité par Sumaiya Siddika. Il s’agit d’un simple bloc qui permet aux utilisateurs finaux de télécharger une image et d’ajouter du contenu à une boîte offset.
La sortie du plugin est un modèle typique sur le Web. Comme d’habitude, je suis ravi de voir les auteurs de plugins expérimenter pour apporter ces fonctionnalités aux utilisateurs de WordPress. Je veux en voir plus, en particulier de la part des nouveaux contributeurs de plugins.
J’ai pu rapidement mettre en place le bloc et y ajouter mon contenu personnalisé. Voici à quoi ressemblait le bloc après avoir saisi mon contenu et l’avoir personnalisé. Je me voyais comme une blogueuse de recettes pour ce test.
Sur le plan technique, le plugin a bien fonctionné. Je n’ai rencontré aucune erreur. Tout était simple à personnaliser. Cependant, cela n’a jamais été une expérience utilisateur idéale.
La première chose que j’ai immédiatement remarquée est que le téléchargement d’images se produit dans la barre latérale des options de bloc. Les blocs WordPress de base ont un bouton dédié dans la barre d’outils pour ajouter des images et d’autres médias. Je me suis également retrouvé à vouloir un contrôle plus direct sur les éléments individuels. Comment puis-je changer la taille de la police d’en-tête ? Où étaient les styles de boutons typiques comme Contour et Couleur unie ? Comment insérer d’autres blocs, comme une liste ?
Aucune de ces choses n’était possible. Comme beaucoup d’autres blocs, le développeur a créé un système avec des paramètres spécifiques et l’utilisateur ne peut pas en sortir. Il y a des moments où cette rigidité a du sens, comme lors de la construction de blocs personnalisés pour les clients. Cependant, le plus souvent, les plugins publiés devraient être beaucoup plus ouverts.
Ce bloc étroitement contrôlé reflète la façon dont WordPress fonctionnait dans le passé. C’était souvent inflexible, laissant les utilisateurs à ce que les développeurs de thèmes et de plugins pensaient être le mieux pour leurs sites.
Le système de blocs est sur le point de jeter ces concepts trop rigides et de donner aux utilisateurs un pouvoir sur leur contenu. Le travail des plugins et des thèmes est de définir le cadre sous lequel l’utilisateur opère. Ils ont mis en place des règles pour empêcher plus ou moins les choses de casser, mais les utilisateurs peuvent s’attacher au siège du conducteur. Leur destination est la leur.
Le bloc aurait été beaucoup plus complet si les utilisateurs pouvaient contrôler tout le contenu de la boîte. Idéalement, ils pourraient placer tous les blocs qu’ils souhaitent dans la zone « contenu » du bloc Feature Box. Le design correspondrait mieux à leur thème aussi.
Il y a quelques semaines, j’ai écrit un article intitulé Vous n’aurez peut-être pas besoin de ce bloc. Le principe était que les utilisateurs pouvaient recréer certains blocs avec l’éditeur actuel et que les themers pouvaient faciliter cela en proposant des modèles.
Je savais que la réplication de ce bloc particulier serait impossible sans au moins un petit code personnalisé. L’éditeur de WordPress n’a pas de fonctionnalité pour décaler la position d’un bloc.
Un auteur de thème pourrait facilement dupliquer cette fonctionnalité. En règle générale, je créerais un modèle personnalisé, avec toutes les pièces existantes en place. Cependant, je voulais aborder cela avec des styles de blocs personnalisés. Cela permettrait aux utilisateurs finaux de sélectionner le décalage de contenu dans la barre latérale et de le changer si nécessaire.
Noter: Pour ceux qui souhaitent apprendre à créer des styles de blocs personnalisés, Carolina Nymark’s Didacticiel est la meilleure ressource.
Le bloc Cover a fait un candidat idéal pour cela. Parce qu’il a un élément “inner wrapper” existant, cela signifiait que je pouvais le cibler avec CSS et le déplacer. Ce qui suit est une capture d’écran du style Offset Left que j’ai créé :
J’ai simplement répliqué le code et modifié quelques valeurs pour créer un style Offset Right immédiatement après. Le code est disponible sous forme de GitHub Gist. Il s’agit d’une simple preuve de concept et non d’un produit raffiné. Il existe différentes approches pour cela, et plusieurs options de bloc de couverture ne sont pas gérées. Les auteurs de thèmes sont libres de prendre le code et de l’utiliser.
Ces styles de blocs semblaient bien meilleurs car ils correspondaient à mon thème. Tout, de l’espacement au rayon de bordure en passant par le bouton, était comme il se doit.
La grande victoire était que j’avais le contrôle de la conception sur tous les aspects de la zone de contenu. Je pouvais sélectionner le style de bouton que je voulais. Je pourrais changer mes tailles de police. L’espacement par défaut correspondait à mon thème comme il se doit.
Le problème que j’ai rencontré avec la méthode de style de bloc permet aux utilisateurs de contrôler la couleur d’arrière-plan de la zone de contenu. Le plugin Feature Box gagne ici dans la catégorie expérience utilisateur car il a une option pour cela. Le style de bloc que j’ai créé hérite de son arrière-plan du parent du bloc Couverture. Il peut ne pas être immédiatement évident de savoir comment le changer.
L’autre “problème” avec le style de bloc est qu’il ne gère pas les alignements larges et complets pour le bloc Cover. C’est parce que je n’ai pas poussé l’expérience aussi loin, ne reproduisant que la disposition du plugin. Je laisserai aux concepteurs de thèmes le soin de bricoler. Il existe de nombreuses possibilités à explorer; n’attendez pas que je fournisse toutes les idées.
Mon objectif avec cet article et d’autres similaires est de montrer comment j’aborderais ces choses en tant qu’utilisateur et développeur. En tant qu’utilisateur, je veux de la flexibilité en toutes choses. En tant que développeur, je souhaite apporter les solutions que je souhaite en tant qu’utilisateur.
Je veux également voir les auteurs de plugins et de thèmes penser au-delà de leur cas d’utilisation initial lors de la construction de blocs, de modèles, de styles, etc. Posez les bases. Ensuite, développez cette idée initiale en pensant à toutes les façons dont les utilisateurs pourraient vouloir personnaliser ce que vous avez construit.
— to wptavern.com
