Rendern von externen API-Daten in WordPress-Blöcken im Frontend

Hier sind einige neue Tutorials zu CSS-Tricks für die Arbeit mit WordPress-Blöcken aufgetaucht. Einer von ihnen ist eine Einführung in die Entwicklung von WordPress-Blöcken und ein guter Ort, um zu lernen, was Blöcke sind, und um sie in WordPress für die Verwendung in Seiten und Beiträgen zu registrieren.

Während die Blockgrundlagen in diesem Beitrag gut behandelt werden, möchte ich einen weiteren Schritt nach vorne machen. Sie sehen, in diesem Artikel haben wir den Unterschied zwischen dem Rendern von Blöcken im Back-End-WordPress-Blockeditor und dem Rendern im Front-End-Theme gelernt. Das Beispiel war ein einfacher Pullquote-Block, der an jedem Ende unterschiedliche Inhalte und Stile darstellte.

Lassen Sie uns weiter gehen und uns die Verwendung ansehen dynamischer Inhalt in einem WordPress-Block. Lassen Sie uns genauer gesagt Daten von einer externen API abrufen und auf dem Frontend rendern, wenn ein bestimmter Block in den Blockeditor abgelegt wird.

Wir werden einen Block bauen, der Daten ausgibt, die Fußball zeigen (äh, Fußball) Rankings gezogen Api-Fußball.

Es gibt mehr als eine Möglichkeit, eine API mit einem WordPress-Block zu integrieren! Da der Artikel über Blockgrundlagen bereits den Prozess zum Erstellen eines Blocks von Grund auf durchlaufen hat, werden wir die Dinge vereinfachen, indem wir die verwenden @wordpress/create-block Paket, um unsere Arbeit zu starten und unser Projekt zu strukturieren.

Initialisieren unseres Block-Plugins

Das Wichtigste zuerst: Lassen Sie uns ein neues Projekt über die Befehlszeile starten:

npx @wordpress/create-block football-rankings

Normalerweise würde ich ein solches Projekt starten, indem ich die Dateien von Grund auf neu erstelle, aber ein großes Lob an das WordPress Core-Team für dieses praktische Dienstprogramm!

Sobald der Projektordner durch den Befehl erstellt wurde, haben wir technisch gesehen einen voll funktionsfähigen WordPress-Block als Plugin registriert. Lassen Sie uns also fortfahren und den Projektordner in die wp-content/plugins Verzeichnis, in dem Sie WordPress installiert haben (wahrscheinlich am besten, wenn Sie in einer lokalen Umgebung arbeiten), melden Sie sich dann beim WordPress-Administrator an und aktivieren Sie es über den Plugins-Bildschirm.

Nachdem unser Block initialisiert, installiert und aktiviert wurde, öffnen Sie den Projektordner von at /wp-content/plugins/football-rankings. Du wirst wollen cd dort auch von der Befehlszeile aus, um sicherzustellen, dass wir die Entwicklung fortsetzen können.

Dies sind die einzigen Dateien, auf die wir uns im Moment konzentrieren müssen:

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

Die anderen Dateien im Projekt sind natürlich wichtig, aber an dieser Stelle unwesentlich.

Überprüfung der API-Quelle

Wir wissen bereits, dass wir verwenden Api-Fußball die uns freundlicherweise zur Verfügung gestellt wird RapidAPI. Glücklicherweise verfügt RapidAPI über ein Dashboard, das automatisch die erforderlichen Skripte generiert, die wir zum Abrufen der API-Daten für die Premier League-Tabelle 2021 benötigen.

Wenn Sie sich die JSON-Struktur ansehen möchten, können Sie mit eine visuelle Darstellung erstellen JSONCrack.

Abrufen von Daten aus der edit.js Datei

Ich werde den RapidAPI-Code in a einschließen Reagieren useEffect() Haken mit einem leeren Abhängigkeitsarray, sodass es nur einmal ausgeführt wird, wenn die Seite geladen wird. Auf diese Weise verhindern wir, dass WordPress die API jedes Mal aufruft, wenn der Block-Editor erneut gerendert wird. Das kannst du mit überprüfen wp.data.subscribe() wenn es dir wichtig ist.

Hier ist der Code, in den ich importiere useEffect(), dann wickeln Sie es um die fetch() Code, den RapidAPI bereitgestellt hat:

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

Beachten Sie, dass ich die verlassen habe return funktionieren ziemlich intakt, haben aber eine Notiz beigefügt, die bestätigt, dass die Fußballtabellen auf dem Frontend gerendert werden. Auch hier werden wir uns in diesem Artikel nur auf das Frontend konzentrieren – wir könnten die Daten auch im Blockeditor rendern, aber wir überlassen dies einem anderen Artikel, um die Dinge auf den Punkt zu bringen.

API-Daten in WordPress speichern

Jetzt, da wir Daten abrufen, müssen wir sie irgendwo in WordPress speichern. Hier ist die attributes.data Objekt ist praktisch. Wir definieren die data.type als object da die Daten abgerufen und als JSON formatiert werden. Stellen Sie sicher, dass Sie keinen anderen Typ haben, sonst speichert WordPress die Daten nicht und gibt auch keinen Fehler zum Debuggen aus.

All dies definieren wir in unserem index.js Datei:

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

OK, also weiß WordPress jetzt, dass die RapidAPI-Daten, die wir abrufen, ein Objekt sind. Wenn wir einen neuen Post-Entwurf im WordPress-Block-Editor öffnen und den Post speichern, werden die Daten nun in der Datenbank gespeichert. In der Tat, wenn wir es in der sehen können wp_posts.post_content Feld, wenn wir die Datenbank der Site in phpMyAdmin, Sequel Pro, Adminer oder einem anderen von Ihnen verwendeten Tool öffnen.

Ausgabe von JSON-Daten im Frontend

Es gibt mehrere Möglichkeiten, die Daten am Frontend auszugeben. Der Weg, den ich Ihnen zeigen werde, nimmt die Attribute, die in der Datenbank gespeichert sind, und übergibt sie als Parameter durch die render_callback Funktion in unserem football-rankings.php Datei.

Ich mag es, Bedenken zu trennen, also füge ich zwei neue Dateien zu den Block-Plugins hinzu build Ordner: frontend.js und frontend.css (Sie können eine erstellen frontend.scss Datei in das src Verzeichnis, das zu CSS in der kompiliert wurde build Verzeichnis). Auf diese Weise sind die Back-End- und Front-End-Codes getrennt und die football-rankings.php Datei ist etwas einfacher zu lesen.

/explanation Um auf die Einführung in die WordPress-Blockentwicklung zurückzukommen, gibt es editor.css und style.css Dateien für Back-End- und gemeinsam genutzte Stile zwischen Front- und Back-End. Beim Hinzufügen frontend.scss (was kompiliert zu frontend.css, kann ich Stile isolieren, die nur für das Frontend gedacht sind.

Bevor wir uns um diese neuen Dateien kümmern, rufen wir sie wie folgt auf 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();

}
Da ich das benutze render_callback() -Methode für die Attribute, werde ich die Enqueue genauso manuell behandeln wie die Block Editor Handbook schlägt vor. Das ist in enthalten !is_admin() Bedingung und stellt die beiden Dateien in die Warteschlange, damit wir sie nicht in die Warteschlange stellen, während wir den Editor-Bildschirm verwenden.
Jetzt, da wir zwei neue Dateien haben, die wir aufrufen, müssen wir sicherstellen, dass wir es sagen npm sie zu kompilieren. Also, mach das rein package.jsonIn der scripts Abschnitt:
"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"
},
Eine andere Möglichkeit, die Dateien einzubinden, besteht darin, sie in den Blockmetadaten zu definieren, die in unserer enthalten sind block.json Datei, wie angegeben in der Einführung in die Blockentwicklung:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Der einzige Grund, warum ich mit dem gehe package.json Methode liegt daran, dass ich die bereits verwende render_callback() Methode.
Rendern der JSON-Daten
Beim Rendern konzentriere ich mich nur auf einen einzigen Block. Im Allgemeinen möchten Sie mehrere Blöcke am Frontend anvisieren. In diesem Fall müssen Sie Gebrauch machen document.querySelectorAll() mit der spezifischen ID des Blocks.
Ich werde im Grunde warten, bis das Fenster geladen ist, und Daten für einige wichtige Objekte aus JSON abrufen und sie auf ein Markup anwenden, das sie am Frontend rendert. Die werde ich auch umbauen attributes Daten in ein JSON-Objekt, damit es einfacher ist, das JavaScript zu lesen und die Details von JSON zu HTML für Dinge wie das Logo der Fußballliga, Mannschaftslogos und Statistiken festzulegen.
Die Spalte „Letzte 5 Spiele“ zeigt das Ergebnis der letzten fünf Spiele einer Mannschaft. Ich muss die Daten dafür manuell ändern, da die API-Daten in einem Zeichenfolgenformat vorliegen. Die Umwandlung in ein Array kann helfen, es in HTML als separates Element für jedes der letzten fünf Spiele eines Teams zu verwenden.
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 );
  });
});
Was das Styling betrifft, können Sie tun, was Sie wollen! Wenn Sie mit etwas arbeiten möchten, habe ich eine ganze Reihe von Stilen, die Sie als Ausgangspunkt verwenden können.
Ich habe die Dinge seit dem in SCSS gestaltet @wordpress/create-block Paket unterstützt es von Haus aus. Laufen npm run start in der Befehlszeile, um die SCSS-Dateien zu beobachten und sie beim Speichern in CSS zu kompilieren. Alternativ können Sie verwenden npm run build bei jedem Speichern, um das SCSS zu kompilieren und den Rest des Plugin-Pakets zu erstellen.


          SCSS ansehen      
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;
  }
}

Hier ist die Demo!
Schauen Sie sich das an – wir haben gerade ein Block-Plugin erstellt, das Daten abruft und auf dem Frontend einer WordPress-Site rendert.
Wir haben eine API gefunden, fetch()-ed-Daten daraus, speicherte sie in der WordPress-Datenbank, analysierte sie und wendete sie auf HTML-Markup an, um sie auf dem Frontend anzuzeigen. Nicht schlecht für ein einzelnes Tutorial, oder?
Auch hier können wir das Gleiche tun, damit die Rankings im Blockeditor zusätzlich zum Frontend des Themes gerendert werden. Aber hoffentlich zeigt Ihnen die Konzentration auf das Frontend, wie das Abrufen von Daten in einem WordPress-Block funktioniert und wie die Daten strukturiert und für die Anzeige gerendert werden können.