Rendu les données API externes dans les blocs WordPress sur l'avant

Ce tutoriel CSS-Tricks s'appuie sur les articles précédents sur les blocs WordPress, en se concentrant sur la récupération et l'affichage du contenu dynamique d'une API externe à l'avant. Alors que les tutoriels précédents ont couvert les bases des blocs et le rendu arrière, celui-ci plonge en utilisant des données externes dans un bloc personnalisé.

Cela fait partie d'une série couvrant divers aspects de l'intégration des données API externes dans des blocs WordPress personnalisés:

Travailler avec des API externes dans les blocs WordPress

• Rendre les données sur le frontal (courant)
• Rendre les données à l'arrière (futur)
• Création d'un paramètres personnalisés ui (futur)
• Enregistrement des paramètres de bloc personnalisé (futur)
• Travailler avec les données de l'API en direct (futur)

Nous allons créer un bloc affichant les classements de la ligue de football (football) à partir d'API-Football, en tirant parti du package @wordpress/create-block pour la configuration du projet.

Configuration du plugin de bloc

Nous générerons un nouveau projet en utilisant la ligne de commande:

npx @wordpress/create-block football-rankings

Après avoir placé le dossier généré dans votre répertoire WordPress wp-content/plugins et l'activer, nous nous concentrerons sur ces fichiers clés:

• edit.js
• index.js
• football-rankings.php

Intégration des données API

Nous utiliserons API-Football (via RapidAPI). RapidAPI fournit les scripts nécessaires pour récupérer les données; JSONCrack peut aider à visualiser la structure JSON.

récupérer les données dans edit.js

le useEffect crochet dans edit.js Retronce les données une seule fois sur le chargement de la page, empêchant les appels d'API inutiles pendant les rediffiteurs de l'éditeur de blocs:

import { useEffect } from "@wordpress/element";

export default function Edit(props) {
  // ... (rest of the code remains largely unchanged)
  useEffect(() => {
    // ... (fetch code using RapidAPI key and host)
    .then( ( response ) => response.json() )
    .then( ( response ) => {
      setAttributes( { data: response } ); //Simplified data assignment
    })
    .catch((err) => console.error(err));
  }, []);
  // ... (rest of the code remains largely unchanged)
}

Stockage de données dans WordPress

Le fichier index.js définit l'attribut data pour stocker le json récupéré:

registerBlockType( metadata.name, {
  // ...
  attributes: {
    data: {
      type: "object",
    },
  },
  // ...
} );

Cela garantit que WordPress enregistre les données de l'API dans la base de données.

Sortie frontale

Nous créerons frontend.js et frontend.css (ou frontend.scss) pour gérer le rendu et le style frontal, séparés de la logique arrière. football-rankings.php ENQUIEUES ces actifs en utilisant wp_enqueue_script et wp_enqueue_style uniquement lorsqu'il n'est pas dans le contexte administrateur (!is_admin()). La fonction render_callback dans football-rankings.php passe les attributs au javascript frontal.

// football-rankings.php (excerpt)
function render_frontend($attributes) {
  if( !is_admin() ) {
    wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.js');
    wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.css' );
  }
  // ... (rest of the code)
}

le fichier frontend.js (simplifié):

npx @wordpress/create-block football-rankings

Le style dans frontend.scss ou frontend.css est responsable de la présentation visuelle des données. La section package.json du fichier scripts doit être mise à jour pour inclure les fichiers de frontend dans le processus de build.

Une démo complète et un style détaillé sont disponibles dans l'article original. Cette réponse révisée fournit un aperçu concis des étapes clés et des extraits de code.

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!