La semaine dernière, lorsque j’ai apporté les derniers changements à un examen de son Formes de Gutenberg Munir Kamal se préparait à lancer un autre type de plugin WordPress pour l’éditeur de blocs. Cela a été nommé EditorPluset cela créerait un système de conception pour les blocs. Kamal et son équipe ont fini tranquillement la version 1.0 et ont publié le plugin quelques jours plus tard dans le référentiel de plugins WordPress.

Contrairement à de nombreux autres plugins qui créent des blocs personnalisés pour obtenir des résultats de conception spécifiques, EditorPlus donne aux utilisateurs la flexibilité de personnaliser leurs pages en fonction de ce dont ils disposent. Il ajoute un certain nombre d’options de conception à chacun des blocs existants de WordPress. Au front end, il prend peu de place, car seul le CSS requis pour cette page est affiché pendant le fonctionnement.

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 au design qui sont susceptibles de trouver une place permanente dans Gutenberg et éventuellement WordPress. L’équipe Gutenberg peut emprunter, itérer et améliorer des idées. Nous avons déjà vu l’expérimental Padding Control Land dans Gutenberg 8.3. Il serait logique que l’équipe de développement fasse des contrôles de conception supplémentaires plus tard. La bonne chose à propos de ces contrôles, qui sont introduits pour la première fois dans des plugins tiers, est que l’équipe peut voir comment les utilisateurs y réagissent et avoir une idée de s’ils travailleraient correctement dans Gutenberg avant de s’engager dans quoi que ce soit.

EditorPlus ne manque pas d’extras pour ceux qui veulent beaucoup de liberté de conception sans toucher au code. En substance, le plugin est un éditeur CSS sans aucune connaissance du CSS. Il fournit aux utilisateurs finaux des options pour la plupart des fonctionnalités CSS dont ils ont besoin via des options de blocage. C’est un terrain de jeu pour ceux qui aiment bricoler avec le design et qui sont suffisamment puissants pour créer des mises en page uniques sans gonfler le site à l’avant.

Comment fonctionne EditorPlus

Edition du fond et remplissage du bloc galerie via le plugin EditorPlus.
Modification de l’arrière-plan et du remplissage d’un bloc de galerie.

Après avoir activé le plugin EditorPlus, les utilisateurs finaux peuvent immédiatement commencer à utiliser les options en passant à l’éditeur de publication ou de page. Après avoir inséré un bloc, le plugin rend les huit onglets suivants disponibles dans la fenêtre des options de bloc (chacun est précédé d’un + Symbole):

  • bord
  • Boîte ombre
  • Dimensionnement
  • Contexte
  • Portée
  • tapisserie
  • Rayon du bord
  • Suppléments

Ces onglets ne sont actuellement affichés que pour les blocs de base WordPress et non pour les blocs de plugins tiers. Mis à part l’onglet Extras, chaque onglet correspond à ses équivalents CSS. L’onglet Outils a une option d’affichage avancée qui permet aux utilisateurs de modifier les éléments de rupture de bloc display Valeur en CSS. Il est préférable de laisser cette option aux utilisateurs avancés. Il offre également une option de transition qui fonctionne bien avec les styles flottants.

Chacun des onglets pour les options de bloc a également de mystérieux boutons «R» et «H». Le bouton « R » permet aux utilisateurs d’activer les options de réponse. Cela 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.

Modification des options de conception d'un bloc pullquote via le plugin EditorPlus.
Ajout d’une ombre à un bloc pullquote lors du survol.

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

Chacune des options du plugin est assez simple. Si ce n’est pas le cas, vous obtiendrez des commentaires instantanés via l’éditeur de blocs.

Il y a quelques domaines qui peuvent s’avérer problématiques pour certains utilisateurs, selon la façon dont leur sujet formate certains blocs. Par exemple, les paramètres de largeur de l’onglet Taille peuvent ne pas toujours fonctionner. Certains thèmes ajoutent une largeur maximale aux blocs, ce qui limite la largeur totale quelle que soit la taille. Il est possible de remplacer cela via le plugin, mais Kamal a choisi de ne pas le faire dans la version 1.0.

Soyez prudent avec les bords. Selon la conception du thème, les marges gauche et droite peuvent être utilisées pour placer le contenu. Même si seule une marge supérieure ou inférieure est spécifiée, le plug-in est automatiquement émis 0 pour les marges gauche et droite. Cela pourrait endommager la mise en page du contenu de certains sujets.

Un problème que j’ai rencontré avec le plugin était les styles de mon thème actif qui remplacent généralement les styles du plugin. Par exemple, les objectifs standard du thème Twenty Twenty p.has-background dans son CSS pour ajouter un rembourrage personnalisé. Par conséquent, le CSS du plugin EditorPlus est écrasé avec une spécificité plus élevée. 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. Lorsqu’un utilisateur coche cette case, elle sera ajoutée !important sur la règle de style dans la sortie, avec laquelle les styles de thème peuvent être écrasés. Ce n’est pas une solution à 100% infaillible. Votre kilométrage peut varier en fonction du sujet, mais cela devrait fonctionner dans la plupart des cas d’utilisation.

Je n’aime pas l’idée d’un important Case à cocher dans l’interface utilisateur. Ce n’est pas quelque chose dont un utilisateur devrait s’inquiéter. Cependant, c’est la réalité d’un monde où les thèmes et les plugins ne peuvent pas vraiment communiquer quelles règles de conception sont plus importantes que d’autres. Bien que cela ne devrait pas être inclus dans l’interface utilisateur, c’était une sage décision de l’inclure. Sinon, beaucoup trop de règles de style pour le thème auraient écrasé le CSS du plugin.

Dernières pensées

EditorPlus a pris un bon départ pour la version 1.0. Dans mes tests, je n’ai trouvé que quelques lacunes. Les problèmes pour l’utilisateur moyen sont susceptibles de prendre la forme de conflits de sujets, et ces conflits sont plus susceptibles d’être de haute spécificité ou de sujets !important dans leur CSS.

Kamal indique clairement sur le site Web du plugin que ce plugin a encore plus à offrir. Je ne sais pas quelles fonctionnalités il a en tête, mais j’ai hâte de les voir. Je voudrais voir une option d’ombre de texte pour les blocs liés au texte comme l’en-tête et le paragraphe. Ce serait également bien de voir quelques options de conception pour les images dans le bloc galerie et pas seulement pour l’élément d’habillage.

L’utilisation d’EditorPlus dépend de la nécessité ou non de contrôles de conception supplémentaires. EditorPlus est destiné aux personnes qui ont besoin de quelque chose de plus similaire à un constructeur de pages léger mais qui souhaitent s’en tenir à WordPress natif. Ce plugin est un bel exemple de ce qui est possible et un bon indicateur des options de conception possibles qui pourraient un jour atterrir dans WordPress.



Source link

Recent Posts