Recréer la page d'accueil du thème WordPress de l'artiste musical avec l'éditeur de blocs

L'une de mes activités préférées chaque semaine consiste à parcourir les derniers thèmes à atterrir dans le répertoire de thèmes WordPress. Souvent, il existe des concepts de conception intrigants. Cependant, la plupart du temps, je suis déçu d'apprendre que la plupart des conceptions de pages d'accueil reposent sur des options de thème au lieu de l'éditeur de blocs.

Bien que l'éditeur ait plusieurs limitations de conception, les auteurs de thèmes ont une tonne d'espace à explorer. Il a suffisamment de puissance pour réaliser certaines de ces conceptions de pages d'accueil personnalisées avec beaucoup moins de travail de code.

Music Artist était l'un des derniers thèmes qui a attiré mon attention. J'ai adoré la grande zone des héros et plusieurs éléments de la conception du thème. Après l'avoir installé, j'ai réalisé que la mise en page de la page d'accueil était gérée via les options de thème. Cependant, l'auteur du thème aurait pu construire cette page entièrement à partir de blocs et envelopper chaque section ou même la conception entière dans des modèles de blocs.

Tout cela est faisable avec l'éditeur de blocs.

Pour que je pratique ce que je prêche, j'ai pris quelques heures et j'ai recréé la démo de la page d'accueil pour le thème directement à partir de l'éditeur de blocs. Aucun code requis. Il y avait quelques pièces délicates, que je vais aborder. Cependant, ce n'était pas si difficile à construire et aurait pu être simplifié si le thème supportait l'éditeur de blocs.

Le plan était de reproduire la page personnalisée avec le thème Music Artist installé. Cependant, le manque de support de bloc du thème signifiait que certaines choses étaient fondamentalement brisées. Au lieu de cela, j'ai activé un thème avec des similitudes de conception, telles que les polices et les couleurs. Parce que je savais déjà qu'Ariele Lite travaillait avec l'éditeur de blocs, il était logique de voir si je pouvais construire avec. Cela s'est avéré être une base solide.

Ce qui suit est une comparaison de la page d'accueil originale du thème Music Artist (première) et d'une recréation utilisant des blocs via le thème Ariele Lite (seconde) :

Il y a évidemment des différences d'espacement, de couleurs, de typographie et d'autres éléments. Cela se résume en grande partie aux choix stylistiques des concepteurs de thèmes. Avec plus de temps et de modifications via un plugin comme Editor Plus, j'aurais pu ajuster cela suffisamment pour obtenir une réplique plus proche. Cependant, mon objectif était de rester aussi proche que possible du cœur de WordPress. Techniquement, j'ai installé la dernière version du plugin Gutenberg, il se peut donc que quelques éléments n'aient pas encore atterri dans WordPress.

Pour cette expérience, j'ai utilisé :

• WordPress 5.7 Bêta
• Gutenberg 10.1 Bêta
• Ariele Lite 1.0.8
• Éditeur Plus 2.6

J'avais seulement besoin d'Editor Plus pour effectuer quelques ajustements de marge sur le bloc Groupe. J'aurais pu le laisser seul, mais je voulais réduire une partie de l'espacement entre les sections de la page pour obtenir une recréation plus proche. À l'avenir, nous verrons plus de contrôles d'espacement dans WordPress, j'ai donc considéré cela comme un compromis équitable.

Cette expérience vise à montrer aux auteurs de thèmes qu'ils peuvent créer leurs conceptions personnalisées avec le système de blocs. L'abandon des options de thème de la vieille école signifie beaucoup moins de travail de code pour les développeurs, ce qui leur permet de se concentrer davantage sur le style. Les utilisateurs finaux bénéficient également d'une plus grande flexibilité, comme l'ajout d'éléments personnalisés ou la suppression de pièces dont ils ne veulent pas. Cela n'inclut même pas les options de style au niveau du bloc individuel.

L'objectif secondaire est de montrer aux utilisateurs qu'ils peuvent créer certaines de ces pages d'accueil sans code. L'éditeur de blocs et un thème complet et prêt pour les blocs peuvent vous mener assez loin.

Recréer la page d'accueil de l'artiste musical

Commencer avec une base d'Ariele Lite signifiait que le design était en boîte. Cependant, le thème a un modèle de page personnalisé "Blank Canvas" qui permet aux utilisateurs de concevoir la page entière.

Il y avait des éléments que je ne pouvais pas recréer entièrement à cause des limitations de l'éditeur de blocs. D'autres parties étaient des problèmes ou des choix de conception issus du thème.

Ce qui suit est un aperçu général de la façon dont j'ai réalisé la construction de chaque section de la page d'accueil. Je vais ignorer des parties telles que l'ajout de couleurs et la modification de la taille des polices tout en me concentrant sur les concepts liés à la mise en page.

Section Héros

Le bloc Cover de WordPress reste l'un de mes blocs préférés. Il permet aux utilisateurs de créer des sections de héros sans trop de travail. J'ai saisi l'image d'arrière-plan de la démo originale et l'ai insérée. J'avais fait le premier vrai pas dans ce voyage.

Ensuite, j'ai ajouté un bloc Titre, en ajustant un peu sa taille. Je l'ai suivi avec un bloc Spacer et Social Icons.

J'ai tout de suite rencontré deux accrocs. La première était que WordPress n'inclut pas d'icône sociale iTunes. Je n'ai pas pu trouver de problème ouvert sur le référentiel Gutenberg pour cela. Ce n'est peut-être pas une fonctionnalité souvent demandée. Le deuxième problème était que le bloc Social Icons ne produisait pas les étiquettes de réseau social, je ne pouvais donc pas reproduire cette partie de la conception.

Rubrique Discographie

Il existe plusieurs façons de gérer cette section. En supposant que les albums répertoriés sont un type de publication personnalisé, quel que soit le plug-in d'où proviennent ces albums, il devrait idéalement avoir un bloc personnalisé pour les produire. Les utilisateurs peuvent également utiliser le bloc Derniers articles s'il s'agit d'articles de blog ou du bloc de requête à venir.

Pour plus de simplicité, j'ai décidé d'ajouter un bloc Colonnes et d'y déposer trois images liées.

Section des médias et du texte

Mon plan pour cette section était d'utiliser le bloc média et texte principal. Cependant, il ne prend en charge que les médias auto-hébergés. Il n'y avait aucun moyen pour moi d'intégrer une vidéo YouTube.

Au lieu de cela, je suis allé avec un bloc de colonnes. Dans la colonne de gauche, j'ai déposé une URL de vidéo YouTube. Sur la droite, j'ai ajouté les blocs Titre, Paragraphe et Boutons.

Rubrique Vidéos

C'était une section relativement simple à recréer. Pour la mise en page, il n'a fallu qu'un bloc Titre suivi d'un bloc Colonnes. Ensuite, j'ai récupéré quelques liens vidéo sur YouTube et collé les URL dans l'éditeur.

Section Derniers articles

C'est la partie de la mise en page avec laquelle j'ai eu le plus de mal. WordPress fournit le bloc Derniers messages, qui peut être défini dans une grille. Cependant, Ariele Lite ne gérait pas correctement les colonnes.

Du coup, j'ai un peu triché.

Je suis passé à un thème basé sur des blocs qui prend en charge la prochaine fonctionnalité d'édition complète du site. Ensuite, j'ai déposé un bloc Query pour avoir plus de contrôle sur les colonnes de messages. Ensuite, je suis revenu au thème Ariele Lite.

La conception originale pourrait être réalisée avec le bloc Derniers messages actuel, il ne s'agit donc pas d'un problème d'éditeur de blocs.

Section de la barre latérale du pied de page

Techniquement, la barre latérale du pied de page n'entre pas dans le cadre de la conception de la page d'accueil. Il fait partie du pied de page du thème sur l'ensemble du site. Cependant, j'ai décidé de l'ajouter puisque j'étais déjà sur une lancée.

Cette section nécessite le bloc Colonnes. À partir de là, il s'agit de déposer un bloc d'en-tête pour chaque colonne. J'ai ajouté un bloc Paragraphe, Calendrier et Galerie pour recréer les trois "widgets".

La conception du bloc Calendrier d'Ariele Lite fonctionne mieux sur un arrière-plan de couleur claire. C'était un petit point douloureux que j'avais oublié. À long terme, WordPress devrait fournir des contrôles de conception sur les blocs qui en manquent.