Externe API-gegevens weergeven in WordPress-blokken op de frontend

Er zijn hier enkele nieuwe tutorials verschenen over CSS-Tricks voor het werken met WordPress-blokken. Een van hen is een inleiding tot de ontwikkeling van WordPress-blokken en het is een goede plek om te leren wat blokken zijn en om ze in WordPress te registreren voor gebruik in pagina's en berichten.

Hoewel de basisprincipes van het blok goed worden behandeld in die post, wil ik nog een stap vooruit zetten. Zie je, in dat artikel hebben we het verschil geleerd tussen het renderen van blokken in de back-end WordPress Block Editor en het renderen ervan op het front-end thema. Het voorbeeld was een eenvoudig Pullquote-blok dat aan elk uiteinde verschillende inhoud en stijlen weergaf.

Laten we verder gaan en kijken naar het gebruik van dynamische inhoud in een WordPress-blok. Laten we meer specifiek gegevens ophalen van een externe API en deze aan de voorkant weergeven wanneer een bepaald blok in de Block Editor wordt neergezet.

We gaan een blok bouwen dat gegevens uitvoert die voetbal laten zien (eh, voetbal) rankings getrokken uit Api-Voetbal.

Er is meer dan één manier om een ​​API te integreren met een WordPress-blok! Aangezien het artikel over de basisprincipes van blokken het proces van het maken van een blok vanaf het begin al heeft doorlopen, gaan we dingen vereenvoudigen door de @wordpress/create-block pakket om ons werk op te starten en ons project te structureren.

Onze blokplug-in initialiseren

Allereerst: laten we een nieuw project starten vanaf de opdrachtregel:

npx @wordpress/create-block football-rankings

Normaal gesproken zou ik een project als dit starten door de bestanden helemaal opnieuw te maken, maar een pluim voor het WordPress Core-team voor dit handige hulpprogramma!

Zodra de projectmap door de opdracht is gemaakt, hebben we technisch gezien een volledig functioneel WordPress-blok geregistreerd als plug-in. Dus laten we doorgaan en de projectmap in de wp-content/plugins map waar u WordPress hebt geïnstalleerd (waarschijnlijk het beste om in een lokale omgeving te werken), log vervolgens in op de WordPress-beheerder en activeer deze vanuit het scherm Plug-ins.

Nu ons blok is geïnitialiseerd, geïnstalleerd en geactiveerd, ga je gang en open je de projectmap van at /wp-content/plugins/football-rankings. Je zult willen cd daar ook vanaf de opdrachtregel om ervoor te zorgen dat we door kunnen gaan met ontwikkelen.

Dit zijn de enige bestanden waar we ons momenteel op moeten concentreren:

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

De andere bestanden in het project zijn natuurlijk belangrijk, maar zijn op dit moment niet essentieel.

De API-bron beoordelen

We weten al dat we gebruiken Api-Voetbal die tot ons komt met dank aan SnelleAPI. Gelukkig heeft RapidAPI een dashboard dat automatisch de benodigde scripts genereert die we nodig hebben om de API-gegevens voor de Premier League-stand van 2021 op te halen.

Als u de JSON-structuur wilt bekijken, kunt u een visuele weergave genereren met: JSONCrack.

Gegevens ophalen uit de edit.js filet

Ik ga de RapidAPI-code in een Reageren useEffect() haak met een lege afhankelijkheidsmatrix zodat deze slechts één keer wordt uitgevoerd wanneer de pagina wordt geladen. Op deze manier voorkomen we dat WordPress de API aanroept telkens wanneer de Block Editor opnieuw wordt weergegeven. U kunt dat controleren met wp.data.subscribe() als je er om geeft.

Hier is de code waar ik importeer useEffect()en wikkel het dan om de fetch() code die RapidAPI heeft verstrekt:

/**
* 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" ) }
    
  );
}

Merk op dat ik de . heb verlaten return functioneren vrijwel intact, maar hebben een notitie toegevoegd die bevestigt dat de voetbalstanden aan de voorkant worden weergegeven. Nogmaals, we gaan ons in dit artikel alleen concentreren op de voorkant - we zouden de gegevens ook in de Block Editor kunnen weergeven, maar dat laten we over aan een ander artikel om de zaken gefocust te houden.

API-gegevens opslaan in WordPress

Nu we gegevens ophalen, moeten we deze ergens in WordPress opslaan. Dit is waar de attributes.data voorwerp komt goed van pas. We definiëren de data.type als object omdat de gegevens worden opgehaald en geformatteerd als JSON. Zorg ervoor dat je geen ander type hebt, anders slaat WordPress de gegevens niet op en geeft het ook geen fout voor je om te debuggen.

Dit alles definiëren we in onze index.js file:

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

OK, dus WordPress weet nu dat de RapidAPI-gegevens die we ophalen een object zijn. Als we een nieuw berichtconcept openen in de WordPress Block Editor en het bericht opslaan, worden de gegevens nu opgeslagen in de database. Sterker nog, als we het kunnen zien in de wp_posts.post_content veld als we de database van de site openen in phpMyAdmin, Sequel Pro, Adminer of welke tool u ook gebruikt.

JSON-gegevens uitvoeren in de front-end

Er zijn meerdere manieren om de gegevens op de front-end uit te voeren. De manier waarop ik je ga laten zien, neemt de attributen die zijn opgeslagen in de database en geeft ze door als een parameter via de render_callback functie in onze football-rankings.php bestand.

Ik hou ervan om de zorgen gescheiden te houden, dus hoe ik dit doe, is door twee nieuwe bestanden toe te voegen aan de blokplug-ins build map: frontend.js en frontend.css (u kunt een maken frontend.scss bestand in de src map die is gecompileerd naar CSS in de build adresboek). Op deze manier zijn de back-end en front-end codes gescheiden en de football-rankings.php bestand is iets gemakkelijker te lezen.

/uitleg Terugverwijzend naar de inleiding tot de ontwikkeling van WordPress-blokken, zijn er: editor.css en style.css bestanden voor back-end en gedeelde stijlen tussen respectievelijk de front- en back-end. Door toe te voegen frontend.scss (die compileert naar frontend.css, kan ik stijlen isoleren die alleen voor de front-end zijn bedoeld.

Voordat we ons zorgen maken over die nieuwe bestanden, noemen we ze als volgt: 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();

}
Aangezien ik de render_callback() methode voor de attributen, ik ga de wachtrij handmatig afhandelen, net als de Handboek Block Editor suggereert. Dat staat in de !is_admin() staat, en zet de twee bestanden in de wachtrij, zodat we ze niet in een wachtrij plaatsen tijdens het gebruik van het editorscherm.
Nu we twee nieuwe bestanden hebben die we bellen, moeten we ervoor zorgen dat we het vertellen npm om ze te compileren. Dus doe dat in package.json, in de scripts sectie:
"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"
},
Een andere manier om de bestanden op te nemen is door ze te definiëren in de blokmetadata in onze block.json bestand zoals opgemerkt in de inleiding tot blokontwikkeling:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
De enige reden waarom ik ga met de package.json methode is omdat ik al gebruik maak van de render_callback() methode.
De JSON-gegevens renderen
In het weergavegedeelte concentreer ik me alleen op een enkel blok. Over het algemeen zou je meerdere blokken aan de voorkant willen targeten. In dat geval moet u gebruik maken van document.querySelectorAll() met de specifieke ID van het blok.
Ik ga eigenlijk wachten tot het venster is geladen en gegevens voor een paar belangrijke objecten uit JSON zijn geladen en deze worden toegepast op een opmaak die ze aan de voorkant weergeeft. Ik ga ook de . omzetten attributes gegevens naar een JSON-object zodat het gemakkelijker is om JavaScript te lezen en de details van JSON in HTML in te stellen voor zaken als het voetbalcompetitielogo, teamlogo's en statistieken.
De kolom 'Laatste 5 wedstrijden' toont het resultaat van de laatste vijf wedstrijden van een team. Ik moet de gegevens ervoor handmatig wijzigen, omdat de API-gegevens in een tekenreeksindeling zijn. Door het naar een array te converteren, kan het in HTML worden gebruikt als een afzonderlijk element voor elk van de laatste vijf wedstrijden van een team.
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 );
  });
});
Wat betreft styling, je bent vrij om te doen wat je wilt! Als je iets wilt om mee te werken, heb ik een volledige set stijlen die je als uitgangspunt kunt gebruiken.
Ik heb dingen in SCSS gestyled sinds de @wordpress/create-block pakket ondersteunt het uit de doos. Rennen npm run start in de opdrachtregel om de SCSS-bestanden te bekijken en ze bij het opslaan naar CSS te compileren. Als alternatief kunt u npm run build bij elke opslag om de SCSS te compileren en de rest van de plug-inbundel te bouwen.


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

Hier is de demo!
Bekijk dat eens - we hebben zojuist een blokplug-in gemaakt die gegevens ophaalt en deze weergeeft aan de voorkant van een WordPress-site.
We hebben een API gevonden, fetch()-ed er gegevens uit, bewaarde het in de WordPress-database, parseerde het en paste het toe op een HTML-opmaak om op de front-end weer te geven. Niet slecht voor een enkele tutorial, toch?
Nogmaals, we kunnen hetzelfde doen, zodat de ranglijsten worden weergegeven in de Block Editor naast de voorkant van het thema. Maar hopelijk als je dit op de voorkant houdt, kun je zien hoe het ophalen van gegevens werkt in een WordPress-blok en hoe de gegevens kunnen worden gestructureerd en weergegeven voor weergave.