Le composant URL

Le composant URL est pratique car il permet de faire facilement des liens :

• Soit en tapant ou collant une URL vers un site externe ;
• Soit en cherchant une ressource dans le site grâce aux suggestions qui s’affichent lorsque vous commencez à taper le titre d’un article (ou tout autre Post Type public).

Et pour l’implémenter dans un bloc ce n’est pas très compliqué.

Dans l’exemple de ce cours j’ai mis un champ de texte pour l’intitulé du lien ainsi qu’un champ URL. On peut voir une suggestion s’afficher sous ce champ.

Ces champs n’apparaissent que quand le bloc est sélectionné, sinon il affiche simplement le lien.

Les attributs

On va aller jeter un oeil du côté de l’exemple src/10-url. Voici block.json :

Concernant l’attribut text (l’intitulé du lien) il est tout à fait standard : on récupère simplement le contenu de la balise <a>. Là où il va y avoir du changement c’est dans l’attribut URL. Cette fois on veut récupérer non pas le contenu d’une balise mais la valeur d’un de ses attributs, en l’occurence href.

Pour cela on va indiquer source: attribute et ajouter attribute: href pour lui dire dans quel attribut en particulier on souhaite récupérer la valeur.  On pourra à l’avenir procéder de la même manière pour récupérer d’autres attributs HTML, (le target du lien par exemple).

Les composants dans Edit

On va avoir besoin de 2 champs : l’un pour l’intitulé du lien, qui sera un simple champ texte, et l’autre qui sera notre composant URL.

Commençons par le champ <TextControl />. C’est en fait un champ input de type texte tout simple mais avec la bonne classe, et surtout le renvoi direct de la valeur.

Si vous vous souvenez de notre premier bloc modifiable, on avait mis un champ input et on devait récupérer sa valeur via event.target.value.

Ici la valeur du champ nous est passée directement dans onChange().

URLInput

Et enfin voici notre champ <URLInput>. Il fonctionne comme le <TextControl> mais ajoute en plus la fenêtre des suggestions d’URL. Lors du onChange, il renvoie 2 informations : l’URL mais aussi les données de l’article, si jamais vous en avez choisi un via les suggestions. Dans notre cas on en profite pour attribuer le titre de l’article à l’intitulé de notre bouton.

URLInputButton

Enfin, sachez qu’il existe également l’équivalent sous forme d’un simple bouton qui fait apparaitre le formulaire de saisie/recherche lors du clic :

Pour cela utilisez plutôt le composant <URLInputButton>.

Pour plus d’informations sur ces composants, consultez la documentation officielle.

Les composants d’URL de Gutenberg

Rappel : les Fragments

Comme on l’a vu précédemment (dans le cours sur le composant RichText), React veut que lorsque l’on renvoie un élément, il doit être wrappé dans un conteneur. Il ne peut pas y avoir dans ce cas plusieurs éléments adjacents.

C’est le cas de notre test props.isSelected : si on met directement TextControl et le bloc URL à la suite, React ne va pas aimer et renvoyer l’erreur « adjacent elements must be wrapped… ».

On pourrait simplement mettre une <div> autour, dans certains cas ça aurait du sens. Mais si vous n’avez pas utilité d’ajouter du markup HTML pour rien, alors autant utiliser le Fragment qui ne laisse aucune trace dans le HTML et sert simplement en interne à React.

La méthode Save

La méthode save quant-à-elle est toute simple : il nous suffit d’enregistrer un lien dont le href stocke notre URL, et le contenu de la balise est notre intitulé.

Le bloc URL est très pratique et pas bien compliqué à utiliser.

Dans le prochain cours on va voir un autre composant super cool : l’import de médias ! Et vous verrez que ce n’est pas non plus bien compliqué !