Απόδοση εξωτερικών δεδομένων API σε μπλοκ WordPress στο Front End

Έχουν εμφανιστεί μερικά νέα σεμινάρια σχετικά με τα CSS-Tricks για την εργασία με μπλοκ WordPress. Ενας από αυτούς είναι μια εισαγωγή στην ανάπτυξη μπλοκ WordPress και είναι ένα καλό μέρος για να μάθετε τι είναι τα μπλοκ και να τα καταχωρήσετε στο WordPress για χρήση σε σελίδες και αναρτήσεις.

Αν και τα βασικά στοιχεία του μπλοκ καλύπτονται όμορφα σε αυτήν την ανάρτηση, θέλω να το κάνω ένα ακόμη βήμα μπροστά. Βλέπετε, σε αυτό το άρθρο, μάθαμε τη διαφορά μεταξύ της απόδοσης μπλοκ στον επεξεργαστή μπλοκ WordPress back-end και της απόδοσής τους στο θέμα της διεπαφής. Το παράδειγμα ήταν ένα απλό Pullquote Block που απέδιδε διαφορετικό περιεχόμενο και στυλ σε κάθε άκρο.

Ας πάμε παρακάτω και ας δούμε τη χρήση δυναμικό περιεχόμενο σε ένα μπλοκ WordPress. Πιο συγκεκριμένα, ας ανακτήσουμε δεδομένα από ένα εξωτερικό API και ας τα αποδώσουμε στο μπροστινό μέρος όταν ένα συγκεκριμένο μπλοκ απορρίπτεται στο Block Editor.

Θα δημιουργήσουμε ένα μπλοκ που θα εξάγει δεδομένα που δείχνουν ποδόσφαιρο (εε. ποδόσφαιρο) βαθμολογίες από Api-Football.

Υπάρχουν περισσότεροι από ένας τρόποι για να ενσωματώσετε ένα API με ένα μπλοκ WordPress! Δεδομένου ότι το άρθρο για τα βασικά μπλοκ έχει ήδη ακολουθήσει τη διαδικασία δημιουργίας ενός μπλοκ από την αρχή, θα απλοποιήσουμε τα πράγματα χρησιμοποιώντας το @wordpress/create-block πακέτο για την εκκίνηση της δουλειάς μας και τη δομή του έργου μας.

Εκκίνηση της προσθήκης αποκλεισμού μας

Πρώτα πράγματα πρώτα: ας γυρίσουμε ένα νέο έργο από τη γραμμή εντολών:

npx @wordpress/create-block football-rankings

Κανονικά θα ξεκινούσα ένα έργο σαν αυτό φτιάχνοντας τα αρχεία από την αρχή, αλλά συγχαρητήρια στην ομάδα του WordPress Core για αυτό το εύχρηστο βοηθητικό πρόγραμμα!

Μόλις δημιουργηθεί ο φάκελος του έργου από την εντολή, έχουμε τεχνικά ένα πλήρως λειτουργικό μπλοκ WordPress καταχωρισμένο ως πρόσθετο. Λοιπόν, ας προχωρήσουμε και ας αποθέσουμε το φάκελο του έργου στο wp-content/plugins κατάλογο όπου έχετε εγκαταστήσει το WordPress (πιθανότατα είναι καλύτερο να εργάζεστε σε τοπικό περιβάλλον), στη συνέχεια συνδεθείτε στον διαχειριστή του WordPress και ενεργοποιήστε τον από την οθόνη Προσθηκών.

Τώρα που το μπλοκ μας έχει αρχικοποιηθεί, εγκατασταθεί και ενεργοποιηθεί, προχωρήστε και ανοίξτε τον φάκελο του έργου από τη διεύθυνση /wp-content/plugins/football-rankings. Θα θέλεις cd εκεί από τη γραμμή εντολών επίσης για να βεβαιωθούμε ότι μπορούμε να συνεχίσουμε την ανάπτυξη.

Αυτά είναι τα μόνα αρχεία στα οποία πρέπει να εστιάσουμε αυτήν τη στιγμή:

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

Τα άλλα αρχεία του έργου είναι φυσικά σημαντικά, αλλά δεν είναι απαραίτητα σε αυτό το σημείο.

Έλεγχος της πηγής API

Γνωρίζουμε ήδη ότι χρησιμοποιούμε Api-Football που μας έρχεται με ευγένεια RapidAPI. Ευτυχώς, το RapidAPI διαθέτει έναν πίνακα εργαλείων που δημιουργεί αυτόματα τα απαιτούμενα σενάρια που χρειαζόμαστε για να ανακτήσουμε τα δεδομένα API για τη βαθμολογία της Premier League 2021.

Εάν θέλετε να ρίξετε μια ματιά στη δομή JSON, μπορείτε να δημιουργήσετε οπτική αναπαράσταση με JSONCrack.

Λήψη δεδομένων από το edit.js φιλέτο

Θα τυλίξω τον κώδικα RapidAPI μέσα σε ένα Αντίδραση useEffect() άγκιστρο με έναν κενό πίνακα εξαρτήσεων, ώστε να εκτελείται μόνο μία φορά όταν φορτώνεται η σελίδα. Με αυτόν τον τρόπο, αποτρέπουμε το WordPress από το να καλεί το API κάθε φορά που το Block Editor αναπαράγει. Μπορείτε να το ελέγξετε χρησιμοποιώντας wp.data.subscribe() αν σε νοιάζει.

Εδώ είναι ο κωδικός στον οποίο εισάγω useEffect(), στη συνέχεια τυλίγοντας το γύρω από το fetch() κωδικός που παρείχε το 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" ) }
    
  );
}

Παρατηρήστε ότι έχω αφήσει το return λειτουργούν σχεδόν ανέπαφα, αλλά έχουν συμπεριλάβει μια σημείωση που επιβεβαιώνει ότι η βαθμολογία του ποδοσφαίρου αποδίδεται στο μπροστινό μέρος. Και πάλι, θα εστιάσουμε μόνο στο μπροστινό μέρος σε αυτό το άρθρο — θα μπορούσαμε να αποδώσουμε τα δεδομένα και στο Block Editor, αλλά θα το αφήσουμε για ένα άλλο άρθρο για να κρατήσουμε τα πράγματα εστιασμένα.

Αποθήκευση δεδομένων API στο WordPress

Τώρα που λαμβάνουμε δεδομένα, πρέπει να τα αποθηκεύσουμε κάπου στο WordPress. Εδώ είναι που το attributes.data το αντικείμενο είναι χρήσιμο. Ορίζουμε το data.type ως object δεδομένου ότι τα δεδομένα λαμβάνονται και μορφοποιούνται ως JSON. Βεβαιωθείτε ότι δεν έχετε άλλο τύπο, διαφορετικά το WordPress δεν θα αποθηκεύσει τα δεδομένα, ούτε θα σας στείλει κάποιο σφάλμα για εντοπισμό σφαλμάτων.

Όλα αυτά τα ορίζουμε στο δικό μας index.js αρχείο:

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

Εντάξει, έτσι το WordPress γνωρίζει τώρα ότι τα δεδομένα RapidAPI που λαμβάνουμε είναι ένα αντικείμενο. Εάν ανοίξουμε ένα νέο προσχέδιο ανάρτησης στο WordPress Block Editor και αποθηκεύσουμε την ανάρτηση, τα δεδομένα αποθηκεύονται πλέον στη βάση δεδομένων. Στην πραγματικότητα, αν μπορούμε να το δούμε στο wp_posts.post_content πεδίο εάν ανοίξουμε τη βάση δεδομένων του ιστότοπου σε phpMyAdmin, Sequel Pro, Adminer ή οποιοδήποτε εργαλείο χρησιμοποιείτε.

Έξοδος δεδομένων JSON στο μπροστινό μέρος

Υπάρχουν πολλοί τρόποι για την έξοδο των δεδομένων στο μπροστινό μέρος. Ο τρόπος που θα σας δείξω παίρνει τα χαρακτηριστικά που είναι αποθηκευμένα στη βάση δεδομένων και τα μεταβιβάζει ως παράμετρο μέσω του render_callback λειτουργία στο δικό μας football-rankings.php αρχείο.

Μου αρέσει να διαχωρίζω τις ανησυχίες, οπότε πώς να το κάνω αυτό είναι να προσθέσω δύο νέα αρχεία στην προσθήκη μπλοκ build φάκελο: frontend.js και frontend.css (μπορείτε να δημιουργήσετε ένα frontend.scss αρχείο στο src κατάλογο που μεταγλωττίστηκε σε CSS στο build Ευρετήριο). Με αυτόν τον τρόπο, οι κωδικοί του back-end και του front-end είναι ξεχωριστοί και το football-rankings.php το αρχείο είναι λίγο πιο εύκολο στην ανάγνωση.

/explanation Αναφερόμενοι στην εισαγωγή στην ανάπτυξη μπλοκ WordPress, υπάρχουν editor.css και style.css αρχεία για back-end και κοινόχρηστα στυλ μεταξύ του μπροστινού και του πίσω άκρου, αντίστοιχα. Προσθέτοντας frontend.scss (το οποίο μεταγλωττίζεται σε frontend.css, μπορώ να απομονώσω στυλ που προορίζονται μόνο για το μπροστινό μέρος.

Πριν ανησυχήσουμε για αυτά τα νέα αρχεία, ορίστε πώς τα καλούμε 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();

}
Αφού χρησιμοποιώ το render_callback() μέθοδο για τα χαρακτηριστικά, πρόκειται να χειριστώ την ουρά με μη αυτόματο τρόπο όπως ακριβώς και η Το Εγχειρίδιο Block Editor προτείνει. Αυτό περιέχεται στο !is_admin() κατάσταση, και τοποθετεί στην ουρά τα δύο αρχεία έτσι ώστε να αποφύγουμε την ουρά κατά τη χρήση της οθόνης του επεξεργαστή.
Τώρα που έχουμε δύο νέα αρχεία που καλούμε, πρέπει να βεβαιωθούμε ότι τα λέμε npm να τα συντάξει. Λοιπόν, κάντε το μέσα package.json, Στην scripts Ενότητα:
"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"
},
Ένας άλλος τρόπος για να συμπεριλάβετε τα αρχεία είναι να τα ορίσετε στα μεταδεδομένα μπλοκ που περιέχονται στο δικό μας block.json αρχείου, όπως σημειώθηκε στην εισαγωγή στην ανάπτυξη αποκλεισμού:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Ο μόνος λόγος που πάω με το package.json μέθοδος είναι επειδή ήδη κάνω χρήση του render_callback() μέθοδος.
Απόδοση των δεδομένων JSON
Στο κομμάτι της απόδοσης, επικεντρώνομαι μόνο σε ένα μόνο μπλοκ. Σε γενικές γραμμές, θα θέλατε να στοχεύσετε πολλά μπλοκ στο μπροστινό μέρος. Σε αυτή την περίπτωση, πρέπει να το χρησιμοποιήσετε document.querySelectorAll() με το συγκεκριμένο αναγνωριστικό του μπλοκ.
Βασικά θα περιμένω να φορτώσει το παράθυρο και να συλλάβει δεδομένα για μερικά βασικά αντικείμενα από το JSON και να τα εφαρμόσω σε κάποια σήμανση που τα αποδίδει στο μπροστινό μέρος. Επίσης πρόκειται να μετατρέψω το attributes δεδομένα σε ένα αντικείμενο JSON, ώστε να είναι ευκολότερο να διαβαστούν μέσω της JavaScript και να οριστούν οι λεπτομέρειες από JSON σε HTML για πράγματα όπως το λογότυπο του πρωταθλήματος ποδοσφαίρου, τα λογότυπα των ομάδων και τα στατιστικά.
Η στήλη «Τα τελευταία 5 παιχνίδια» δείχνει το αποτέλεσμα των πέντε τελευταίων αγώνων μιας ομάδας. Πρέπει να αλλάξω χειροκίνητα τα δεδομένα για αυτό, καθώς τα δεδομένα API είναι σε μορφή συμβολοσειράς. Η μετατροπή του σε πίνακα μπορεί να βοηθήσει στη χρήση του σε HTML ως ξεχωριστό στοιχείο για κάθε έναν από τους πέντε τελευταίους αγώνες μιας ομάδας.
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 );
  });
});
Όσον αφορά το στυλ, είσαι ελεύθερος να κάνεις ό,τι θέλεις! Αν θέλετε να δουλέψετε με κάτι, έχω ένα πλήρες σύνολο στυλ που μπορείτε να χρησιμοποιήσετε ως σημείο εκκίνησης.
Έκανα στυλ πράγματα στο SCSS από τότε @wordpress/create-block Το πακέτο το υποστηρίζει εκτός συσκευασίας. Τρέξιμο npm run start στη γραμμή εντολών για να παρακολουθήσετε τα αρχεία SCSS και να τα μεταγλωττίσετε σε CSS κατά την αποθήκευση. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε npm run build σε κάθε αποθήκευση για να μεταγλωττίσετε το SCSS και να δημιουργήσετε το υπόλοιπο πακέτο προσθηκών.


          Προβολή 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;
  }
}

Εδώ είναι το demo!
Ελέγξτε το – μόλις δημιουργήσαμε μια προσθήκη αποκλεισμού που ανακτά δεδομένα και τα αποδίδει στο μπροστινό μέρος ενός ιστότοπου WordPress.
Βρήκαμε ένα API, fetch()-επεξεργάστηκε δεδομένα από αυτό, τα αποθήκευσε στη βάση δεδομένων του WordPress, τα ανέλυσε και τα εφάρμοσε σε κάποια σήμανση HTML για εμφάνιση στο μπροστινό μέρος. Δεν είναι κακό για ένα μόνο σεμινάριο, σωστά;
Και πάλι, μπορούμε να κάνουμε το ίδιο πράγμα, ώστε οι κατατάξεις να αποδίδονται στον Επεξεργαστή μπλοκ εκτός από το μπροστινό μέρος του θέματος. Αλλά ελπίζουμε ότι η διατήρηση της εστίασης στο μπροστινό μέρος σας δείχνει πώς λειτουργεί η ανάκτηση δεδομένων σε ένα μπλοκ WordPress και πώς μπορούν να δομηθούν και να αποδοθούν τα δεδομένα για εμφάνιση.