useSelect() — @wordpress/data

useSelect() — @wordpress/data permet à un composant React de lire les données d'un registre WordPress et de suivre leur évolution. Exemple : afficher le titre du contenu courant dans une extension de l'éditeur.

À quoi cela sert ?

useSelect() — @wordpress/data permet à un composant React de lire les données d'un registre WordPress et de suivre leur évolution. L’enjeu est de savoir exactement quelle information entre dans l’API, quelle donnée ou quel état en ressort et ce qui dépend du contexte dans lequel elle est appelée. À la différence d’une description abstraite du domaine, cette fiche examine précisément le besoin suivant : afficher le titre du contenu courant dans une extension de l'éditeur.

Fonctionnement technique

L’éditeur de blocs possède plusieurs étapes : enregistrement des métadonnées, construction de l’interface JavaScript, sélection des types disponibles, sérialisation du contenu et rendu PHP côté public. Un hook exécuté au chargement ne peut pas être assimilé à un filtre du HTML final. Les stores de données JavaScript réagissent aux changements d’état sans garantir à eux seuls la persistance côté serveur. Dans le cas de useSelect() — @wordpress/data, le rôle particulier est de permet à un composant React de lire les données d'un registre WordPress et de suivre leur évolution. Avant de l’employer, vérifier le type de paramètre, le moment où l’appel intervient et les retours possibles. Une réponse vide peut parfois être normale; elle doit être interprétée à partir de la signature de l’API et non d’une intuition.

Dans quel contexte l’utiliser ?

Mise en situation : afficher le titre du contenu courant dans une extension de l'éditeur. Une extension d’éditeur doit viser le point d’accroche le plus étroit possible. Modifier l’ensemble des blocs pour régler un seul cas provoque des effets de bord sur des extensions tierces. La compatibilité des attributs, des blocs historiques et des outils d’édition doit être examinée lorsque le comportement éditorial change. Préparer au préalable le périmètre autorisé et les données de démonstration, puis décider quelle preuve permettra de conclure que le mécanisme fonctionne. Le risque spécifique à traiter ici est le suivant : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store.

Exemple technique commenté

Langage : JavaScript. Le fragment est un exemple documentaire, non un programme complet prêt à être déployé. À placer dans un composant JavaScript de l’éditeur doté des imports de @wordpress/data et de son contexte React; il n’est pas chargé par la page du glossaire. Distinguer une vérification qui lit simplement un état d’une opération susceptible de modifier les données, la configuration ou le contenu rendu.

// Objectif : afficher le titre du contenu courant dans une extension de l'éditeur.
// Point de vigilance : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store.
const title = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'title' ), [] );

Explication de l’exemple

Le code illustre afficher le titre du contenu courant dans une extension de l'éditeur. L’expression décisive mobilise useSelect() — @wordpress/data, dont la responsabilité est la suivante : permet à un composant React de lire les données d'un registre WordPress et de suivre leur évolution. Le fragment ne prouve pas à lui seul que le site dispose des données, capacités ou options nécessaires. Observer le type de retour documenté et interpréter explicitement les valeurs vides ou les erreurs.

Résultat attendu

Résultat à confirmer dans un environnement d’essai : afficher le titre du contenu courant dans une extension de l'éditeur. Pour useSelect() — @wordpress/data, un test concluant doit également montrer que la limite suivante est respectée : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store. L’absence d’erreur de syntaxe ne garantit ni ce résultat ni les droits nécessaires pour l’obtenir.

Exercice de vérification

Procédure de vérification : consigner l’état initial et les données utilisées; exécuter uniquement les lectures ou opérations autorisées; comparer ensuite la sortie à une valeur attendue. Comparer l’insertion et l’édition d’un bloc, son contenu sauvegardé et son rendu public. Tester l’éditeur classique lorsqu’il est présent, les modèles de blocs et les publications déjà enregistrées. Pour les stores JavaScript, vérifier que l’interface se met à jour après une modification, sans présumer de la sauvegarde serveur. Pour cette fiche, ajouter un cas d’échec lié à la condition suivante : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store. Si un test concerne l’écriture ou la suppression, reprendre d’abord les mêmes étapes sur une copie isolée du site.

Erreurs, risques et limites

Point de vigilance propre à useSelect() — @wordpress/data : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store. Une altération globale du rendu ou des paramètres de l’éditeur peut dégrader l’accessibilité, la compatibilité et l’affichage des contenus déjà publiés. Distinguer une vérification qui lit simplement un état d’une opération susceptible de modifier les données, la configuration ou le contenu rendu. Une implémentation professionnelle doit prévoir des retours d’erreur compréhensibles et éviter tout affichage de données privées.

Diagnostic avancé

Si le résultat attendu pour « afficher le titre du contenu courant dans une extension de l'éditeur » n’apparaît pas, commencer par vérifier le contexte WordPress et la disponibilité de la fonction ou commande. Inspecter ensuite la signature, les arguments et les données fournies; contrôler le comportement d’une entrée absente. L’hypothèse à tester en priorité est : ne pas lire des données volumineuses inutilement; préciser les dépendances et le store. Ne pas modifier globalement les permissions, les caches ou les fichiers pour masquer une erreur localisée.

À ne pas confondre

Déclaration des blocs, état d’édition et rendu HTML sont des étapes distinctes du cycle de vie. Pour cette notion, distinguer notamment son rôle concret — permet à un composant React de lire les données d'un registre WordPress et de suivre leur évolution — du résultat métier recherché : afficher le titre du contenu courant dans une extension de l'éditeur. Une API peut être valide techniquement et pourtant constituer un mauvais choix architectural si elle intervient au mauvais niveau du cycle WordPress.

Architecture et maintenance

Lorsqu’une équipe réutilise useSelect() — @wordpress/data, préciser sa version WordPress minimale, le composant propriétaire du traitement et les effets de bord observés lors des essais. Une extension d’éditeur doit viser le point d’accroche le plus étroit possible. Modifier l’ensemble des blocs pour régler un seul cas provoque des effets de bord sur des extensions tierces. La compatibilité des attributs, des blocs historiques et des outils d’édition doit être examinée lorsque le comportement éditorial change. Garder un exemple de référence qui n’inclut aucun secret et prévoir un test de non-régression lors des mises à jour du Core. La documentation de l’API doit être reconsultée pour les évolutions futures, particulièrement les statuts, arguments facultatifs et hooks associés.