La sortie de WordPress 5.8 est prévue pour le 20 juillet. Dans un peu plus d’un mois, de nombreux utilisateurs auront leur premier aperçu de l’une de mes nouvelles fonctionnalités préférées : le mode d’édition de modèles.
L’éditeur de modèles est un nouvel outil qui permet aux utilisateurs finaux de créer des modèles personnalisés sans jamais quitter l’écran de post-édition. Il existe comme un tremplin vers l’éditeur de site éventuel, une fonctionnalité qui laissera le contrôle complet de la conception à ceux qui le souhaitent.
L’inconvénient de la nouvelle fonctionnalité de WordPress 5.8 est que les utilisateurs n’auront pas accès à l’en-tête, au pied de page, à la barre latérale ou à d’autres parties du modèle de leur thème. C’est une ardoise vierge dans laquelle ils doivent mettre leurs capuchons de conception pour créer la page entière.
Avec ces limitations en place, quel est l’intérêt du lancement de l’éditeur de modèles avec WordPress 5.8 ?
Pages de destination.
Une ardoise vierge n’est pas toujours une mauvaise chose. Il y a une raison pour laquelle tous les meilleurs thèmes incluent des modèles de page nommés Blank, Empty, Canvas, Open ou quelque chose de similaire. Parfois, les utilisateurs veulent contrôler l’intégralité de la sortie de la page. Et WordPress 5.8 apporte cette capacité à chaque utilisateur de WordPress.
J’édite des modèles depuis des mois maintenant, mais toujours dans le cadre d’un thème de bloc. J’ai construit à la fois un portfolio de photographies et une page de destination WordCamp dans le cadre du programme de sensibilisation FSE. Malgré quelques ratés, cela a été un voyage utile d’être impliqué car la fonctionnalité a porté ses fruits. Cependant, la plupart de mes tests portaient sur le thème des blocs TT1.
Il était temps de le tester dans le monde réel avec des thèmes qui sont en fait largement utilisés.
Cela fonctionnera-t-il avec mon thème ?
La question que de nombreux utilisateurs auront en tête sera : ce nouvel éditeur de template fonctionnera-t-il avec mon thème ? La réponse est que cela dépend. En général, oui, cela fonctionnera dans une certaine mesure. Cependant, étant donné que les conceptions plus anciennes n’ont pas été créées en pensant à l’éditeur de modèles, toutes les expériences ne seront pas les mêmes.
Je voulais vraiment mettre cette théorie de travail avec chaque thème à l’épreuve. J’ai donc chargé Twenty Fifteen, l’un de mes thèmes par défaut préférés de la dernière décennie.
Peut-être que j’ai sauté trop loin en arrière.
Twenty Fifteen a un arrière-plan bicolore destiné à la barre latérale et au contenu.
L’éditeur de blocs n’existait pas à la création de Twenty Fifteen. Son utilisation d’une technique d’ombre de boîte sur l’arrière-plan de la page signifiait que la page entière avait deux colonnes colorées qui la descendaient. L’équipe de conception a dû utiliser des méthodes piratées pour une barre latérale et des arrière-plans de contenu de même hauteur. Ahhh… le bon vieux temps avant que les développeurs aient accès à la flex-box et à la grille CSS.
Ce sont ce genre de problèmes qui pourraient limiter certains thèmes plus anciens. Dans le cas de Twenty Fifteen, je pourrais masquer l’arrière-plan avec un bloc Group ou Cover par-dessus.
Les utilisateurs obtiendront probablement de meilleurs résultats en utilisant quelque chose de plus moderne, au moins un thème construit à l’époque des blocs. Même quelque chose d’aussi simple que la prise en charge de l’alignement large changera la nature WYSIWYG de l’éditeur de modèles. Si un thème ne prend pas en charge la fonctionnalité, le front-end ne correspondra pas à l’éditeur.
J’ai pris de l’avance quelques années. Twenty Nineteen était le premier thème WordPress par défaut à prendre en charge les blocs. C’est vieux mais pas ancien dans les années Internet.
Éditeur contre front-end de Twenty Nineteen.
Il existe quelques différences entre l’éditeur et les vues frontales. Le remplissage du bloc de couverture est désactivé, l’espacement vertical ne correspond pas, la taille de la police de l’entrée de recherche est différente et le rayon de la bordure du bouton de recherche est arrondi à l’avant. Cependant, il s’agit d’un thème vieux de près de trois ans maintenant. Il a mieux résisté que prévu dans ce simple test.
Quelques années plus tôt, j’ai activé Twenty Twenty-One, le thème par défaut le plus récent de WordPress.
Éditeur contre front-end de Twenty Twenty-One.
L’éditeur est une approximation assez proche de ce que vous voyez sur le front-end. Les différences les plus notables sont le remplissage incohérent du bloc Couverture et la bordure gris clair du champ de saisie de la recherche dans la vue de l’éditeur.
Il était temps de mettre l’éditeur de modèles à l’épreuve du « vrai ». J’ai activé la dernière version d’Eksell, l’un des thèmes de blocs les plus complets qui existent.
Éditeur contre front-end d’Eksell.
Évidemment, le thème sort une section noire sur la gauche. Cela est destiné à la barre latérale / menu déroulant du thème. Cependant, étant donné que l’utilisateur n’a pas accès à la partie du modèle qui génère cet élément, il peut être impossible pour certains de créer des modèles personnalisés avec ce thème. Je suis sûr qu’Anders Norén, le développeur, s’attaquera à ce problème.
Des problèmes similaires et inconnus surgiront avec les milliers de thèmes dans la nature. Cela ne signifie pas qu’un thème est nécessairement mauvais. Cela signifie simplement qu’il n’a pas été conçu en pensant à l’éditeur de modèles. Les utilisateurs peuvent avoir besoin de réduire un peu leurs espoirs jusqu’à ce qu’ils aient complètement testé le mode d’édition de modèle avec leur thème actif.
Oh, et cet espace blanc laid qui montre l’arrière-plan du contenu en haut de l’éditeur ? Vous verrez cela avec littéralement tous les thèmes. Je ne sais pas pourquoi l’équipe de développement a pensé que cela constituerait un bon défaut. Presque toutes les conceptions Web que j’ai examinées au fil des ans mettent à zéro la page rembourrage des éléments.
Pour les auteurs de thèmes qui lisent, vous devrez vous en occuper. Si vous avez déjà construit pour l’éditeur de blocs, vous êtes probablement un pro pour gérer de telles bizarreries.
Si nous regardons un thème personnalisé que j’ai construit, vous ne pouvez voir aucun problème d’alignement entre l’éditeur et le front-end.
Éditeur vs front-end du thème de bloc personnalisé.
La différence pour mon thème est que je construis lorsque l’éditeur de modèles fait déjà partie du plugin Gutenberg. Les autres ont tous été créés plus tôt. Il n’est pas juste de les comparer. Cependant, les utilisateurs doivent savoir que les thèmes plus anciens peuvent ne pas fonctionner correctement. Ils devront peut-être attendre les mises à jour ou essayer une nouvelle conception avant de profiter de l’édition de modèles.
J’ai également choisi Twenty Nineteen, Twenty Twenty-One et Eksell car ils ont été conçus par des professionnels de notre industrie et sont sortis au cours des dernières années. Ils tiennent chacun bien, mais ont quelques problèmes qui seraient triviaux à résoudre.
La manière idéale d’utiliser l’éditeur de modèles
Ma crainte avec l’éditeur de modèles est que les utilisateurs commencent à mélanger leur contenu directement dans l’éditeur. C’est un problème que j’ai soulevé lors de la ronde #7 du programme de sensibilisation FSE. En fin de compte, il s’agit de la frontière entre le contenu et le modèle.
Traditionnellement, les auteurs de thèmes créaient des modèles personnalisés que leurs utilisateurs finaux pouvaient appliquer à leurs pages. À moins que ces utilisateurs ne sachent comment apporter des modifications directes au code, ils ne sélectionnaient que le modèle et éditaient leur propre contenu via l’éditeur. Il était toujours clair où se terminait l’édition du contenu et où commençait l’édition des modèles.
Le nouveau mode brouille un peu les eaux. Étant donné que les utilisateurs ont un accès direct pour modifier le modèle à partir de l’éditeur de publication/page lui-même, je ne doute pas que beaucoup créeront le contenu de la page entière à partir de l’éditeur de modèle.
Même moi, j’ai fait l’erreur de mettre ce qui serait généralement du contenu dans mes exemples de modèles ci-dessus. C’était purement à titre d’illustration.
Il n’y a rien de mal à cela si c’est l’intention de l’utilisateur. Cependant, les modèles sont généralement destinés à contrôler la mise en page de la page. Des éléments tels que l’en-tête, le pied de page et l’élément d’emballage de contenu y appartiennent, tandis que le contenu lui-même est stocké séparément. Les modèles sont également destinés à être réutilisés. Si vous appliquez le même modèle à plusieurs pages, toute modification apportée à ce modèle mettra à jour chaque page.
Vous pouvez le faire à partir du bloc d’insertion ou en collant cet extrait de code :
Si vous voulez juste un modèle vierge/vide, ce à quoi l’éditeur est bon en ce moment, c’est tout ce dont vous avez besoin. Vous pouvez revenir à l’éditeur de page et laisser libre cours à votre créativité.
Voici le début d’une page de destination de romancier que j’ai construite à partir de ce modèle vierge :
Le contenu de la page a été ajouté via l’éditeur de publication plutôt qu’en mode d’édition de modèle. Cela me permettra de créer plusieurs pages en utilisant le même canevas ouvert.
Si vous souhaitez ajouter d’autres éléments de mise en page, vous pouvez également les ajouter. Essayez de mélanger et de faire correspondre les blocs Titre du site, Slogan du site et Navigation en tant qu’en-tête. Déposez un bloc Colonnes avec d’autres blocs pour créer une « zone de widget » dans le pied de page.
La puissance de l’éditeur de modèles vient avec les thèmes de blocs. À terme, les concepteurs pourront pré-construire ces modèles et les utilisateurs les personnaliseront. Ils auront également accès à une suite de blocs plus robuste, comme le chargement de pièces de modèle. Cependant, nous devons attendre au moins WordPress 5.9 plus tard cette année avant qu’ils ne soient disponibles, et ce n’est pas encore gravé dans le marbre.
Jusque-là, nous avons un créateur de page de destination en quelque sorte OK mais assez incroyable.
Comme ça :
J’aime le chargement.