# Message « Élément introuvable dans le store » après un rendu partiel

> Une directive wp-context qui référence un état déclaré dans un bloc parent absent du rendu partiel provoque une erreur silencieuse côté client. Diagnostic et correctif.

- Auteur : WordPress Développement
- Publié le : 2024-11-09
- Mis à jour le : 2024-11-09
- Catégorie : Blocs Gutenberg
- URL : https://www.wpmoderne.fr/blocs/element-introuvable-store-rendu-partiel-wp-context/

## L’essentiel

- Le rendu partiel d'un bloc enfant peut se retrouver sans son bloc parent
- La directive wp-context suppose que la hiérarchie complète est présente
- Une valeur de repli évite l'erreur sans masquer le problème de fond

`state.elementCourant is undefined` — cette ligne apparaissait dans la console du navigateur, sur un bloc pourtant fonctionnel en navigation classique, mais qui échouait systématiquement lorsqu'il était affiché seul, en dehors de son contexte habituel de page complète.

## Symptôme

Le bloc concerné est un onglet de contenu, enfant d'un bloc parent « groupe d'onglets » qui déclare un état partagé via une directive `wp-context`. Affiché normalement, dans une page qui charge le parent et tous ses enfants ensemble, tout fonctionnait sans accroc. Le problème apparaissait uniquement quand ce bloc enfant était rendu isolément, par exemple dans un aperçu partiel généré pour un widget de recherche instantanée affichant un extrait du contenu correspondant.

## Diagnostic

La directive `wp-context` du bloc parent déclare un état local, transmis implicitement à tous ses blocs enfants dans l'arborescence rendue :

```
<div data-wp-interactive="monsite/onglets"
     data-wp-context='{ "ongletActif": "premier" }'>
    <!-- blocs enfants "onglet" ici -->
</div>
```

Chaque bloc enfant, lui, lit cet état en supposant que le contexte du parent est bien présent dans le DOM environnant :

```
import { getContext } from '@wordpress/interactivity';

function verifierSiActif() {
  const { ongletActif } = getContext();
  return ongletActif === 'premier'; // échoue si le parent n'est pas rendu
}
```

Dans le rendu partiel du widget de recherche instantanée, seul le bloc enfant « onglet » était extrait et affiché, sans son bloc parent porteur de la directive `wp-context`. La fonction `getContext()` ne trouvait alors aucun contexte parent à remonter, et retournait un objet vide, d'où l'absence de la propriété `ongletActif` attendue.

> L'essentiel à retenir : Le rendu partiel d'un bloc enfant peut se retrouver sans son bloc parent ; La directive wp-context suppose que la hiérarchie complète est présente ; Une valeur de repli évite l'erreur sans masquer le problème de fond

## Correctif

La première correction, la plus directe, consiste à ne jamais présumer qu'un contexte parent sera présent, en fournissant une valeur de repli explicite plutôt que de déstructurer directement la propriété attendue :

```
import { getContext } from '@wordpress/interactivity';

function verifierSiActif() {
  const contexte = getContext() || {};
  const ongletActif = contexte.ongletActif ?? null;

  if ( ongletActif === null ) {
    // Le bloc est rendu hors de son contexte parent habituel :
    // on applique un comportement de repli plutôt qu'une erreur.
    return true;
  }

  return ongletActif === 'premier';
}
```

Cette valeur de repli ne masque pas le problème : elle documente explicitement le cas où le bloc s'affiche seul, et choisit un comportement par défaut raisonnable (afficher le contenu de l'onglet, faute de savoir lequel devrait être actif) plutôt que de faire planter silencieusement l'interactivité du bloc.

### Une seconde option : rendre le contexte auto-porteur

Pour les blocs destinés à être fréquemment extraits de leur hiérarchie habituelle (aperçus, recherche instantanée, widgets isolés), une option plus robuste consiste à ce que chaque bloc enfant déclare lui-même une valeur par défaut dans son propre `wp-context`, plutôt que de dépendre uniquement de celui du parent :

```
<div data-wp-interactive="monsite/onglets"
     data-wp-context='{ "ongletActif": null }'>
    <!-- ce bloc porte sa propre valeur par défaut,
         utilisée uniquement si aucun parent ne la redéfinit -->
</div>
```

## Prévention

- Toujours tester le rendu d'un bloc interactif isolément, pas seulement dans son emplacement habituel en page complète ;
- Ne jamais déstructurer directement le résultat de `getContext()` sans valeur de repli, même quand le contexte parent semble toujours présent en pratique ;
- Documenter, dans le code du bloc enfant, la dépendance implicite à un contexte parent particulier, pour qu'une personne qui réutilise le bloc ailleurs comprenne le risque.

> Un bloc qui lit un contexte parent fait un pari sur sa présence future ; ce pari se perd le jour où quelqu'un extrait le bloc de son environnement habituel pour un aperçu ou un widget.

## En résumé

L'erreur « élément introuvable dans le store » apparue ici ne venait pas d'un namespace mal configuré, mais d'un bloc enfant rendu partiellement, sans son bloc parent porteur du contexte attendu. Une valeur de repli explicite dans `getContext()`, associée à un test de rendu isolé du bloc, évite ce type de régression silencieuse lors de la mise en place d'un affichage partiel comme une recherche instantanée.