Les bases du constructeur : comment créer des modèles de blocs

Dans l'article Builder Basics du mois dernier, nous avons exploré les modèles de blocs : ce qu'ils sont et comment vous pouvez les utiliser. Nous avons appris qu'un modèle de bloc est simplement une collection prédéfinie de blocs qui forme une mise en page spécifique. Nous avons présenté la puissance des modèles et expliqué comment ils constituent la pierre angulaire du développement de thèmes WordPress modernes. Aujourd'hui, nous allons apprendre à concevoir, partager et enregistrer nos propres modèles !

Veuillez noter que cet article utilise le thème Twenty Twenty-Two dans tous ses exemples. Ce thème basé sur des blocs a été publié avec WordPress 5.9 et est une ressource fantastique comprenant plus de 60 modèles de blocs.

Conception des motifs

La partie la plus difficile de la création d'un motif de bloc est de décider de son apparence. Commençons par quelque chose de relativement simple : une grille d'éléments, deux rangées de trois. Nous pourrions utiliser cette conception pour présenter différents services commerciaux ou fonctionnalités de produits.

Petite astuce : les modèles peuvent être créés à partir de n'importe quel bloc, y compris des blocs tiers. Cependant, si vous avez l'intention de distribuer vos modèles à un large public, essayez d'utiliser uniquement les blocs WordPress de base. De cette façon, l'utilisateur n'a pas à installer de plugins supplémentaires pour utiliser vos conceptions.

Pour moi, la création de patrons commence dans l'Éditeur. Alors que les modèles peuvent être codés manuellement, il est beaucoup plus facile de faire les choses visuellement. Je vais commencer par ajouter un bloc Colonnes avec trois colonnes pour la première ligne de la grille. Ensuite, ajoutez les blocs Titre, Paragraphe et Boutons à chaque colonne. Dupliquez le bloc Colonnes pour créer la deuxième ligne de la grille. Enfin, je vais appliquer quelques configurations de style et envelopper les deux blocs Columns dans un bloc Group avec une couleur d'arrière-plan. Le résultat ressemble à ceci :

Vous pouvez voir les 33 blocs qui composent cette conception dans la capture d'écran ci-dessus !

Si je veux créer une autre version "sombre" de la grille, j'ai juste besoin de dupliquer le design original et de peaufiner le style.

Bien que les deux conceptions soient relativement simples, les créer à partir de zéro peut être fastidieux. Pouvoir partager et/ou enregistrer ces modèles de blocs permettrait de gagner beaucoup de temps.

Partager un dessin

Partager une conception de modèle est facile! Supposons que vous souhaitiez déplacer le design vers une autre page de votre site Web, ou peut-être un autre site Web entièrement. C'est aussi simple que de copier et coller le balisage du bloc. Il existe plusieurs façons d'y parvenir.

Si la conception de modèle est contenue dans un bloc "conteneur", tel qu'un bloc Groupe, Couverture ou Colonnes, sélectionnez le conteneur le plus à l'extérieur et utilisez le menu Outils pour sélectionner "Copier". Le balisage du bloc est copié dans le presse-papiers et vous pouvez le coller où vous le souhaitez.

Une deuxième option consiste à utiliser l'éditeur de code, auquel vous pouvez accéder à partir du panneau Options.

L'éditeur de code fournit une représentation visuelle de tous les balisages de bloc sur la page ou la publication en cours. Je préfère cette méthode car il est facile de voir exactement quel code est copié.

Enregistrement d'un motif

Copier et coller le balisage de bloc peut être facile, mais nous voulons souvent une version plus permanente de nos conceptions de modèles. Pour ce faire, nous utiliserons l'API Patterns pour "enregistrer" un modèle de bloc personnalisé. Cela rend notre conception disponible à la fois dans l'Inserteur et dans l'Explorateur de modèles de WordPress.

Pour enregistrer un motif, nous utilisons la fonction PHP register_block_pattern(). Cette fonction accepte deux paramètres, un titre et un tableau de propriétés. Avant de parcourir chacun d'eux, examinons un exemple.

register_block_pattern(

'example/feature-grid-light',

déployer(

'title' => __( 'Feature Grid – Light', 'textdomain' ),

'description' => __( 'Présentez six articles en vedette dans une grille sur un fond clair.', 'textdomain' ),

'categories' => array( 'vedette', 'columns' ),

'keywords' => array( 'feature', 'grid' ),

'viewportWidth' => 1400,

'blockTypes' => array( 'core/columns' ),

'content' => 'CONTENU DU MODÈLE'

)

);

Nous enregistrons ici le pattern Feature Grid que nous avons conçu précédemment. Le titre suit une convention de dénomination d'espace de noms/titre. Lors de l'enregistrement de plusieurs modèles dans le même projet, il est recommandé de conserver la cohérence de l'espace de noms.

Seuls les paramètres de titre et de contenu dans le tableau des propriétés sont techniquement requis. Par souci de brièveté, le contenu du modèle est exclu dans l'exemple ci-dessus. Cependant, c'est le même code que nous avons copié et collé dans la section précédente. Les catégories sont définies à l'aide du champ des catégories et un modèle peut en avoir plusieurs. Dans l'Éditeur, les modèles sont organisés par catégorie. Pour les propriétés restantes, une ventilation fantastique est fournie dans le manuel de l'éditeur de blocs.

Pour enregistrer le motif de grille de fonctions avec un arrière-plan sombre, dupliquez simplement le code d'enregistrement et mettez à jour en conséquence. Enfin, nous encapsulons les deux fonctions comme ceci et plaçons le tout dans le fichier functions.php de notre thème.

function my_pattern_library_register_block_patterns() {

register_block_pattern(

'example/feature-grid-light',

déployer( … )

);

register_block_pattern(

'example/feature-grid-dark,

déployer( … )

);

}

add_action( 'init', 'example_register_block_patterns' );

Le code complet est disponible dans un Gist sur GitHub.

Une fois le code ajouté, nos modèles nouvellement enregistrés s'afficheront désormais dans l'Inserteur et l'Explorateur de modèles.

Enregistrement d'une catégorie de motifs

Lorsque vous travaillez avec des modèles personnalisés, il est souvent utile de les placer dans des catégories personnalisées. WordPress simplifie les choses avec register_block_pattern_category(). Cette fonction est similaire à celle que nous avons utilisée pour enregistrer les motifs. Tout ce que vous avez à faire est de fournir un titre de catégorie et un tableau de propriétés. Depuis WordPress 5.9, label est la seule propriété prise en charge, mais nous en attendons plus à l'avenir.

L'exemple suivant enregistre la catégorie « Custom » avec le titre custom. Placez ce code dans le fichier functions.php de votre thème à côté des exemples d'enregistrement de modèles.

fonction example_register_block_pattern_categories() {

register_block_pattern_category(

'Douane',

array( 'label' => __( 'Custom', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

Les catégories de motifs ne seront affichées dans l'Éditeur que si elles sont associées à des motifs. Par conséquent, si nous ajoutons une personnalisation aux deux modèles de grille de fonctionnalités que nous avons enregistrés précédemment, la catégorie "Personnalisée" apparaîtra comme suit :

Créer un plug-in de bibliothèque de modèles

Dans les sections précédentes, nous avons enregistré des motifs et une catégorie de motifs en plaçant le code dans le fichier functions.php de notre thème. Bien que cela fonctionne, ce n'est pas idéal à long terme. Supposons que nous ayons besoin de mettre à jour notre thème ? Peut-être voulons-nous utiliser les modèles sur un autre site Web ?

WordPress n'a pas encore fourni de solution native pour la gestion des modèles personnalisés, nous devons donc nous tourner vers des solutions alternatives. De plus, il est souvent préférable d'avoir des modèles dans un format plus portable.

La meilleure approche que j'ai trouvée consiste à créer un plugin WordPress simple pour stocker ma collection de modèles personnalisés. Les plugins offrent une polyvalence maximale et sont indépendants du thème. Je vais vous montrer comment créer votre propre plugin de bibliothèque de modèles dans les étapes suivantes.

Astuce rapide : Si vous souhaitez ignorer les étapes suivantes, j'ai préparé un plug-in complet "My Pattern Library" qui devrait fournir un excellent point de départ pour votre propre bibliothèque. Le code est disponible sous forme de Gist sur GitHub.

Étape 1 : Obtenir la configuration

Avant de commencer à créer le plugin, vous aurez besoin d'une version de travail de WordPress et d'un éditeur de texte d'une certaine variété. Je recommande fortement Local pour créer des installations WordPress locales et je l'utilise exclusivement depuis de nombreuses années. J'utilise Atom pour l'édition de texte, mais il existe de nombreuses options intéressantes. Même l'éditeur de texte de base fourni avec votre système d'exploitation fera l'affaire.

Configurez un site WordPress local à l'aide de Local ou d'une application similaire. Assurez-vous que WordPress est mis à jour vers la version 5.9 ou supérieure. Les modèles fonctionneront sur 5.5+, mais il est toujours préférable d'utiliser la dernière version de WordPress dans la mesure du possible.

Étape 2 : Créer le plugin

La prochaine chose que vous devez faire est de créer la "base" du plugin. Si vous débutez dans le développement de plugins, n'ayez pas peur. Cela semble plus intimidant qu'il ne l'est.

Accédez au répertoire wp-content → plugins dans votre installation WordPress locale et créez un nouveau répertoire intitulé my-pattern-library. Vous pouvez nommer le répertoire comme bon vous semble. Remplacez simplement "my-pattern-library" par votre nom personnalisé dans toutes les étapes suivantes.

Dans le nouveau répertoire wp-content → plugins → my-pattern-library , créez un fichier PHP intitulé my-pattern-library.php. Ouvrez le fichier dans votre éditeur de texte et ajoutez le commentaire d'en-tête de plugin suivant en haut du fichier. N'oubliez pas le premier <?php. Notez que j'ai simplifié l'en-tête de ce tutoriel.

<?php

/**

* Nom du plugin : Ma bibliothèque de motifs

* Description : Une simple bibliothèque de modèles de blocs.

*Version : 0.1.0

* Nécessite au moins : 5.8

* Nécessite PHP : 7.0

* Auteur : Votre nom

* Licence : GPL v2 ou ultérieure

* Domaine de texte : my-pattern-library

*/

N'hésitez pas à modifier les informations d'en-tête comme bon vous semble. Enregistrez ensuite le fichier. Vous avez maintenant un plugin WordPress entièrement fonctionnel. Confirmez qu'il est visible sur la page d'administration des plugins et cliquez sur "Activer". Ça devrait ressembler à ça.

Bien que vous ayez maintenant un plugin fonctionnel, il ne fait rien. Changeons cela.

Étape 3 : enregistrer des modèles et des catégories

Dans cette dernière étape, tout ce que vous avez à faire est de copier le code d'enregistrement du modèle et de la catégorie de modèle du début de cet article dans le nouveau plug-in. Nous avons précédemment placé ce code dans le fichier functions.php du thème. Maintenant, collez-le simplement sous le commentaire d'en-tête dans votre fichier my-pattern-library.php.

Enregistrez le fichier, puis accédez à l'éditeur dans WordPress. Ouvrez l'inséreuse, cliquez sur l'onglet Motifs et choisissez la catégorie Personnalisé. Vous devriez voir les deux modèles enregistrés par le plugin.

Votre bibliothèque de motifs est désormais opérationnelle ! Lorsqu'il y a un besoin de nouveaux modèles ou catégories personnalisés, ajoutez-les simplement au plugin. Un exemple de code complet est disponible sous forme de Gist sur GitHub.

Avant de conclure, il est important de mentionner que cet exemple est destiné à un usage personnel. Vous voudriez probablement inclure plus de fonctionnalités si le plugin devait être distribué publiquement. La localisation vient à l'esprit. Cela dit, ce didacticiel montre à quel point il est facile de créer un plugin simple qui stocke des modèles de blocs personnalisés.

Emballer

Dans cet article, vous avez appris à concevoir, partager et enregistrer des modèles de bloc. Vous avez même appris à créer un plugin WordPress simple pour héberger votre propre bibliothèque de modèles. Je crois fermement que les modèles de blocs font partie intégrante du développement de thèmes modernes, et je suis ravi de voir ce que l'avenir nous réserve. Si vous n'avez pas commencé à explorer les modèles, j'espère que cet article vous encourage à le faire. Apprendre WordPress est une ressource fantastique pour un apprentissage supplémentaire et si vous avez des questions, n'hésitez pas à me le faire savoir dans les commentaires.