Contrôler la conception des blocs via le plugin WordPress EditorPlus

La semaine dernière, alors que je faisais les dernières modifications sur une revue de son projet Gutenberg Forms, Munir Kamal préparait le lancement d'un autre type de plugin WordPress pour l'éditeur de blocs. Celui-ci s'appelait EditorPlus, et il créerait un système de conception pour les blocs. Kamal et son équipe ont tranquillement mis la touche finale à la version 1.0 et ont publié le plugin dans le référentiel de plugins WordPress quelques jours plus tard.

Contrairement à de nombreux autres plugins qui créent des blocs personnalisés pour obtenir des résultats de conception spécifiques, EditorPlus offre aux utilisateurs la possibilité de personnaliser leurs pages avec ce qu'ils ont sous la main. Il ajoute une multitude d'options de conception à chacun des blocs existants de WordPress. Sur le front-end, il laisse une empreinte légère en ne produisant que le CSS nécessaire pour cette page à la volée.

Peut-être que la meilleure chose à propos de ce plugin en ce moment est qu'il jette les bases de nombreuses fonctionnalités liées à la conception qui trouveront probablement une maison permanente à Gutenberg et éventuellement au cœur de WordPress. L'équipe Gutenberg peut emprunter des idées, les itérer et les améliorer. Nous avons déjà vu le contrôle de remplissage expérimental atterrir dans Gutenberg 8.3. Il serait logique que l'équipe de développement poursuive avec des contrôles de conception supplémentaires sur la route. La bonne chose à propos de ces contrôles déployés d'abord dans des plugins tiers est que l'équipe peut voir comment les utilisateurs y réagissent et savoir s'ils travailleraient directement dans Gutenberg avant de s'engager dans quoi que ce soit.

EditorPlus ne manque pas de goodies pour ceux qui aiment avoir beaucoup de liberté de conception sans toucher au code. Essentiellement, le plugin est un éditeur CSS sans avoir besoin de connaître CSS. Il fournit aux utilisateurs finaux des options pour les fonctionnalités CSS les plus nécessaires via des options de bloc. C'est un terrain de jeu pour ceux qui aiment bricoler avec le design et assez puissant pour créer des mises en page uniques sans gonfler le site sur le front-end.

Comment fonctionne EditorPlus

Après avoir activé le plugin EditorPlus, les utilisateurs finaux peuvent commencer à utiliser ses options immédiatement en se dirigeant vers l'éditeur de publication ou de page. Après avoir inséré un bloc, le plugin rend les huit onglets suivants disponibles sous le panneau d'options de bloc (chacun est précédé d'un symbole + ) :

• Frontière
• Boîte ombre
• Dimensionnement
• Fond
• Marge
• Rembourrage
• Rayon de bordure
• Suppléments

Ces onglets apparaîtront uniquement pour les blocs principaux de WordPress et non pour les blocs de plug-ins tiers pour le moment. Mis à part l'onglet Extras, chaque onglet correspond à ses homologues CSS. L'onglet Extras fournit une option "Affichage" plus avancée, qui permet aux utilisateurs de modifier la valeur d' display de l'élément d'habillage de bloc dans CSS. Il est préférable de laisser cette option aux utilisateurs plus avancés. Il fournit également une option de transition qui fonctionnerait bien avec les styles de survol.

Chacun des onglets d'options de bloc comporte également de mystérieux boutons "R" et "H". Le bouton "R" permet aux utilisateurs d'activer des options réactives, ce qui signifie qu'ils peuvent modifier les styles de bloc en fonction des écrans de bureau, de tablette et de mobile. Le bouton "H" permet aux utilisateurs de modifier la conception en fonction de l'état de survol de la souris.

Le plugin contient de nombreuses options dans un peu d'espace. Tous les nouveaux onglets de conception peuvent sembler un peu écrasants au début. Cependant, avec un peu d'utilisation, il est facile d'acquérir de la mémoire musculaire et de créer rapidement des mises en page personnalisées.

Chacune des options du plugin est assez simple. Et, lorsqu'ils ne le sont pas, vous bénéficiez d'un retour instantané via l'éditeur de blocs.

Il y a quelques domaines qui pourraient s'avérer problématiques pour certains utilisateurs, selon la façon dont leur thème stylise certains blocs. Par exemple, les paramètres de largeur sous l'onglet Dimensionnement peuvent ne pas toujours fonctionner. Certains thèmes ajouteront une largeur maximale aux blocs, ce qui limitera la largeur globale quelle que soit la taille. Il est possible d'annuler cela via le plugin, mais Kamal a choisi de ne pas le faire dans la version 1.0.

Attention aux marges. Selon la conception du thème, il peut utiliser des marges gauche et droite pour placer le contenu. Même lors de la définition d'une marge supérieure ou inférieure, le plug-in affichera automatiquement 0 pour les marges gauche et droite. Cela pourrait casser la mise en page du contenu de certains thèmes.

Un problème que j'ai rencontré avec le plugin était que les styles de mon thème actif annulaient les styles du plugin en général. Par exemple, le thème par défaut Twenty Twenty cible p.has-background dans son CSS pour ajouter un remplissage personnalisé. Par conséquent, il remplace le CSS du plugin EditorPlus avec une plus grande spécificité. Ce problème était attendu et le développeur du plugin a ajouté une solution sous la forme d'une case à cocher "importante" pour chaque option de conception. Si un utilisateur coche cette case, il ajoute !important à la règle de style sur la sortie, ce qui lui permettra d'écraser les styles de thème. Ce n'est pas une solution 100% infaillible. Votre kilométrage peut varier en fonction du thème, mais cela devrait fonctionner pour la majorité des cas d'utilisation.

Je n'aime pas l'idée d'une case à cocher importante dans l'interface utilisateur. Ce n'est pas quelque chose dont un utilisateur devrait avoir à s'inquiéter. Cependant, c'est la réalité d'un monde où les thèmes et les plugins n'ont aucun moyen réel de communiquer quelles règles de conception sont plus importantes que d'autres. Bien que cela ne soit pas voulu dans l'interface utilisateur, c'était une décision intelligente de l'inclure. Sinon, beaucoup trop de règles de style de thèmes auraient écrasé le CSS du plugin.

Dernières pensées

Pour une version 1.0, EditorPlus a pris un bon départ. Dans mes tests, j'ai trouvé quelques défauts. Tout problème pour l'utilisateur moyen se présentera probablement sous la forme de conflits de thèmes, et ces conflits concerneront très probablement des thèmes utilisant une spécificité élevée ou !important dans leur CSS.

Kamal indique clairement sur la page Web du plugin qu'il y a plus à venir de ce plugin. Je ne sais pas quelles fonctionnalités il a en tête, mais j'ai hâte de les voir. J'aimerais voir une option d'ombre de texte pour les blocs liés au texte tels que Titre et Paragraphe. Il serait également agréable de voir des options de conception pour les images dans le bloc Galerie plutôt que simplement l'élément d'emballage.

Si vous devez utiliser EditorPlus dépendra si vous avez besoin de contrôles de conception supplémentaires. EditorPlus est destiné aux personnes qui ont besoin de quelque chose de plus proche d'un constructeur de pages léger mais qui souhaitent s'en tenir à WordPress natif. Ce plugin est une belle vitrine de ce qui est possible et est un bon indicateur des options de conception potentielles qui pourraient un jour atterrir dans WordPress.