Dans cette partie, nous verrons comment définir des attributs, récupérer leurs valeurs et les mettre à jour. Avec les attributs, nous pouvons accepter les entrées de l’éditeur, les enregistrer et les sortir comme bon nous semble. Dans l’ étape précédente, nous avons examiné les composants WordPress, où les trouver et comment les mettre en œuvre. Dans cet article, nous ajouterons des accessoires pour établir la connexion avec les attributs – les données enregistrées.
Définir les attributs
Les attributs sont ajoutés en tant qu’objets dans un tableau à la attributespropriété dans registerBlockType(). La clé de chaque attribut est le nom de l’attribut, et vous devez avoir la propriété typeau minimum.
La typepropriété peut être l’une des suivantes ; null, boolean, object, array, number, stringou integer.
Vous pouvez éventuellement fournir la propriété defaultpour définir la valeur de départ de votre attribut. Si vous ne fournissez pas de valeur par défaut, l’attribut sera par défaut null.
Une autre propriété d’attribut est sourceque fonctionne avec la selectorpropriété, mais ce sont des choses délicates que nous examinerons en détail plus bas.
Par exemple, définir deux attributs ; exampleTexten tant que chaîne et postIdsen tant que tableau, ressemblerait à ceci :
Tout ce que vous avez besoin d’enregistrer pour votre bloc (entrée de l’utilisateur/éditeur) nécessite un attribut. C’est à vous de décider comment structurer vos données, en définissant des attributs distincts pour chacun ou en les regroupant tous dans un objet. Ce sera juste une différence dans la façon dont vous récupérez leurs données et comment vous les mettez à jour.
Obtenir des valeurs d’attribut
Les attributs sont disponibles en tant qu’accessoires pour vos blocs editet savefonctions. Si vous avez suivi cette série depuis l’étape précédente, rappelez-vous que nous avons mis à jour les fonctions pour passer les props en paramètre.
Il est courant de déstructurer les attributs des accessoires, car vous vous y référez souvent. Par exemple, la sortie d’un attribut appelé exampleTextressemblerait à ceci :
Mise à jour des valeurs d’attribut
Afin de mettre à jour les attributs, nous avons une méthode disponible dans les props, appelée setAttributes(). Cette fonction accepte un objet dans lequel vous pouvez ajouter n’importe quel attribut que vous souhaitez mettre à jour. Vous ne pouvez mettre à jour qu’un seul attribut, plusieurs ou tous à la fois. Si vous avez plusieurs attributs définis et appelez setAttributes()pour mettre à jour un seul d’entre eux, les autres ne sont pas touchés.
Si vous avez de l’expérience avec React, vous reconnaîtrez probablement immédiatement les similitudes entre setAttributes()et setState(). Ils fonctionnent exactement de la même manière, mais la différence est que l’état dans React est juste quelque chose stocké localement dans ce composant, et les attributs sont en fait enregistrés en tant que données en dehors du composant.
Pour mettre à jour un attribut, vous détruisez généralement la fonction des accessoires et l’appelez comme suit : ci-dessous, nous mettons à jour exampleTextl’attribut pour qu’il soit " Salut".
const { setAttributes } = props;
setAttributes({ exampleText: 'Hi' });Naturellement, vous exécuteriez l’ setAttributes()action à partir de l’intérieur. Un exemple courant est à l’intérieur de la onChangeprop sur une sorte de champ d’entrée utilisé pour stocker la valeur de l’ exampleTextattribut.
Assurez-vous d’enregistrer les attributs dans le type que vous avez défini sur l’attribut. Vous n’aurez aucune chance d’essayer d’enregistrer des objets dans un attribut de chaîne par exemple.
Essayons-le en pratique! Lancez npm run start-vous si vous ne l’avez pas déjà fait.
Affichage d’un attribut dans une entrée de texte personnalisée et mise à jour de la valeur de l’attribut
Dans l’étape précédente, nous avons ajouté quelques composants dans edit, par exemple une entrée de texte, mais rien n’a été stocké. Ajoutons un attribut et une entrée de texte pour celui-ci dans notre bloc. Nous nous assurerons tous les deux que l’entrée de texte affiche la valeur actuelle, et chaque fois que l’entrée est modifiée, nous mettons à jour l’attribut.
Ajout de l’entrée de texte et de son onChangeaccessoire
Nous déstructurons attributeset partons car nous utiliserons les deux setAttributes. propsEnsuite, nous utilisons un composant du package TextControlWordPress. wp.componentsNous lui passons deux accessoires; valuedéfinira la valeur de l’entrée (à la fois initialement et pendant que nous tapons) et une action sur l’événement de l’entrée onChange.
Dans valuenous le définissons sur la valeur de notre attribut ; attributes.exampleText. Dans le onChangecas où nous exécutons une fonction, en passant la valeur typée de notre entrée en tant que paramètre, newtext(la valeur d’entrée est un accessoire renvoyé par le composant). Dans cette fonction, nous appelons setAttributes()et mettons à jour l’attribut exampleTextavec ce qui a été tapé dans l’entrée.
C’est React de base – mis à part le fait que nous travaillons avec des attributs et non avec des états. Si ce qui précède vous a dérouté, je vous recommande de consulter un tutoriel rapide dans React, car ceux-ci vous expliqueront probablement mieux que moi !
Actualisez votre éditeur et voyez comment le bloc fonctionne ! Vous devriez obtenir une entrée de texte standard pour saisir des éléments, et elle sera enregistrée chaque fois que vous cliquerez sur Enregistrer/Mettre à jour dans la post-édition.
Le résultat en frontend et dans la base de données
Si vous visualisez votre message en frontend, il devrait toujours faire écho à une div avec ":)" car c’est ce que nous avons toujours dans notre savefonction. Mais quelque chose s’est passé dans les coulisses! Le bloc de commentaire de notre bloc contient maintenant la valeur de notre attribut en JSON.
Vous ne pouvez pas voir les blocs de commentaires dans un modèle qui effectue un the_content()appel normal. Pour voir les blocs de commentaires, vous avez deux options. Soit regardez post_contentdans le tableau de la base de données des publications. Ou ajoutez echo get_the_content()le modèle et regardez-le dans l’outil d’inspection/de débogage.
Évidemment, nous avons également accès aux attributs à savepartir des accessoires.
Affichage de la valeur de l’entrée danssave
Affichons la valeur de l’attribut à l’intérieur d’un div dans notre savefonction :
Remarque : Après avoir effectué cette modification, vous obtiendrez un bloc cassé dans le message auquel vous avez déjà ajouté ce bloc. Cela se produit parce que l’éditeur rencontre une sortie différente de savecelle que nous avons définie maintenant. Retirez le bloc et rajoutez-le. Entrez quelque chose dans votre saisie de texte, mettez à jour le message et affichez-le dans le frontend.
Et c’est l’essentiel en fait. Vous décidez des attributs dont vous avez besoin pour enregistrer ce que vous voulez dans votre bloc. Dans editvous rendrez les moyens de saisie pour l’utilisateur, en veillant à ce que les valeurs actuelles soient affichées et à les mettre à jour chaque fois qu’elles changent. Et savevous extrayez les attributs enregistrés et rendez la sortie comme vous le souhaitez.
Nous aborderons beaucoup plus de composants et d’attributs différents au fur et à mesure de cette série de didacticiels. Mais regardons un autre composant dans cet article afin de voir en quoi sourceconsiste la propriété d’attribut.
RichText et la propriété d’attributsource
Le composant WordPress RichTextvous offre une zone de texte "sans bordure" avec prise en charge de la mise en forme du texte. Vous préférerez peut-être utiliser ceci au lieu d’une entrée de texte ou d’une zone de texte standard (laide?). Mais gardez à l’esprit que cela RichTextdoit être géré un peu différemment car il y a plusieurs accessoires dont vous devez être conscient, et il y a une différence dans la façon dont nous obtenons la valeur dans notre savefonction.
Ajout d’un RichTextcomposant
La forme la plus simple RichTextest de l’implémenter comme vous le feriez avec une entrée de texte :
Nous déstructurons le RichTextcomposant du wp.blockEditorpackage, mais sinon, ce qui précède est identique à ce que nous avons fait avec la saisie de texte standard.
Manipulation saveavecRichText
Cependant, dans la savefonction, vous devez réutiliser le RichTextcomposant pour obtenir la valeur de l’attribut. Nous appelons RichText.Contentet définissons la prop valuesur notre attribut :
Cela affichera tout ce qui a été tapé dans l’ RichTextéditeur directement sans aucun code HTML.
Lorsque vous travaillez avec RichText, vous souhaitez probablement contrôler le wrapper HTML autour du texte, par exemple a <p>ou a <h2>, à la fois dans le frontend et dans l’éditeur. Pour cela, nous pouvons utiliser un accessoire appelé tagName.
Le composant RichTextpermet également plusieurs autres accessoires. Vous pouvez définir un texte d’espace réservé qui est affiché (estompé) lorsqu’il est vide avec le placeholderprop. Le composant vous permet également de contrôler les options de formatage autorisées par le champ (les boutons affichés dans la barre d’outils).
RichTextavectagName
Avec le prop tagName, vous pouvez prédéfinir la balise HTML dans laquelle sa sortie est enveloppée. Lorsque vous l’utilisez tagName, vous devez utiliser le même tagNameprop et la même valeur dans editet save.
Supposons que vous souhaitiez mettre la valeur de votre attribut dans a <h2>, ce qui, dans l’éditeur, forcera toute entrée à être un h2. En edittu peux faire :
Et dans save:
Ce qui précède affichera maintenant tout ce qui a été tapé dans la RichTextzone à l’intérieur d’une <h2>balise.
Utilisantsource
Évidemment, vous pouvez combiner plusieurs richtext pour un bloc, par exemple un pour le titre et un pour un paragraphe. N’oubliez pas que chacun aura besoin de son propre attribut. Par exemple:
Cependant, vous allez maintenant commencer à rencontrer des problèmes. Même si vous pouvez faire du formatage de texte dans l’éditeur, rien (ou une partie) de votre formatage ne sera pas enregistré. Lorsque vous affichez le message en frontend, il apparaîtra simplement sous la forme d’ h2un p, sans aucune mise en forme que vous ayez effectuée (italique, gras, lien). Même le bloc de commentaires de votre bloc ne contient pas la mise en forme. C’est la chose délicate avec RichText. Pour résoudre ce problème, nous devons travailler avec la propriété d’attribut source.
La sourcepropriété permettant à WordPress d’extraire et d’interpréter le contenu directement à partir du contenu de la publication. Si un attribut n’est pas sourcedéfini, il sera enregistré et extrait du bloc de commentaire HTML.
Lorsque nous travaillons avec, RichTextnous définissons généralement sourcesur html, qui utilise la bibliothèque de WordPress pour analyser le balisage HTML. La propriété sourcefonctionne avec une autre propriété d’attribut ; selectorqui définit de quelle balise HTML il doit extraire.
À titre d’exemple, nous avons défini sourcecomme htmlsur notre paragraphe RichTextet défini selectorcomme p(sinon, il est par défaut à la racine de bloquer le bloc).
attributes: {
...
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
}
},Maintenant, notre deuxième RichTextdevrait enregistrer avec succès tout son formatage de texte. Vous remarquerez également que le bloc de commentaire n’affiche désormais que l’ myRichHeadingattribut en JSON. L’attribut myRichTexta complètement disparu du bloc de commentaire. En effet, sourceWordPress analyse désormais le contenu de la publication au lieu du bloc de commentaire pour la valeur de l’attribut.
Pour être parfaitement honnête, je n’ai pas du tout travaillé avec l’ sourceattribut et je recommanderais de l’éviter si vous le pouvez. La documentation de WordPress explique un peu plus sur la source et les attributs que vous souhaitez vérifier par vous-même.
Dans cet article, nous avons appris les bases des attributs ; comment les définir, les mettre à jour et sortir leurs valeurs. Dans les prochaines étapes, nous examinerons plus de composants différents et comment ajouter des paramètres en dehors du contenu du bloc lui-même ; dans la barre d’outils et la barre latérale de l’éditeur (appelée Inspecteur).