Dans un framework JavaScript, laissez le package leiho écrire les attributs : field(), block() et entry() renvoient un objet à étaler sur l’élément (JSX, Astro, Svelte ; v-bind dans Vue).

jsx

import { field, block } from 'leiho';

<h1 {...field(page, 'hero_title')}>{page.fields.hero_title}</h1>
<section {...block(page, 'sections', i, 'Hero')}>…</section>

field(page, 'intro', { html: true }) ajoute data-leiho-apply="html" ; { refresh: true } ajoute data-leiho-refresh="save". En HTML simple ou dans des templates serveur, écrivez à la main les attributs ci-dessous.

Attribut	Rôle
`data-wp-post="12"`	Conteneur : l’ID de la publication WordPress à laquelle appartiennent les champs qu’il contient
`data-wp-field="hero_title"`	Élément modifiable : nom du champ ACF, ou `_title` / `_thumbnail`
`data-wp-field="cards.0.title"`	Les chemins à points descendent dans les repeaters, le contenu flexible et les groupes
`data-leiho-apply="html"`	La valeur contient du balisage (un `<span>` d’accentuation dans un titre) : injecte du HTML filtré au lieu de texte
`data-leiho-refresh="save"`	Pas d’aperçu en direct pour ce champ ; la page est rechargée après l’enregistrement (rendu WYSIWYG complexe)
`data-leiho-section="Hero"`	Nomme une section dans l’arborescence Structure
`data-leiho-layout="sections.2"`	Lie une section à une ligne de contenu flexible, pour que les rédacteurs puissent l’ajouter, la déplacer, la dupliquer et la supprimer
`data-leiho-managed="menu"`	Contenu géré ailleurs (menus, listes d’articles, WooCommerce) : un clic indique où le modifier
`data-leiho-edit-url="…"`	L’écran wp-admin de ce contenu géré ailleurs

Une seule règle : affichez toujours un élément annoté, même quand sa valeur est vide. {title && <h2 data-wp-field="title">…} casse l’édition en direct, car un élément absent de la page ne peut pas être rempli. Leiho signale ces champs comme « absents de cette page ».

La navigation côté client (React Router, liens Next.js, history.pushState) et les nouveaux rendus sont pris en charge : le bridge réanalyse la page et réapplique les modifications non enregistrées.

Annotations