Külső API-adatok megjelenítése WordPress-blokkokban a kezelőfelületen

Néhány új oktatóanyag jelent meg itt a CSS-Tricks-ről a WordPress blokkokkal való munkavégzéshez. Egyikük egy bevezető a WordPress blokkok fejlesztésébe, és jó hely a blokkok megismerésére, valamint regisztrálására a WordPressben oldalakon és bejegyzésekben való felhasználás céljából.

Bár a blokk alapjait szépen lefedi ez a bejegyzés, szeretnék még egy lépést előre tenni. Látod, abban a cikkben megtudtuk, mi a különbség a blokkok megjelenítése között a háttér WordPress blokkszerkesztőben és a kezelőfelület témában való megjelenítése között. A példa egy egyszerű Pullquote Block volt, amely mindkét végén más-más tartalmat és stílust jelenített meg.

Menjünk tovább, és nézzük meg a használatát dinamikus tartalom egy WordPress blokkban. Pontosabban, kérjünk le adatokat egy külső API-ból, és jelenítsük meg azokat a kezelőfelületen, amikor egy adott blokkot bedobunk a Blokkszerkesztőbe.

Létre fogunk építeni egy blokkot, amely olyan adatokat ad ki, amelyek a focit mutatják (ö, labdarúgás) rangsor húzva Api-Football.

Egynél több módja is van egy API-nak egy WordPress blokkal való integrálásának! Mivel a blokk alapjairól szóló cikk már végigjárta a blokk elölről történő elkészítésének folyamatát, leegyszerűsítjük a dolgokat a @wordpress/create-block csomagot munkánk indításához és projektünk felépítéséhez.

Blokkbővítményünk inicializálása

Először is: hozzunk létre egy új projektet a parancssorból:

npx @wordpress/create-block football-rankings

Általában úgy indítok egy ilyen projektet, hogy a semmiből készítem a fájlokat, de köszönet a WordPress Core csapatának ezért a praktikus segédprogramért!

Miután a parancs létrehozta a projektmappát, technikailag van egy teljesen működőképes WordPress-blokkunk, amely beépülő modulként van regisztrálva. Tehát menjünk előre, és dobjuk be a projekt mappát a wp-content/plugins könyvtárba, ahová a WordPress telepítve van (valószínűleg a legjobb, ha helyi környezetben dolgozik), majd jelentkezzen be a WordPress adminisztrátorába, és aktiválja azt a Plugins képernyőn.

Most, hogy blokkunkat inicializálták, telepítették és aktiválták, nyissa meg a projekt mappát a címről /wp-content/plugins/football-rankings. Akarni fogod cd ott a parancssorból is, hogy biztosan tudjuk folytatni a fejlesztést.

Jelenleg csak ezekre a fájlokra kell koncentrálnunk:

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

A projekt többi fájlja természetesen fontos, de ezen a ponton nélkülözhetetlenek.

Az API-forrás áttekintése

Már tudjuk, hogy használjuk Api-Football ami jóvoltából érkezik hozzánk RapidAPI. Szerencsére a RapidAPI rendelkezik egy irányítópulttal, amely automatikusan generálja a szükséges szkripteket, amelyekre szükségünk van az API-adatok lekéréséhez a 2021-es Premier League tabellához.

Ha meg szeretné tekinteni a JSON-struktúrát, létrehozhat vizuális megjelenítést a segítségével JSONCrack.

Adatok lekérése a edit.js filé

A RapidAPI kódot becsomagolom a Reagál useEffect() horog üres függőségi tömbbel, így az oldal betöltésekor csak egyszer fut le. Így megakadályozzuk, hogy a WordPress minden alkalommal meghívja az API-t, amikor a Blokkszerkesztő újrarendereli. Ezt segítségével ellenőrizheti wp.data.subscribe() ha érdekel.

Itt van a kód, ahová importálom useEffect(), majd körbetekerjük a fetch() kód, amit a RapidAPI biztosított:

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

Vedd észre, hogy elhagytam a return A funkció nagyjából sértetlen, de tartalmazott egy megjegyzést, amely megerősíti, hogy a futball állása az elülső oldalon jelenik meg. Ebben a cikkben ismét csak a kezelőfelületre fogunk összpontosítani – az adatokat a Blokkszerkesztőben is megjeleníthetjük, de ezt egy másik cikkre hagyjuk, hogy a dolgok koncentráljanak.

API adatok tárolása a WordPressben

Most, hogy lekérjük az adatokat, tárolnunk kell őket valahol a WordPressben. Itt van a attributes.data jól jön a tárgy. Meghatározzuk a data.type mint egy object mivel az adatok lekérése és formázása JSON-ként történik. Győződjön meg arról, hogy nincs más típusa, különben a WordPress nem menti az adatokat, és nem ad semmilyen hibát a hibakereséshez.

Mindezt mi határozzuk meg a mi index.js file:

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

Rendben, a WordPress most már tudja, hogy az általunk beolvasott RapidAPI-adatok egy objektum. Ha megnyitunk egy új bejegyzésvázlatot a WordPress blokkszerkesztőben, és elmentjük a bejegyzést, akkor az adatok az adatbázisban tárolódnak. Sőt, ha láthatjuk a wp_posts.post_content mezőt, ha megnyitjuk az oldal adatbázisát phpMyAdminban, Sequel Pro-ban, Adminerben vagy bármilyen más eszközben.

JSON-adatok kiadása az előtérben

Az adatok előlapon történő kiadásának többféle módja van. Ahogy bemutatom, az adatbázisban tárolt attribútumokat átadja paraméterként a render_callback funkció a miénkben football-rankings.php fájlt.

Szeretem elkülöníteni az aggodalmakat, ezért ezt úgy tehetem meg, hogy két új fájlt adok a blokkbővítményhez. build mappa: frontend.js és a frontend.css (létrehozhat a frontend.scss fájl a src könyvtárban, amely a CSS-be lett fordítva build Könyvtár). Ily módon a háttér- és a front-end kód elkülönül, és a football-rankings.php fájl egy kicsit könnyebben olvasható.

/magyarázat Visszautalva a WordPress blokkfejlesztés bevezetőjére, vannak editor.css és a style.css fájlok a háttérhez és a megosztott stílusokhoz az elülső és a hátsó rész között. Hozzáadásával frontend.scss (ami arra fordít frontend.css, el tudom különíteni azokat a stílusokat, amelyeket csak az előlapra szánnak.

Mielőtt aggódnánk az új fájlok miatt, a következőképpen hívjuk meg őket 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();

}
Mivel én használom a render_callback() metódussal az attribútumokhoz, a sorokat kézzel fogom kezelni, ugyanúgy, mint a A blokkszerkesztő kézikönyv azt javasolja. Ez benne van a !is_admin() feltételt, és sorba állítja a két fájlt, hogy elkerüljük a sorba állítását a szerkesztő képernyő használata közben.
Most, hogy van két új fájl, amit hívunk, meg kell győződnünk arról, hogy elmondjuk npm összeállítani őket. Szóval tedd be package.json, A scripts szakasz:
"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"
},
A fájlok felvételének másik módja az, hogy meghatározzuk őket a blokk-metaadatokban, amelyeket a mi fájlunk tartalmaz block.json fájl ahogy megjegyezték a blokkfejlesztés bevezetőjében:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Az egyetlen ok, amiért a package.json módszer azért van, mert már használom a render_callback() módszer.
JSON-adatok megjelenítése
A leképezési részben csak egyetlen blokkra koncentrálok. Általánosságban elmondható, hogy több blokkot szeretne megcélozni a kezelőfelületen. Ebben az esetben ki kell használni document.querySelectorAll() a blokk specifikus azonosítójával.
Alapvetően megvárom, amíg az ablak betöltődik, és lekéri néhány kulcsfontosságú objektum adatait a JSON-ból, és alkalmazom azokat valamilyen jelölésre, amely az előlapon jeleníti meg őket. Átalakítani is fogom a attributes adatokat egy JSON-objektumba, hogy könnyebben át lehessen olvasni a JavaScriptet, és a részleteket JSON-ról HTML-re állítsa be olyan dolgokhoz, mint a futballliga logója, a csapatlogók és a statisztikák.
Az „Utolsó 5 meccs” oszlop egy csapat utolsó öt mérkőzésének eredményét mutatja. Manuálisan kell módosítanom az adatokat, mivel az API-adatok karakterlánc formátumúak. Ha tömbbé konvertálja, akkor a HTML-ben külön elemként használhatja a csapat utolsó öt mérkőzéséhez.
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 );
  });
});
Ami a stílust illeti, szabadon megtehet, amit akar! Ha szeretnél valamit, amivel dolgozni szeretnél, van egy teljes stíluskészletem, amelyet kiindulási pontként használhatsz.
Azóta stílusoztam dolgokat SCSS-ben @wordpress/create-block csomag támogatja azt a dobozból kivéve. Fuss npm run start a parancssorban, hogy megnézze az SCSS-fájlokat, és mentéskor lefordítsa őket CSS-be. Alternatív megoldásként használhatja npm run build minden mentésnél az SCSS lefordításához és a beépülő modul többi részének elkészítéséhez.


          SCSS megtekintése      
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;
  }
}

Itt a demó!
Nézze meg ezt – most készítettünk egy blokk-bővítményt, amely lekéri az adatokat, és megjeleníti azokat egy WordPress-webhely elülső részén.
Találtunk egy API-t, fetch()-ed adatokat belőle, elmentette a WordPress adatbázisba, elemezte, és alkalmazta néhány HTML-jelölésre, hogy megjelenjen a kezelőfelületen. Nem rossz egyetlen tutorialnak sem, igaz?
Ismét megtehetjük ugyanezt, hogy a rangsor megjelenjen a Blokkszerkesztőben a téma kezelőfelületén kívül. De remélhetőleg ennek a kezelőfelületre való összpontosítása megmutatja, hogyan működik az adatok lekérése egy WordPress blokkban, és hogyan lehet az adatokat strukturálni és megjeleníteni.