Enregistrement des paramètres d'un bloc WordPress personnalisé dans l'éditeur de blocs

Nous avons accompli un tas de choses dans cette série ! Nous avons créé un bloc WordPress personnalisé qui récupère les données d'une API externe et les affiche sur le front-end. Ensuite, nous avons pris ce travail et l'avons étendu afin que les données s'affichent également directement dans l'éditeur de blocs WordPress. Après cela, nous avons créé une interface utilisateur de paramètres pour le bloc en utilisant des composants de WordPress InspectorControls paquet.

Il nous reste un dernier élément à couvrir et il s'agit de sauvegarder les options de paramètres. Si nous nous souvenons du dernier article, nous sommes techniquement en mesure de "sauvegarder" nos sélections dans l'interface utilisateur des paramètres de bloc, mais celles-ci ne sont réellement stockées nulle part. Si nous faisons quelques sélections, les enregistrons, puis revenons au poste, les paramètres sont complètement réinitialisés.

Fermons la boucle et enregistrons ces paramètres afin qu'ils persistent la prochaine fois que nous modifierons un article contenant notre bloc personnalisé !

Enregistrement des attributs des paramètres

Nous travaillons avec une API qui nous fournit football classement des équipes de football et nous l'utilisons pour récupérer et afficher les classements en fonction du pays, de la ligue et de la saison. Nous pouvons créer de nouveaux attributs pour chacun de ceux-ci comme ceci :

// index.js

attributes: {
  data: {
    type: "object",
  },
  settings: {
    type: "object",
    default: {
      country: {
        type: "string",
      },
      league: {
        type: "string",
      },
      season: {
        type: "string",
      },
    },
  },
},

Ensuite, nous devons définir les attributs de LeagueSettings.js. Chaque fois qu'un ComboboxControl est mis à jour dans notre interface utilisateur de paramètres, nous devons définir les attributs à l'aide de la setAttributes() méthode. C'était plus simple lorsque nous ne travaillions qu'avec un seul point de terminaison de données. Mais maintenant que nous avons plusieurs entrées, c'est un peu plus complexe.

C'est comme ça que je vais l'organiser. Je vais créer un nouvel objet dans LeagueSettings.js qui suit la structure des attributs de paramètres et leurs valeurs.

// LeagueSettings.js

let localSettings = {
  country: attributes.settings.country,
  league: attributes.settings.league,
  season: attributes.settings.season,
};

Je vais également changer les variables d'état initiales de null aux variables de réglage respectives.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

Dans chacun des handle______Change(), je vais créer un setLocalAttributes() qui a un argument qui clone et écrase le précédent localSettings objet avec les nouvelles valeurs de pays, de ligue et de saison. Cela se fait à l'aide de l'opérateur de propagation.

// LeagueSettings.js

function handleCountryChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, country: value });
  // Rest of the code
}

function handleLeagueChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, league: value });
  // Rest of the code
}

function handleSeasonChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, season: value });
  // Rest of the code
}

Nous pouvons définir la setLocalAttributes() comme ça:

// LeagueSettings.js

function setLocalAttributes(value) {
  let newSettings = Object.assign(localSettings, value);
  localSettings = { ...newSettings };
  setAttributes({ settings: localSettings });
}

Donc, nous utilisons Object.assign() pour fusionner les deux objets. Ensuite, nous pouvons cloner le newSettings s'opposer à localSettings car nous devons également tenir compte de chaque attribut de paramètres lorsqu'une nouvelle sélection est effectuée et qu'un changement se produit.

Enfin, nous pouvons utiliser le setAttributes() comme nous le faisons normalement pour définir l'objet final. Vous pouvez vérifier si les attributs ci-dessus changent en mettant à jour les sélections dans l'interface utilisateur.

Une autre façon de confirmer est de faire un console.log() dans DevTools pour trouver les attributs.

Regardez de plus près cette capture d'écran. Les valeurs sont stockées dans attributes.settings. Nous pouvons le voir se produire en direct car React se restitue à chaque fois que nous modifions les paramètres, grâce au useState() crochet.

Affichage des valeurs dans l'interface utilisateur des paramètres des blocs

Il n'est pas très utile de stocker les valeurs de réglage dans les options de contrôle elles-mêmes car chacune dépend de l'autre valeur de réglage (par exemple, les classements par ligue dépendent de la saison sélectionnée). Mais c'est très utile dans les situations où les valeurs des paramètres sont statiques et où les paramètres sont indépendants les uns des autres.

Sans compliquer les paramètres actuels, nous pouvons créer une autre section dans le panneau des paramètres qui affiche les attributs actuels. Vous pouvez choisir votre façon d'afficher les valeurs des paramètres mais je vais importer un Tip composant du @wordpress/components emballage:

// LeagueSettings.js
import { Tip } from "@wordpress/components";

Pendant que je suis ici, je vais faire une vérification conditionnelle des valeurs avant de les afficher à l'intérieur du Tip composant:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Voici comment cela fonctionne dans l'éditeur de blocs :

Les données API sont plus puissantes lorsque les données en direct peuvent être affichées sans avoir à les mettre à jour manuellement à chaque fois. Nous y reviendrons dans le prochain épisode de cette série.