Rendering di dati API esterni nei blocchi di WordPress sul front-end

Sono stati pubblicati alcuni nuovi tutorial qui su CSS-Tricks per lavorare con i blocchi di WordPress. Uno di loro è un'introduzione allo sviluppo di blocchi di WordPress ed è un buon posto per imparare cosa sono i blocchi e registrarli in WordPress per l'uso in pagine e post.

Mentre le basi del blocco sono ben trattate in quel post, voglio fare un altro passo avanti. Vedete, in quell'articolo, abbiamo appreso la differenza tra il rendering dei blocchi nell'editor blocchi di WordPress back-end e il loro rendering sul tema del front-end. L'esempio era un semplice blocco Pullquote che rendeva contenuti e stili diversi su ciascuna estremità.

Andiamo oltre e diamo un'occhiata all'utilizzo contenuto dinamico in un blocco WordPress. Più specificamente, prendiamo i dati da un'API esterna e renderizziamoli sul front-end quando un particolare blocco viene rilasciato nell'Editor blocchi.

Costruiremo un blocco che produca dati che mostrano il calcio (er, calcio) classifiche estratte da Api-Calcio.

C'è più di un modo per integrare un'API con un blocco WordPress! Poiché l'articolo sulle basi dei blocchi ha già esaminato il processo di creazione di un blocco da zero, semplificheremo le cose utilizzando il @wordpress/create-block pacchetto per avviare il nostro lavoro e strutturare il nostro progetto.

Inizializzazione del nostro plug-in di blocco

Per prima cosa: facciamo girare un nuovo progetto dalla riga di comando:

npx @wordpress/create-block football-rankings

Normalmente darei il via a un progetto come questo creando i file da zero, ma complimenti al team di WordPress Core per questa pratica utility!

Una volta che la cartella del progetto è stata creata dal comando, tecnicamente abbiamo un blocco WordPress completamente funzionante registrato come plug-in. Quindi, andiamo avanti e rilasciamo la cartella del progetto nel file wp-content/plugins directory in cui hai installato WordPress (probabilmente è meglio lavorare in un ambiente locale), quindi accedi all'amministratore di WordPress e attivalo dalla schermata Plugin.

Ora che il nostro blocco è inizializzato, installato e attivato, vai avanti e apri la cartella del progetto da at /wp-content/plugins/football-rankings. Avrai voglia di farlo cd anche dalla riga di comando per assicurarci di poter continuare lo sviluppo.

Questi sono gli unici file su cui dobbiamo concentrarci al momento:

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

Gli altri file nel progetto sono importanti, ovviamente, ma a questo punto non sono essenziali.

Revisione dell'origine API

Sappiamo già che stiamo usando Api-Calcio che ci viene per gentile concessione RapidAPI. Fortunatamente, RapidAPI ha una dashboard che genera automaticamente gli script necessari di cui abbiamo bisogno per recuperare i dati API per la classifica della Premier League 2021.

Se vuoi dare un'occhiata alla struttura JSON, puoi generare una rappresentazione visiva con JSON Crack.

Recupero dei dati da edit.js filetto

Incorporerò il codice RapidAPI all'interno di a Reagire useEffect() gancio con un array di dipendenze vuoto in modo che venga eseguito solo una volta quando la pagina viene caricata. In questo modo, impediamo a WordPress di chiamare l'API ogni volta che l'editor blocchi esegue nuovamente il rendering. Puoi verificarlo usando wp.data.subscribe() se ti interessa.

Ecco il codice in cui sto importando useEffect(), quindi avvolgendolo attorno al fetch() codice fornito da 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" ) }
    
  );
}

Si noti che ho lasciato il return funzione praticamente intatta, ma hanno incluso una nota che conferma che la classifica del calcio è resa sull'estremità anteriore. Ancora una volta, in questo articolo ci concentreremo solo sul front-end: potremmo anche eseguire il rendering dei dati nell'editor blocchi, ma lo lasceremo per un altro articolo per mantenere le cose concentrate.

Memorizzazione dei dati API in WordPress

Ora che stiamo recuperando i dati, dobbiamo archiviarli da qualche parte in WordPress. Questo è dove il attributes.data l'oggetto torna utile. Stiamo definendo il data.type come object poiché i dati vengono recuperati e formattati come JSON. Assicurati di non avere nessun altro tipo, altrimenti WordPress non salverà i dati, né genererà alcun errore per il debug.

Definiamo tutto questo nel ns index.js file:

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

OK, quindi WordPress ora sa che i dati RapidAPI che stiamo recuperando sono un oggetto. Se apriamo una nuova bozza di post nell'editor blocchi di WordPress e salviamo il post, i dati vengono ora archiviati nel database. In effetti, se possiamo vederlo nel wp_posts.post_content campo se apriamo il database del sito in phpMyAdmin, Sequel Pro, Adminer o qualunque strumento tu usi.

Output di dati JSON nel front-end

Esistono diversi modi per emettere i dati sul front-end. Il modo in cui ti mostrerò prende gli attributi che sono memorizzati nel database e li passa come parametro attraverso il file render_callback funzione nel ns football-rankings.php file.

Mi piace mantenere una separazione delle preoccupazioni, quindi il modo in cui lo faccio è aggiungere due nuovi file ai plug-in del blocco build cartella: frontend.js ed frontend.css (puoi creare un frontend.scss file nella src directory che è stata compilata in CSS nel file build directory). In questo modo, i codici back-end e front-end sono separati e il football-rankings.php il file è un po' più facile da leggere.

/spiegazione Facendo riferimento all'introduzione allo sviluppo di blocchi di WordPress, ci sono editor.css ed style.css file per il back-end e gli stili condivisi rispettivamente tra il front-end e il back-end. Aggiungendo frontend.scss (che compila in frontend.css, posso isolare stili destinati solo al front-end.

Prima di preoccuparci di quei nuovi file, ecco come li chiamiamo 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();

}
Dato che sto usando il render_callback() metodo per gli attributi, gestirò manualmente l'accodamento proprio come il Block Editor Handbook suggerisce. È contenuto nel !is_admin() condizione e sta accodando i due file in modo da evitare di accodarli durante l'utilizzo della schermata dell'editor.
Ora che abbiamo due nuovi file che stiamo chiamando, dobbiamo assicurarci di dirlo npm per compilarli. Quindi, fallo dentro package.json, Nella scripts sezione:
"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"
},
Un altro modo per includere i file è definirli nel blocco dei metadati contenuti nel ns block.json file, come notato nell'introduzione allo sviluppo del blocco:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
L'unico motivo per cui vado con il package.json il metodo è perché sto già utilizzando il render_callback() metodo.
Rendering dei dati JSON
Nella parte di rendering, mi sto concentrando solo su un singolo blocco. In generale, vorresti indirizzare più blocchi sul front-end. In tal caso, è necessario utilizzare document.querySelectorAll() con l'ID specifico del blocco.
Fondamentalmente aspetterò che la finestra carichi e acquisisca i dati per alcuni oggetti chiave da JSON e li applichi a un markup che li renda sul front-end. Ho anche intenzione di convertire il attributes dati a un oggetto JSON in modo che sia più facile leggere JavaScript e impostare i dettagli da JSON a HTML per elementi come il logo della lega di calcio, i loghi delle squadre e le statistiche.
La colonna "Ultime 5 partite" mostra il risultato delle ultime cinque partite di una squadra. Devo modificare manualmente i dati poiché i dati dell'API sono in formato stringa. La conversione in un array può aiutare a utilizzarlo in HTML come elemento separato per ciascuna delle ultime cinque partite di una squadra.
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 );
  });
});
Per quanto riguarda lo styling, sei libero di fare quello che vuoi! Se vuoi qualcosa con cui lavorare, ho una serie completa di stili che puoi usare come punto di partenza.
Ho disegnato le cose in SCSS dal @wordpress/create-block il pacchetto lo supporta immediatamente. Correre npm run start nella riga di comando per guardare i file SCSS e compilarli in CSS al momento del salvataggio. In alternativa, puoi usare npm run build ad ogni salvataggio per compilare l'SCSS e costruire il resto del bundle di plugin.


          Visualizza 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;
  }
}

Ecco la demo!
Dai un'occhiata: abbiamo appena creato un plug-in di blocco che recupera i dati e li esegue il rendering sul front-end di un sito WordPress.
Abbiamo trovato un'API, fetch()-ed dati da esso, li ha salvati nel database di WordPress, li ha analizzati e li ha applicati ad alcuni markup HTML da visualizzare sul front-end. Non male per un singolo tutorial, giusto?
Ancora una volta, possiamo fare lo stesso genere di cose in modo che le classifiche vengano visualizzate nell'Editor blocchi oltre al front-end del tema. Ma si spera che mantenere questo focus sul front-end ti mostri come funziona il recupero dei dati in un blocco WordPress e come i dati possono essere strutturati e renderizzati per la visualizzazione.