Décoder WordPress : Block Patterns

Lorsque WordPress a publié WordPress 5.5, « Eckstine », le 11 août 2020, de nombreux raffinements se sont concentrés sur trois domaines principaux : la vitesse, la recherche et la sécurité. La version offrait également de nouvelles fonctionnalités pour l’éditeur de blocs Gutenberg, et peut-être qu’aucune n’était plus excitante et prometteuse sur le plan créatif que les modèles de blocs.

Dans cet article de blog, nous examinerons ce que sont les modèles de blocs (et rafraîchirons votre mémoire sur les bases des blocs), leurs avantages et leur évolution, en particulier en ce qui concerne les versions de WordPress 5.9, qui a introduit l’édition complète du site. , et WordPress 6.0, qui a introduit l’éditeur de blocs entre autres fonctionnalités. Nous vous montrerons également comment vous pouvez commencer à créer et à utiliser des modèles de blocs personnalisés dès maintenant.

Même si vous n’êtes pas un développeur WordPress professionnel et que vous commencez tout juste à apprendre à travailler avec WordPress, la création et l’utilisation de modèles de blocs sont à votre portée !

Roulons !

Qu’est-ce qu’un modèle de bloc WordPress ?

Un modèle de bloc WordPress est une mise en page préfabriquée et prête à l’emploi composée de blocs WordPress dans une certaine mise en page ou conception. Ce regroupement de blocs WordPress offre aux utilisateurs une plus grande flexibilité de conception et leur permet de créer des mises en page complexes mais attrayantes et professionnelles en cliquant seulement sur quelques boutons.

Une fois qu’un modèle de bloc a été sélectionné (voir ci-dessus), il est inséré dans les pages et les publications du site WordPress. Il peut ensuite être édité et modifié, ce qui inclut la possibilité de personnaliser facilement des composants individuels dans le modèle de bloc, tels que les options de couleur, les images, les médias et d’autres contenus. Tous les blocs fonctionnent comme des blocs Gutenberg ordinaires.

Un modèle de bloc peut être réutilisé d’innombrables fois sur votre site, un peu comme un modèle, éliminant ainsi le besoin de créer manuellement des mises en page un bloc à la fois. Vous pouvez même insérer plusieurs copies d’un même modèle sur une publication ou une page, augmentant ainsi le volume et la diversité de vos options de conception au fur et à mesure que vous construisez votre site.

Les bases des blocs WordPress

Nous savons maintenant ce que sont les modèles de blocs WordPress, mais quels sont les blocs WordPress dont ils sont faits ?

Les blocs sont un aspect fondamental de WordPress depuis fin 2018. La version 5.0 de WordPress a remplacé l’éditeur classique par un nouvel éditeur de blocs WordPress appelé Gutenberg.

Un bloc est un élément spécifique que vous pouvez ajouter à votre site. Par exemple, il existe des blocs pour les images, les titres, les listes, les paragraphes, etc. Ce système offre aux utilisateurs un moyen simple et intuitif de créer un site Web unique.

Chaque bloc est livré avec un ensemble d’options de personnalisation, telles que l’alignement, la couleur et la taille. De plus, les blocs peuvent être déplacés via un éditeur glisser-déposer, facilitant un processus de création de page plus simple.

Motifs de blocs : qu’est-ce qu’ils vous apportent ?

Comme nous l’avons mentionné précédemment, un modèle de bloc WordPress – qui ressemble à une disposition de courtepointe – peut être modifié en personnalisant ses blocs individuels, et il peut être réutilisé comme un modèle.

Examinons maintenant les principaux avantages liés à l’utilisation de modèles de blocs sur votre site.

• Créez vos propres modèles de blocs. La création de vos propres modèles de blocs personnalisés vous permet de donner à quiconque travaille sur votre site le contrôle du contenu sans sacrifier le contrôle de la mise en page et de la conception.
• Utilisez des modèles préfabriqués créés par des designers professionnels. Les motifs de blocs créés par des designers professionnels peuvent également être modifiés et utilisés. Cela apporte une plus grande variété d’options lors de la création d’un article ou d’une page.
• Enregistrez les modèles que vous utilisez souvent. Lorsque vous créez ou sélectionnez des modèles de blocs et que vous les enregistrez, vous activez une conception et une présentation cohérentes sur votre site.
• Gagner du temps. En utilisant des modèles de blocs prédéfinis créés par vous-même ou par d’autres concepteurs lors du développement de votre site WordPress, vous gagnez du temps et augmentez votre productivité.
• Flexibilité et personnalisation. Les modèles de blocs préconstruits ne sont pas « ciselés dans la pierre ». Leur apparence peut être modifiée et adaptée à vos besoins spécifiques en matière de conception et de fonctionnalité. Trouvez un motif de bloc dans le répertoire de motifs qui vous plaît et modifiez-le selon votre créativité.
• Éviter la frustration grâce à l’indépendance du thème. L’un des nombreux avantages des modèles de blocs personnalisés est qu’ils ne sont liés à aucun thème particulier. Si vous modifiez le thème de votre site WordPress ultérieurement, vos modèles ne changeront pas en conséquence.
• Mises en page flexibles des pages et des articles. Concevoir votre site WordPress à l’aide de blocs et de modèles de blocs signifie que le contenu de votre site sera correctement optimisé lorsque vous le visualiserez sur différents appareils comme les smartphones ou les tablettes.

Une nouvelle puce sur les anciens blocs : évolution des modèles de blocs

Depuis leur introduction dans la version du 11 août 2020 de WordPress 5.5 « Eckstine », les modèles de blocs ont évolué au fil des versions ultérieures pour devenir encore plus conviviaux et fonctionnels.

Dans WordPress 5.9, les modèles de blocs prêts à l’emploi pouvaient être copiés et collés directement dans l’éditeur de site complet.

À long terme, cela signifie également que la nature des thèmes de blocs peut changer. Ils deviendront probablement plus larges, plus axés sur les fonctionnalités et visuellement non spécifiques (fournissant davantage une « ardoise vierge » avec laquelle travailler).

Dans WordPress 6.0, les modèles de blocs ont été encore améliorés de plusieurs manières.

• Les modèles de blocs étaient plus faciles à trouver dans l’édition de modèles car l’insertion rapide n’affichait les modèles de blocs que lorsqu’ils étaient accessibles au niveau supérieur d’un modèle. Ce serait le cas, par exemple, lorsqu’un bloc que vous avez l’intention d’ajouter est un descendant direct du document.
• Les développeurs de thèmes pourraient ajouter des modèles recommandés au thème.json.
• L’enregistrement implicite de modèles signifiait que les thèmes pouvaient implicitement enregistrer des modèles en les catégorisant en tant que fichiers PHP sous un nouveau /motifs répertoire à la racine du thème.

Les blocs de construction des motifs : créer des motifs de blocs personnalisés

Jusqu’à présent, nous avons appris ce que sont les modèles de blocs WordPress – et les blocs -, pourquoi ils peuvent vous être utiles et comment ils ont évolué au fil du temps. Mais comment créez-vous et utilisez-vous des modèles de blocs personnalisés pour que votre site incarne pleinement vos préférences esthétiques, les fonctionnalités et les objectifs que vous poursuivez ?

Voici comment créer des motifs de blocs dans Gutenberg en cinq étapes faciles !

Étape 1 : créer un brouillon de publication dans Gutenberg

Pour créer un modèle de bloc personnalisé, commencez par créer un brouillon de publication ou de page dans votre tableau de bord WordPress. Un brouillon est recommandé car il n’aura pas de contenu existant ou nouveau comme du texte, des images et d’autres contenus qui l’encombrent, et il vous sera plus facile de travailler avec la conception du modèle de bloc.

Au cours de cette étape, vous allez ajouter des blocs pour les paragraphes et le texte, les colonnes, les images et les galeries, les médias vidéo et audio, les séparateurs et d’autres contenus.

Une fois que vous avez ajouté vos blocs, vous pouvez maintenant les styliser avec des palettes de couleurs, des polices, etc.

Connexes : Décoder WordPress : une introduction aux styles globaux

Étape 2 : sélectionner et copier des blocs

Une fois que vos blocs sont créés et stylés comme vous voulez qu’ils apparaissent, vous devez obtenir leur code source. N’ayez pas peur ! Obtenir le code est plus simple qu’il n’y paraît !

Voici comment. Sélectionnez manuellement tous les blocs que vous souhaitez dans vos modèles de blocs. Pour ce faire, cliquez sur le premier bloc, maintenez la touche ALT de votre clavier enfoncée, puis cliquez sur le dernier bloc que vous souhaitez voir apparaître dans le motif.

Enfin, cliquez sur le bouton « Plus d’options » (trois points verticaux) en haut de votre éditeur. Cliquez ensuite sur « Copier ». Cette étape copie tout le code source de chacun de vos blocs sélectionnés.

Étape 3 : formater le modèle de bloc pour le fichier functions.php de votre thème

Une fois que vous avez copié le code source de vos blocs à l’étape précédente, vous devrez formater (encoder) le fichier functions.php du thème choisi avec celui-ci. Il s’agit d’une étape très importante effectuée dans un encodeur JSON. Cela entraîne l’échappement de la sortie HTML et lui permet de fonctionner avec l’API Block Pattern.

Accédez à l’encodeur et collez votre code HTML dans la case « Entrez la chaîne », puis cliquez sur le bouton Échap.

Ensuite, copiez le code de la chaîne de résultat qui s’affiche dans la deuxième zone.

Étape 4 : Enregistrez votre modèle de bloc personnalisé

Vous allez maintenant enregistrer votre modèle de bloc auprès de la plateforme WordPress. Avec l’API Block Pattern, vous avez deux choix pour enregistrer votre modèle de bloc personnalisé :

• Plug-in personnalisé : vous permet d’utiliser le modèle même si vous changez de thème ultérieurement.
• Le fichier functions.php de votre thème : cette option peut également être recommandée si vous construisez de nombreux modèles de blocs et que vous ne souhaitez pas installer beaucoup de plugins supplémentaires. Notez que l’utilisation de functions.php liera votre modèle de bloc au thème que vous utilisez et peut causer des problèmes si vous décidez de changer de thème à l’avenir.

Pour enregistrer votre modèle de bloc Gutenberg dans le fichier functions.php de votre thème choisi, accédez à votre tableau de bord WordPress, cliquez sur Outils → Éditeur de fichiers de thème, et collez le code source HTML de la chaîne de résultat que vous avez obtenu à l’étape 3. Cliquez sur « Mettre à jour le fichier ». Ensuite, vous pouvez aller dans « Fonctions du thème » et trouver le fichier PHP du thème.

Étape 5 : Insérez votre nouveau modèle de bloc WordPress personnalisé

Enfin, sur la page Gutenberg, recherchez un nouveau motif. Recherchez « Non classé » en cliquant sur l’onglet « Modèle ». Votre nouveau modèle de bloc Gutenberg sera stocké avec succès.

La dernière étape consiste à cliquer sur le nouveau modèle de bloc WordPress et à l’insérer dans votre éditeur Gutenberg.

Utilisation de modèles de blocs WordPress personnalisés

Il est maintenant temps de faire preuve de créativité en utilisant vos modèles de blocs WordPress personnalisés dans la conception de votre site ! Et c’est super facile.

Lorsque vous êtes prêt à appliquer votre modèle de bloc personnalisé à partir du répertoire de modèles, cliquez dessus une fois, et il est ensuite inséré dans votre page à l’emplacement de votre curseur sur la page.

Une fois que vous avez inséré votre motif, vous pouvez modifier le contenu à volonté. Pour ce faire, cliquez sur n’importe quel bloc pour ajouter ou modifier du contenu, y compris du texte et des images, dans ce bloc.

Quelque chose à garder à l’esprit à propos des images : les images fournies dans les modèles de blocs et les mises en page créées par d’autres concepteurs sont généralement référencées à partir de sources externes et ne sont pas ajoutées à la bibliothèque multimédia de votre site. Il est donc possible qu’elles soient modifiées ou supprimées ultérieurement. indiquer. Si vous utilisez un motif de bloc contenant des images que vous aimez, cela peut être déconcertant lorsqu’elles changent ou disparaissent soudainement.

Par conséquent, il est conseillé de toujours utiliser vos propres images, photos et graphiques. Si vous êtes graphiste et/ou photographe, vous pouvez utiliser le contenu que vous avez créé. Vous pouvez également vous procurer du contenu dans WordPress à partir d’une bibliothèque de plus de 40 000 photos libres de droits et libres d’utilisation fournies par Pexels.

Toujours pas convaincu ?

Même si nous avons une confiance totale dans votre capacité à développer votre site WordPress et à créer et utiliser vos propres modèles de blocs personnalisés, nous comprenons que vous n’êtes peut-être toujours pas convaincu que vous pouvez le faire vous-même.

Si vous manquez de confiance et sentez que vous avez besoin d’aide, nous sommes là pour vous sauver la vie. Notre service d’hébergement WordPress géré par DreamPress offre un WordPress performant et sans tracas. Il inclut des fonctionnalités DreamHost inégalées telles que : vitesse extrême avec mise en cache intégrée ; des outils puissants comme le courrier électronique, la mise en scène et les sauvegardes ; migration WordPress gratuite ; et une assistance WordPress experte 24h/24 et 7j/7.

Vous pouvez choisir parmi DreamPress, DreamPress Plus et DreamPress Pro. Pour commencer, cliquez simplement sur le lien ci-dessous.