Ajouter un comportement à un calque avec un remplacement par code

Un remplacement par code est une fonction de l’un des modules de code de votre site qui enveloppe un calque : un titre, un cadre, une image, un bouton. Sur votre site publié, la fonction ajoute ce que le calque ne sait pas faire seul, comme compter les clics ou réagir au pointeur. Le calque garde son contenu et son design. Les remplacements par code arrivent dans les espaces de travail par étapes : il se peut que vous ne les voyiez pas encore.

Ajouter un remplacement

1. Sélectionnez un calque. Les remplacements fonctionnent sur tout calque, sauf un composant de code et la page elle-même.
2. Dans le panneau des propriétés, ouvrez Remplacement par code. Il s’affiche quand votre site a au moins un module de code.
3. Sous Module, choisissez le module.
4. Sous Fonction, tapez le nom de la fonction exportée par le module, par exemple withHover, puis appuyez sur Entrée. Le nom utilise des lettres, des chiffres, _ et $, et ne commence pas par un chiffre.

Le remplacement utilise la version la plus récente du module. Version le déplace vers une autre. Retirer le remplacement le supprime, tout comme Aucun sous Module.

Écrire la fonction

La fonction reçoit le calque comme composant et renvoie un composant qui l’affiche :

import { useState } from 'react';

export function withHover(Layer) {
  return function WithHover(props) {
    const [over, setOver] = useState(false);
    return (
      <Layer
        {...props}
        onMouseEnter={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
        style={{ outline: over ? '2px solid' : 'none' }}
      />
    );
  };
}

Ce qu’elle transmet au calque :

• Des gestionnaires d’événements, comme onClick ou onMouseEnter. Les événements n’importe où dans le calque les atteignent.
• style, sous forme d’objet. Les nombres sont en pixels, comme dans React.
• className, ajouté aux classes du calque.
• Les attributs data-… et aria-…, et title.

Tout le reste, y compris les enfants, est ignoré : le contenu du calque reste celui que vous avez conçu.

Où il s’exécute

• Sur votre site publié, liens d’aperçu compris. Le canevas montre le calque tel que vous l’avez conçu.
• Chaque page qui montre le calque exécute le remplacement, dans chaque langue.
• Si la fonction est absente ou échoue, le calque reste tel qu’il a été publié, et le reste de la page continue de fonctionner.
• Un calque qui est une diapositive de carrousel, ou un bloc dans un texte, garde son apparence mais perd le style lié à cette position.