Väliste API andmete renderdamine esiküljel olevates WordPressi plokkides

Siin on CSS-trikkide kohta ilmunud mõned uued õpetused WordPressi plokkidega töötamiseks. Üks nendest on sissejuhatus WordPressi plokkide arendamisse ja see on hea koht, kus õppida, mis on plokid, ning registreerida need WordPressis kasutamiseks lehtedel ja postitustes.

Kuigi ploki põhitõed on selles postituses kenasti käsitletud, tahan ma astuda veel ühe sammu edasi. Näete, selles artiklis saime teada, mis vahe on plokkide renderdamisel WordPressi plokiredaktori taustaprogrammis ja nende renderdamisel esiotsa teemal. Näide oli lihtne Pullquote Block, mis renderdas mõlemas otsas erineva sisu ja stiili.

Läheme kaugemale ja vaatame kasutamist dünaamiline sisu WordPressi plokis. Täpsemalt toome andmed välisest API-st ja renderdame need esiotsas, kui konkreetne plokk plokiredaktorisse kukub.

Ehitame ploki, mis väljastab jalgpalli kohta andmeid (ee, jalgpall) paremusjärjestusest tõmmatud Api-Jalgpall.

API integreerimiseks WordPressi plokiga on rohkem kui üks viis! Kuna plokkide põhitõdesid käsitlev artikkel on juba läbinud ploki loomise protsessi nullist, lihtsustame asju, kasutades @wordpress/create-block pakett meie töö käivitamiseks ja projekti struktureerimiseks.

Meie blokeerimisplugina lähtestamine

Esimesed asjad kõigepealt: keerutame käsurealt uue projekti:

npx @wordpress/create-block football-rankings

Tavaliselt käivitaksin sellise projekti, tehes failid nullist, kuid au WordPress Core'i meeskonnale selle käepärase utiliidi eest!

Kui projekti kaust on käsuga loodud, on meil tehniliselt täisfunktsionaalne WordPressi plokk registreeritud pistikprogrammina. Niisiis, lähme edasi ja kukutage projekti kaust kausta wp-content/plugins kataloog, kuhu teil on WordPress installitud (tõenäoliselt on kõige parem töötada kohalikus keskkonnas), seejärel logige sisse WordPressi administraatorisse ja aktiveerige see pistikprogrammide ekraanil.

Nüüd, kui meie plokk on lähtestatud, installitud ja aktiveeritud, minge edasi ja avage projekti kaust aadressilt /wp-content/plugins/football-rankings. Sa hakkad tahtma cd seal ka käsurealt, et olla kindel, et saame arendust jätkata.

Need on ainsad failid, millele peame hetkel keskenduma:

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

Teised projekti failid on loomulikult olulised, kuid praegusel hetkel ebaolulised.

API allika ülevaatamine

Teame juba, et kasutame Api-Jalgpall mis jõuab meieni viisakalt RapidAPI. Õnneks on RapidAPI-l armatuurlaud, mis genereerib automaatselt vajalikud skriptid, mida vajame API andmete toomiseks 2021. aasta Premier League'i edetabeli jaoks.

Kui soovite vaadata JSON-i struktuuri, saate luua visuaalse esituse JSONCrack.

Andmete toomine saidilt edit.js fail

Mähkin RapidAPI koodi lahtrisse a Reageerima useEffect() konks tühja sõltuvusmassiiviga, nii et seda käitatakse lehe laadimisel ainult üks kord. Nii takistame WordPressil API-le helistamast iga kord, kui Block Editor uuesti renderdab. Saate seda kontrollida kasutades wp.data.subscribe() kui sa hoolid.

Siin on kood, kuhu ma impordin useEffect(), seejärel mähkides selle ümber fetch() kood, mille RapidAPI andis:

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

Pange tähele, et olen lahkunud return funktsioon on peaaegu terve, kuid on lisatud märkus, mis kinnitab, et jalgpalli edetabel on esiotsas. Jällegi keskendume selles artiklis ainult esiotsale – saaksime andmeid renderdada ka plokiredaktoris, kuid jätame selle mõne teise artikli jaoks, et asjad keskenduksid.

API andmete salvestamine WordPressis

Nüüd, kui me andmeid toome, peame need kuskil WordPressis salvestama. See on koht, kus attributes.data objekt tuleb kasuks. Me määratleme data.type nagu object kuna andmed tuuakse ja vormindatakse JSON-ina. Veenduge, et teil pole muud tüüpi, vastasel juhul ei salvesta WordPress andmeid ega anna silumiseks tõrkeid.

Me määratleme selle kõik oma index.js faili:

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

OK, nii et WordPress teab nüüd, et toodavad RapidAPI andmed on objekt. Kui avame WordPressi plokiredaktoris uue postituse mustandi ja salvestame postituse, salvestatakse andmed nüüd andmebaasi. Tegelikult, kui me näeme seda wp_posts.post_content väljale, kui avame saidi andmebaasi programmides phpMyAdmin, Sequel Pro, Adminer või mis tahes muus teie kasutatavas tööriistas.

JSON-andmete väljastamine esiotsa

Andmete esiotsale väljastamiseks on mitu võimalust. See, kuidas ma teile näitan, võtab andmebaasi salvestatud atribuudid ja edastab need parameetrina läbi render_callback funktsiooni meie juures football-rankings.php faili.

Mulle meeldib hoida mured lahus, nii et kuidas ma seda teen, lisan plokkpluginasse kaks uut faili build kausta: frontend.js ja frontend.css (saate luua a frontend.scss failil src kataloogis, mis kompileeriti CSS-i build kataloog). Nii on taga- ja esiotsa koodid eraldi ja football-rankings.php faili on veidi lihtsam lugeda.

/selgitus Viidates tagasi WordPressi plokkide arendamise sissejuhatusele, on olemas editor.css ja style.css failid tausta ja jagatud stiilide jaoks vastavalt esi- ja tagaosa vahel. Lisades frontend.scss (mis koostab frontend.css, suudan eraldada stiile, mis on mõeldud ainult esiotsa jaoks.

Enne kui me nende uute failide pärast muretseme, kutsume need sisse järgmiselt 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();

}
Kuna ma kasutan render_callback() atribuutide meetodi puhul käsitlen järjekorda käsitsi nagu ka Plokiredaktori käsiraamat soovitab. See sisaldub !is_admin() tingimusel ja paneb need kaks faili järjekorda, et vältida nende järjekorda panemist redaktoriekraani kasutamise ajal.
Nüüd, kui meil on kaks uut faili, millele helistame, peame veenduma, et räägime npm nende koostamiseks. Nii et tehke seda sisse package.json, Mis scripts lõik:
"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"
},
Teine võimalus failide kaasamiseks on määratleda need meie ploki metaandmetes block.json faili nagu märgitud plokkide arendamise sissejuhatuses:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Ainus põhjus, miks ma kaasa lähen package.json meetod on sellepärast, et ma juba kasutan render_callback() meetod.
JSON-andmete renderdamine
Renderdusosas keskendun ainult ühele plokile. Üldiselt võiksite sihtida mitut esiotsa plokki. Sel juhul peate kasutama document.querySelectorAll() ploki spetsiifilise ID-ga.
Põhimõtteliselt ootan, kuni aken laadib ja haarab mõne JSON-i võtmeobjekti andmed ning rakendan need mõnele märgistusele, mis need esiotsas renderdab. Ma kavatsen ka teisendada attributes andmed JSON-objekti, et oleks lihtsam JavaScripti läbi lugeda ja JSON-ist HTML-i üksikasju seada näiteks jalgpalliliiga logo, meeskondade logode ja statistika jaoks.
Veerg "Viimased 5 mängu" näitab meeskonna viimase viie mängu tulemusi. Pean selle andmeid käsitsi muutma, kuna API andmed on stringivormingus. Selle massiiviks teisendamine võib aidata seda kasutada HTML-is eraldi elemendina meeskonna iga viimase viie matši jaoks.
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 );
  });
});
Mis puudutab stiili, siis võite teha kõike, mida soovite! Kui soovite millegagi töötada, on mul täielik komplekt stiile, mida saate lähtepunktina kasutada.
Stiilisin asju SCSS-is alates aastast @wordpress/create-block pakett toetab seda karbist välja võttes. Jookse npm run start käsureal, et vaadata SCSS-faile ja kompileerida need salvestamisel CSS-i. Teise võimalusena võite kasutada npm run build igal salvestamisel SCSS-i kompileerimiseks ja ülejäänud pistikprogrammide komplekti loomiseks.


          Vaadake SCSS-i      
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;
  }
}

Siin on demo!
Kontrollige seda – lõime just plokkplugina, mis toob andmed ja renderdab need WordPressi saidi esiossa.
Leidsime API, fetch()-ed sellest andmed, salvestas need WordPressi andmebaasi, sõelus selle ja rakendas mõnele HTML-i märgistusele esiotsas kuvamiseks. Pole paha ühe õpetuse jaoks, eks?
Jällegi saame teha sama asja, et pingeread renderdaksid lisaks teema esiosale ka plokiredaktoris. Kuid loodetavasti selle esiosale keskendumine näitab teile, kuidas andmete toomine WordPressi plokis toimib ning kuidas andmeid saab struktureerida ja kuvamiseks renderdada.