Upodabljanje zunanjih podatkov API-ja v blokih WordPress na sprednji strani

Tukaj je bilo nekaj novih vadnic o CSS-Tricks za delo z bloki WordPress. En od njih je uvod v razvoj blokov WordPress in je dobro mesto za učenje blokov in njihovo registracijo v WordPressu za uporabo na straneh in v objavah.

Medtem ko so osnove blokov lepo zajete v tej objavi, želim narediti še en korak naprej. Vidite, v tem članku smo se naučili razlike med upodabljanjem blokov v zalednem urejevalniku blokov WordPress in njihovim upodabljanjem na sprednji temi. Primer je bil preprost blok Pullquote, ki je na vsakem koncu upodobil drugačno vsebino in sloge.

Pojdimo dlje in si oglejmo uporabo dinamična vsebina v bloku WordPress. Natančneje, pridobimo podatke iz zunanjega API-ja in jih upodobimo na sprednji strani, ko je določen blok spuščen v urejevalnik blokov.

Zgradili bomo blok, ki izpisuje podatke, ki prikazujejo nogomet (er, nogomet) uvrstitve, pridobljene iz Api-Nogomet.

Obstaja več načinov za integracijo API-ja z blokom WordPress! Ker je članek o osnovah blokov že predstavil postopek izdelave bloka iz nič, bomo stvari poenostavili z uporabo @wordpress/create-block paket za zagon našega dela in strukturiranje našega projekta.

Inicializacija našega blokovnega vtičnika

Najprej: zaženimo nov projekt iz ukazne vrstice:

npx @wordpress/create-block football-rankings

Običajno bi takšen projekt zagnal tako, da bi datoteke izdelal iz nič, a pohvale WordPress Core ekipi za ta priročen pripomoček!

Ko je mapa projekta ustvarjena z ukazom, imamo tehnično popolnoma funkcionalen WordPress blok, registriran kot vtičnik. Torej, pojdimo naprej in spustimo projektno mapo v wp-content/plugins imenik, kjer imate nameščen WordPress (verjetno je najbolje, da delate v lokalnem okolju), nato se prijavite v skrbnika WordPressa in ga aktivirajte na zaslonu vtičnikov.

Zdaj, ko je naš blok inicializiran, nameščen in aktiviran, nadaljujte in odprite mapo projekta na /wp-content/plugins/football-rankings. Želeli si boste cd tam tudi iz ukazne vrstice, da zagotovimo, da lahko nadaljujemo z razvojem.

To so edine datoteke, na katere se moramo trenutno osredotočiti:

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

Druge datoteke v projektu so seveda pomembne, a na tej točki nepomembne.

Pregled vira API-ja

Že vemo, da uporabljamo Api-Nogomet ki prihaja k nam z dovoljenjem RapidAPI. Na srečo ima RapidAPI nadzorno ploščo, ki samodejno ustvari zahtevane skripte, ki jih potrebujemo za pridobivanje podatkov API za lestvico Premier League 2021.

Če si želite ogledati strukturo JSON, lahko ustvarite vizualno predstavitev z JSONCrack.

Pridobivanje podatkov iz edit.js datoteka

Kodo RapidAPI bom zavil znotraj a Reagirajo useEffect() kljuka s prazno matriko odvisnosti, tako da se zažene samo enkrat, ko se stran naloži. Na ta način WordPressu preprečimo, da bi poklical API vsakič, ko urejevalnik blokov znova upodablja. To lahko preverite z uporabo wp.data.subscribe() če vam je mar.

Tukaj je koda, kamor uvažam useEffect(), nato ga ovijte okoli fetch() koda, ki jo je zagotovil 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" ) }
    
  );
}

Opazite, da sem zapustil return funkcija skoraj nedotaknjena, vendar je vključena opomba, ki potrjuje, da je nogometna lestvica prikazana na sprednji strani. Tudi v tem članku se bomo osredotočili le na sprednji del – podatke bi lahko upodobili tudi v urejevalniku blokov, vendar bomo to pustili za drug članek, da bomo stvari osredotočili.

Shranjevanje podatkov API v WordPress

Zdaj, ko pridobivamo podatke, jih moramo shraniti nekje v WordPressu. Tukaj je attributes.data predmet pride prav. Definiramo data.type kot object ker so podatki pridobljeni in oblikovani kot JSON. Prepričajte se, da nimate nobene druge vrste, sicer WordPress ne bo shranil podatkov, niti ne sproži nobene napake, ki bi jo morali odpraviti.

Vse to definiramo v našem index.js datoteka:

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

V redu, WordPress zdaj ve, da so podatki RapidAPI, ki jih pridobivamo, predmet. Če odpremo nov osnutek objave v urejevalniku blokov WordPress in shranimo objavo, so podatki zdaj shranjeni v bazi podatkov. Pravzaprav, če ga lahko vidimo v wp_posts.post_content polje, če odpremo bazo podatkov spletnega mesta v phpMyAdmin, Sequel Pro, Adminer ali katerem koli orodju, ki ga uporabljate.

Izpis podatkov JSON v sprednjem delu

Obstaja več načinov za izpis podatkov na sprednji strani. Način, ki vam ga bom pokazal, vzame atribute, ki so shranjeni v bazi podatkov, in jih posreduje kot parameter skozi render_callback funkcijo v našem football-rankings.php Datoteka.

Všeč mi je, da ločim pomisleke, zato to naredim tako, da dodam dve novi datoteki v blokovni vtičnik build mapa: frontend.js in frontend.css (lahko ustvarite a frontend.scss datoteko v src imenik, ki je bil preveden v CSS v build imenik). Na ta način sta zaledna in sprednja koda ločeni in football-rankings.php datoteka je nekoliko lažja za branje.

/explanation Če se vrnemo k uvodu v razvoj blokov WordPress, obstajajo editor.css in style.css datoteke za zaledje in sloge v skupni rabi med sprednjim in zadnjim delom. Z dodajanjem frontend.scss (ki se prevede v frontend.css, lahko izoliram sloge, ki so namenjeni le sprednjemu delu.

Preden nas skrbi za te nove datoteke, jih prikličemo tukaj 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();

}
Ker uporabljam render_callback() za atribute, bom čakalno vrsto obravnaval ročno, tako kot Block Editor Handbook predlaga. To je vsebovano v !is_admin() pogoj in postavlja dve datoteki v čakalno vrsto, tako da se izognemo njihovemu postavljanju v čakalno vrsto med uporabo urejevalnega zaslona.
Zdaj, ko imamo dve novi datoteki, ki ju kličemo, se moramo prepričati, da povemo npm jih sestaviti. Torej, naredite to v package.jsonV scripts oddelek:
"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"
},
Drug način za vključitev datotek je, da jih definirate v metapodatkih blokov, ki jih vsebuje naš block.json datoteke, kot je navedeno v uvodu v razvoj blokov:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Edini razlog, da grem z package.json metoda je zato, ker jo že uporabljam render_callback() metoda.
Upodabljanje podatkov JSON
V delu upodabljanja se osredotočam samo na en blok. Na splošno bi želeli ciljati na več blokov na sprednji strani. V tem primeru morate uporabiti document.querySelectorAll() s posebnim ID-jem bloka.
V bistvu bom počakal, da se okno naloži in zgrabi podatke za nekaj ključnih predmetov iz JSON in jih uporabi za neko oznako, ki jih upodobi na sprednji strani. Prav tako bom pretvoril attributes podatke v objekt JSON, tako da je lažje brati skozi JavaScript in nastaviti podrobnosti iz JSON v HTML za stvari, kot so logotip nogometne lige, logotipi ekip in statistika.
Stolpec »Zadnjih 5 tekem« prikazuje rezultat zadnjih petih tekem ekipe. Podatke zanj moram ročno spremeniti, saj so podatki API-ja v obliki niza. Če ga pretvorite v niz, ga lahko uporabite v HTML kot ločen element za vsako od zadnjih petih tekem ekipe.
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 );
  });
});
Kar zadeva stajling, lahko počnete, kar želite! Če želite nekaj za delo, imam celoten nabor slogov, ki jih lahko uporabite kot izhodišče.
Stvari sem oblikoval v SCSS od @wordpress/create-block paket ga podpira takoj po namestitvi. Teči npm run start v ukazni vrstici za ogled datotek SCSS in njihovo prevajanje v CSS ob shranjevanju. Namesto tega lahko uporabite npm run build pri vsakem shranjevanju za prevajanje SCSS in izgradnjo preostalega svežnja vtičnikov.


          Oglejte si 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;
  }
}

Tukaj je demo!
Preverite to – pravkar smo naredili blokovni vtičnik, ki pridobi podatke in jih upodablja na sprednji strani spletnega mesta WordPress.
Našli smo API, fetch()-izdelal podatke iz njega, jih shranil v bazo podatkov WordPress, jih razčlenil in uporabil v nekaterih oznakah HTML za prikaz na sprednji strani. Ni slabo za eno vadnico, kajne?
Spet lahko naredimo isto stvar, tako da se uvrstitve poleg sprednjega dela teme upodobijo v urejevalniku blokov. Upajmo pa, da bo osredotočenost na sprednji del pokazala, kako deluje pridobivanje podatkov v bloku WordPress in kako je mogoče podatke strukturirati in upodobiti za prikaz.