Ulkoisten API-tietojen renderöinti käyttöliittymän WordPress-lohkoissa

Täällä on ilmestynyt uusia opetusohjelmia CSS-Tricksistä WordPress-lohkojen kanssa työskentelemiseen. Yksi heistä on johdatus WordPress-lohkokehitykseen ja se on hyvä paikka oppia mitä lohkot ovat ja rekisteröidä ne WordPressissä käytettäväksi sivuilla ja postauksissa.

Vaikka lohkon perusteet on käsitelty hienosti tuossa viestissä, haluan ottaa sen uuden askeleen eteenpäin. Tässä artikkelissa opimme eron lohkojen renderöinnin välillä WordPress Block Editorissa ja niiden renderöimisen välillä käyttöliittymäteemassa. Esimerkki oli yksinkertainen Pullquote Block, joka renderöi eri sisältöä ja tyylejä molemmissa päissä.

Mennään pidemmälle ja katsotaan käyttöä dynaaminen sisältö WordPress-lohkossa. Tarkemmin sanottuna noudetaan tiedot ulkoisesta API:sta ja renderöidään ne käyttöliittymässä, kun tietty lohko pudotetaan lohkoeditoriin.

Aiomme rakentaa lohkon, joka tulostaa tietoja, jotka näyttävät jalkapallon (er, jalkapallo) rankingista vedettynä Api-jalkapallo.

On olemassa useampi kuin yksi tapa integroida API WordPress-lohkoon! Koska lohkon perusteita käsittelevä artikkeli on jo käynyt läpi lohkon tekemisen tyhjästä, aiomme yksinkertaistaa asioita käyttämällä @wordpress/create-block paketti käynnistää työmme ja jäsentää projektimme.

Alustetaan estolaajennusta

Ensimmäiset asiat ensin: kehitetään uusi projekti komentoriviltä:

npx @wordpress/create-block football-rankings

Yleensä aloitan tällaisen projektin tekemällä tiedostot tyhjästä, mutta kiitos WordPress Core -tiimille tästä kätevästä apuohjelmasta!

Kun projektikansio on luotu komennolla, meillä on teknisesti täysin toimiva WordPress-lohko rekisteröitynä pluginiksi. Joten mennään eteenpäin ja pudotetaan projektikansio kansioon wp-content/plugins hakemistoon, johon olet asentanut WordPressin (todennäköisesti parasta työskennellä paikallisessa ympäristössä), kirjaudu sitten WordPress-järjestelmänvalvojaan ja aktivoi se Plugins-näytöstä.

Nyt kun lohkomme on alustettu, asennettu ja aktivoitu, siirry eteenpäin ja avaa projektikansio osoitteessa at /wp-content/plugins/football-rankings. Aiot haluta cd siellä myös komentoriviltä varmistaaksemme, että voimme jatkaa kehitystä.

Nämä ovat ainoat tiedostot, joihin meidän on keskityttävä tällä hetkellä:

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

Muut projektin tiedostot ovat tietysti tärkeitä, mutta ne ovat tässä vaiheessa välttämättömiä.

API-lähdettä tarkistetaan

Tiedämme jo, että käytämme Api-jalkapallo joka tulee meille kohteliaasti RapidAPI. Onneksi RapidAPI:lla on kojelauta, joka luo automaattisesti tarvittavat komentosarjat, joita tarvitsemme API-tietojen hakemiseksi vuoden 2021 Premier Leaguen sijoituksia varten.

Jos haluat tarkastella JSON-rakennetta, voit luoda visuaalisen esityksen JSONCrack.

Haetaan tietoja kohteesta edit.js tiedosto

Aion kääriä RapidAPI-koodin sisään a suhtautua useEffect() koukku tyhjällä riippuvuustaulukolla niin, että se suoritetaan vain kerran, kun sivu ladataan. Tällä tavalla estämme WordPressiä kutsumasta API:ta joka kerta, kun Block Editor hahmontaa uudelleen. Voit tarkistaa sen käyttämällä wp.data.subscribe() jos välität.

Tässä on koodi, johon tuon useEffect(), ja kääri se sitten sen ympärille fetch() RapidAPI:n antama koodi:

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

Huomaa, että olen jättänyt return toiminnot ovat melko ennallaan, mutta niihin on lisätty huomautus, joka vahvistaa, että jalkapallon sijoitukset esitetään etuosassa. Tässäkin artikkelissa keskitymme vain käyttöliittymään – voisimme renderöidä tiedot myös Block Editorissa, mutta jätämme sen toiselle artikkelille, jotta asiat keskittyvät.

API-tietojen tallentaminen WordPressiin

Nyt kun haemme tietoja, meidän on tallennettava ne jonnekin WordPressiin. Tässä on attributes.data esine tulee tarpeeseen. Me määrittelemme data.type kuin object koska tiedot haetaan ja muotoillaan JSON-muodossa. Varmista, että sinulla ei ole muuta tyyppiä, muuten WordPress ei tallenna tietoja eikä aiheuta virheitä virheenkorjaukseen.

Määrittelemme tämän kaiken omassamme index.js tiedosto:

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

OK, joten WordPress tietää nyt, että hakemamme RapidAPI-tiedot ovat objekti. Jos avaamme uuden tekstiluonnoksen WordPress Block Editorissa ja tallennamme viestin, tiedot tallennetaan nyt tietokantaan. Itse asiassa, jos voimme nähdä sen wp_posts.post_content kenttään, jos avaamme sivuston tietokannan phpMyAdminissa, Sequel Prossa, Adminerissa tai missä tahansa käyttämässäsi työkalussa.

Tulostetaan JSON-tietoja käyttöliittymässä

On olemassa useita tapoja tulostaa tiedot käyttöliittymään. Tapa, jonka aion näyttää sinulle, ottaa tietokantaan tallennetut attribuutit ja välittää ne parametrina render_callback toimi meillä football-rankings.php tiedosto.

Pidän huolenaiheiden erottamisesta, joten teen tämän lisäämällä kaksi uutta tiedostoa estolaajennukseen. build kansio: frontend.js ja frontend.css (voit luoda a frontend.scss Tiedosto src hakemistoon, joka on käännetty CSS:ään build hakemisto). Tällä tavalla tausta- ja käyttöliittymäkoodit ovat erillisiä ja football-rankings.php tiedosto on hieman helpompi lukea.

/selitys Viitaten WordPress-lohkokehityksen johdatukseen, on olemassa editor.css ja style.css tiedostot tausta- ja jaetuille tyyleille etu- ja takapään välillä, vastaavasti. Lisäämällä frontend.scss (joka kokoaa frontend.css, voin eristää tyylejä, jotka on tarkoitettu vain käyttöliittymään.

Ennen kuin huolehdimme uusista tiedostoista, kutsumme niitä seuraavasti 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();

}
Koska käytän render_callback() attribuuttien menetelmää, aion käsitellä jonoa manuaalisesti, kuten Lohkoeditorin käsikirja ehdottaa. Se sisältyy !is_admin() ehto, ja asettaa kaksi tiedostoa jonoon, jotta vältämme niiden jonottamisen muokkausnäyttöä käytettäessä.
Nyt kun meillä on kaksi uutta tiedostoa, joihin soitamme, meidän on varmistettava, että kerromme npm koota niitä. Joten tee se sisään package.json, Ja scripts jakso:
"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"
},
Toinen tapa sisällyttää tiedostot on määrittää ne lohkon metatietoihin, jotka sisältyvät meidän block.json tiedosto, kuten todettiin lohkokehityksen johdannossa:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Ainoa syy miksi lähden mukaan package.json menetelmä johtuu siitä, että käytän jo render_callback() menetelmällä.
Renderöidään JSON-tietoja
Renderöintiosassa keskityn vain yhteen lohkoon. Yleisesti ottaen haluat kohdistaa useisiin lohkoihin etuosassa. Siinä tapauksessa sinun on käytettävä document.querySelectorAll() lohkon erityisellä tunnuksella.
Pohjimmiltaan aion odottaa, että ikkuna lataa ja nappaa muutaman avainobjektin tiedot JSONista ja käytän niitä joihinkin merkintöihin, jotka hahmontavat ne etupäässä. Aion myös muuntaa attributes tiedot JSON-objektiin, jotta on helpompi lukea JavaScriptiä ja asettaa tiedot JSONista HTML:ään esimerkiksi jalkapalloliigan logon, joukkueiden logojen ja tilastojen osalta.
"Viimeiset 5 peliä" -sarake näyttää joukkueen viiden viimeisen ottelun tulokset. Minun on muutettava sen tietoja manuaalisesti, koska API-tiedot ovat merkkijonomuodossa. Sen muuntaminen taulukoksi voi auttaa hyödyntämään sitä HTML:ssä erillisenä elementtinä jokaisessa joukkueen viidestä viimeisestä ottelusta.
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 );
  });
});
Mitä tyyliin tulee, voit vapaasti tehdä mitä haluat! Jos haluat työskennellä jonkin kanssa, minulla on täydellinen valikoima tyylejä, joita voit käyttää lähtökohtana.
Olen tyylistänyt asioita SCSS:ssä vuodesta lähtien @wordpress/create-block paketti tukee sitä pakkauksesta. Juosta npm run start komentorivillä katsellaksesi SCSS-tiedostoja ja kääntääksesi ne CSS:ksi tallennuksen yhteydessä. Vaihtoehtoisesti voit käyttää npm run build jokaisessa tallennuksessa kääntääksesi SCSS:n ja rakentaaksesi muun laajennuspaketin.


          Näytä 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;
  }
}

Tässä on demo!
Tarkista asia – teimme juuri lohkolaajennuksen, joka hakee tiedot ja hahmontaa ne WordPress-sivuston etupäässä.
Löysimme API, fetch()-edi siitä tiedot, tallensi sen WordPress-tietokantaan, jäsensi sen ja käytti sitä joihinkin HTML-merkintöihin etupäässä näytettäväksi. Ei paha yhdelle opetusohjelmalle, eikö niin?
Jälleen voimme tehdä samanlaisen asian niin, että sijoitukset näkyvät lohkoeditorissa teeman käyttöliittymän lisäksi. Mutta toivottavasti tämän keskittyminen käyttöliittymään näyttää sinulle, kuinka tietojen hakeminen toimii WordPress-lohkossa ja kuinka tiedot voidaan jäsentää ja renderöidä näyttöä varten.