Le guide complet des modèles de blocs de Gutenberg (I)
Publié: 2020-12-23La semaine dernière, Matt Mullenweg, comme le veut la tradition chaque année, a donné sa présentation (dans ce cas, virtuelle), State of The Word , dans laquelle il a présenté un bref résumé de l'état actuel et des nouvelles fonctionnalités de WordPress.
Matt est plus que jamais déterminé à nous faire tomber amoureux de l'expérience offerte par l'éditeur de blocs Gutenberg. L'une des nouvelles fonctionnalités que Matt a soulignées, fournies avec la version 5.5 de WordPress, est les modèles de blocs . J'ai pensé qu'il serait intéressant de faire ce guide complet sur eux.
Le guide est divisé en trois articles et nous aborderons les sujets suivants :
- Introduction aux modèles de blocs
- Insérer un motif sur une page
- Modèles prédéfinis et autres disponibles dans les répertoires
- Ajouter des modèles disponibles dans les répertoires à votre site
- Comment créer un motif à partir de zéro
- Comment créer un modèle si vous n'êtes pas développeur
- Comment convertir des blocs réutilisables en blocs de motifs
- Rubriques utilisant des modèles de bloc
- Documents officiels.
Alors, sans plus tarder, commençons !
1. Introduction aux modèles de blocs
Lorsque Gutenberg est arrivé, le grand changement par rapport à l'éditeur classique que nous avions dans WordPress a été l'introduction du concept de "bloc". Tout était censé être un bloc : le titre du message, ses paragraphes, ses listes, ses images… chacun d'eux était un bloc, avec ses propres propriétés de personnalisation pour définir sa taille de police, son titre, son alignement, etc.
Les blocs sont rapidement devenus plus sophistiqués et nous avons maintenant des galeries d'images, des blocs médias/texte ou même des blocs contenant d'autres blocs.
Simultanément, de nombreux développeurs ont également fourni un grand nombre de blocs avec des fonctionnalités uniques afin que vous puissiez améliorer la conception de vos pages. Par exemple, chez Nelio nous avons développé le Nelio Compare Images pour comparer deux images avec un simple slider :
Non seulement il y a eu une explosion de blocs que l'on peut trouver dans les plugins et les thèmes, mais leurs capacités ont également évolué avec les différentes versions de WordPress. Ainsi, vous pouvez actuellement créer des blocs réutilisables et, avec eux, même créer un modèle de page ou de publication.
Toujours dans l'idée d'avoir des designs prédéfinis qui peuvent être réutilisés rapidement et facilement, avec la version 5.5 de WordPress, les modèles de blocs sont arrivés. L'idée d'un modèle de bloc est très simple : ce sont des sections ou des fragments prédéfinis formés par un groupe de blocs que vous pouvez utiliser dans la création de pages et de publications. Ces modèles peuvent être quelque chose d'aussi simple qu'une section montrant deux boutons ou une section de prix avec des designs accrocheurs et complexes.
2. Insérer un motif sur une page
Commençons par les bases, comment insérer un nouveau motif sur une page ? Très facile! Comme pour les blocs, pour insérer un motif il vous suffit de cliquer sur le bouton + en haut à gauche de votre éditeur et, au lieu d'ajouter un bloc, sélectionnez l'onglet Motifs . Vous y verrez une petite liste déroulante avec les types de modèles que vous pouvez sélectionner, ceux prédéfinis de WordPress, ceux du thème que vous avez installé et tout autre que vous avez installé avec un plugin.
Sélectionnez le motif qui vous plaît le plus et voyez comment l'ensemble des blocs qui le composent sont insérés dans votre page :
Après avoir inséré le motif, vous pouvez modifier chacun des blocs comme vous l'avez fait jusqu'à présent. De plus, si les blocs de ce motif sont regroupés, vous pouvez également modifier les propriétés du groupe dans son ensemble. Simple, non ?
3. Modèles par défaut et autres modèles de répertoires tiers
La version WordPress 5.5 est livrée avec un ensemble de modèles de blocs prédéfinis que vous pouvez désormais utiliser pour créer vos pages. Il vous suffit de cliquer sur le bouton + que j'évoquais plus haut pour voir les patrons disponibles sur votre site.
En outre, votre thème actif peut également définir ses propres modèles de blocs. Par exemple, le thème WordPress Twenty Seventeen ou Twenty Twenty-One inclut des modèles de blocs, tout comme ceux de GoDaddy et Genesis Blocks, pour ne citer que quelques exemples.
Après la sortie de WordPress 5.0, nous avons eu une explosion de blocs, et nous voyons maintenant le même résultat si les modèles de blocs : vous pouvez télécharger et installer des blocs et des modèles sur votre site Web très facilement, comme je l'expliquerai plus tard. Ici, vous avez deux toiles de blocs et de motifs à votre disposition, même si je suis sûr qu'il y en aura bientôt d'autres :
- Shareablock Patterns par Jeffrey Carandang – Un site Web fantastique où vous pouvez partager et obtenir de nombreux blocs, modèles et modèles à télécharger et à installer sur votre site.
- Gutenberg Hub de Munir Kamal - où vous trouverez également un tas de blocs, de modèles et de modèles.
Il existe également le plugin Redux Framework , qui propose une bibliothèque avec plus de 1000 blocs, modèles et modèles tiers (y compris ceux disponibles dans les répertoires ci-dessus) à insérer dans vos pages. Le plugin vous permet de télécharger jusqu'à 5 modèles gratuits, puis vous pouvez passer à la version payante.
4. Ajoutez des modèles disponibles dans les répertoires à votre site
Comme je l'ai déjà mentionné, vous pouvez utiliser le plugin Redux Framework pour ajouter facilement des modèles de Shareablock et GutenbergHub. Si vous êtes un concepteur de site Web WordPress professionnel, c'est sûrement une bonne option pour toujours trouver autant de modèles que vous le souhaitez très rapidement. Mais vous pouvez également utiliser de nouveaux modèles de blocs sans nécessiter de plugin premium. Voyons comment.
Ajouter un modèle Shareablock
Dans le cas de Shareablock, pour installer un modèle (et bien sûr, un bloc ou un modèle), il vous suffit de le sélectionner sur le Web et de cliquer sur le bouton Télécharger maintenant .
La première fois, il vous sera demandé une adresse e-mail afin que vous puissiez obtenir un nom d'utilisateur et un mot de passe.
Dans l'e-mail, il y a un lien pour se connecter à leur site Web; connectez-vous et vous pourrez maintenant télécharger le modèle qui vous intéresse. Il vous suffit de le sélectionner et de cliquer à nouveau sur Télécharger maintenant pour recevoir le modèle de bloc dans votre e-mail.
Après avoir cliqué sur le lien fourni dans l'e-mail, vous pouvez accéder au Web pour télécharger le fichier .json du modèle. Une fois téléchargé, faites-le simplement glisser vers l'éditeur de blocs WordPress et vous verrez automatiquement tous les blocs qui composent le motif.
C'est un processus fastidieux, mais il fait le travail. Malheureusement, vous remarquerez que le motif de bloc n'apparaît pas dans votre bibliothèque…
Ajouter un modèle de hub Gutenberg
L'ajout d'un motif à partir de Gutenberg Hub est plus facile. Comme précédemment, sélectionnez d'abord le motif que vous souhaitez copier.
À droite du motif, vous verrez le bouton Copier le code . Cliquez sur le bouton pour le copier dans votre presse-papiers, puis collez-le dans votre éditeur Gutenberg. Cela collera le bloc dans votre éditeur, mais ignorera la bibliothèque.
Mais attendez! Pas si vite. Si vous souhaitez personnaliser entièrement le ou les blocs résultants, Munir Kamal vous recommande d'installer leur plugin gratuit, EditorPlus, qui ajoute de nouveaux blocs à l'éditeur et étend Gutenberg avec des commandes de conception avancées, des polices, des icônes, des séparateurs, des animations et bien d'autres. caractéristiques.
Si vous le faites, vous verrez dans la barre latérale droite de l'éditeur que vous disposez de commandes avancées pour modifier la conception du motif copié.
Vous savez maintenant ce que sont les modèles de blocs, où les trouver et comment les insérer dans votre site Web pour créer de superbes designs. Ne manquez pas le prochain article où vous apprendrez à créer vos propres motifs !
Image sélectionnée par Raul Cacho Oses sur Unsplash .