Rendu des données d'API externes dans des blocs WordPress sur le front-end

Il y a eu de nouveaux tutoriels sur CSS-Tricks pour travailler avec les blocs WordPress. L'un d'eux est une introduction au développement de blocs WordPress et c'est un bon endroit pour apprendre ce que sont les blocs et les enregistrer dans WordPress pour les utiliser dans les pages et les articles.

Alors que les bases du bloc sont bien couvertes dans ce post, je veux faire un autre pas en avant. Vous voyez, dans cet article, nous avons appris la différence entre le rendu des blocs dans l'éditeur de blocs WordPress back-end et leur rendu sur le thème frontal. L'exemple était un simple bloc Pullquote qui rendait différents contenus et styles à chaque extrémité.

Allons plus loin et voyons comment utiliser contenu dynamique dans un bloc WordPress. Plus précisément, récupérons les données d'une API externe et rendons-les sur le front-end lorsqu'un bloc particulier est déposé dans l'éditeur de blocs.

Nous allons construire un bloc qui génère des données qui montrent le football (euh, Football) classements tirés de Api-Football.

Il existe plusieurs façons d'intégrer une API à un bloc WordPress ! Étant donné que l'article sur les bases des blocs a déjà parcouru le processus de création d'un bloc à partir de zéro, nous allons simplifier les choses en utilisant le @wordpress/create-block package pour amorcer notre travail et structurer notre projet.

Initialisation de notre plugin de bloc

Tout d'abord : lançons un nouveau projet à partir de la ligne de commande :

npx @wordpress/create-block football-rankings

Je lancerais normalement un projet comme celui-ci en créant les fichiers à partir de zéro, mais bravo à l'équipe WordPress Core pour cet utilitaire pratique !

Une fois que le dossier du projet a été créé par la commande, nous avons techniquement un bloc WordPress entièrement fonctionnel enregistré en tant que plugin. Alors, allons-y et déposons le dossier du projet dans le wp-content/plugins répertoire où vous avez installé WordPress (probablement mieux pour travailler dans un environnement local), puis connectez-vous à l'administrateur WordPress et activez-le à partir de l'écran Plugins.

Maintenant que notre bloc est initialisé, installé et activé, allez-y et ouvrez le dossier du projet à partir de /wp-content/plugins/football-rankings. Vous allez vouloir cd là aussi depuis la ligne de commande pour s'assurer que nous pouvons continuer le développement.

Ce sont les seuls fichiers sur lesquels nous devons nous concentrer pour le moment :

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

Les autres fichiers du projet sont importants, bien sûr, mais ne sont pas essentiels à ce stade.

Examen de la source de l'API

Nous savons déjà que nous utilisons Api-Football qui nous parvient grâce à API rapide. Heureusement, RapidAPI dispose d'un tableau de bord qui génère automatiquement les scripts requis dont nous avons besoin pour récupérer les données de l'API pour le classement de la Premier League 2021.

Si vous souhaitez jeter un œil à la structure JSON, vous pouvez générer une représentation visuelle avec JSONCrack.

Récupération des données du edit.js filet

Je vais envelopper le code RapidAPI dans un Réagir useEffect() crochet avec un tableau de dépendances vide afin qu'il ne s'exécute qu'une seule fois lorsque la page est chargée. De cette façon, nous empêchons WordPress d'appeler l'API chaque fois que l'éditeur de blocs restitue. Vous pouvez vérifier cela en utilisant wp.data.subscribe() si vous vous en souciez.

Voici le code où j'importe useEffect(), puis en l'enroulant autour du fetch() code fourni par RapidAPI :

/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/

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

export default function Edit(props) {
  const { attributes, setAttributes } = props;

  useEffect(() => {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "Your Rapid API key",
        "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
      },
    };

    fetch("https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39", options)
      .then( ( response ) => response.json() )
      .then( ( response ) => {
        let newData = { ...response };
        setAttributes( { data: newData } );
        console.log( "Attributes", attributes );
      })
      .catch((err) => console.error(err));
}, []);

  return (
    

      { __( "Standings loaded on the front end", "external-api-gutenberg" ) }
    
  );
}

Remarquez que j'ai laissé le return fonctionnent à peu près intacts, mais ont inclus une note confirmant que le classement du football est rendu sur le devant. Encore une fois, nous n'allons nous concentrer que sur le front-end dans cet article - nous pourrions également rendre les données dans l'éditeur de blocs, mais nous laisserons cela pour un autre article pour garder les choses concentrées.

Stockage des données API dans WordPress

Maintenant que nous récupérons des données, nous devons les stocker quelque part dans WordPress. C'est là que le attributes.data l'objet est pratique. Nous définissons le data.type en tant que object puisque les données sont récupérées et formatées en JSON. Assurez-vous que vous n'avez pas d'autre type, sinon WordPress n'enregistrera pas les données et ne générera aucune erreur à déboguer.

Nous définissons tout cela dans notre index.js fichier:

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

OK, donc WordPress sait maintenant que les données RapidAPI que nous récupérons sont un objet. Si nous ouvrons un nouveau brouillon de publication dans l'éditeur de blocs WordPress et enregistrons la publication, les données sont maintenant stockées dans la base de données. En fait, si on peut le voir dans wp_posts.post_content champ si nous ouvrons la base de données du site dans phpMyAdmin, Sequel Pro, Adminer ou tout autre outil que vous utilisez.

Sortie de données JSON dans le front-end

Il existe plusieurs façons de sortir les données sur le front-end. La façon dont je vais vous montrer prend les attributs stockés dans la base de données et les transmet en tant que paramètre via le render_callback fonction dans notre football-rankings.php fichier.

J'aime garder une séparation des préoccupations, donc comment je fais cela consiste à ajouter deux nouveaux fichiers au plugin de bloc build dossier: frontend.js ainsi que frontend.css (vous pouvez créer un frontend.scss déposer dans le src répertoire compilé en CSS dans le build annuaire). De cette façon, les codes back-end et front-end sont séparés et les football-rankings.php fichier est un peu plus facile à lire.

/explication En se référant à l'introduction au développement de blocs WordPress, il y a editor.css ainsi que style.css fichiers pour le back-end et les styles partagés entre le front-end et le back-end, respectivement. En ajoutant frontend.scss (qui se compile en frontend.css, je peux isoler des styles qui ne sont destinés qu'au front-end.

Avant de nous inquiéter de ces nouveaux fichiers, voici comment nous les appelons dans football-rankings.php:

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function create_block_football_rankings_block_init() {
  register_block_type( __DIR__ . '/build', array(
    'render_callback' => 'render_frontend'
  ));
}
add_action( 'init', 'create_block_football_rankings_block_init' );

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' ); // HIGHLIGHT 15,16,17,18
  }
  
  ob_start(); ?>

  

    

      
        
      


Rank
Logo
Team name

GP
GW
GD
GL
GF
GA
Pts
Last 5 games

  <?php return ob_get_clean();

}
Depuis que j'utilise le render_callback() méthode pour les attributs, je vais gérer la mise en file d'attente manuellement, tout comme le Le manuel de l'éditeur de blocs suggère. C'est contenu dans le !is_admin() condition, et met les deux fichiers en file d'attente afin d'éviter de les mettre en file d'attente lors de l'utilisation de l'écran de l'éditeur.
Maintenant que nous avons deux nouveaux fichiers que nous appelons, nous devons nous assurer de dire npm pour les compiler. Alors, fais ça dans package.json, Dans le scripts section:
"scripts": {
  "build": "wp-scripts build src/index.js src/frontend.js",
  "format": "wp-scripts format",
  "lint:css": "wp-scripts lint-style",
  "lint:js": "wp-scripts lint-js",
  "packages-update": "wp-scripts packages-update",
  "plugin-zip": "wp-scripts plugin-zip",
  "start": "wp-scripts start src/index.js src/frontend.js"
},
Une autre façon d'inclure les fichiers est de les définir dans les métadonnées de bloc contenues dans notre block.json fichier, comme indiqué dans l'introduction au développement de blocs :
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
La seule raison pour laquelle je vais avec le package.json méthode est parce que j'utilise déjà la render_callback() méthode.
Rendu des données JSON
Dans la partie rendu, je me concentre uniquement sur un seul bloc. De manière générale, vous voudriez cibler plusieurs blocs sur le front-end. Dans ce cas, vous devez utiliser document.querySelectorAll() avec l'ID spécifique du bloc.
Je vais essentiellement attendre que la fenêtre charge et récupère les données de quelques objets clés de JSON et les applique à un balisage qui les affiche sur le front-end. je vais aussi convertir le attributes données à un objet JSON afin qu'il soit plus facile de lire le JavaScript et de définir les détails de JSON en HTML pour des éléments tels que le logo de la ligue de football, les logos d'équipe et les statistiques.
La colonne « 5 derniers matchs » affiche le résultat des cinq derniers matchs d'une équipe. Je dois modifier manuellement les données car les données de l'API sont au format chaîne. Le convertir en tableau peut aider à l'utiliser en HTML en tant qu'élément distinct pour chacun des cinq derniers matchs d'une équipe.
import "./frontend.scss";

// Wait for the window to load
window.addEventListener( "load", () => {
  // The code output
  const dataEl = document.querySelector( ".data pre" ).innerHTML;
  // The parent rankings element
  const tableEl = document.querySelector( ".league-table" );
  // The table headers
  const tableHeaderEl = document.querySelector( "#league-standings .header" );
  // Parse JSON for the code output
  const dataJSON = JSON.parse( dataEl );
  // Print a little note in the console
  console.log( "Data from the front end", dataJSON );
  
  // All the teams 
  let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ];
  // The league logo
  let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo;
  // Apply the league logo as a background image inline style
  tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`;
  
  // Loop through the teams
  teams.forEach( ( team, index ) => {
    // Make a div for each team
    const teamDiv = document.createElement( "div" );
    // Set up the columns for match results
    const { played, win, draw, lose, goals } = team.all;

    // Add a class to the parent rankings element
    teamDiv.classList.add( "team" );
    // Insert the following markup and data in the parent element
    teamDiv.innerHTML = `
      

        ${ index + 1 }
      
      

        
      
      
${ team.team.name }
      

        
${ played }
        
${ win }
        
${ draw }
        
${ lose }
        
${ goals.for }
        
${ goals.against }
        
${ team.points }
      
      

    `;
    
    // Stringify the last five match results for a team
    const form = team.form.split( "" );
    
    // Loop through the match results
    form.forEach( ( result ) => {
      // Make a div for each result
      const resultEl = document.createElement( "div" );
      // Add a class to the div
      resultEl.classList.add( "result" );
      // Evaluate the results
      resultEl.innerText = result;
      // If the result a win
      if ( result === "W" ) {
        resultEl.classList.add( "win" );
      // If the result is a draw
      } else if ( result === "D" ) {
        resultEl.classList.add( "draw" );
      // If the result is a loss
      } else {
        resultEl.classList.add( "lost" );
      }
      // Append the results to the column
      teamDiv.querySelector( ".form-history" ).append( resultEl );
    });

    tableEl.append( teamDiv );
  });
});
En ce qui concerne le style, vous êtes libre de faire ce que vous voulez ! Si vous voulez travailler avec quelque chose, j'ai un ensemble complet de styles que vous pouvez utiliser comme point de départ.
J'ai stylisé les choses dans SCSS depuis le @wordpress/create-block package le prend en charge hors de la boîte. Courir npm run start dans la ligne de commande pour regarder les fichiers SCSS et les compiler en CSS lors de l'enregistrement. Alternativement, vous pouvez utiliser npm run build sur chaque sauvegarde pour compiler le SCSS et construire le reste du bundle de plugins.


          Voir SCSS      
body {
  background: linear-gradient(to right, #8f94fb, #4e54c8);
}

.data pre {
  display: none;
}

.header {
  display: grid;
  gap: 1em;
  padding: 10px;
  grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}

.frontend#league-standings {
  width: 900px;
  margin: 60px 0;
  max-width: unset;
  font-size: 16px;

  .header {
    .stats {
      display: flex;
      gap: 15px;

      & > div {
        width: 30px;
      }
    }
  }
}

.league-table {
  background: white;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 1em;

  .position {
    width: 20px;
  }

  .team {
    display: grid;
    gap: 1em;
    padding: 10px 0;
    grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
    align-items: center;
  }

  .team:not(:last-child) {
    border-bottom: 1px solid lightgray;
  }

  .team-logo img {
    width: 30px;
  }

  .stats {
    display: flex;
    gap: 15px;
  }

  .stats > div {
    width: 30px;
    text-align: center;
  }

  .form-history {
    display: flex;
    gap: 5px;
  }

  .form-history > div {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    font-size: 15px;
  }

  .form-history .win {
    background: #347d39;
    color: white;
  }

  .form-history .draw {
    background: gray;
    color: white;
  }

  .form-history .lost {
    background: lightcoral;
    color: white;
  }
}

Voici la démo !
Vérifiez cela - nous venons de créer un plugin de bloc qui récupère les données et les affiche sur le front-end d'un site WordPress.
Nous avons trouvé une API, fetch()-ed les données à partir de celui-ci, l'a enregistré dans la base de données WordPress, l'a analysé et l'a appliqué à un balisage HTML à afficher sur le front-end. Pas mal pour un seul tuto, non ?
Encore une fois, nous pouvons faire le même genre de chose pour que les classements s'affichent dans l'éditeur de blocs en plus du front-end du thème. Mais j'espère que le fait de garder cela concentré sur le front-end vous montre comment la récupération de données fonctionne dans un bloc WordPress et comment les données peuvent être structurées et rendues pour l'affichage.