Catégories
Plugin et site web

Comment créer un modèle de bloc Gutenberg simple dans WordPress

À mesure que l'éditeur de blocs WordPress Gutenberg évolue, de nouvelles fonctionnalités sont ajoutées pour faciliter la création de contenu. Et les modèles de bloc peuvent être l'addition la plus intéressante pour les concepteurs Web et leurs clients.

Qu'est-ce qu'un motif de bloc? Considérez-le comme une disposition pré-construite de blocs. Ils peuvent contenir à peu près tous les éléments de conception que vous souhaitez. Des éléments tels que des colonnes, des images, des vidéos, du texte, des boutons – ils peuvent tous être placés dans un modèle de bloc personnalisé.

Une fois que vous avez créé un modèle de bloc, il peut être utilisé encore et encore sur votre site Web. Chaque instance peut être personnalisée avec le contenu approprié. De plus, vous pouvez ajouter, soustraire ou modifier les blocs inclus.

Ils offrent un excellent point de départ pour créer une page et vous permettent de créer un aspect plus cohérent. Pourtant, ils permettent également aux concepteurs de faire les ajustements nécessaires.

Aujourd'hui, nous vous présenterons le concept des modèles de blocs WordPress et vous montrerons comment créer l'un des vôtres. Et c'est parti!

Tout d'abord, apprenez à connaître l'API Block Pattern

La création d'un modèle de bloc personnalisé nécessite l'utilisation de l'API WordPress Block Pattern. Cela permet d'ajouter un motif à l'un ou l'autre de votre thème functions.php fichier ou un plugin personnalisé.

Quelle que soit la façon dont vous l'implémentez, l'API est utilisée pour enregistrer les modèles de bloc personnalisés et les catégories de modèles de bloc.

Une chose intéressante quand il s'agit d'enregistrer un modèle de bloc personnalisé est que vous devez utiliser du HTML brut dans PHP. Cela signifie que certains caractères, tels que les guillemets, doivent être échappés.

Nous allons entrer dans le vif du sujet de la mise en place des choses dans un instant. Mais il convient de noter que cela peut être un processus fastidieux, en particulier pour les modèles plus complexes. Pointe du chapeau à Rich Tabor pour avoir signalé un outil qui fera le travail acharné à votre place.

Une personne avec des blocs de jouets.

Créez votre motif de bloc personnalisé

La première étape consiste à créer votre modèle de bloc personnalisé dans une page ou un article WordPress. Cela n'a pas besoin d'être effectué sur du contenu existant – vous pouvez créer un brouillon de message à cet effet. En fait, cela pourrait être le chemin le plus facile, car vous n'aurez pas à vous battre avec des éléments de contenu sans rapport.

Ajouter quelques blocs

Dans notre cas, nous avons créé une page de test qui permettra une certaine expérimentation. À l'intérieur, il y a les blocs suivants:

  • Une image de couverture;
  • Un ensemble de deux colonnes, chacune avec des en-têtes et du texte de paragraphe;
  • Un séparateur;
  • Plus de texte de paragraphe;

Une série de blocs WordPress Gutenberg.

C'est quelque chose que notre site Web fictif pourrait utiliser dans chaque page. Un modèle de bloc personnalisé signifie que nous n’aurons pas à le reconstruire à chaque fois.

Nous avons laissé les choses assez simples ici. Mais vous pouvez personnaliser chacun de ces blocs comme vous le souhaitez. Par exemple, vous pouvez utiliser la palette de couleurs Gutenberg pour prédéterminer la coloration ou ajouter des classes CSS personnalisées.

Sélectionnez vos blocs et copiez-les

Maintenant que nos blocs sont configurés comme nous le souhaitons, il est temps de récupérer leur code source. Heureusement, c'est plus facile qu'il n'y paraît.

Tout d'abord, il s'agit de sélectionner tous les blocs que nous voulons utiliser dans notre modèle. Le moyen le plus simple de le faire est de cliquer sur le premier bloc (le couvercle, dans ce cas), maintenez le bouton ALT touchez le clavier, puis cliquez sur le dernier bloc (zone de contenu n ° 3).

Avec les blocs sélectionnés, cliquez sur le "Plus d'options" bouton, qui ressemble à un ensemble de trois points verticaux, en haut de l'éditeur. Dans le menu, cliquez sur Copie. Cela copiera le code source pour toute la sélection de blocs.

Blocs de Gutenberg sélectionnés et copiés.

Le résultat ressemblera à ceci:

Échapper à toutes les choses

Comme mentionné précédemment, la sortie HTML devra être échappée afin de fonctionner avec l'API Block Pattern.

Nous allons donc prendre notre code et l'exécuter via l'outil JSON Escape / Unescape. Cela se traduit par la sortie suivante:

Maintenant que notre code est propre et ordonné, nous pouvons passer à l'étape suivante.

Enregistrer le modèle de bloc personnalisé

Enfin, nous devrons enregistrer ce nouveau modèle de bloc personnalisé dans WordPress. À l'aide de l'API Block Pattern, créons un plug-in personnalisé pour le modèle. Cela nous permettra d'utiliser le modèle, même si nous changeons de thème plus tard.

Notre modèle s'appellera "Blocs d'introduction de page». Notez que nous plaçons le motif de bloc dans le "entête»Catégorie – qui existe déjà par défaut. Si vous souhaitez créer votre propre catégorie de modèle de bloc personnalisé, reportez-vous à la documentation WordPress pour plus de détails.

Créez un fichier avec le code ci-dessus et placez-le dans votre site /wp-content/plugins/ dossier (assurez-vous simplement de tout sauvegarder en premier).

Une fois le plugin installé, dirigez-vous vers Plugins> Plugins installés dans l'administrateur WordPress et activez-le.

Utilisation d'un motif de bloc personnalisé

OK, nous avons notre modèle de bloc personnalisé créé et implémenté via un plugin WordPress. Maintenant, nous pouvons commencer à l'utiliser où nous voulons.

Pour commencer, nous allons créer une nouvelle page, mais vous pouvez également utiliser une page ou un article existant.

Pour ajouter le motif de bloc à la page, cliquez sur le bouton "Ajouter un bloc" bouton en haut à gauche de l'éditeur (un grand «+» dans une case bleue). Ensuite, cliquez sur le Motifs languette.

Dans l'onglet Modèles, vous verrez un certain nombre de modèles prédéfinis qui sont inclus avec WordPress. Faites défiler vers le bas jusqu'à ce que vous voyiez le modèle que nous avons créé, "Blocs d'introduction de page ".

Recherche du motif de bloc de Gutenberg dans l'éditeur.

Cliquez sur le motif et il sera automatiquement ajouté à la page. À partir de là, nous pouvons modifier les blocs à notre guise.

Un modèle de bloc personnalisé Gutenberg ajouté à une page.

Une nouvelle façon de personnaliser votre site Web

Les modèles de blocs personnalisés WordPress sont un gain de temps énorme. Les développeurs n'ont plus besoin de recréer méticuleusement des mises en page pour une utilisation à plusieurs endroits. En enregistrant un modèle de bloc, vous aurez un point de départ entièrement personnalisé chaque fois que vous en aurez besoin. C'est également idéal pour les créateurs de contenu, car cela élimine le mystère de la réalisation d'une mise en page cohérente.

De plus, vous n’avez pas nécessairement à concevoir vous-même un motif de bloc personnalisé. Par exemple, Gutenberg Hub dispose d'une vaste bibliothèque de modèles que vous pouvez utiliser pour rechercher et implémenter des tonnes de mises en page prédéfinies. Bien sûr, vous devrez toujours vous échapper et enregistrer le modèle. Mais cela ouvre tout un monde de possibilités.

Dans l'ensemble, les modèles de blocs personnalisés aident à apporter un nouveau niveau de personnalisation à l'éditeur de blocs Gutenberg. Maintenant, l'éditeur peut être tout aussi personnalisé que votre thème.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *