Redarea datelor API externe în blocuri WordPress pe front-end

Au apărut câteva tutoriale noi despre CSS-Tricks pentru lucrul cu blocurile WordPress. Unul din ei este o introducere în dezvoltarea blocurilor WordPress și este un loc bun pentru a afla ce sunt blocurile și pentru a le înregistra în WordPress pentru a fi utilizate în pagini și postări.

În timp ce elementele de bază ale blocului sunt bine acoperite în acea postare, vreau să fac încă un pas înainte. Vedeți, în acel articol, am învățat diferența dintre randarea blocurilor în editorul de blocuri WordPress back-end și redarea lor pe tema front-end. Exemplul a fost un simplu Pullquote Block care a redat conținut și stiluri diferite la fiecare capăt.

Să mergem mai departe și să ne uităm la utilizarea conținut dinamic într-un bloc WordPress. Mai precis, să preluăm date dintr-un API extern și să le redăm pe front-end atunci când un anumit bloc este introdus în Editorul de blocuri.

Vom construi un bloc care scoate date care arată fotbal (eh, fotbal) clasamente extrase din Api-Fotbal.

Există mai multe modalități de a integra un API cu un bloc WordPress! Deoarece articolul despre elementele de bază ale blocurilor a parcurs deja procesul de realizare a unui bloc de la zero, vom simplifica lucrurile folosind @wordpress/create-block pachet pentru a ne porni munca și a ne structura proiectul.

Inițializarea pluginului nostru de blocare

În primul rând, să creăm un nou proiect din linia de comandă:

npx @wordpress/create-block football-rankings

În mod normal, aș da drumul unui proiect ca acesta făcând fișierele de la zero, dar felicitări echipei WordPress Core pentru acest utilitar la îndemână!

Odată ce folderul proiectului a fost creat de comandă, din punct de vedere tehnic avem un bloc WordPress complet funcțional înregistrat ca plugin. Deci, să mergem mai departe și să aruncăm folderul de proiect în wp-content/plugins directorul în care aveți WordPress instalat (probabil cel mai bine să lucrați într-un mediu local), apoi conectați-vă la administratorul WordPress și activați-l din ecranul Plugins.

Acum că blocul nostru este inițializat, instalat și activat, mergeți mai departe și deschideți folderul de proiect de la or /wp-content/plugins/football-rankings. O să vrei cd acolo și din linia de comandă pentru a ne asigura că putem continua dezvoltarea.

Acestea sunt singurele fișiere pe care trebuie să ne concentrăm în acest moment:

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

Celelalte fișiere din proiect sunt importante, desigur, dar sunt neesențiale în acest moment.

Revizuirea sursei API

Știm deja că folosim Api-Fotbal care ne vine prin amabilitatea RapidAPI. Din fericire, RapidAPI are un tablou de bord care generează automat scripturile necesare de care avem nevoie pentru a prelua datele API pentru clasamentul Premier League 2021.

Dacă doriți să aruncați o privire asupra structurii JSON, puteți genera o reprezentare vizuală cu JSONCrack.

Preluarea datelor de la edit.js fişier

Voi împacheta codul RapidAPI într-un Reacţiona useEffect() cârlig cu o matrice de dependențe goală, astfel încât să ruleze o singură dată când pagina este încărcată. În acest fel, împiedicăm WordPress să apeleze API-ul de fiecare dată când Editorul de blocuri redă din nou. Puteți verifica asta folosind wp.data.subscribe() dacă îți pasă.

Iată codul pe care îl import useEffect(), apoi înfășurându-l în jurul fetch() codul furnizat de 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" ) }
    
  );
}

Observați că am părăsit return Funcționează aproape intactă, dar au inclus o notă care confirmă că clasamentul de fotbal este redat pe partea din față. Din nou, ne vom concentra doar pe front-end în acest articol - am putea reda datele și în Editorul de blocuri, dar le vom lăsa pentru un alt articol pentru a menține lucrurile concentrate.

Stocarea datelor API în WordPress

Acum că preluăm date, trebuie să le stocăm undeva în WordPress. Aici este locul attributes.data obiectul este util. Noi definim data.type ca o object deoarece datele sunt preluate și formatate ca JSON. Asigurați-vă că nu aveți niciun alt tip, altfel WordPress nu va salva datele și nici nu aruncă nicio eroare pentru a vă depana.

Noi definim toate acestea în nostru index.js fișier:

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

OK, deci WordPress știe acum că datele RapidAPI pe care le preluăm sunt un obiect. Dacă deschidem o nouă schiță de postare în WordPress Block Editor și salvăm postarea, datele sunt acum stocate în baza de date. De fapt, dacă îl putem vedea în wp_posts.post_content câmp dacă deschidem baza de date a site-ului în phpMyAdmin, Sequel Pro, Adminer sau orice instrument pe care îl utilizați.

Ieșirea datelor JSON în front-end

Există mai multe moduri de a scoate datele pe front end. Modul în care vă voi arăta ia atributele care sunt stocate în baza de date și le transmite ca parametru prin render_callback funcţia în nostru football-rankings.php fișier.

Îmi place să păstrez o separare a preocupărilor, așa că modul în care fac asta este să adaug două fișiere noi la pluginul de blocare. build pliant: frontend.js și frontend.css (puteți crea un frontend.scss de fișier în src directorul care a fost compilat în CSS în build director). În acest fel, codurile back-end și front-end sunt separate și football-rankings.php fișierul este puțin mai ușor de citit.

/explicație Referindu-ne la introducerea în dezvoltarea blocurilor WordPress, există editor.css și style.css fișiere pentru back-end și stiluri partajate între front și, respectiv, back-end. Prin adăugarea frontend.scss (care se compilează la frontend.css, pot izola stiluri care sunt destinate doar pentru front-end.

Înainte de a ne face griji cu privire la aceste fișiere noi, iată cum le numim 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();

}
Din moment ce folosesc render_callback() metoda pentru atribute, voi gestiona coada manual la fel ca Block Editor Manual sugerează. Asta este conținut în !is_admin() condiție și pune în coadă cele două fișiere, astfel încât să evităm să le punem în coadă în timp ce folosim ecranul editor.
Acum că avem două fișiere noi pe care le apelăm, trebuie să ne asigurăm că spunem npm pentru a le compila. Deci, fă asta în package.json, În scripts secțiune:
"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"
},
O altă modalitate de a include fișierele este să le definiți în metadatele bloc conținute în nostru block.json fişier, după cum s-a remarcat în introducerea în dezvoltarea blocurilor:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Singurul motiv pentru care merg cu package.json metoda este pentru că deja folosesc render_callback() metodă.
Redarea datelor JSON
În partea de randare, mă concentrez doar pe un singur bloc. În general, ați dori să vizați mai multe blocuri pe front-end. În acest caz, trebuie să utilizați document.querySelectorAll() cu ID-ul specific blocului.
Practic, voi aștepta ca fereastra să încarce și să preia date pentru câteva obiecte cheie din JSON și să le aplic la un marcaj care le redă pe front-end. De asemenea, voi converti attributes date la un obiect JSON, astfel încât să fie mai ușor să citiți prin JavaScript și să setați detaliile din JSON în HTML pentru lucruri precum sigla ligii de fotbal, siglele echipei și statistici.
Coloana „Ultimele 5 jocuri” arată rezultatul ultimelor cinci meciuri ale unei echipe. Trebuie să modific manual datele pentru el, deoarece datele API sunt într-un format șir. Convertirea acestuia într-o matrice poate ajuta la utilizarea lui în HTML ca element separat pentru fiecare dintre ultimele cinci meciuri ale unei echipe.
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 );
  });
});
În ceea ce privește stilul, ești liber să faci ce vrei! Dacă vrei să lucrezi cu ceva, am un set complet de stiluri pe care le poți folosi ca punct de plecare.
Am stilat lucrurile în SCSS încă din @wordpress/create-block pachetul îl susține din cutie. Alerga npm run start în linia de comandă pentru a viziona fișierele SCSS și a le compila în CSS la salvare. Alternativ, puteți utiliza npm run build la fiecare salvare pentru a compila SCSS și a construi restul pachetului de pluginuri.


          Vizualizați 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;
  }
}

Iată demo-ul!
Verificați asta - tocmai am creat un plugin de bloc care preia date și le redă pe partea frontală a unui site WordPress.
Am găsit un API, fetch()-ed date din acesta, le-a salvat în baza de date WordPress, le-a analizat și le-a aplicat unor markup HTML pentru a fi afișate pe front-end. Nu-i rău pentru un singur tutorial, nu?
Din nou, putem face același lucru, astfel încât clasamentele să fie afișate în Editorul de blocuri, pe lângă front-end-ul temei. Dar, sperăm că păstrarea acestui lucru concentrat pe front-end vă arată cum funcționează preluarea datelor într-un bloc WordPress și cum datele pot fi structurate și redate pentru afișare.