Création d'une interface utilisateur de paramètres pour un bloc WordPress personnalisé

Cet article montre la création d'une interface utilisateur de paramètres pour un bloc WordPress personnalisé qui interagit avec une API externe. Le bloc affiche les classements de football et les paramètres permettent aux utilisateurs de filtrer les données par pays, ligue et saison.

Les articles précédents ont couvert la récupération et le rendu des données d'API dans l'éditeur de blocs et sur le front-end. Cet article se concentre sur l'intégration d'un panneau de paramètres dans le panneau de configuration de l'éditeur de blocs WordPress (la barre latérale droite). Ce panneau permet aux utilisateurs de personnaliser les données affichées par le bloc.

Le processus consiste à exploiter les composants InspectorControls et les composants de base de WordPress comme PanelBody et ComboboxControl pour créer une interface conviviale. L'architecture API est décrite, mettant en évidence les relations entre les pays, les ligues, les saisons et les données de classement.

Les étapes de clé incluent:

1. Répondre aux données du pays: L'article montre comment récupérer une liste de pays du RapidAPI en utilisant useEffect et fetch, stockant les résultats dans l'état.

2. implémentation InspectorControls: Le composant InspectorControls est importé et utilisé pour abriter les paramètres personnalisés UI.

3. Création d'un composant personnalisé (LeagueSettings.js): Un composant séparé gère l'interface utilisateur des paramètres, améliorant l'organisation du code. Ce composant utilise PanelBody pour regrouper les paramètres et ComboboxControl pour la sélection du pays, de la ligue et de la saison. Le ComboboxControl permet de rechercher dans les options.

4. Gestion des changements de données: Fonctions comme handleCountryChange, handleLeagueChange, et handleSeasonChange Mettez à jour l'état du composant en fonction des sélections d'utilisateurs, filtrant dynamiquement les données de l'API.

5. Recherche de données sur la soumission: Un bouton "Fetch Data" déclenche un appel API à l'aide des paramètres sélectionnés, à la mise à jour du classement affiché.

L'article fournit des extraits de code illustrant ces étapes, y compris la conversion des données de l'API en un format adapté à ComboboxControl. Il traite également de la gestion des erreurs potentielles pour les cas où les données peuvent être manquantes à l'API.

Bien que l'implémentation actuelle permet la récupération des données dynamiques, les paramètres ne sont pas encore persistants. Le prochain article couvrira la sauvegarde de ces paramètres pour rendre les sélections d'utilisateurs permanentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!