Le composant URLInput - Formation Gutenberg

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.

Sommaire du cours

Les attributs
Les composants dans Edit
La méthode Save

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 block.json :

JSON

src/9-url/block.json

"attributes": {
    "text": {
    	"type": "string",
    	"source": "text",
        "selector": "a"
    },
    "url": {
    	"type": "string",
        "source": "attribute", // Cette fois on récupère un attribut
        "selector": "a"		   // Dans une balise <a>
        "attribute": "href"    // Et c'est l'attribut href que l'on veut
    }
},

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.

JSX

src/9-url/index.js

import { __ } from '@wordpress/i18n'
import { useBlockProps, URLInput } from '@wordpress/block-editor'
import { TextControl } from '@wordpress/components'
import { Fragment } from '@wordpress/element'

import './editor.scss'

export default function Edit( props ) {
	const blockProps = useBlockProps()

	return (
		<div { …blockProps }>
			{ props.isSelected ? (

				<Fragment>
					<TextControl
						placeholder={ __( 'Link Label', 'capitainewp-gut-bases' ) }
						value={ props.attributes.text }
						onChange={ text => props.setAttributes( { text } ) }
					/>

					<URLInput
						value={ props.attributes.url }
						onChange={ (url, post) => props.setAttributes( 
                            { url, text: (post && post.title) || props.attributes.text } 
                        ) }
					/>
				</Fragment>
			) : (
					<p>
						<a href={ props.attributes.url }>
							{ props.attributes.text || __( 'Edit link',  'capitainewp-gut-bases' ) }
						</a>
					</p>
				)
			}
		</div>
	)
}

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

import { __ } from '@wordpress/i18n'
import { useBlockProps } from '@wordpress/block-editor'

export default function save( props ) {
	const blockProps = useBlockProps.save()

	return (
		<p { …blockProps }>
			<a href={ props.attributes.url }>
				{ props.attributes.text }
			</a>
		</p>
	)
}

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

Questions, réponses et commentaires

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 ?

Répondre
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.
  
  Répondre
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 ?

Répondre
1. Nicolas Germain
  
  Le 24 octobre 2019
  
  Une solution ici : https://github.com/WordPress/gutenberg/issues/14934
  
  Répondre
  1. Maxime BJ
    
    Le 23 mars 2021
    
    Normalement ça fonctionne correctement à nouveau désormais.
    
    Répondre
2. Nicolas Germain
  
  Le 23 octobre 2019
  
  Sans filtrage : rel="noopener noreferrer" dans la balise <a>
  
  Répondre

Laisser un commentaire Annuler la réponse