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

Beaucoup de travail a été fait dans cette série de tutoriels! Nous avons créé un bloc WordPress personnalisé qui récupère les données de l'API externe et les rend sur l'avant. Nous avons ensuite prolongé les travaux afin que les données puissent également être rendues directement dans l'éditeur de blocs WordPress. Après cela, nous avons créé l'interface utilisateur des paramètres pour ce bloc à l'aide des composants du package WordPress InspectorControls.

La dernière étape consiste à enregistrer les options de paramètres. Si nous nous souvenons du contenu du post précédent, nous avons réellement pu "enregistrer" nos choix dans l'interface utilisateur des paramètres de bloc, mais ces choix n'étaient pas stockés nulle part. Si nous effectuons des sélections, les enregistrons, puis revenons à la publication, les paramètres seront complètement réinitialisés.

Fermons la boucle et enregistrons ces paramètres afin qu'ils puissent être persistés la prochaine fois que vous modifierez un message qui contient nos blocs personnalisés!

Utilisation de l'API externe dans WordPress Block

• Données de rendu frontal
• Données de rendu back-end
• Créer des paramètres personnalisés UI
• Enregistrer les paramètres de bloc personnalisé (ici!)
• en utilisant des données d'API en temps réel (à venir bientôt)

Enregistrer les propriétés des paramètres

Nous utilisons une API qui fournit des classements d'équipe de football, que nous utilisons pour obtenir des écrans de classement basés sur le pays, la ligue et la saison. Nous pouvons créer de nouvelles propriétés pour chaque propriété comme indiqué ci-dessous:

// 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 propriétés de LeagueSettings.js. Chaque fois que le comboboxControl dans notre paramètres de l'interface utilisateur est mis à jour, nous devons définir les propriétés à l'aide de la méthode setAttributes(). Ceci est plus simple lorsque nous n'utilisons qu'un seul point de terminaison de données. Mais maintenant, nous avons plusieurs entrées, c'est un peu plus compliqué.

C'est ainsi que je vais l'organiser. Je vais créer un nouvel objet dans LeagueSettings.js qui suit la structure des propriétés de réglage et de leurs valeurs.

// LeagueSettings.js

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

J'ai également modifié la variable d'état initiale de NULL à la variable de réglage correspondante.

// LeagueSettings.js

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

Dans chaque handle______Change(), je créerai un setLocalAttributes() avec un paramètre qui a cloné à l'aide de l'opérateur d'extension et écrase l'objet localSettings précédent avec de nouvelles valeurs de pays, de ligue et de saison.

// LeagueSettings.js

function handleCountryChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, country: value });
  // 代码的其余部分
}

function handleLeagueChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, league: value });
  // 代码的其余部分
}

function handleSeasonChange(value) {
  // 初始代码
  setLocalAttributes({ ...localSettings, season: value });
  // 代码的其余部分
}

Nous pouvons le définir comme ceci: setLocalAttributes()

// LeagueSettings.js

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

Par conséquent, nous utilisons

pour fusionner les deux objets. Nous pouvons ensuite cloner l'objet Object.assign() retour à newSettings car nous devons également considérer chaque propriété de réglage chaque fois qu'une nouvelle sélection est effectuée et des modifications se produisent. localSettings

Enfin, nous pouvons utiliser

comme d'habitude pour définir l'objet final. Vous pouvez confirmer si les attributs ci-dessus changent en mettant à jour la sélection dans l'interface utilisateur. setAttributes()

Une autre façon de confirmer est d'exécuter

dans Devtools pour trouver les propriétés. console.log()

Regardez attentivement cette capture d'écran. Ces valeurs sont stockées dans attributes.settings. Grâce au Hook useState(), réagir les redevateurs chaque fois que nous apportons des modifications dans les paramètres, nous pouvons donc le voir se produire en temps réel.

Afficher la valeur dans les paramètres de bloc UI

Le stockage des valeurs des paramètres dans les options de contrôle eux-mêmes n'est pas très utile car chaque contrôle dépend des valeurs d'autres paramètres (par exemple, le classement par ligue dépend de la saison sélectionnée). Mais il est très utile lorsque les valeurs de réglage sont statiques et définissent indépendantes les unes des autres.

sans compliquer les paramètres actuels, nous pouvons créer une autre section dans le panneau Paramètres pour afficher les propriétés actuelles. Vous pouvez choisir votre propre façon d'afficher la valeur des paramètres, mais j'importerai un composant de pointe dans le package @wordpress/components:

// index.js

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

Ici, je vérifierai conditionnellement les valeurs avant de les afficher dans le composant de pointe:

// LeagueSettings.js

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

C'est ainsi que cela fonctionne dans l'éditeur de blocs:

Les données API

sont plus puissantes lorsque les données en temps réel peuvent être affichées sans les mettre à jour manuellement à chaque fois. Nous explorerons cela dans la prochaine partie de cette série.

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!