Formation « Créer des blocs avec Gutenberg »

Le composant URL

Lecture : 3 minutes • 5

Dans ce cours on va voir plus en détails un composant vraiment pratique de Gutenberg que l’on peut réutiliser facilement : c’est le composant URL. Il propose notamment de faire un lien à partir des articles du site.

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.

Bloc URL
Le bloc URL avec la suggestion d’articles

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 index.js :

JSX
src/9-url/index.js

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.

JS
src/9-url/index.js

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é.

JSX
src/10-url/save.js

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é !

5

Questions, réponses et commentaires

  1. Nicolas Germain

    Le 23 octobre 2019

    Bonjour,
    Gutenberg rajout d’autorité un rel= »noopener noreferrer » dans la balise en front comme en back. Comment modifier ce comportement ?

    1. Nicolas Germain

      Le 23 octobre 2019

      Sans filtrage : rel="noopener noreferrer" dans la balise <a>

    2. Nicolas Germain

      Le 24 octobre 2019

  2. willy

    Le 15 octobre 2018

    Hello,

    J’ai l’impression que les champs URLInput et URLInputButton ont été dépréciés. TU confirmes ? Du coup il faut faire tout à la main si on veut un champ de recherche d’article ?

    1. Maxime BJ

      Le 15 octobre 2018

      Non je crois qu’ils ont juste changé de nom : avant c’était urlInput, maintenant URLInput. Et il faut les charger via wp.editor. J’ai mis à jour mon plugin, il faut que tu mette à jour les fichiers en les reprenant sur mon github.

Laisser un commentaire