Le festival de WordPress
22 janvier 2021

Choisissez une langue

This is an archive of the January 2021 event

Extension de l'éditeur WordPress avec des modèles de blocs

L'éditeur de blocs WordPress permet de créer des contenus complexes pour les articles et les pages WordPress. Les créateurs de contenu peuvent trouver que la configuration de blocs complexes similaires est une tâche fastidieuse. Heureusement, les modèles de blocs permettent d'accéder facilement à des blocs et groupes de blocs préconfigurés. Les Block Patterns sont parfaits pour les configurations de blocs fréquemment utilisées. Cet atelier portera sur la manière de générer le balisage d'un modèle de bloc dans l'éditeur de blocs et d'ajouter le code d'enregistrement de ce modèle à un plugin ou à un thème. Bien qu'il ne soit pas obligatoire, cet atelier est conçu comme un atelier pratique. Des instructions préparatoires et un exemple de code de démarrage seront fournis à l'avance pour que les participants puissent coder en même temps que la présentation.

Le Président : Daisy Olsen

Heure : 2h00UTC
Région : Océanie
Scène : Scène mondiale

Salut tout le monde. Je suis Daisy Olson. Je suis un développeur de relations Wrangler avec automatique. Mon objectif principal est de soutenir la communauté open source WordPress. Je suis ravie d'être ici pour vous parler d'une fonctionnalité très utile de l'éditeur de blocs WordPress. Vous savez peut-être déjà que l'éditeur de blocs parfois appelé Gutenberg peut être utilisé pour créer des mises en page de contenu vraiment avancées et intéressantes.

Aujourd'hui, je vais vous parler de la fonction de modèles de blocs qui a été ajoutée à la version 5.5 de WordPress en août 2020 avec la sortie de la version 5.5 de WordPress. La fonction de modèles de blocs a été implémentée dans l'éditeur. Elle permet d'accéder à un catalogue. Il s'agit d'un modèle de blocs prédéfini qui permet aux utilisateurs de créer et de modifier facilement des mises en page attrayantes pour leur contenu.

Cette fonctionnalité est principalement disponible pour permettre aux développeurs de thèmes et de plugins de créer des configurations de blocs prédéfinies pour leurs utilisateurs et clients. Outre ceux inclus par défaut dans WordPress, des configurations de blocs supplémentaires peuvent être enregistrées afin de fournir aux créateurs de contenu encore plus d'options pour créer rapidement des contenus hautement personnalisables.

Leur site WordPress. Les modèles de blocs enregistrés offrent un moyen très simple d'ajouter des modèles comme des groupes de blocs aux articles ou aux pages, prêts à recevoir un contenu unique, qu'il s'agisse d'ajouter des modèles de blocs, uniques à la marque d'un site, ou d'étendre les fonctionnalités d'un plugin ou de thèmes. Les possibilités sont infinies.

Je vais prendre un moment pour m'écarter du sujet pour parler d'une autre fonctionnalité de l'éditeur de blocs qui pourrait causer un peu de confusion quand on parle de modèles de blocs. Il s'agit de la fonction de blocs réutilisables. Un bloc réutilisable est un bloc ou un groupe de blocs qui sont sauvegardés pour permettre une gestion à partir d'un emplacement central. Les modifications apportées à un bloc réutilisable s'appliquent à chaque instance du bloc sur l'ensemble d'un site web.

Lorsqu'un bloc réutilisable est édité, ces modifications affecteront tout endroit du site où le bloc réutilisable édité a été utilisé. Les modèles de blocs, cependant, sont utilisés comme point de départ et n'ont pas la même gestion centrale. Une fois qu'un modèle de bloc est ajouté à un message ou à une page, il n'est plus lié au modèle de bloc enregistré et peut être modifié sans affecter le modèle de bloc qui a été utilisé pour insérer les blocs.

Les modèles de blocs sont enregistrés pour être utilisés à partir de l'encart ou du panneau de blocs en ajoutant du code assez simple à un fichier PHP de fonctions de thèmes WordPress ou dans un plugin personnalisé. Pour cet exemple, nous allons ajouter le code nécessaire à un simple plugin. Afin de maintenir l'organisation de l'insertion de bloc, l'option de création de catégories de bloc peut être enregistrée en même temps que le bloc lui-même.

Je recommande d'utiliser cette option pour que les choses restent faciles pour les créateurs de contenu à l'avenir. Dans ce cas, j'ai enregistré une catégorie de modèle de bloc avec un nom de catégorie et l'étiquette lisible par l'homme. Le nom de la catégorie sera utilisé par WordPress pour identifier la catégorie. Notez que j'ai utilisé tous les caractères minuscules, séparés de mon nom de catégorie par des tirets.

La deuxième propriété contient un tableau avec un attribut d'étiquette. Celui-ci attribue une étiquette lisible par l'utilisateur pour la catégorie qui sera répertoriée dans le menu déroulant des catégories dans le panneau d'insertion du modèle de bloc.

Le code, le modèle de bloc se compose de deux propriétés obligatoires et de deux propriétés facultatives. Le titre et le contenu sont des propriétés obligatoires. La description et les catégories sont facultatives, mais recommandées. Le titre fournira une étiquette pour votre bloc de données qui sera affiché dans la liste des blocs de données disponibles. Le contenu contient le contenu initial du bloc pour le modèle.

Ce contenu sera également utilisé pour créer un rendu du bloc tel qu'il apparaîtra avec le style du thème actif dans l'encart ou le panneau. Selon le contenu de votre modèle de bloc, il peut être nécessaire d'échapper à certains caractères, tels que les guillemets simples et doubles. Il existe de nombreux outils en ligne pour vous aider dans cette tâche, l'URL d'une option sur onlinestringtools.com est indiquée ici.

Vous voyez ici le code complété qui peut être ajouté à un thème ou à un plugin. Dans ce cas, j'ai ajouté un simple exemple de bloc de paragraphe à des fins de démonstration. J'ai également enveloppé mon code d'enregistrement dans une déclaration "if" de sorte que le code d'enregistrement ne sera utilisé que si la fonctionnalité de bloc de paragraphes est présente sur le site où le code est ajouté, ceci servira de sauvegarde si le code est ajouté à un site qui ne supporte pas cette fonctionnalité relativement nouvelle de WordPress ?

Notez que les chaînes que j'ai incluses dans le code d'enregistrement de mon modèle de bloc, comme mon modèle génial, ou ceci est mon modèle de bloc génial, sont enveloppées dans des fonctions de localisation pour permettre aux chaînes d'être traduites dans d'autres langues.

Il s'agit d'une bonne pratique pour le codage de toute chaîne de caractères destinée à l'utilisateur. Cet exemple est extrêmement simple, mais examinons le processus d'obtention du balisage de contenu nécessaire pour enregistrer une mise en page par blocs un peu plus complexe pour enregistrer un modèle de bloc.

Nous avons ici un site WordPress de base qui a été créé pour cette démonstration sur la page d'accueil. J'ai ajouté chacun des éléments de base ou inclus dans les modèles de blocs WordPress. Vous verrez donc que nous avons des choses comme un modèle de bloc à deux boutons qui comprend deux boutons comme il le suggère, un modèle de bloc à trois boutons.

Et puis si vous descendez dans l'écran, vous pouvez voir que nous avons un certain nombre d'autres options, des choses comme deux colonnes de texte avec des images. Nous avons trois colonnes avec des boutons. Nous en avons qui font des images. Ici, nous avons quelque chose qui est destiné à un grand en-tête avec un, en-tête au-dessus de l'image.

Et en continuant à descendre, vous pouvez en voir plus. Enfin, nous avons un modèle de bloc de citations qui est un très bon exemple du type de choses pour lesquelles vous pourriez utiliser un modèle de bloc. Pour créer un moyen d'avoir une mise en page très cohérente avec le contenu que vous pourriez utiliser encore et encore, ce qui serait vraiment commun.

Et ce que certains types de sites pourraient utiliser. Je vais donc maintenant créer un nouveau poste. Je vais monter ici pour créer un nouveau poste. Donc pour commencer, voici ce que je vais faire. Ce message n'est en fait qu'un moyen d'obtenir le balisage dont vous aurez besoin pour créer votre modèle de bloc. Donc, pour donner un nom à l'article, je vais dire que c'est un modèle de bloc, et ensuite je peux commencer à créer le bloc.

Et disons que je voulais lui donner un titre.

D'accord, je vais ajouter un autre bloc ici. Et peut-être que pour cela, nous créerions une sorte de page d'équipe. Nous pourrions donc souhaiter avoir une image. Nous pourrions souhaiter avoir une sorte de contenu biographique. On pourrait donc dire que nous allons avoir un nom. Nous allons avoir un titre. Nous pourrions dire que nous allons avoir une sorte de biographie.

Nous pouvons appliquer un certain formatage à ce contenu, alors disons que nous voulons rendre le nom qui sera remplacé plus tard plus audacieux. Nous pouvons peut-être dire que nous voulons rendre le titre.

Disons que nous faisons un titre de petite taille et qu'ensuite la biographie serait juste le contenu ; nous pourrions dire que nous voulons faire en sorte que ce titre ait une hauteur de ligne plus petite, peut-être.

On peut donc dire que la hauteur de la ligne ne sera qu'une seule. Et puis nous pouvons dire qu'ici, ce que nous aurions, ce sont les médias. Nous aurions une sorte d'image. Et selon le thème que vous avez installé, vous pourriez avoir des styles qui ont été créés spécifiquement pour votre thème. Vous pouvez définir des couleurs de texte et de fond et un certain nombre d'autres choses qui peuvent dépendre quelque peu de votre thème, ou, et des blocs que vous utilisez dans votre catégorie de blocs.

Une chose à surveiller est d'essayer d'éviter d'avoir ces paragraphes supplémentaires parce que lorsque vous, lorsque nous allons créer le, obtenez le contenu pour ce modèle de bloc, nous constaterons que nous devons les supprimer s'ils sont présents. Pour que nous ayons quelque chose dans cette zone médiatique, allons voir quel genre d'images j'ai dans ma médiathèque.

Donc, juste pour avoir un exemple, disons que dans ce cas, nous allons créer un répertoire avec la mascotte de notre équipe qui semble loin. Maintenant, nous avons ajouté cette image. Je vais essayer d'en faire une miniature. Et disons que je voulais avoir l'image sur cette page, sur le côté droit et voyons ce que nous pouvons faire d'autre ici.

Peut-être voulons-nous le rendre plus petit pour qu'il ne prenne pas autant de place sur la page. Et nous considérons que ce n'est qu'un groupe de blocs très, très simple. Ce n'est pas très complexe. Mais vous pourriez ajouter des mises en page extrêmement complexes sur toute la page en utilisant cette option. Elle pourrait être utilisée comme point de départ pour des choses comme les pages d'atterrissage, par exemple.

Très bien. Alors voilà mon livre. Je vais l'appeler complet et je vais aller de l'avant et sauvegarder mon projet pour ne pas perdre mon travail. Maintenant, le contenu ici est, non visible. Donc, si nous pouvons voir son apparence, la façon dont il est conçu, mais que nous ne pouvons pas voir les marques, c'est ce qui crée ce livre.

Donc, ce que nous devons faire, c'est révéler cela et pour ce faire, nous allons monter ici jusqu'aux options, c'est-à-dire les trois petits points en haut à droite de votre écran. Et ensuite, nous allons passer de l'éditeur visuel à l'éditeur de code. Et cela va changer l'écran. Nous verrons toujours notre haut, notre titre ici, le modèle de bloc mis en place.

Il peut être édité. Je ne vous recommande pas de modifier votre contenu dans cette optique, à moins que vous ne soyez très familier avec le HTML et les balises de blocage, car il serait assez facile de casser votre contenu. WordPress est très précis quant au format dans lequel il doit présenter ces informations. Si nous regardons la composition de ce bloc, ce qui deviendra notre modèle de bloc, vous pouvez le voir, nous commençons avec ce HTML commenté qui dit WP en tête de colonne.

Il ne sera pas affiché pour les utilisateurs finaux, mais WordPress le verra. Il sera dans le balisage du contenu, en face avant. Mais l'intention est seulement de faire savoir à WordPress qu'il s'agit en fait d'un bloc mineur. Nous l'avons donc ouvert avec un bloc commenté et du HTML, et nous le fermons avec un bloc commenté de HTML.

Et entre ces deux commentaires se trouve le contenu réel de ce bloc. Un exemple un peu plus complexe est le texte du tiret des médias. Pour notre bloc de contenu médiatique. Et dans ce cas, nous avons des blocs sur le côté des blocs. Nous ouvrons donc le bloc. Je vais donc sélectionner ce bloc pour que vous puissiez voir tout le contenu qui s'ouvre.

Il y a un certain nombre d'attributs et de propriétés qui sont définis ici. Donc, en fait, la véritable ouverture est la suivante. Elle indique donc à WordPress quelque chose à ce sujet, la façon dont il va travailler avec ce contenu dépend de WordPress. Et dans ce cas, nous n'utilisons que des blocs de base, pas de blocs de plugin, mais dans certains cas vous pouvez avoir des blocs supplémentaires qui sont ajoutés par votre plugin ou dans certains cas des blocs peuvent être enregistrés dans les thèmes également.

Après cela, nous avons donc le contenu du bloc. Et puis à l'intérieur de ce bloc, nous avons eu un deuxième bloc, un bloc de paragraphes et en fait deux blocs de paragraphes et puis un troisième. Et une fois que tous ces blocs intérieurs sont faits, les blocs, les blocs extérieurs HTML sont fermés et le commentaire des blocs extérieurs est présent.

 Nous avons donc des blocs imbriqués dans ce cas. Comme vous pouvez le voir, il est donc possible d'avoir ici des dispositions de blocs très personnalisables et très avancées. Et c'est l'une des raisons pour lesquelles un modèle de bloc peut être si utile si vous avez un contenu très complexe que vous allez utiliser encore et encore.

Donc, pour créer un code d'enregistrement. Tout ce que nous allons faire, c'est prendre ce code et le mettre dans la partie contenu du code d'enregistrement que je vous ai montré tout à l'heure. Et laissez-moi faire et je vais aller mon plugin. Ce n'est pas une chose que je recommande, mais pour simplifier l'accès au code, nous allons utiliser l'éditeur de plugin. De nombreux hôtes ont en fait désactivé cette fonction.

C'est mon simple plugin de modèles de blocs, et ici j'ai enregistré quelques modèles de blocs. J'ai ici un exemple que j'ai déjà fait. C'est ce qu'on appelle les détails de mon animal de compagnie. Et si je fais défiler vers le bas, j'ai un deuxième exemple, un modèle de bloc que j'ai enregistré et qui a une version plus simplifiée. Et ce que je peux faire, c'est prendre le code que j'ai copié du message et le coller ici.

C'est en gros ce que vous pouvez faire ici pour enregistrer votre modèle de bloc. Il faut savoir que, surtout si vous avez des apostrophes, des guillemets, des guillemets simples ou doubles dans votre contenu ou tout autre caractère qui devrait être échappé pour que PHP ne change pas la façon dont il comprend le code que vous avez ajouté, tout ce qui se trouve entre les guillemets simples autour de votre, la propriété de contenu de votre modèle de bloc enregistré.

Vous voudriez échapper à ce contenu. Et il existe de nombreuses possibilités pour y échapper. Celle que j'ai utilisée est la chaîne de tirets d'échappement de la barre oblique de onlinescreentools.com. Et si vous cherchez simplement en ligne une chaîne de caractères d'échappement, vous pouvez trouver un outil qui vous permet de copier vos balises dans cette chaîne et d'obtenir ainsi la force d'échappement.

Je vous dirai que si vous faites cela, vous voudrez supprimer tous vos sauts de ligne et les espaces supplémentaires ici, de sorte que ce que vous obtenez est une version très propre de votre, de votre balisage HTML. Ainsi, lorsque vous le collerez ici, il n'y aura pas de caractères supplémentaires comme des sauts de ligne, des espaces vides ou ce genre de choses.

Donc, dans certains cas, dans ce cas, je peux en fait regarder dans le code et je peux voir que je n'aurai pas de caractères qui interféreraient avec le rendu de ce bloc. J'ai bien quelques guillemets doubles dans le balisage, mais comme je l'entoure de guillemets simples, cela ne pose pas de problème.

Tout dépend donc du type de contenu que vous avez apostrophé ou une contraction de votre contenu pourrait potentiellement poser un problème. Donc, une fois que vous avez ajouté ce modèle de bloc, vous pouvez alors. Revenir à un message. Et laissez-moi vous montrer la façon dont vous ajouteriez un modèle de bloc. Tout d'abord, nous allons revenir à l'éditeur visuel.

Voilà donc les options. Trois points dans le coin supérieur droit, retournez à l'éditeur visuel. Vous pouvez voir maintenant que nous avons notre vue habituelle de l'éditeur de bloc WordPress. Pour ajouter un modèle de bloc à un contenu, vous devez ouvrir cet inséreur principal. C'est là que tous les blocs disponibles vous seront accessibles.

Et vous verrez qu'il existe des modèles. Et dans certains cas, si vous avez sauvegardé des blocs précédemment réutilisables, vous pouvez y accéder à partir d'ici. Vous pouvez donc accéder aux modèles en cliquant sur l'onglet des modèles. Un menu déroulant vous montrera les catégories.

Et tous vos modèles de blocs qui sont enregistrés pour leur site seront disponibles ici. Laissez-moi donc vérifier ici. Je crois que j'ai peut-être désactivé mon plugin de modèles de blocs. Laissez-moi donc l'activer. Et puis essayons à nouveau de voir les modèles de blocs que j'ai créés.

Vous pouvez donc voir ici que maintenant que ce plugin est activé, je peux voir la catégorie de mes modèles personnalisés. Et quand j'ouvre ce plugin, je peux voir deux modèles de blocs. Ce sont donc deux modèles que j'ai créés précédemment. L'un d'eux contient beaucoup de choses. L'autre est plus simple. Si je clique dessus, il s'ajoute à la fin du document que j'ai ouvert.

Et puis, ce que je peux faire à partir d'ici, c'est aller de l'avant et commencer le montage. Mais c'est, alors une fois que j'ai inséré ce modèle de bloc dans mon post ou ma page, cela n'est plus lié à ce modèle de bloc. Le modèle de bloc est là pour être utilisé à nouveau dans le futur, mais je peux continuer et apporter toutes les modifications nécessaires à ce groupe de blocs.

Non, jetons un coup d'œil, regardez quelques modèles de blocs qui ont été créés spécifiquement pour le thème 2021. Juste pour donner un aperçu de certaines des façons dont l'équipe de développement du thème central a exploité cette fonctionnalité. Ce que nous allons faire, j'ai un tout nouveau post ici.

Je vais utiliser cet inséreur principal pour sélectionner des motifs. Et vous verrez que le menu déroulant affichera mes motifs personnalisés, qui sont la catégorie que j'ai créée pour les motifs de mon plugin. Les colonnes et les boutons de la galerie d'en-têtes de texte sont les catégories pour les modèles de blocs qui sont inclus par défaut dans WordPress.

Et celui qui arrive en premier avec le thème que je suis actif est 2021. Et ceux-là. Ce sont les motifs de blocs qui sont inclus dans le thème 2021. Ils ne seraient pas disponibles si vous aviez un thème différent activé. Mais comme j'ai activé ce thème, je peux y accéder.

Deux ou trois choses, si vous avez un modèle de bloc et que vous pouvez l'utiliser dans votre site et que c'était un modèle de bloc qui faisait partie d'un plugin ou d'un thème que vous n'avez plus installé. Tant que les blocs utilisés dans ce modèle de bloc existent toujours sur votre site, cela ne devrait pas affecter le changement de thème ou l'absence du plugin qui a enregistré le modèle de bloc ne devrait affecter aucun des contenus que vous avez déjà créés à cause de cette déconnexion qui se produit lorsque vous Lorsque vous ajoutez un modèle de bloc ou que vous ajoutez du contenu en utilisant un modèle de bloc à une page d'affiche, cette connexion n'existe plus.

Il ne sera en aucune façon lié au modèle que vous utilisez pour créer ce contenu. Vous ne pourrez plus ajouter de nouveau contenu avec ce modèle de bloc. Le modèle de bloc ne s'affichera plus dans ce panneau, mais tout contenu que vous avez créé précédemment sera conservé. Prenons donc quelques instants pour voir comment le thème 2021 a tiré parti de cette fonctionnalité pour permettre la création de différents types de contenu avec des modèles.

Le premier de la liste est appelé "texte en gros caractères". Si vous cliquez dessus, vous pouvez voir qu'il ne contient qu'un paragraphe ou un bloc d'en-tête avec une taille de police gigantesque de 144 pixels et une hauteur de ligne de 1,1. Et c'est le modèle de bloc, c'est tout ce qu'il fait. C'est un exemple d'une façon très simple de créer un bloc.

Si vous avez toujours voulu avoir la possibilité de créer ce grand texte, en voici un autre. Il s'agit de la zone de liens qui n'a pas réussi à obtenir ces titres. Cela pourrait donc être utilisé pour une sorte de lien social, ce qui est un exemple ici. Une fois que vous l'aurez ajouté à votre contenu, vous pourrez le modifier en fonction de vos besoins.

Mais c'est un groupe de base de blocs. Donc, dans le bloc extérieur, nous avons. Voyons de quoi est composé exactement ce bloc. C'est un bloc de couverture. Il y a une entretoise et un autre paragraphe, puis nous avons quelques colonnes et c'est une zone à deux colonnes. Chaque colonne a un paragraphe et nous avons obtenu un autre espaceur.

La couverture est conçue de manière à ce que vous puissiez la créer ou la modifier. Vous pouvez par exemple changer la couleur de l'arrière-plan ou le conserver tel qu'il est. On dirait qu'une sorte de bordure lui a été appliquée, ce qui est un style pour ce bloc probablement ajouté par le thème. Et une fois qu'il est ajouté à votre contenu, vous pouvez continuer à travailler avec lui.

Passons donc rapidement en revue quelques unes de ces questions. Nous avons un titre d'article pour les médias et les textes. On dirait que c'est comme un bloc de texte médian avec un style et un contenu déjà appliqués pour vous permettre de créer cette mise en page avec une image sur le titre de gauche, les points, comme un séparateur, et ensuite une sorte de slogan ou d'attribution dans ce cas.

Si vous continuez à faire défiler vers le bas, vous pouvez voir qu'il y a des choses comme les coordonnées d'une liste de portefeuille, qui semble apporter, peut-être voyons nous ce que cela fait. Cela fait apparaître des paragraphes avec des images pour que vous puissiez créer presque comme un PO une liste de contenus liés potentiellement à d'autres endroits de votre site web.

Et l'un de mes préférés est le modèle de bloc d'images superposées. Donc, si nous ajoutons ceci, vous pouvez voir que ce que nous avons ici est une colonne. Il y a deux colonnes. L'une des colonnes contient deux images et l'espaceur, l'autre contient une image et un espaceur et le thème ajoute un style qui permet aux images de se chevaucher.

Il s'agit donc d'une combinaison d'un motif de bloc et d'une certaine personnalisation qui a été créée par le thème pour créer cet effet de chevauchement. Et une fois que c'est là, vous ne pouvez pas remplacer les images par celles de votre choix, mais c'est une utilisation vraiment intéressante de cette fonctionnalité de motif de bloc.

C'est donc un petit aperçu de certaines des façons dont la fonctionnalité des modèles de blocs dans WordPress à partir de la version 5.5 est utilisée, mais dans le thème central actuel, cela conclut ma présentation. J'aimerais beaucoup savoir comment vous utiliserez les modèles de blocs à l'avenir. Merci beaucoup de vous être joints à moi aujourd'hui.

Partager cette session

Partager sur facebook
Partager sur twitter
Partagez sur linkedin
Partagez sur pinterest
Partager sur le courrier électronique