Rendering External API Data in WordPress Blocks on the Back End

Cet article suit l'article précédent sur "Rendre les données API externes à l'extrémité frontale du bloc WordPress". Dans le post précédent, nous avons appris à obtenir une API externe et à l'intégrer avec un bloc qui rend les données récupérées à l'avant d'un site Web WordPress.

Le problème est que la façon dont nous mettons en œuvre nous empêche de voir des données dans l'éditeur de blocs WordPress. En d'autres termes, nous pouvons insérer le bloc dans la page, mais nous ne pouvons pas en voir un aperçu. Les blocs ne peuvent être vus qu'après la libération.

passons en revue l'exemple de plugin de blocs créés dans le post précédent. Cette fois, nous utiliserons l'écosystème JavaScript et React de WordPress pour obtenir et rendre les données dans l'éditeur de bloc backend.

Utilisation de l'API externe dans WordPress Block

Données de rendu frontal
Données de rendu backend (votre emplacement actuel)
Créer des paramètres personnalisés UI
Enregistrer les paramètres de bloc personnalisés
en utilisant des données d'API en temps réel (à venir bientôt)

Les résultats de l'article précédent

Avant de commencer, voici une démo que nous avons terminée dans le post précédent, vous pouvez vous référer. Vous avez peut-être remarqué que j'ai utilisé la méthode render_callback dans mon article précédent pour pouvoir utiliser des propriétés et rendre le contenu dans un fichier PHP.

Ceci est utile dans des situations où vous devrez peut-être utiliser certaines fonctions WordPress ou PHP natives pour créer des blocs dynamiques. Cependant, si vous souhaitez simplement utiliser l'écosystème JavaScript et réagir de WordPress (en particulier JSX) pour rendre les HTML et les propriétés statiques stockées dans la base de données, vous n'avez qu'à vous concentrer sur les fonctions Edit et Save du plugin de bloc.

Modifier rend le contenu en fonction de ce que vous voulez voir dans l'éditeur de blocs. Vous pouvez utiliser des composants React interactifs ici.
Save rend le contenu en fonction de ce que vous voulez voir sur le frontal. Vous ne pouvez pas utiliser des composants ou des crochets React réguliers ici. Il est utilisé pour retourner le HTML statique enregistré dans la base de données ainsi que les propriétés.

Les fonctions

Save sont au centre de notre discussion aujourd'hui. Nous pouvons créer des composants interactifs à l'avant, mais pour cela, nous devons inclure et y accéder manuellement dans un fichier comme nous l'avons fait dans le post précédent.

donc je couvrirai la même chose que nous avons fait dans le post précédent, mais cette fois, vous pouvez voir l'aperçu dans l'éditeur de bloc avant de publier sur le frontend .

Bloquer les propriétés

J'ai délibérément omis toute explication des propriétés de fonction

dans le post précédent car cela distrait le contenu principal (rendu). edit

Si vous avez un arrière-plan React, vous pouvez comprendre ce que j'ai dit, mais si vous êtes nouveau pour vous, je vous recommande de consulter les composants et les propriétés de la documentation React.

Si nous enregistrons l'objet

à la console, il renverra une liste des fonctions et variables WordPress liées à notre bloc: props

Nous avons juste besoin de l'objet attributes et de la fonction setAttributes, et je vais les déconstruire à partir de l'objet props dans mon code. Dans le post précédent, j'ai modifié le code de RapidAPI afin que les données de l'API puissent être stockées via setAttributes(). Props est en lecture seule, nous ne pouvons donc pas les modifier directement.

L'attribut

Block est similaire aux variables d'état et setState dans React, mais React s'exécute sur le client, tandis que setAttributes() est utilisé pour stocker en permanence l'attribut dans la base de données WordPress après avoir enregistré le message. Donc, ce que nous devons faire, c'est les enregistrer sur attributes.data, puis les appeler comme la valeur initiale de la variable useState().

Modifier la fonction

Je vais copier et coller le code HTML que nous avons utilisé dans le post précédent dans football-rankings.php et faire un montage pour passer à l'arrière-plan JavaScript. N'oubliez pas que nous avons créé deux fichiers supplémentaires pour les styles et scripts frontaux dans le post précédent? Suivez notre approche aujourd'hui, il n'est pas nécessaire de créer ces fichiers. Au lieu de cela, nous pouvons tout déplacer dans la fonction Edit.

Code complet

`` `JavaScript import {UseState} de "@ wordpress / élément"; Exporter la fonction default Edit (Props) { const {attributs, setAttributes} = accessoires; const [apidata, setAPidata] = useState (attributs.data);

fonction fetchData () { const Options = { Méthode: "Get", En-têtes: { "X-Rapidapi-Key": "Votre clé API rapide", "X-Rapidapi-Host": "API-Football-v1.p.rapidapi.com", }, }; aller chercher( "

//m.sbmmt.com/link/a2a750ff64f34c66249d0f7d3dd42004 ", options ) .Then ((réponse) = & gt; réponse.json ()) .Then ((réponse) = & gt; { Laissez newData = {... Response}; setAtTributes ({data: newdata}); setAPidata (newdata); }) .Catch ((err) = & gt; console.error (err)); }

return (

Reprendre les données Le bouton déclenche l'acquisition de données /} {Apidata && ( {/

Ajouter un ID pour le sélecteur de style /} {/

Utilisez classname /} Rank

logo

Nom de l'équipe

... autres statistiques ... /}

Historique des formations

{Apidata.Response [0] .league.standings [0] .map ((el) = & gt; { // ... Rendre les données de la table ... })}

)}

)); } `` 我已经从 @ wordpress / élément 中包含了React钩子 useState ()

，而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用

@ wordpress / élément`, qui se charge à partir d'une seule source, la couche WordPress ci-dessus réagit.

Cette fois, au lieu d'envelopper le code dans useEffect(), je l'ai enveloppé dans une fonction qui ne s'appelle que lorsque le bouton est cliqué afin que nous puissions prévisualiser les données récupérées en temps réel. J'ai utilisé une variable d'état appelée apiData pour rendre conditionnellement le tableau de la ligue. Ainsi, une fois le bouton cliqué et que les données sont récupérées, je définis apiData sur de nouvelles données dans fetchData() et je renvoie avec le tableau HTML de classement de football disponible.

Vous remarquerez qu'une fois le message enregistré et que la page est actualisée, le tableau de la ligue disparaîtra. En effet, nous utilisons l'état nul (null) comme valeur initiale de apiData. Lorsqu'un message est enregistré, la propriété est enregistrée dans l'objet attributes.data, que nous appelons la valeur initiale de la variable useState() comme indiqué ci-dessous:

const [apiData, setApiData] = useState(attributes.data);

Copier après la connexion

Enregistrer la fonction

Nous ferons presque la même chose avec la fonction save, mais avec un peu de modification. Par exemple, le frontal n'a pas besoin du bouton "Get Data", ni la variable d'état apiData, car nous l'avons vérifié dans la fonction edit. Mais nous avons besoin d'une variable aléatoire apiData pour vérifier attributes.data pour rendre JSX conditionnellement, sinon il lance une erreur non définie et l'interface utilisateur de l'éditeur de bloc deviendra vide.

Code complet

`` `JavaScript Exporter la fonction default Save (accessoires) { const {attributs} = accessoires; const apidata = attributs.data;

return ( apidata && (// ne rendrait que lorsque Apidata est disponible

... Rendre les données de la table, qui est fondamentalement la même que le code dans la fonction d'édition ... /} ) )); } Fonction `` 如果您在区块已存在于区块编辑器中后修改 Enregistrer ', il affichera l'erreur suivante:

En effet, les balises du contenu enregistré sont différentes de celles de notre nouvelle fonction save. Étant donné que nous sommes en mode développement, il est plus facile de supprimer des blocs de la page actuelle et de les réinsérer en tant que nouveaux blocs - de cette façon, le code mis à jour sera utilisé et tout sera restauré pour synchroniser.

Si nous utilisons la méthode render_callback, cela peut être évité car la sortie est dynamique et contrôlée par le PHP plutôt que par la fonction save. Par conséquent, chaque méthode présente ses propres avantages et inconvénients.

Tom Nowell fournit une explication détaillée de ce qui ne devrait pas être fait dans la fonction save dans cette réponse de débordement de pile.

Définir les styles de blocs dans l'éditeur et frontal

concernant le style, ce sera presque le même que nous avons vu dans le post précédent, mais il y a des changements mineurs que j'ai expliqués dans les commentaires. Je ne fais que fournir le style complet ici, car c'est juste une preuve de concept, pas ce que vous voulez copier et coller (sauf si vous avez besoin d'un bloc qui montre les classements de football avec un style comme celui-ci). Notez que j'utilise toujours SCSS qui se compile avec CSS au moment de la construction.

Style de l'éditeur

css /* 目标所有带有 data-title="Football Rankings" 的区块 */ .block-editor-block-list__layout .block-editor-block-list__block.wp-block[data-title="Football Rankings"] { /* 默认情况下，区块被限制在 650px 最大宽度加上其他设计特定代码 */ max-width: unset; /* ... 其他样式 ... */ }

Style frontal

`` CSS /

Style de bloc frontal / .wp-block-posst-content .wp-block-football-rankings-ligue-table { / ... style ... / }

ligue-standings {/

Utilisation du sélecteur d'ID /

... style ... / } `` Nous l'ajoutons à src / style.scss`, qui est responsable du style de l'éditeur et du front-end. Je ne peux pas partager l'URL de démo car il nécessite un accès à l'éditeur, mais j'ai enregistré une vidéo pour que vous regardiez la démo: 我们将此添加到

Voir la démo C'est très soigné, non? Maintenant, nous avons un bloc entièrement fonctionnel qui ne rend pas seulement à l'avant, mais obtient également des données API et des rendements dans l'éditeur de bloc - et il y a un bouton de rafraîchissement!

Cependant, si nous voulons tirer le meilleur parti de l'éditeur de blocs WordPress, nous devrions envisager de cartographier certains éléments de l'interface utilisateur de blocs pour bloquer les contrôles tels que le réglage des couleurs, la typographie et l'espacement. C'est une bonne étape suivante dans le parcours d'apprentissage du développement des blocs.

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!