Guide complet du modèle de bloc Gutenberg (II)
Cet article est la deuxième partie du guide complet du modèle de bloc Gutenberg. Il s’agit notamment de ce qui suit: introduction aux modèles de bloc insertion de modèles par défaut sur la page et d’autres modèles disponibles dans le répertoire ajout de modèles disponibles dans le Répertoire du site comment créer des modèles à partir de zéro si vous n’êtes pas un développeur comment créer des modèles Comment convertir des blocs réutilisables en schémas de blocs utiliser des thèmes de schémas de blocs Documents officiels. Dans la première partie, nous voyons les quatre premiers points de tous les sujets abordés dans ce guide: Qu’est – ce qu’un schéma de bloc, comment insérer un schéma prédéfini dans une page, où trouver et comment copier les schémas disponibles dans certains répertoires. Là, nous pouvons coller le modèle sur la page que nous éditons, mais il n’est pas stocké dans la Bibliothèque de modèles pour une utilisation future. Si nous voulons ajouter un nouveau modèle à la Bibliothèque de modèles Gutenberg, nous devons créer et enregistrer le modèle. C’est simple, bien que vous ayez besoin de quelques compétences de base en codage. Si ce n’est pas votre cas, ne vous inquiétez pas, car nous apprendrons plus tard comment obtenir le même résultat sans codage. Pour créer un nouveau modèle, vous devez créer un modèle de bloc en utilisant l’API du modèle de bloc. En particulier, la fonction PHP Register _ Block Pattern (). Examinons brièvement les différentes étapes à suivre à l’aide d’un exemple simple. Mais avant de commencer, laissez – moi ajouter un commentaire au bord de la page. Lorsque vous Personnalisez WordPress avec des fragments de code, vous devriez toujours vous demander où vous devriez écrire ces fragments de code. La plupart des tutoriels recommandent des fonctions de fichier. Php, parce que c’est la solution la plus simple pour faire le travail, mais David a écrit cet article sur la façon de créer des plug – ins pour suivre toutes vos personnalisations et Dites que c’est une meilleure solution. Et le mode bloc? Vous pouvez ajouter une définition d’un nouveau modèle de bloc à un sujet (certains sujets, comme la twenty – twenty – one, contiennent déjà votre propre sujet), ou vous pouvez l’ajouter à un plug – in personnalisé. Je suis sûr que vous trouverez des défenseurs et des opposants à ces deux solutions, alors choisissez celle qui correspond le mieux à vos besoins. La conception # 1 formera les blocs de votre modèle, comme je l’ai dit dans mon dernier article, un modèle est un ensemble de blocs que vous aimez grouper. Si vous voulez créer un modèle de bloc, je peux l’utiliser pour créer une section décrivant les caractéristiques de base du produit. Pour ce faire, sur ma page intitulée créer un schéma, je crée d’abord une barre de défilement, section 6 fonctions, puis j’insère un bloc de 3 colonnes. Créez un ensemble de blocs qui formeront mon modèle. Dans le premier bloc, j’ai ajouté une image avec le titre et la description de la fonction ci – dessous. Créez un ensemble de blocs qui formeront mon modèle. J’ai copié l’image, le titre et la description dans les deux blocs suivants. Enfin, je copie cette ligne afin que vous ayez une section qui contiendra une description des six caractéristiques. J’ai créé un ensemble de blocs qui formeront mon nouveau modèle. Bien sûr, il n’est logique de créer un modèle de bloc que si vous prévoyez l’utiliser plus d’une fois 2 après avoir copié le contenu d’un bloc pour définir un ensemble de blocs, sélectionnez – les simplement avec la souris et cliquez sur copier dans la barre d’outils. Sélectionnez l’ensemble de blocs qui formeront le modèle et cliquez sur copier Pour éviter les problèmes, le texte nouvellement copié doit être échappé afin que l’ordinateur puisse comprendre les caractères spéciaux tels que les sauts de ligne, les onglets, etc. Vous pouvez facilement échapper au texte en utilisant Strum Entités en ligne, comme les outils d’enroulement en ligne. Com ou json Escape \/ UNESCO: il suffit de coller le Code copié précédemment pour obtenir le bon texte. À ce stade, la seule chose qui reste est d’utiliser la fonction Register _ Block Pattern (). Cette fonction reçoit deux paramètres: le nom du modèle et un tableau d’attributs. À la fin de cet article, je vais vous donner plus de détails sur les attributs qui peuvent être définis dans le schéma, Mais regardons d’abord les étapes nécessaires pour créer le schéma. Voici notre exemple: Register _ Block Pattern (‘Ruth Gutenberg – Blocks – Patterns \/ section with six features’, array (‘ title ‘= > U U (‘ section with 6 features’, ‘nelio’), ‘Content’ = > \ N6 partie fonctionnelle
\ N \ N \ N\ N
\ N \ N \ N \ N \ N \ N \ N
\ N \ N \ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N\ N \ N \ N \ N
\ N \ N \ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N\ N \ N \ N \ N
\ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N\ N
\ N \
# Pour enregistrer le schéma dans l’éditeur, vous pouvez créer un plug – in ou l’insérer dans le thème actif. Si vous créez un plug – in, c’est tout ce dont vous avez besoin: __ (‘section with 6 features’,’ nelio ‘,’ Content ‘= > \
Mo notre éditeur (en supposant, bien sûr, que vous ayez activé le plug – in), vous verrez le nouveau mode:
Modèles disponibles dans l’éditeur de bloc. Malheureusement, il est classé comme non classifié. C’est parce que nous n’avons pas indiqué si notre bloc appartient à une catégorie existante ou à une nouvelle catégorie 6 ajouter une nouvelle catégorie de modèle vous pouvez ajouter un nouveau modèle de bloc à une catégorie existante ou créer une nouvelle catégorie en utilisant la fonction Register _ Block Pattern category. Cette fonction prend également deux paramètres: le nom de la classe et le tableau des options. Ça vous dit quelque chose? Voici un exemple: la fonction Ruth _ Patterns Register Block Pattern Category () {si (! Class exists (‘WP Block Patterns Registry’) {retourne;} Register _ Block Pattern Category (‘Ruth features’, array (‘ Label ‘= > U x (‘ features’, ‘block Pattern Category’, ‘nelio’);} Ajouter _ action (‘init’, ‘Ruth Patterns Register Block Pattern Category’); Lorsque la nouvelle catégorie est prête, n’oubliez pas de mettre à jour le schéma de bloc afin qu’il précise clairement qu’il doit être inscrit dans la nouvelle catégorie:
Fonction Ruth _ Patterns Register Block Patterns () {if (! Class exists (‘WP Block Patterns Registry’) {return;} Register _ Block Pattern (‘Ruth Gutenberg Blocks Patterns \/ section with six features’, array (‘ title ‘= > U U (‘ section with 6 features’, ‘nelio’), ‘Content’ = > \
Section créée avec le Modèle créé. Attributs du modèle de bloc dans notre exemple, nous définissons le titre, le contenu et la catégorie
\ N \ N \ N \ N
\ N \ N \ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N\ N \ N \ N \ N
\ N \ N \ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N\ N \ N \ N \ N
\ N Titre de l’élément
\ N \ N \ NDescription de la fonction
\ N