Gutenberg: à la découverte de blocs additionnels

Gutenberg, le nouvel éditeur de WordPress est sorti le 6 décembre 2018 avec la version 5.0. Depuis, l’expérience utilisateur dans la publication de contenus sur WordPress a été nettement modifiée. On peut dire que le sujet ‘Gutenberg’ est assez clivant dans la communauté WordPress. Le projet était contesté par certain-e-s avant même sa sortie. Mais dans ce tutoriel, il ne s’agira pas d’alimenter la polémique. Au contraire, il s’agira d’expérimenter et de voir quelles sont les possibilités…

Nous allons découvrir ici une bibliothèque pour Gutenberg qui regroupe des blocs additionnels pour WordPress https://gutenberghub.com/blocks/

Cette bibliothèque bénéficie d’un moteur de recherche. Nous pouvons retrouver facilement des blocs qui nous intéressent.

Dans ce tutoriel, nous allons voir comment construire une page d’accueil comme une ‘landing page’ uniquement avec des blocs Gutenberg. Cela va nous permettre de découvrir la bibliothèque ‘Gutengerhub’, de tester des nouveaux blocs Gutenberg et pourquoi pas une nouvelle manière de concevoir des pages sur WordPress.

Pour une formation de base à Gutenberg, je vous renvoie à ce tutoriel de Johanne Alcidi

Pour notre exemple, nous allons imaginer un site qui propose des formations…à WordPress

gutenberg_block_library

 

Thème Neve

Pour commencer, nous allons installer le thème Neve. Ce thème est très pratique car il permet facilement de modifier le ‘layout’ des pages. Ainsi, par exemple, en un clic,  on peut enlever la ‘sidebar’.

Pour + d’infos sur ce thème, c’est ici

Pour installer un thème, il y a ce tutoriel

Dans ce tutoriel, nous allons travailler sur la page d’accueil. Elle sera statique. Donc elle n’affichera pas les derniers articles du blog. Nous allons justement complètement ‘customiser’ cette page d’accueil.

Donc d’abord, nous allons créer une page qui s’appelle pour être original ‘Accueil’. Et dans ‘Apparence’ -> ‘Personnaliser’, nous allons définir cette page comme étant la page d’accueil

reglage_page_accueilreglage_page_accueilet pour l’instant notre page d’accueil ressemble à ceci

homepagePour commencer, on va un peu modifier le thème. On va enlever l’affichage du titre et l’affichage de la ‘sidebar’ pour la page d’accueil.

On va sur la page d’accueil et à droite, nous avons des réglages spécifiques pour chaque page. On va mettre la page d’accueil en pleine largeur (full width), on va enlever la sidebar (no sidebar) et on va enlever le titre (Disable Title).

theme_neve_page_settingsAinsi notre page d’accueil va ressembler à ceci:

homepageNous allons compléter le contenu avec Gutenberg.

 

Gutenberg Block Library

Nous allons nous rendre sur ‘Gutenberg Block Library’

https://gutenberghub.com/blocks/

Ici chaque bloc est présenté sous forme de cartes. Une petite image nous montre le bloc dans le fil de publication. Nous avons le titre du bloc. En dessous, un cours résumé de ce que fait le bloc. Sur un lien, nous retrouvons le nom de l’extension qui contient le bloc. Dans l’exemple ci-dessous, il s’agit de ‘Atomic Blocks’.

gutenberg_block_libraryDans le pied de page de la carte, les tags affiliés au blocs sont affichés ainsi qu’un bouton qui renvoie vers la page spécifique du bloc concerné.

gutenberg_block_library_call_to_actionEt sur chaque page, nous avons des liens vers la page WordPress de l’extension, un lien vers le dépôt Github et le site web de l’extension.

 

Notre page d’accueil

Bannière

Pour faire la bannière, nous allons chercher un bloc très pratique qui permet de créer des zones dans notre page et d’adapter les marges et les ‘paddings’ en fonction de la taille de l’écran. Ce bloc s’appelle ‘Row Layout’. Il suffit de le chercher avec le moteur de recherche

row_layout_kadence_blocksLe bloc est compris dans l’extension ‘Kadence Block’.

Je vous laisse télécharger l’extension et pour celles et ceux qui ne savent pas comment faire, il y a ce tutoriel sur WP Formation:

Comment installer un plugin WordPress gratuit ou premium ?

Une fois que notre extension est téléchargée, nous pouvons retourner sur l’édition de notre page d’accueil. Dans la liste des blocs, on peut voir maintenant que nous avons la liste des blocs de ‘Kadence Blocks’.

kadence_blocks_listeAprès avoir sélectionné le bloc, on sélectionne le nombre de colonnes. Pour notre bannière, nous allons choisir une colonne.

Nous allons définir que notre bloc occupe toute la largeur horizontale de notre page en cliquant sur le bouton ci-dessous:

full_widthNous sélectionnons une image d’arrière-plan comme ceci:

 

Nous allons ajouter le titre sur la bannière en utilisant le bloc ‘Advanced Heading’ de la même extension ‘Kadence Block’.

N’oubliez pas de mettre le titre dans une balise <h1>. En effet, c’est le titre principal de la page.

Puis toujours, dans ce même bloc ‘Row layout’, on peut ajouter un paragraphe.

En ‘front end’, on obtient maintenant ceci:

front_end_banniere

On ne va pas s’arrêter en si bon chemin et pour le plaisir, on va ajouter un petit bouton qui enverra directement vers les inscriptions. Et pour ça il y un bloc ‘Advanced Button’ toujours chez ‘Kadence Blocks’.

Descriptions des formations

Dans cette section, nous allons utiliser le bloc ‘Row Layout’, mettre un background de couleur et utiliser trois colonnes.

 

Nous allons utiliser chaque colonne pour décrire les possibilités et les avantages qu’offrent nos formations. Et pour accrocher encore + le visiteur, nous utiliserons des pictogrammes. Encore une fois, l’extension ‘Kadence blocks’ contient un bloc qui s’appelle ‘Icons’ et qui permet d’afficher facilement des pictogrammes.

Si nous continuons le travail pour les deux autres colonnes, on obtiendra une deuxième section qui pourrait ressembler à ça:

row_layout_block_3_colonnes_iconsPour faire tendance et joli, nous allons utiliser une vague pour diviser notre bloc bleu. Et pour cela, nous utilisons le bloc ‘Shape Divider’ provenant de l’extension ‘CoBlocks’.

shape_divider_blockUne fois l’extension installée, il suffit d’appliquer le bloc ‘Shape Divider’ sous notre bloc créé précédemment.

Pour que la vague colle au bloc précédent, il faut changer les marges.

Et ça donne ceci:

shape_divider_blockMedia Card

Pour notre prochaine section, nous allons poser une photo avec une phrase accrocheuse. L’idée est que la photo et le texte soient alignés. Dans ‘CoBlocks’, il y a un bloc qui fait ça et il s’appelle ‘Media Card’.

 

Pour les versions mobile de votre page d’accueil, il est judicieux d’activer ’empiler sur mobile’, sinon l’espace pour l’alignement sera trop étroit.

empilier_pour_mobileAinsi pour les mobiles, nous aurons cet affichage:

media_card_block_mobile

Affichage des formateur-trice-s

Pour la prochaine zone de notre page d’accueil, on aimerait afficher les formateurs-trice-s. On retourne sur ‘Gutenberg Block Library’, on tape ‘team’ dans le moteur de recherche et on tombe notamment là-dessus: (libre à vous de prendre un autre bloc. Ce sont des exemples).

On télécharge l’extension ‘Stackable’ et c’est parti.

 

Et en continuant, on peut imaginer obtenir ceci:

team_block

Liste des prix

Pour nos formations, on décide d’avoir deux prix: par mois et par an. C’est tout.

Pour ça, on va utiliser le bloc ‘Pricing box’ de ‘Stackable’. On va l’inclure dans un bloc ‘Row Layout’.

pricing_box_stackableMais on ne veut pas que les deux cartes occupent toute la largeur. Donc on va réduire le ‘padding’ dans notre bloc ‘Row Layout’.

 

Et pour la version mobile de notre page d’accueil, on ne voudra pas un tel ‘padding’, donc il suffit de remettre à 25 pixels les ‘paddings’ gauche et droite pour la version mobile comme ceci:

Conclusion

On pourra encore ajouter des témoignages d’étudiant-e-s en utilisant le bloc ‘Testimonials’ de Atomic Blocks

et au final, nous aurons une page d’accueil avec plusieurs sections et c’est ‘responsive’.

homepage_with_blocks

Maintenant à vous d’expérimenter et d’explorer la bibliothèque ‘Gutenberg Block Library’ !

A propos de l'auteur...

Cyril BRON

Formateur média-vidéo dans une Haute Ecole à Genève et développeur web indépendant, j'utilise WordPress au quotidien. Je pratique beaucoup la veille technologique; j'aime découvrir, expérimenter et partager. Je me déplace souvent en Europe avec mon ordinateur, j'occupe mon temps entre exploration, prises de vue, traitement d’images et lignes de code...

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !